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);
}
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 © <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>