javascriptdictionaryleaflettiles

Leaflet map not loading

I am very new to leaflet so I am only just trying to grasp the basics. When following the tutorial online provided by Leaflet, I am struggling to get the map to load. If I use the coordinates provided I have no issues, however if I change the coordinates, nothing loads.

Can anyone help? Here's what I have:

<!DOCTYPE html>
  <html>
   <head>
    <title>Leaflet Web Map</title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
 <style>
  #map {
  width: 960px;
  height:500px;
  }
</style>
</head>


<body>
<div id="map"></div>


<script>
   var map = L.map('map',{
    center: [43.64701, -79.39425],
    zoom: 15
   });
   L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
   attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);
 </script>

this loads no bother but if I change the coordinates at all it doesn't load.

Solution

  • To change the map center you should change it in the map property: center: [43.00, -79.00]. 

    var map = L.map('map',{
  center: [43.00, -79.00],
  zoom: 15
});

    You should remember that first coordinate, latitude, takes number in range (-90, 90), while second one, longitude should be set in range (-180, 180). But anyway if you excess that second coordinate application will just calculate it's value as if it was in given ranges.

    Maybe you mixed something up and tried to change it here L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',..? This line stands for loading basemap tiles, not centering the map.