2

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> 
6

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

var termini = ... ;
var metroStops = ...;

Then define the basemap, but don't add it to the map yet

var osmBase = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png');

var baseMaps = {
    "OSMBaseLayer": osmBase
     };

var overlayMaps = {
    "MetroStops": metroStops
     };

var map = L.map('map', {
   center: [41.901318, 12.496635],
   zoom: 13, 
   layers: [osmBase, metroStops]
});

// now you can add the basemap
osmBase.addTo(map);

The with the functions

function terminiFunction() ...

I'm not able to get the popups to work, but that is a secondary question

  • Thanks for your suggestion. Moving stuff around worked. I moved the map variable to the bottom of the script after declaring the tile variable and it works. – Salman Feb 8 '16 at 13:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.