Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Leaflet swap the coordinates when use geoJson

I have little Leaflet application where the app get geoJson objects from server, and display it, specially LineString. The JSON parser that i use on server side works properly. And the client side script was ok too.

But some reasons I would like to draw arrow on the routes, and I can't figure out how to do it when using L.geoJson().

Code with L.geoJson():

   getJsonFrom(routeQueryURL, params, function(data) {
     var a = L.geoJson(data, {
       onEachFeature: bindRouteDirection,
     }).addTo(map);
   });

Because I don't want to change anything on server side, I tried this:

getJsonFrom(routeQueryURL, param, function(data) {
    $.each(data, function(index, feature) {
      var polyline = new L.Polyline(feature.geometry.coordinates, {
        color: feature.properties.color,
        opacity: 0.8
      }).addTo(routeMapLayer);

      var decorator = L.polylineDecorator(polyline, {
        patterns: [{
          offset: 25,
          repeat: 50,
          symbol: L.Symbol.arrowHead({
            pixelSize: 15,
            pathOptions: {
              stroke: true,
              color: feature.properties.color,
              fillOpacity: 0.8,
              polygon: false,
              weight: 3
            }
          })
        }]
      }).addTo(routeMapLayer);

      map.addLayer(routeMapLayer);
    });
  });

So i access the array of coordinates from the geoJson object, and some other data, and draw the polyline directly on to map.The problem is that it's put my route into the middle of middle east instead of Hungary, so it's actually swap the coordinates. Why does L.Polyline handle the different form L.geoJson()?

like image 475
Syngularity Avatar asked Mar 14 '16 08:03

Syngularity


1 Answers

Use L.GeoJSON.coordsToLatLng() and read why sometimes coordinates are lat-lng and sometimes lng-lat.

like image 123
IvanSanchez Avatar answered Oct 06 '22 01:10

IvanSanchez