Skip to content

Instantly share code, notes, and snippets.

@maptastik

maptastik/README.md

Last active August 29, 2015 14:13
Show Gist options
  • Save maptastik/5d3b0f8b8247f9da34f6 to your computer and use it in GitHub Desktop.
Save maptastik/5d3b0f8b8247f9da34f6 to your computer and use it in GitHub Desktop.
Download ZIP
A Simple Leaflet Map
Raw
README.md

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)
Raw
html-setup.html
<html>
<head>
</head>
<body>
<script>
</script>
</body>
</html>
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment