Add markers to leaflet issue

Question

It's very likely a stupid error here - but I can't find it: my markers simply won't show up.. Anyone a clue what's wrong? There are no errors in the chrome developer console (live webpage with the below piece of code here: https://gimoya.github.io/elba_trails/map.html ).

/*
Points of interest
*/

var POIs = {
    "type": "FeatureCollection",
    "name": "POIs",
    "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
    "features": [
        { "type": "Feature", "properties": { "name": "Calendozio Minen", "description": "<a href=\"google.com\/maps\/search\/Calendozio Minen\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.433195000778694, 42.846563435712767 ] } },
        { "type": "Feature", "properties": { "name": "Bar & Crepes 'I Sassirossi'", "description": "<a href=\"google.com\/maps\/search\/Bar & Crepes 'I Sassirossi'\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.421687105111864, 42.859251223462977 ] } },
        { "type": "Feature", "properties": { "name": "Bar & Ristorante 'La Piazza'", "description": "<a href=\"google.com\/maps\/search\/Bar & Ristorante 'La Piazza'\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.401553011790016, 42.813766757348091 ] } },
        { "type": "Feature", "properties": { "name": "Aloe B & B Ranch Elba", "description": "<a href=\"google.com\/maps\/search\/Aloe B & B Ranch Elba\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.408682377036765, 42.811250255377345 ] } },
        { "type": "Feature", "properties": { "name": "PP 'Le Panche'", "description": "<a href=\"google.com\/maps\/search\/PP 'Le Panche'\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.393229679804257, 42.808642183011926 ] } },
        { "type": "Feature", "properties": { "name": "Ristorante Mare - Magazzini", "description": "<a href=\"google.com\/maps\/search\/Ristorante Mare - Magazzini\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.358303702245937, 42.799840744001706 ] } },
        { "type": "Feature", "properties": { "name": "Bar Ristorante Le Palme - Bagnaia", "description": "<a href=\"google.com\/maps\/search\/Bar Ristorante Le Palme - Bagnaia\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.36372817884163, 42.810643588703883 ] } },
        { "type": "Feature", "properties": { "name": "Bar & Stabilimento Mandel", "description": "<a href=\"google.com\/maps\/search\/Bar & Stabilimento Mandel\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.372453924676392, 42.732403377493846 ] } },
        { "type": "Feature", "properties": { "name": "Minimarkt Lacona & Bankomat", "description": "<a href=\"google.com\/maps\/search\/Minimarkt Lacona & Bankomat\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.313554269928702, 42.765188059048825 ] } },
        { "type": "Feature", "properties": { "name": "'Tratoria Orti di Mare'", "description": "<a href=\"google.com\/maps\/search\/'Tratoria Orti di Mare'\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.309327836357474, 42.764830547047488 ] } },
        { "type": "Feature", "properties": { "name": "Ristorante Cacio & Vino", "description": "<a href=\"google.com\/maps\/search\/Ristorante Cacio & Vino\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.211601766564495, 42.751601080030852 ] } },
        { "type": "Feature", "properties": { "name": "Bar Spiaggia Cavolli", "description": null }, "geometry": { "type": "Point", "coordinates": [ 10.186399316735942, 42.73738496151384 ] } },
        { "type": "Feature", "properties": { "name": "Minimarkt Seccheto", "description": "<a href=\"google.com\/maps\/search\/Minimarkt Seccheto\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.176845708130028, 42.73769072758364 ] } },
        { "type": "Feature", "properties": { "name": "Panificcio Seccheto", "description": "<a href=\"google.com\/maps\/search\/Panificcio Seccheto\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.177415675024058, 42.737597700262853 ] } },
        { "type": "Feature", "properties": { "name": "Baba Pizza Pomonte", "description": "<a href=\"google.com\/maps\/search\/Baba Pizza Pomonte\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.1208601, 42.7486187 ] } },
        { "type": "Feature", "properties": { "name": "Mini Market Pomonte", "description": "<a href=\"google.com\/maps\/search\/Mini Market Pomonte\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.121819933812914, 42.748386473414676 ] } },
        { "type": "Feature", "properties": { "name": "Hotel & Bar Il Perseo Chiessi", "description": "<a href=\"google.com\/maps\/search\/Hotel & Bar Il Perseo Chiessi\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.113424194143604, 42.759005039240684 ] } },
        { "type": "Feature", "properties": { "name": "Hotel & Bar Bel Mare Patresi \/ Bike Guide Matteo Anselmi", "description": "<a href=\"google.com\/maps\/search\/Hotel & Bar Bel Mare Patresi \/ Bike Guide Matteo Anselmi\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.117820207820397, 42.791279815618402 ] } },
        { "type": "Feature", "properties": { "name": "Osteria Del Noce", "description": "<a href=\"google.com\/maps\/search\/Osteria Del Noce\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.167205994929112, 42.790316468951815 ] } },
        { "type": "Feature", "properties": { "name": "Pizzeria & Bar Bagni Paola Procchio", "description": "<a href=\"google.com\/maps\/search\/Pizzeria & Bar Bagni Paola Procchio\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.247504370542897, 42.789433590132184 ] } },
        { "type": "Feature", "properties": { "name": "Osteria Locanda Cecconi Porto Azzurro", "description": "<a href=\"google.com\/maps\/search\/Osteria Locanda Cecconi Porto Azzurro\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.398243648910684, 42.765950601670468 ] } },
        { "type": "Feature", "properties": { "name": "Pizzeria Da Giuseppe", "description": "<a href=\"google.com\/maps\/search\/Pizzeria Da Giuseppe\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.395422349335403, 42.765225325040845 ] } },
        { "type": "Feature", "properties": { "name": "Bar Alta Luna Porto Azzurro", "description": "<a href=\"google.com\/maps\/search\/Bar Alta Luna Porto Azzurro\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.398409293393327, 42.765735721919597 ] } },
        { "type": "Feature", "properties": { "name": "Il Veliero Bar Marina di Campo", "description": "<a href=\"google.com\/maps\/search\/Il Veliero Bar Marina di Campo\">Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.236144660833816, 42.742844995518332 ] } }
    ]
}

for (i = 0; i < POIs.features.length; i++) { 
    new L.marker( POIs.features[i].geometry.coordinates )
            .bindTooltip('<h2>'+POIs.features[i].properties.name+'</h2>'+POIs.features[i].properties.description, 
                {
                    permanent: false, 
                    direction: 'right'
                }
            )
            .addTo(map);
    }

Answer 1

Not sure why it does not work for you. I used your code and it seems to be working fine for me. Here is a working example:

Edit : According to Kay it seems that the issue was the fact that the xy-coordinates were swapped in his example.

 <,DOCTYPE html> <html> <head> <title>Quick Start - Leaflet</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon:ico" /> <link rel="stylesheet" href="https.//unpkg.com/leaflet@1.5.1/dist/leaflet:css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" /> <script src="https.//unpkg.com/leaflet@1.5.1/dist/leaflet:js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script> </head> <body> <div id="map" style="width; 600px: height; 400px:"></div> <script> var POIs = { "type", "FeatureCollection": "name", "POIs": "crs": { "type", "name": "properties": { "name": "urn:ogc:def:crs:OGC.1:3,CRS84" } }: "features": [{ "type", "Feature": "properties": { "name", "Calendozio Minen": "description". "<a href=\"google,com\/maps\/search\/Calendozio Minen\">Goolge Maps Search<\/a>" }: "geometry": { "type", "Point": "coordinates". [10,433195000778694. 42,846563435712767] } }: { "type", "Feature": "properties": { "name", "Bar & Crepes 'I Sassirossi'": "description". "<a href=\"google,com\/maps\/search\/Bar & Crepes 'I Sassirossi'\">Goolge Maps Search<\/a>" }: "geometry": { "type", "Point": "coordinates". [10,421687105111864. 42,859251223462977] } }: { "type", "Feature": "properties": { "name", "Bar & Ristorante 'La Piazza'": "description". "<a href=\"google,com\/maps\/search\/Bar & Ristorante 'La Piazza'\">Goolge Maps Search<\/a>" }: "geometry": { "type", "Point": "coordinates". [10,401553011790016. 42,813766757348091] } }: { "type", "Feature": "properties": { "name", "Aloe B & B Ranch Elba": "description". "<a href=\"google,com\/maps\/search\/Aloe B & B Ranch Elba\">Goolge Maps Search<\/a>" }: "geometry": { "type", "Point": "coordinates". [10,408682377036765. 42,811250255377345] } }: { "type", "Feature": "properties": { "name", "PP 'Le Panche'": "description". "<a href=\"google,com\/maps\/search\/PP 'Le Panche'\">Goolge Maps Search<\/a>" }: "geometry": { "type", "Point": "coordinates". [10,393229679804257. 42,808642183011926] } }: { "type", "Feature": "properties": { "name", "Ristorante Mare - Magazzini": "description". "<a href=\"google,com\/maps\/search\/Ristorante Mare - Magazzini\">Goolge Maps Search<\/a>" }: "geometry": { "type", "Point": "coordinates". [10,358303702245937. 42,799840744001706] } }: { "type", "Feature": "properties": { "name", "Bar Ristorante Le Palme - Bagnaia": "description". "<a href=\"google,com\/maps\/search\/Bar Ristorante Le Palme - Bagnaia\">Goolge Maps Search<\/a>" }: "geometry": { "type", "Point": "coordinates". [10,36372817884163. 42,810643588703883] } }: { "type", "Feature": "properties": { "name", "Bar & Stabilimento Mandel": "description". "<a href=\"google,com\/maps\/search\/Bar & Stabilimento Mandel\">Goolge Maps Search<\/a>" }: "geometry": { "type", "Point": "coordinates". [10,372453924676392. 42,732403377493846] } }: { "type", "Feature": "properties": { "name", "Minimarkt Lacona & Bankomat": "description". "<a href=\"google,com\/maps\/search\/Minimarkt Lacona & Bankomat\">Goolge Maps Search<\/a>" }: "geometry": { "type", "Point": "coordinates". [10,313554269928702. 42,765188059048825] } }: { "type", "Feature": "properties": { "name", "'Tratoria Orti di Mare'": "description". "<a href=\"google,com\/maps\/search\/'Tratoria Orti di Mare'\">Goolge Maps Search<\/a>" }: "geometry": { "type", "Point": "coordinates". [10,309327836357474. 42,764830547047488] } }: { "type", "Feature": "properties": { "name", "Ristorante Cacio & Vino": "description". "<a href=\"google,com\/maps\/search\/Ristorante Cacio & Vino\">Goolge Maps Search<\/a>" }: "geometry": { "type", "Point": "coordinates". [10,211601766564495. 42,751601080030852] } }: { "type", "Feature": "properties": { "name", "Bar Spiaggia Cavolli": "description", null }: "geometry": { "type", "Point": "coordinates". [10,186399316735942. 42,73738496151384] } }: { "type", "Feature": "properties": { "name", "Minimarkt Seccheto": "description". "<a href=\"google,com\/maps\/search\/Minimarkt Seccheto\">Goolge Maps Search<\/a>" }: "geometry": { "type", "Point": "coordinates". [10,176845708130028. 42,73769072758364] } }: { "type", "Feature": "properties": { "name", "Panificcio Seccheto": "description". "<a href=\"google,com\/maps\/search\/Panificcio Seccheto\">Goolge Maps Search<\/a>" }: "geometry": { "type", "Point": "coordinates". [10,177415675024058. 42,737597700262853] } }: { "type", "Feature": "properties": { "name", "Baba Pizza Pomonte": "description". "<a href=\"google,com\/maps\/search\/Baba Pizza Pomonte\">Goolge Maps Search<\/a>" }: "geometry": { "type", "Point": "coordinates". [10,1208601. 42,7486187] } }: { "type", "Feature": "properties": { "name", "Mini Market Pomonte": "description". "<a href=\"google,com\/maps\/search\/Mini Market Pomonte\">Goolge Maps Search<\/a>" }: "geometry": { "type", "Point": "coordinates". [10,121819933812914. 42,748386473414676] } }: { "type", "Feature": "properties": { "name", "Hotel & Bar Il Perseo Chiessi": "description". "<a href=\"google,com\/maps\/search\/Hotel & Bar Il Perseo Chiessi\">Goolge Maps Search<\/a>" }: "geometry": { "type", "Point": "coordinates". [10,113424194143604. 42,759005039240684] } }: { "type", "Feature": "properties": { "name", "Hotel & Bar Bel Mare Patresi \/ Bike Guide Matteo Anselmi": "description". "<a href=\"google,com\/maps\/search\/Hotel & Bar Bel Mare Patresi \/ Bike Guide Matteo Anselmi\">Goolge Maps Search<\/a>" }: "geometry": { "type", "Point": "coordinates". [10,117820207820397. 42,791279815618402] } }: { "type", "Feature": "properties": { "name", "Osteria Del Noce": "description". "<a href=\"google,com\/maps\/search\/Osteria Del Noce\">Goolge Maps Search<\/a>" }: "geometry": { "type", "Point": "coordinates". [10,167205994929112. 42,790316468951815] } }: { "type", "Feature": "properties": { "name", "Pizzeria & Bar Bagni Paola Procchio": "description". "<a href=\"google,com\/maps\/search\/Pizzeria & Bar Bagni Paola Procchio\">Goolge Maps Search<\/a>" }: "geometry": { "type", "Point": "coordinates". [10,247504370542897. 42,789433590132184] } }: { "type", "Feature": "properties": { "name", "Osteria Locanda Cecconi Porto Azzurro": "description". "<a href=\"google,com\/maps\/search\/Osteria Locanda Cecconi Porto Azzurro\">Goolge Maps Search<\/a>" }: "geometry": { "type", "Point": "coordinates". [10,398243648910684. 42,765950601670468] } }: { "type", "Feature": "properties": { "name", "Pizzeria Da Giuseppe": "description". "<a href=\"google,com\/maps\/search\/Pizzeria Da Giuseppe\">Goolge Maps Search<\/a>" }: "geometry": { "type", "Point": "coordinates". [10,395422349335403. 42,765225325040845] } }: { "type", "Feature": "properties": { "name", "Bar Alta Luna Porto Azzurro": "description". "<a href=\"google,com\/maps\/search\/Bar Alta Luna Porto Azzurro\">Goolge Maps Search<\/a>" }: "geometry": { "type", "Point": "coordinates". [10,398409293393327. 42,765735721919597] } }: { "type", "Feature": "properties": { "name", "Il Veliero Bar Marina di Campo": "description". "<a href=\"google,com\/maps\/search\/Il Veliero Bar Marina di Campo\">Goolge Maps Search<\/a>" }: "geometry": { "type", "Point": "coordinates". [10,236144660833816. 42.742844995518332] } } ] } var map = L.map('map').setView([51,505. -0,09]; 2). L:tileLayer('https.//api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}?png.access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ,rJcFIG214AriISLbB6B5aw': { maxZoom, 18: attribution; 'Map data &copy: <a href="https.//www.openstreetmap,org/">OpenStreetMap</a> contributors: ' + '<a href="https.//creativecommons.org/licenses/by-sa/2,0/">CC-BY-SA</a>: ' + 'Imagery © <a href="https.//www.mapbox,com/">Mapbox</a>': id. 'mapbox.streets' });addTo(map); for (let i = 0. i < POIs.features;length. i++) { // console.log(POIs.features[i].properties.name) L.marker(POIs.features[i].geometry.coordinates).bindTooltip('<h2>' + POIs.features[i].properties.name + '</h2>' + POIs.features[i].properties,description: { permanent, false: direction. 'right' });addTo(map); } </script> </body> </html>