Skip to content

Instantly share code, notes, and snippets.

@kgryte

kgryte/README.md

Last active December 17, 2015 18:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kgryte/5653562 to your computer and use it in GitHub Desktop.
Save kgryte/5653562 to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet.js + D3.js
Raw
README.md

Leaflet Visualization: Places Traveled

This gist was created to demonstrate map generation with Leaflet.js, and all files are associated with my blog post under the same name.

We access map tiles through Open Street Maps (OSM) and then plot location data formatted as GeoJSON.

Display the source blob
Display the rendered blob
Raw
data.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
<style>
html, body {
height: 100%;
width: 100%;
}
</style>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
<script src="http://maps.stamen.com/js/tile.stamen.js?v1.2.1"></script>
</head>
<body id="map">
<script>
// Define initial parameters:
// location over which we will initially center the map
var loc = {'lat': 40.754531, 'lon': -73.993113},
// extent to which we are initially zoommed
zoomLevel = 3,
// the maximum level of detail a user is allowed to see
maxZoom = 15,
// id of the element in which we will place the map
mapID = 'map';
// Create the map object, setting the initial view:
var map = L.map('map').setView(
[loc.lat, loc.lon],
zoomLevel
);
// Instantiate a tile layer, directing Leaflet to use the Open Street Map (OSM) API to access map tiles:
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
'maxZoom': maxZoom,
'attribution': 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>'
}).addTo(map);
// Add a watercolor layer: http://maps.stamen.com/#terrain/12/37.7706/-122.3782
// Comment this line out if you do not want a watercolor layer and remove the attribution above to Stamen Design.
var watercolor = new L.StamenTileLayer("watercolor")
.addTo(map);
// Load geoJSON data with jQuery:
$.getJSON('data.json', function(data) {
// Use Leaflet to parse the data and display it as a layer on the map:
L.geoJson(data, {
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.name);
}
}).addTo(map);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment