JavaScript/Google Maps - Draw a path using multiple lat,long - google-maps

I am tracking drivers by the end of the trip an array containing all the coordinates (lat, long) routes taken is generated. Using that array of lat, long coords I want to draw a path using Google Maps, more specifically its directionService. So far, I didn't succeed as the way I found is to use waypoints, but way points are by default limited to 15; however, I have much more than that.
I am looking for a way on how to draw that path using multiple coords, there exists several apps doing it, such as UBER, Lyft, etc...
Here is the array of coords:
[35.77204705542798,-5.815865197320899,35.77205120747819,-5.815754188240848,35.77197468036722,-5.815810097181759,35.77201185726312,-5.816182008817898,35.77188028308802,-5.816782866625928,35.77144809183601,-5.817054836919457,35.77130127311978,-5.817231221149015,35.77121654704168,-5.817323279458099,35.77197602552531,-5.818491135420929,35.77211527443405,-5.818831898394636,35.77220613582161,-5.819054426882189,35.77225761824354,-5.819182167400329,35.77557809840525,-5.819685065789988,35.77522352494348,-5.821346612263469,35.77815743782872,-5.822735160242799,35.77863231735067,-5.822959942846667,35.77915215012052,-5.823206036666789,35.77917987363854,-5.82321907562955,35.77913908191616,-5.825751400638378,35.77947725976961,-5.826044519616627,35.77923063670355,-5.82893344672563,35.77920722271806,-5.829544463218058,35.77924325929096,-5.82965650991142,35.77913169320556,-5.830906964998152,35.77917349450947,-5.830173084585434,35.78563643141488,-5.829373128632887,35.7859055726137,-5.829317961099034,35.78659089504106,-5.829249272155759,35.78704770052305,-5.829163948962961,35.78696081760869,-5.829114610331397,35.78687737614365,-5.829067226012621,35.78679073445069,-5.829018024365507,35.78661289235281,-5.828929232334034,35.78652027010703,-5.828884857172518,35.78643576729606,-5.828844387274908,35.78635159916791,-5.828804167105649,35.7862672257822,-5.828763857888811,35.7872100444153,-5.866787159467321]

IF you want to do is drawing simple line, see this link.
https://developers.google.com/maps/documentation/javascript/examples/polyline-simple
Unlike Direction service, there is no waypoints limitation.

Related

MapBox ESRI Data Layer

I have a mapbox, and want to display a layer of esri data onto it. The data I'm getting is being pulled in from this json file:
https://gis.usps.com/arcgis/rest/services/EDDM/selectZIP/GPServer/routes/execute?f=json&env%3AoutSR=102100&ZIP=93003&Rte_Box=R&UserName=EDDM
The data['results'][0]['value']['features'] array looks something like this:
[{'attributes': {'key':'value'}},{'geometry':{'paths':[[-13273770,4064608],[-13273762,4064613],....]}},
{'attributes': {'key':'value'}},{'geometry':{'paths':[[-13273770,4064608],[-13273762,4064613],....]}},
{'attributes': {'key':'value'}},{'geometry':{'paths':[[-13273770,4064608],[-13273762,4064613],....]}}}]
My question is about the geometry array. The data there is not Lat/Lng values (which I was hoping for), so I'm not sure how to add these to my map. I'm new to GIS, and the research I've done so far points to SpatialReferences. Any help is obviously much appreciated!
MapBox seems to only accept Latitude and Longitude coordinates (from what I can tell at least). The coordinates you have in your file come from ESRI 102100 (3857) projection system - the clue is near the beginning of your file:
"spatialReference":{"wkid":102100,"latestWkid":3857}..."
Normally, you'd have to convert this yourself, a good link for potential tips in the future is:
https://gis.stackexchange.com/questions/9442/arcgis-coordinate-system
On this occasion however, you can do something far easier. Simply change the "outSR" property of your URL from 102100 to 4326 (WGS84) and let it do it for you.
https://gis.usps.com/arcgis/rest/services/EDDM/selectZIP/GPServer/routes/execute?f=json&env%3AoutSR=4326&ZIP=93003&Rte_Box=R&UserName=EDDM

Draw line from start of road to end given it's latlng

