I'm developing rails app, which use google maps and paint car routes.
I use gmaps4rails gem for drawling line on a map,
So, I have a plan for car ( array of coordinates for car route by plan ) and report for car ( array of coordinates for car route which was actually drove ).
So, I have to arrays of coordinates - plan and report, example with random points :
#plan = [ [12.124, 12,34253], [11.124, 12,34253], ... [8.124, 5.344] ]
#report = [ [12.224, 12,64253], [10.124, 12,34253], ... [9.124, 6.345] ]
I know how draw one line on map, for example this is view with 'plan' line on map:
%div.container
%div.panel.panel-default.col-sm-9
%div.panel-body.row
#map.col-sm-12
:javascript
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
polyline = #{raw #plan.to_json}
handler.addPolyline(polyline); // and not addPolylines
handler.bounds.extend(polyline[0]);
handler.bounds.extend(polyline[ polyline.length - 1]);
handler.fitMapToBounds();
});
But now I need to draw 'plan' line and 'report' line on the same map.
How can I draw two lines with different colors on the same map?
Thanks kindly.
There is an error in your code, gmaps4rails expects an array of objects providing lat and lng properties. The transformation is quite easy though.
Concerning the options, you can pass them as a second argument. Source code is meant to be very clear.
Anyway, Here is a working plunkr with your data
Related
I have a map in geo json file, which I need to use for the highchart. How can I use the geojson map which I created in the highcharts instead of using given maps in highcharts.**
You need to use the Highcharts.geojson method to restructure a GeoJSON object in preparation to be read directly by the series.mapData option.
const states = Highcharts.geojson(geojson, 'map'),
rivers = Highcharts.geojson(geojson, 'mapline'),
cities = Highcharts.geojson(geojson, 'mappoint');
Live demo: https://jsfiddle.net/BlackLabel/gqebvL2t/
API Reference: https://api.highcharts.com/class-reference/Highcharts#.geojson
How can I get a polyline out of the Directions API JSON response?
Using the overview_polyline is not an option as it is only a smoothened version of the actual polyline.
I also tried getting the start and end location coordinates from the steps, however those will only give me a very inaccurate polyline, because they only contain a few coordiantes.
How can I get an accurate polyline out of the Directions response?
EDIT: Using #SaxonDruce answer, I can get accurate polylines however, they look like this:
Based on the sample response, you'll need something equivalent to:
response.routes[0].legs[0].steps[i].polyline.points
So, get the first route, then the first leg, then loop over the steps, then get the polyline, then get the points.
To add to saxon druce's answer, You can loop over all the steps of first leg and combine all the points to form a polyline.
List<LatLng> points = new ArrayList<>();
for (DirectionsStep step : legs[i].steps) {
points.addAll(step.polyline.decodePath());
}
EncodedPolyline legPolyline = new EncodedPolyline(points);
I'm using RoR with PostGIS to store locations data.
I'm trying to store an estimated location using circle (e.g. center point with radius).
I've tried something like that, but it doesn't work:
#location = Location.new(:place_id => place.id,
:circle => %{ST_Buffer(ST_MakePoint(#{latitude}, #{longitude})::geography, #{accuracy})})
I've also tried using RGeo and it's factory but not sure how to use it exactly.
Any help will be appreciated.
Thanks.
Edit 1:
I made some progress.
factory = RGeo::Cartesian.factory
center_point = factory.point(latitude, longitude)
circle = center_point.buffer(accuracy)
#location = Location.new(:place_id => place.id,
:circle => circle)
BUT - now it throws the following exception:
can't cast RGeo::Cartesian::Polygon Impl to string
Again, any help will be appreciated.
It looks like the column named circle in the locations table is a text column and not a geometry column. What does you schema look like?
You will probably want to set your SRID as well.
circle = RGeo::Cartesian.factory.point(0, 0).buffer(20)
#location = Location.new(:place_id => place.id, :circle => circle)
#locaiton.save
Another, and probably better option would be to just store the exact location and query for the location with a certain distance. You can use either the distance operator (http://postgis.net/docs/manual-2.1/geometry_distance_centroid.html) or the overlaps operator (http://postgis.net/docs/manual-2.1/geometry_overlaps.html).
I have tried to find this online but without much luck. Stackoverflow also does not seem to have a similar question-solution. This is the closest comparison I found:
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/2121de2422cf5053?pli=1
But this person's live page doesn't look like they made it very far (they only have Jan 2010 working on their map)...but same idea as what I want to do. I don't know how to implement the given solution, either, since I will have hundreds of polylines and do not want to create a global variable for each one of them...
What I would like to do is "cluster" somehow a placemark with a set of polylines starting / ending from that marker. I will then have a link in a sidebar / menu off-map to this placemark, and I would like that when the user hovers / mouseovers the link to the placemark, the polylines associated with the placemark change their opacity (i.e. highlight). I think my questions are:
How can I reference a polyline that has already been created? How do I figure out its handle?
Can I somehow change a polyline's properties using the fact that it "passes through" my marker? (i.e. aSel.onmouseover("all polylines touching this object have opacity = 1"))
Any suggestions on how to modify the gmaps4rails.base.js file's "create polyline" function to do this? https://github.com/apneadiving/Google-Maps-for-Rails/blob/master/app/assets/javascripts/gmaps4rails/gmaps4rails.base.js.coffee
I have the feeling then my problem would become "how do I know the handler for the link / placemark when creating polylines?" if I try this method...
I am currently using Rails and the gmaps4rails plugin to try this, but am open to other elegant suggestions / solutions.
Thanks for your help!
==========================================
This is the code for what I've tried so far, following apneadiving's suggestion below (I am not a Rails, javascript, Coffeescript, or Maps expert...):
In gmaps4rails.base.js, in the createSidebar function, added the second line:
aSel.onclick = #sidebar_element_handler(currentMap, marker_container.serviceObject, 'click')
aSel.onmouseover = #sidebar_highlight_paths(currentMap, marker_container.serviceObject)
Then defined:
sidebar_highlight_paths : (currentMap, marker) ->
return () ->
for polyline in Gmaps.map.polylines
points = polyline.serviceObject.latLngs.getArray()[0].getArray()
if (#sidebar_intersect(points, marker.position))
#polyline.setOptions({strokeOpacity: 1.0})
sidebar_intersect : (a, b) ->
[a, b] = [b, a] if a.length > b.length
value for value in a when value in b
The intersect function is based off of the response here:
Coffeescript: Array element matches another array
Now I get no change in opacity and this error in my Chrome javascript console whenever I mouseover a link:
Uncaught TypeError: Object javascript:void(0); has no method 'sidebar_intersect'
Gmaps4Rails.Gmaps4Rails.sidebar_highlight_pathsgmaps4rails.base.js:434
Resource interpreted as Image but transferred with MIME type text/html: "http://maps.googleapis.com/maps/gen_204?ev=api_viewport&cad=src:apiv3,ts:1336420051554".
Line 434 (for the no method error above) is:
if #map_options.auto_adjust
#from markers
#extendBoundsWithMarkers()
->line 432<-
#from polylines:
for polyline in #polylines ->line 434<-
polyline_points = polyline.serviceObject.latLngs.getArray()[0].getArray()
for point in polyline_points
#boundsObject.extend point
Which has nothing to do with my new function, sidebar_intersect, so I am confused! Also, I am ignoring the Resource Interpreted error right now since it seems much more common...
Thanks for your tips, aneadiving, and I appreciate anyone else who can shed some light on my new errors...
=============================
Okay, figured this out--thanks apneadiving for your tips! For future reference (if this actually helps anyone), I basically added these two lines (onmouseover and onmouseout) to createSidebar in gmaps4rails.base.js.coffee:
aSel.onclick = #sidebar_element_handler(currentMap, marker_container.serviceObject, 'click')
aSel.onmouseover = #sidebar_highlight_paths(currentMap, marker_container.serviceObject)
aSel.onmouseout = #sidebar_reset_paths(currentMap, marker_container.serviceObject)
li.appendChild(aSel)
ul.appendChild(li)
Then:
sidebar_highlight_paths : (currentMap, marker) ->
return () ->
for polyline in Gmaps.map.polylines
b = polyline.serviceObject.latLngs.getArray()[0].getArray()
for latlng in b
if (marker.position.equals(latlng))
polyline.serviceObject.setOptions({strokeOpacity: 1})
sidebar_reset_paths : (currentMap, marker) ->
return () ->
for polyline in Gmaps.map.polylines
polyline.serviceObject.setOptions({strokeOpacity: 0.1}
Okay, figured this out--thanks apneadiving for your tips! For future reference (if this actually helps anyone), I basically added these two lines (onmouseover and onmouseout) to createSidebar in gmaps4rails.base.js.coffee:
aSel.onclick = #sidebar_element_handler(currentMap,marker_container.serviceObject, 'click')
aSel.onmouseover = #sidebar_highlight_paths(currentMap,marker_container.serviceObject)
aSel.onmouseout = #sidebar_reset_paths(currentMap,marker_container.serviceObject)
li.appendChild(aSel)
ul.appendChild(li)
Then:
sidebar_highlight_paths : (currentMap, marker) ->
return () ->
for polyline in Gmaps.map.polylines
b = polyline.serviceObject.latLngs.getArray()[0].getArray()
for latlng in b
if (marker.position.equals(latlng))
polyline.serviceObject.setOptions({strokeOpacity: 1})
sidebar_reset_paths : (currentMap, marker) ->
return () ->
for polyline in Gmaps.map.polylines
polyline.serviceObject.setOptions({strokeOpacity: 0.1}
i have pairs of coorinates:
GpsLatitude GpsLongitude
32.012919 34.547592,
32.012798 34.54763,
32.012827 34.547584,
32.012814 34.547608,
32.01273 34.54765,
32.012868 34.547631,
32.012834 34.547577,
and i have show it on google map in delphi application.
i find an example here a delphi code example
and it works. But when i trying to use it with my coordinates it point
to wrong location, but when i open it in browser, like this
"32 01.2834,34 54.7577"
it work good, unfortunatly it does not work in delphi.
what can be wrong??
if you look the GotoLatLng javascript function used in the article,
function GotoLatLng(Lat, Lang) {
var latlng = new google.maps.LatLng(Lat,Lang);
map.setCenter(latlng);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:Lat+","+Lang
});
}
You can see a call to the google.maps.LatLng() function, and this needs to be given two numbers in decimal format. you are using a value like this 32 01.2919, 34 54.7592 which is in degrees and minutes format, so that format must be converted to decimal before be passed to the javascript function. Now the reason because that value works in the google maps page is because that page internally resolves the string passed as parameter and returns a colletion of markers as result.