Displaying a Map

Leaflet is "an open-source JavaScript library for mobile-friendly interactive maps". We used the Leaflet Quick Start Guide and Documentation to prepare our little example. As usual, we invite you to learn by making changes to the code and to customise it to suit your own interests and locations. We have included in the list box only four locations but you can easily find other latitudes and longitudes from DistancesFrom.com.

Example

The map no longer shows in this example and we do not intend to maintain it. You will need to obtain access data from Mapbox for your own working version, but we still include the broken code to show you how few lines are necessary to provide a useful map.

LeafletDemo.html

The Code

<!DOCTYPE html>
<html>
  <head>
     <title>Map Selector</title>
     <meta charset="utf-8">
     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
  </head>
  <body>
    <div><h2>Map Selector for Premiership Grounds</h1>
      <select id = "select" size = "4" title = "Location Selector" onchange = "setLocation()">
        <option>Anfield</option>  
        <option>Etihad Stadium</Option>
        <option>Old Trafford</option>
        <option>Stamford Bridge</option>
      </select>
      <p id="latlng" />       
    </div>     
    <div id="map-canvas" style="width: 600px; height: 400px"></div>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <script>
      var map;
      function setLocation()
      {
        var combo = document.getElementById("select");
        var strLocation = combo.options[combo.selectedIndex].text;
        switch(strLocation) 
        {           
          case "Anfield": map.setView([53.43, -2.95], 15);
          break;
          case "Etihad Stadium": map.setView([53.48, -2.2], 15);
          break;
          case "Old Trafford": map.setView([53.46, -2.29], 15);
          break;           
          case "Stamford Bridge": map.setView([51.48, -0.185], 15);
          break;           
        } 
        ShowLatLng();         
      }
      function ShowLatLng()
      {
        var para_latlng = document.getElementById("latlng");
        var centre = map.getCenter();
        para_latlng.innerHTML = "Latitude of centre of map: " + 
                                centre.lat.toString().substring(0, 6) + 
                                "&nbsp;&nbsp;&nbsp;&nbsp; Longitude of centre of map: " + 
                                centre.lng.toString().substring(0, 6);
      }
       
      map = L.map('map-canvas').setView([53.46, -2.29], 15);
      L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>  contributors, ' +
        '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="http://mapbox.com">Mapbox</a>',
        id: 'examples.map-i875mjb7'
        }).addTo(map);
      ShowLatLng();
      document.getElementById("select").selectedIndex = 2; 
      map.on('moveend', function(e) {
          ShowLatLng();    
        });
    </script>  
  </body>
</html>
Programming - a skill for life!

How to apply your knowledge of Pascal when learning JavaScript