Christchurch Earthquakes

This map shows earthquakes (magnitude 3.0 or greater) that occurred in the Canterbury region of New Zealand during the month of September, 2010.

The map is created using Leaflet. The earthquake layer is a custom Leaflet layer which uses d3js to generate a svg overlay.

Earthquake data sourced from GeoNet.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />

L.tileLayer('https://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
            attribution: '<a href="https://content.stamen.com/dotspotting_toner_cartography_available_for_download">Stamen Toner</a>, <a href="https://www.openstreetmap.org/">OpenStreetMap</a>, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
            maxZoom: 17
        }).addTo(map);

d3.json(container.dataset.source, function(collection) {
            L.pointsLayer(collection, {
                radius: function (d) {
                    return d.properties.magnitude * d.properties.magnitude;
                },
                applyStyle: circle_style
            }).addTo(map);
        });

circles.on('click', function (d, i) {
                L.DomEvent.stopPropagation(d3.event);

var t = '<h3><%- id %></h3>' +
                        '<ul>' +
                        '<li>Magnitude: <%- mag %></li>' +
                        '<li>Depth: <%- depth %>km</li>' +
                        '</ul>';

var data = {
                        id: d.id,
                        mag: d.properties.magnitude,
                        depth: d.properties.depth
                    };

L.popup()
                    .setLatLng([d.geometry.coordinates[1], d.geometry.coordinates[0]])
                    .setContent(_.template(t, data))
                    .openOn(map);

});
        }
    }());
    </script>
  </body>
</html>

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

Modified http://d3js.org/d3.v3.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.0.0-rc.3/lodash.underscore.min.js to a secure url

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

https://d3js.org/d3.v3.js

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.0.0-rc.3/lodash.underscore.min.js