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.
xxxxxxxxxx
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
<![endif]-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.5/leaflet.min.js"></script>
<script src="https://d3js.org/d3.v3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.0.0-rc.3/lodash.underscore.min.js"></script>
<script type="text/javascript" src="colorbrewer.js"></script>
<script type="text/javascript" src="leaflet.points-layer.js"></script>
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100%; }
#map { height: 100%; }
.leaflet-popup-content ul { padding-left: 1.5em; }
</style>
</head>
<body>
<div id='map' data-source="quakes_christchurch_20100901-20101001_mag-gt3.json"></div>
<script type="text/javascript">
(function () {
var extent, scale,
classes = 9, scheme_id = "BuPu",
reverse = false;
scheme = colorbrewer[scheme_id][classes],
container = L.DomUtil.get('map'),
map = L.map(container).setView([-43.6, 172.3], 10);
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);
});
function circle_style(circles) {
if (!(extent && scale)) {
extent = d3.extent(circles.data(), function (d) { return d.properties.depth; });
scale = d3.scale.log()
.domain(reverse ? extent.reverse() : extent)
.range(d3.range(classes));
}
circles.attr('opacity', 0.4)
.attr('stroke', scheme[classes - 1])
.attr('stroke-width', 1)
.attr('fill', function (d) {
return scheme[(scale(d.properties.depth) * 10).toFixed()];
});
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