Old school D3 from simpler times

All examples By author By category About

kgryte

Full window Github gist

Leaflet.js + D3.js

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.

<!DOCTYPE html>
<html>

<head>
		
<link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
<style>

html, body {
    height: 100%;
    width: 100%;
}

</style>

<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.5/leaflet.min.js"></script>
<script src="https://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('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        'maxZoom': maxZoom, 
        'attribution': 'Map tiles by <a href="https://stamen.com">Stamen Design</a>, under <a href="https://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a>, under <a href="https://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>'
    }).addTo(map);

// Add a watercolor layer: https://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>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
        
<link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
<style>
​
html, body {
    height: 100%;
    width: 100%;
}
​
</style>
​
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.5/leaflet.min.js"></script>
<script src="https://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('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        'maxZoom': maxZoom, 
        'attribution': 'Map tiles by <a href="https://stamen.com">Stamen Design</a>, under <a href="https://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a>, under <a href="https://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>'
    }).addTo(map);
​
    // Add a watercolor layer: https://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>
​
    

Modified http://code.jquery.com/jquery.js to a secure url

Modified http://cdn.leafletjs.com/leaflet-0.5/leaflet.js to a secure url

Modified http://maps.stamen.com/js/tile.stamen.js?v1.2.1 to a secure url

https://code.jquery.com/jquery.js

https://cdn.leafletjs.com/leaflet-0.5/leaflet.js

https://maps.stamen.com/js/tile.stamen.js?v1.2.1