I try to make my first Leaflet webmap (I'm very new to JavaScript so please ignore the dirty & repetitive code). I want layer controls and read the Leaflet layer control example but somehow my map is just not visible in the end. The map div shows up but its blank inside (grey). First I thought that its blank because the base and the overlay layers are not yet created but even if I put the map creation variable at the bottom of my script, it doesn't work, only this time I can't even see the map div outline.
var map = L.map('map', {
center: [41.901318, 12.496635],
zoom: 13,
layers: [osmBase, metroStops]});
var osmBase = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
var termini = L.marker([41.901042, 12.500272]),
terminiPopup = termini.bindPopup("Termini (Main Station)"),
forum = L.marker([41.892574, 12.486913]),
forumPopup = forum.bindPopup("Roman Forum"),
palantine = L.marker([41.892592, 12.487466]),
palantinePopup = palantine.bindPopup("Palantine Hill"),
pantheon = L.marker([41.898539, 12.477216]),
pantheonPopup = pantheon.bindPopup("Pantheon"),
lateran = L.marker([41.885913, 12.505952]),
lateranPopup = lateran.bindPopup("Arcbasilica of St. John Lateran"),
peter = L.marker([41.902143, 12.454312]),
peterPopup = peter.bindPopup("St. Peter's Basilica"),
vatican = L.marker([41.906659, 12.453765]),
vaticanPopup = vatican.bindPopup("Vatican Museums"),
trevi = L.marker([41.901108, 12.483388]),
treviPopup = trevi.bindPopup("Trevi Mountain"),
navona = L.marker([41.899210, 12.473340]),
navonaPopup = navona.bindPopup("Piazza Navona"),
gianicolo = L.marker([41.891518, 12.461428]),
gianicoloPopup = gianicolo.bindPopup("Gianicolo Hill"),
spanish = L.marker([41.905932, 12.483083]),
spanishPopup = spanish.bindPopup("Spanish Steps"),
trastevere = L.marker([41.879897, 12.469241]),
trasteverePopup = trastevere.bindPopup("Trastevere Neighborhood"),
villaBorghese = L.marker([41.912793, 12.485364]),
villaBorghesePopup = villaBorghese.bindPopup("Villa Borghese"),
repubblica = L.marker([41.902204, 12.495852]),
repubblicaPopup = repubblica.bindPopup("Repubblica"),
barberini = L.marker([41.903625, 12.488975]),
barberiniPopup = barberini.bindPopup("Barberini"),
spagna = L.marker([41.906563, 12.483020]),
spagnaPopup = spagna.bindPopup("Spagna"),
flaminio = L.marker([41.912679, 12.476357]),
flaminioPopup = flaminio.bindPopup("Flaminio"),
lepanto = L.marker([41.911641, 12.466401]),
lepantoPopup = lepanto.bindPopup("Lepanto"),
ottaviano = L.marker([41.909310, 12.458279]),
ottavianoPopup = ottaviano.bindPopup("Ottaviano"),
cipro = L.marker([41.907697, 12.447486]),
ciproPopup = cipro.bindPopup("Cipro"),
valleAurelia = L.marker([41.902824, 12.441188]),
valleAureliaPopup = valleAurelia.bindPopup("Valle Aurelia"),
baldoDegli = L.marker([41.899151, 12.434332]),
baldoDegliPopup = baldoDegli.bindPopup("Baldo Degli Ubadli"),
cornelia = L.marker([41.900490, 12.426179]),
corneliaPopup = cornelia.bindPopup("Cornelia"),
battistini = L.marker([41.906274, 12.414894]),
battistiniPopup = battistini.bindPopup("Battistini"),
vittorioE = L.marker([41.894612, 12.504376]),
vittorioEPopup = vittorioE.bindPopup("Vittorio Emanuele"),
manzoni = L.marker([41.890391, 12.507165]),
manzoniPopup = manzoni.bindPopup("Manzoni"),
sanGiovanni = L.marker([41.885595, 12.509568]),
sanGiovanniPopup = sanGiovanni.bindPopup("San Giovanni"),
reDiRoma = L.marker([41.882140, 12.513881]),
reDiRomaPopup = reDiRoma.bindPopup("Re Di Roma"),
ponteLungo = L.marker([41.877762, 12.518988]),
ponteLungoPopup = ponteLungo.bindPopup("Ponte Lungo"),
furioCamillo = L.marker([41.874701, 12.522897]),
furioCamilloPopup = furioCamillo.bindPopup("Furio Camillo"),
colliAlbani = L.marker([41.869740, 12.529431]),
colliAlbaniPopup = colliAlbani.bindPopup("Colli Albani"),
arcoDiTravertino = L.marker([41.866023, 12.535953]),
arcoDiTravertinoPopup = arcoDiTravertino.bindPopup("Arco Di Travertino"),
portaFurba = L.marker([41.863662, 12.548038]),
portaFurbaPopup = portaFurba.bindPopup("Porta Furba Quadraro"),
numidio = L.marker([41.862064, 12.552630]),
numidioPopup = numidio.bindPopup("Numidio Quadrato"),
lucioSestio = L.marker([41.859730, 12.557147]),
lucioSestioPopup = lucioSestio.bindPopup("Lucio Sestio"),
subaugusta = L.marker([41.853721, 12.567494]),
subaugustaPopup = subaugusta.bindPopup("Subaugusta"),
cinecitta = L.marker([41.849443, 12.573848]),
cinecittaPopup = cinecitta.bindPopup("Cinecitta"),
anagnina = L.marker([41.842638, 12.586380]),
anagninaPopup = anagnina.bindPopup("Anagnina");
var metroStops = L.layerGroup([anagnina, cinecitta, subaugusta, lucioSestio,
numidio, portaFurba, arcoDiTravertino, colliAlbani, furioCamillo, ponteLungo,
reDiRoma, sanGiovanni, manzoni, vittorioE, battistini, cornelia, baldoDegli,
valleAurelia, cipro, ottaviano, lepanto, flaminio, spagna, barberini,
repubblica]);
function terminiFunction() {
map.panTo([41.901042, 12.500272])
terminiPopup.openPopup()
}
function forumFunction() {
map.panTo([41.892574, 12.486913])
forumPopup.openPopup()
}
function palantineFunction() {
map.panTo([41.892592, 12.487466])
palantinePopup.openPopup()
}
function pantheonFunction() {
map.panTo([41.898539, 12.477216])
pantheonPopup.openPopup()
}
function lateranFunction() {
map.panTo([41.886089, 12.505684])
lateranPopup.openPopup()
}
function treviFunction() {
map.panTo([41.901108, 12.483388])
treviPopup.openPopup()
}
function navonaFunction() {
map.panTo([41.899210, 12.473340])
navonaPopup.openPopup()
}
function peterFunction() {
map.panTo([41.902143, 12.454312])
peterPopup.openPopup()
}
function vaticanFunction() {
map.panTo([41.906659, 12.453765])
vaticanPopup.openPopup()
}
function gianicoloFunction() {
map.panTo([41.891518, 12.461428])
gianicoloPopup.openPopup()
}
function spanishFunction() {
map.panTo([41.905932, 12.483083])
spanishPopup.openPopup()
}
function trastevereFunction() {
map.panTo([41.879897, 12.469241])
trasteverePopup.openPopup()
}
function villaBorgheseFunction() {
map.panTo([41.914250, 12.492380])
villaBorghesePopup.openPopup()
}
var baseMaps = {
"OSMBaseLayer": osmBase
};
var overlayMaps = {
"MetroStops": metroStops
};
L.control.layers(baseMaps, overlayMaps).addTo(map);
and just for your information, here is the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Leaflet Test</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
</head>
<body>
<h1>My Roman Weekend</h1>
<ul id="list">
<li onclick="javascript:terminiFunction()">Termini</li>
<li onclick="javascript:forumFunction()">Roman Forum</li>
<li onclick="javascript:palantineFunction()">Palantine Hill</li>
<li onclick="javascript:pantheonFunction()">Pantheon</li>
<li onclick="javascript:lateranFunction()">Archbasilica of St. John Lateran</li>
<li onclick="javascript:treviFunction()">Trevi Fountain</li>
<li onclick="javascript:navonaFunction()">Piazza Navona</li>
<li onclick="javascript:peterFunction()">St. Peter's Basilica</li>
<li onclick="javascript:vaticanFunction()">Vatican Museums</li>
<li onclick="javascript:gianicoloFunction()">Gianicolo Hill</li>
<li onclick="javascript:spanishFunction()">Spanish Steps</li>
<li onclick="javascript:trastevereFunction()">Trastevere</li>
<li onclick="javascript:villaBorgheseFunction()">Villa Borghese</li>
</ul>
<div id="map"></div>
<style>
#map { height:650px; }
#list { float:left; width:120px; height:100px; line-height:200%; padding-left:15px; padding-right:10px; }
h1 { text-align:center; }
</style>
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script type="text/javascript" src="Test.js"></script>
</body>
</html>
Best Answer
The order is important. You can't add something to the map before it is defined.
Try in this sequence. First define the termini, metroStops
Then define the basemap, but don't add it to the map yet
The with the functions
I'm not able to get the popups to work, but that is a secondary question