block by maptastik 5d3b0f8b8247f9da34f6

A Simple Leaflet Map

Full Screen

Walking through putting together the components of this map

  1. You’ll need to set up a simple web document (see html-setup.html below)
  2. Add leaflet css and js (3-4)
  3. Add the map’s container. In this case, it’s #mapdiv. (10)
  4. Add basic style for map the map container (5-7)
  5. Set the initial view of the map (24)
  6. Grab the base layer tiles from their source and them to the map (26-33)
  7. Include data. In this case we’re putting some geoJSON data straight into our HTML document. (13-22)
  8. Grab the geoJSON data from, give it a popup, and add the data to the map. (35-42)

index.html

<html>
  <head>
    <link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
    <script src="//cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
    <style type="text/css">
      #mapdiv { height: 100%; }
    </style>
  </head>
  <body>
    <div id="mapdiv"></div>
    
    <script>
      var geojsonFeature = {
        "type": "Feature",
        "properties": {
            "name": "Fifth Third Field"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-83.53848,41.64860]
        }
      };

      var mapvar = L.map('mapdiv').setView([41.64860, -83.53848],16);

      var tileLayer = L.tileLayer(
        '//{s}.tile.stamen.com/toner/{z}/{x}/{y}.jpg', 
        {
          attribution: 'Map tiles by <a href="//stamen.com">Stamen Design</a>, under CC BY 3.0. Data by <a href="//openstreetmap.org">OpenStreetMap</a>, under CC BY SA.'
        }
      );

      mapvar.addLayer(tileLayer);

      var geojsonLayer = L.geoJson(
        geojsonFeature, 
        {
          onEachFeature: function(feature, layer) { layer.bindPopup(feature.properties.name); }
        }
      );

      mapvar.addLayer(geojsonLayer);
    </script>

  </body>
</html>

html-setup.html

<html>
  <head>
    
  </head>
  <body>
    <script>
      
    </script>
  </body>
</html>