Leaflet - Convert lat/lng to standard projection

Question

How to convert coordinates from Leaflet coordinate system to coordinate system that Google uses (WGS-84?), if the data are in an external file (geojson)? In example with external geojson file, I've defined coordinates for Paris and Zagreb and I'm looking for solution to transform these coordinates to accurate location :)

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "id": "par",
            "properties": {
                "name": "Paris"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [
                    48.858093,
                    2.294694
                ]
            }
        },
        {
            "type": "Feature",
            "id": "zg",
            "properties": {
                "name": "Zagreb"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [
                    45.815399, 
                    15.966568
                ]
            }
        }
    ]
}

There is Proj4js JavaScript library, but I cannot find similar example for this case (with external file).

AlainIb · Answer 1 · 2015-09-02T13:00:43.630

0

Your GeoJSon can be used directly by Leaflet without converting the lat/lng.

I use google maps to get GPS lat/lng of some point and use them in Leaflet without conversion.

// Edit For me Leaflet and Google maps use the same projection.

//EDIT 2

Html :

   <div id="map" class="leaflet-container leaflet-fade-anim"></div>

JS :

  var map=L.map( "map" ,{
     center:[0,0],
     zoom:1, minZoom: 1 , maxZoom:18
  });
  var base_maps = [];
  var layer_OSM = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    noWrap: true,
    // continuousWorld: true,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    unloadInvisibleTiles: true
  });
  base_maps['OpenStreetMap'] = layer_OSM;
  map.addLayer(layer_OSM);



  var markersLayer = new L.FeatureGroup();

  var marker = L.marker([p_lat, p_lon]);

  markersLayer.addLayer(marker);
  map.addLayer(markersLayer);

edited Sep 02 '15 at 13:00

answered Sep 02 '15 at 11:40

AlainIb

4,544
4
38
64

If I understood well, you use combination of Google Maps and Leaflet? Are there any examples of using such a combination? – corry Sep 02 '15 at 12:25
No i use leaflet with lat/lng that i get from google maps without converting. check the uploaded image bellow – AlainIb Sep 02 '15 at 12:40
Hm, in my case it does not work :( Can you please tell me which version of Leaflet do you use? Thank you. – corry Sep 02 '15 at 12:42
I edit my answer with some code ( not tested because i copy if from my project ). What did you want to do ? the better is to edit your question on put some code and the error – AlainIb Sep 02 '15 at 13:01
If you take a look at the [plunker](http://plnkr.co/edit/8hdZ8WkmGLOcnYbn3ksS?p=preview) you can see the coordinates for the Zagreb and Paris are wrong. From your example there is no difference in projection between Google Maps (where coordinates have been taken) and Leaflet and now I'm don't know what I'm doing wrong. I'll try to show markers without angular directive and let you know if anything changed. Thank you. – corry Sep 02 '15 at 13:19
1

I found it. the leaflet directive inverse the lat / lon i don't know why. try this "coordinates": [ 2.294694,48.858093 ] "coordinates": [ 15.966568,45.815399 ] – AlainIb Sep 02 '15 at 13:33
1

this example is good for lat/lon http://tombatossals.github.io/angular-leaflet-directive/examples/0113-basic-geojson-simple-example.html – AlainIb Sep 02 '15 at 13:35
OMG, This is a bit ridiculous :D That's right, thank you very much. I'll try to find out why directive inverses coordinates. – corry Sep 02 '15 at 13:38

Leaflet - Convert lat/lng to standard projection

1 Answers1