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": "Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.433195000778694, 42.846563435712767 ] } },
        { "type": "Feature", "properties": { "name": "Bar & Crepes 'I Sassirossi'", "description": "Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.421687105111864, 42.859251223462977 ] } },
        { "type": "Feature", "properties": { "name": "Bar & Ristorante 'La Piazza'", "description": "Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.401553011790016, 42.813766757348091 ] } },
        { "type": "Feature", "properties": { "name": "Aloe B & B Ranch Elba", "description": "Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.408682377036765, 42.811250255377345 ] } },
        { "type": "Feature", "properties": { "name": "PP 'Le Panche'", "description": "Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.393229679804257, 42.808642183011926 ] } },
        { "type": "Feature", "properties": { "name": "Ristorante Mare - Magazzini", "description": "Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.358303702245937, 42.799840744001706 ] } },
        { "type": "Feature", "properties": { "name": "Bar Ristorante Le Palme - Bagnaia", "description": "Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.36372817884163, 42.810643588703883 ] } },
        { "type": "Feature", "properties": { "name": "Bar & Stabilimento Mandel", "description": "Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.372453924676392, 42.732403377493846 ] } },
        { "type": "Feature", "properties": { "name": "Minimarkt Lacona & Bankomat", "description": "Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.313554269928702, 42.765188059048825 ] } },
        { "type": "Feature", "properties": { "name": "'Tratoria Orti di Mare'", "description": "Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.309327836357474, 42.764830547047488 ] } },
        { "type": "Feature", "properties": { "name": "Ristorante Cacio & Vino", "description": "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": "Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.176845708130028, 42.73769072758364 ] } },
        { "type": "Feature", "properties": { "name": "Panificcio Seccheto", "description": "Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.177415675024058, 42.737597700262853 ] } },
        { "type": "Feature", "properties": { "name": "Baba Pizza Pomonte", "description": "Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.1208601, 42.7486187 ] } },
        { "type": "Feature", "properties": { "name": "Mini Market Pomonte", "description": "Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.121819933812914, 42.748386473414676 ] } },
        { "type": "Feature", "properties": { "name": "Hotel & Bar Il Perseo Chiessi", "description": "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": "Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.117820207820397, 42.791279815618402 ] } },
        { "type": "Feature", "properties": { "name": "Osteria Del Noce", "description": "Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.167205994929112, 42.790316468951815 ] } },
        { "type": "Feature", "properties": { "name": "Pizzeria & Bar Bagni Paola Procchio", "description": "Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.247504370542897, 42.789433590132184 ] } },
        { "type": "Feature", "properties": { "name": "Osteria Locanda Cecconi Porto Azzurro", "description": "Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.398243648910684, 42.765950601670468 ] } },
        { "type": "Feature", "properties": { "name": "Pizzeria Da Giuseppe", "description": "Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.395422349335403, 42.765225325040845 ] } },
        { "type": "Feature", "properties": { "name": "Bar Alta Luna Porto Azzurro", "description": "Goolge Maps Search<\/a>" }, "geometry": { "type": "Point", "coordinates": [ 10.398409293393327, 42.765735721919597 ] } },
        { "type": "Feature", "properties": { "name": "Il Veliero Bar Marina di Campo", "description": "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(''+POIs.features[i].properties.name+''+POIs.features[i].properties.description, 
                {
                    permanent: false, 
                    direction: 'right'
                }
            )
            .addTo(map);
    }

kboul · Accepted Answer

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.






  Quick Start - Leaflet

Add markers to leaflet issue

Answers (1)

Related Questions