Old school D3 from simpler times

All examples By author By category About

d3noob

Full window Github gist

Leaflet.heat plugin for leaflet.js

An example of a map presented with leaflet.js and the Leaflet.heat plugin with a range of options.

This is provided in conjunction with the explanation of the code given in the book "Leaflet Tips and Tricks".

<!DOCTYPE html>
<html>
<head>
    <title>Simple Leaflet Map with Heatmap </title>
    <meta charset="utf-8" />
    <link 
        rel="stylesheet" 
        href="https://cdn.leafletjs.com/leaflet-0.7/leaflet.css"
    />
</head>
<body>
    <div id="map" style="width: 600px; height: 400px"></div>

<script
       src="https://cdn.leafletjs.com/leaflet-0.7/leaflet.js">
    </script>
    
    <script
       src="https://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js">
    </script>
		<script src="2013-earthquake.js"></script>
    <script>

var map = L.map('map').setView([-41.5546,174.146], 10);
        mapLink = 
            '<a href="https://openstreetmap.org">OpenStreetMap</a>';
        L.tileLayer(
            'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; ' + mapLink + ' Contributors',
            maxZoom: 18,
        }).addTo(map);
        
        var heat = L.heatLayer(quakePoints,{
            radius: 20,
            blur: 15, 
            maxZoom: 17,
        }).addTo(map);
				
    </script>
</body>
</html>