I'd like to highlight all roads around a user in a certain radius.
I've worked out how to get the lat/lng of the roads and even their lengths, but I'm struggling to work out how to draw lines from the start of a road to the end of the same road given only the lat/lng of said road.
countryCode:"GB"
distance:195.450718073417
gid:101823433
isIn:"Portsmouth"
lat:50.79336325
length:58.7727976883358
lng:-1.0940351000000001
name:"Colpoy Street"
oneWay:false
openstreetmapId:12929127
streetType:"RESIDENTIAL"
http://services.gisgraphy.com/street/streetsearch?format=json&lat=50.7913547&lng=-1.0944082&radius=200&streettype=&distance=true
I've seen various solutions of "snapping" to roads, but this requires a start and end lat/lng, I only have the single lat/lng of the road location.
I'm not fussy about the use of mapping API, although I'd prefer to use Leaflet.js/OSM. Is this possible?
You will need a server component that replys your request with the geometry of your desired road. For prototyping, you might use the OverpassAPI and display a geoJSON answer of the desired object in a new Leaflet layer.
Just to clarify: You need to add a new vector layer, as you have to use a seperate datasource with the road network on top of your raster maps.

How add WMS layers with gwt-openlayers?

I'm trying to add WMS layer from remote ArcGIS server to my GWT web app. I'm using gwt-openlayers library.
My code:
MapOptions defaultMapOptions = new MapOptions();
mapWidget = new MapWidget("100%", "100%", defaultMapOptions);
Map map = mapWidget.getMap();
//gNormal = new GoogleV3("Google Normal", gOptions);
//map.addLayer(gNormal);
WMSParams wmsParams = new WMSParams();
wmsParams.setFormat("image/png");
wmsParams.setLayers("1");
wmsParams.setStyles("");
WMSOptions wmsLayerParams = new WMSOptions();
wmsLayerParams.setUntiled();
wmsLayerParams.setProjection("EPSG:3857"); // is it correct setting for WMS layer?
// wmsLayerParams.setProjection("EPSG:102113");
// wmsLayerParams.setProjection("EPSG:4326");
wmsLayerParams.setTransitionEffect(TransitionEffect.RESIZE);
String wmsUrl = "sampleserver1.arcgisonline.com/ArcGIS/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer";
arcGis = new WMS("ArcGis", wmsUrl, wmsParams);
map.addLayer(arcGis);
map.setBaseLayer(arcGis);
LonLat lonLat = new LonLat(-84.1,36.4); //USA
lonLat.transform("EPSG:4326", map.getProjection());
//System.out.println("map projection "+map.getProjection());
map.setCenter(lonLat, 3);
add(mapWidget);
I read many articles and SO questions but I still can't solve the problem. My problem is rendering pink tiles on the map instead of normal image. I copied image url as many stackoverflow answers suggested and saw the following:
http://localhost:8084/sampleserver1.arcgisonline.com/ArcGIS/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer?FORMAT=image%2Fpng&LAYERS=1&STYLES=&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&SRS=EPSG%3A4326&BBOX=-135,45,-90,90&WIDTH=256&HEIGHT=256
Without localhost:8084 prefix url works fine and shows me small piece of map.
Questions:
1) How get rid from localhost prefix in WMS url? In my code wmsUrl look like sampleserver1... so it's correct. It seems my application adds it's root path to remote url.
2) I read that WMS layers should have the following projection - "EPSG:3857". Is it true? As i mentioned above when I manually put in the browser correct url without "localhost" prefix I saw some image but I'm not sure it's correct. Probably image is shifted.
3) My final goal is adding 2 layers to the map - Google Map layer and WMS layer. Google Map uses "EPSG:900913" as default projection. Could somebody give common tips to place google layer and WMS layer in one map. May be there are some tricks, common mistakes related to projections an so on.
In the wmsUrl variable, you are missing the "http://", that may help.
Pink tiles generally mean that the data source was not found, so this is where you should look for the problem. Try checking the wms URL you are supplying in a wms viewer (e.g. ArcGIS Explorer ).
To your questions:
1)try just adding the http:// to your url, without the localhost
2)A WMS layer can have any projection, it depends solely on the projection in which it was published. Information about a specific WMS's projection should be found in metadata.
3)If the two layers have the same projection, you do not need to do anything. If you want to use two layers in different projections in one map, one of the layers must be reprojected. In pure OpenLayers, this is done by specifying the projection parameter for each layer and then specifying the displayProjection parameter for the map. The layers will automatically be reprojected. However, reprojection takes some time and it increases the load time VERY significantly. It is better to avoid reprojection on-the-fly, if possible. You can either reproject the source data of one of the layers and use reprojected data. Of course, this is not possible for a WMS, so you should consider using a different data source. If you want a background map, you can donwload OpenStreetMap data, reproject them to your desired projection, and then use them with the other WMS you want to use.
Hope at least some of this helps :-)

How to draw line connecting route between several points on Google Map?

