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

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);';

Related

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

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.

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 :-)

GPS and Compass reading

I'm trying to do the following: Take a GPS reading (lat/long) and a compass reading and place a second point on a map 100 meters from the GPS reading in the compass direction.
(using Google Maps)
How could this be accomplished? Ideas? :)
When you say in the compass direction, do you mean north/south? It is fairly easy to plot a circle that is 100m in diameter on a map. To draw a line in, point 100m from the current location in a direction is simple trigonometry.
you location see import com.google.android.maps.MyLocationOverlay;
MyLocationOverlay myLoc = new MyLocationOverlay(this, mapView);
but you can create yourself location ... using services ....
i hope it can help you