Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Leafletjs - GeoJSON layer not showing

I have created a jsfiddle of the code and I don't know why the marker is not showing.

var map = L.map('map', {
    center: [8.99665, 38.81573],
    zoom: 13,
}); 

var addis = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        id: 'addis',
        attribution: '&copy; <a  href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

var aa = {
    "type": "Feature",
    "properties": {
        "name": "Megenagna",
    },
    "geometry": {
        "type": "Point",
        "coordinates": [9.019720, 38.802933]
    }
};

new L.GeoJSON(aa).addTo(map);

Here is the jsfiddle url: http://jsfiddle.net/m2ju1m3v/

Please, can someone shine some light on this? Thanks!

like image 716
user3777916 Avatar asked Nov 25 '25 16:11

user3777916


2 Answers

Coordinates in GeoJSON are specified as an array of form [longitude, latitude], on the contrary of Leaflet where it is [latitude, longitude].

So you should simply change your coordinates to:

"coordinates": [38.802933, 9.019720]

Updated jsfiddle: http://jsfiddle.net/m2ju1m3v/2/

Note: please use Leaflet version 0.7.7 instead of 0.6.4.

like image 59
ghybs Avatar answered Nov 27 '25 05:11

ghybs


Actually, the marker is added, but it is located just south of Sardina (Italy). That is because of GeosJON coordinates order: first longitude, second latitude.

Why do you use GeoJSON to add just a label? You can use just marker method to achieve it:

new L.marker([8.99665, 38.81573]).addTo(map);
like image 24
Alexandr Lazarev Avatar answered Nov 27 '25 06:11

Alexandr Lazarev



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!