maptastik/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Walking through putting together the components of this map


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


## html-setup.html
<html>
  <head>

  </head>
  <body>
    <script>

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

## index.html
<html>
  <head>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
    <script src="http://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(
        'http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.jpg',
        {
          attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under CC BY 3.0. Data by <a href="http://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>
	<head>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
	<script src="http://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(
	'http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.jpg',
	{
	attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under CC BY 3.0. Data by <a href="http://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>