I have real-time GPS data stored in a database and I'm currently pulling the lat/lon from this data and dynamically displaying them as markers on a Google Map.
What I'm trying to accomplish is to use these lat/lon points to draw a path connecting them. I looked at GDirections, but that seems like it's only used to connect two points together. I'm looking for something where I can send a bunch of GPS coordinates, from start to finish, and have it draw the path on the map connecting them.
Any guidance is greatly appreciated.
Apparently it was a lot easier than I thought.
The following will do the trick:
echo "var polyline = new GPolyline([new GLatLng($startlat, $startlon), new GLatLng($endlat, $endlon)], \"#ff0000\", 10);";
echo 'map.addOverlay(polyline);';

How do I implement a "find nearest" type functionality?

HI,
I was wondering if anyone had any ideas about how to implement functionality where given an array of locations ( for e.g. branches) it will list the nearest one or list all withing a 5 mile radius etc?
When you say "locations", what do you mean exactly? Street addresses? GPS coordinates?
If you have GPS coordinates (or can convert an address to coords), you can always calculate the Euclidean distance or the (more accurate) great-circle distance between two points. Caculate the distance between the current location and each potential destination, then sort the list by shortest distance.
You didn't mention if you were using the Google Maps API, but here's some additional info in case you are. You can store two points as objects of type GLatLng and use object1.distanceFrom(object2) to calculate this. You can also create a GLatLngBounds object representing a rectangular region on the map and use GLatLngBounds.containsLatLng(latlng:GLatLng) to see if a geographical point lies within that region.
Edit: What typically happens in the case you mention below is when a user enters a post code, the "current location" is taken to be the geographic center of that post code (you would probably have to get this info from the authority who assigns post codes in your area). If you are in the UK, this site has a free list of postcodes and their coordinates. Searching for a postal code in Google Maps will take you to the center of that postcode; if you need to build your own list of post codes and coordinates, you can probably create a script that will iterate through all valid post codes and use Google maps to look them up and turn them into GPS coordinates.
To turn an address into coordinates, you want to do what is called geocoding. Google Maps has an API for this, and there are other resources that can provide you this functionality. For some examples, try this page. What resource you use largely depends on where you are, as most of this information is localized. You didn't mention much about your project (platform, language, etc), but at the bottom of that page is a section called "Geocoding Helper Libraries" that may have the functionality you need rolled into a pre-built package. In particular the GeoKit library (Ruby language) has a handful of examples on the front page of their website, including several that look like they do exactly what you are wanting to do.
EDIT: I got the following code from the code generator at WebRPC:
/**
* Copyright WebRPC
* available under the GNU GENERAL PUBLIC LICENSE Version 2, June 1991
* http://www.gnu.org/licenses/gpl.txt
*/
public class Client
{
public static void Main(string[] args)
{
// make the call
XPathDocument doc = new XPathDocument(#"http://maps.google.com/maps/geo?q=New+York&output=xml&key=ABQIAAAAuXdMTY5VIU1FvkgOOP1dNBTsILMTMKRV-aJhd94IQkaJhVJ0YBS2qNSZGm8TaefqbXBT6lUXeMZ6tA");
// print the outputs
XPathNavigator nav = doc.CreateNavigator();
XPathNodeIterator coord = nav.Select( "/kml/Response/Placemark/Point/coordinates" );
while ( coord.MoveNext() )
System.Console.WriteLine( coord.Current );
XPathNodeIterator accuracy = nav.Select( "/kml/Response/Placemark/AddressDetails/#Accuracy" );
while ( accuracy.MoveNext() )
System.Console.WriteLine( accuracy.Current );
}
}
You should be able to modify this C# code to suit your needs. Specifically, in the call to new XPathDocument, change the part of the string that reads ?q=New+York to whatever address or postal code you need (for example, using ?q=1060+West+Addison%2C+Chicago%2C+IL will retrieve information for Wrigley Field in Chicago, or using ?q=LS11+0ES%2C+UK will get info for a postal code in Leeds). To format an address from a regular text string, change spaces to '+' and turn all other non-alphanumeric characters into their ASCII equivalent (such as '%2C' for a comma).
The next few lines retrieve the information from the server and parse it in various ways. Of interest here is the field /kml/Response/Placemark/Point/coordinates in the returned data. This string will contain your latitude and longitude coordinates for the location you specified above.
Now, this should give you enough information to create a C# function that is able to turn an address or post code into a pair of coordinates. The hard part is done, but two steps remain. First, you will want to use this to generate coordinates for each address in your database (store these in the database with the addresses for best results). Now, when a user enters an address, call your C# function again to generate a set of coordinates for her location. Now that you have coordinates for everything, you can find the distance between two coordinates by using one of the two distance-calculating functions I linked to at the top of the post. Run down your list of branches, calculate the distance from the user to each, and sort that list to find the branches with the shortest distance values.