Skip to content

Instantly share code, notes, and snippets.

@abruzzi

abruzzi/index.html

Created May 12, 2014 12:51
Show Gist options
  • Save abruzzi/67a9d68afc63ab11fc09 to your computer and use it in GitHub Desktop.
Save abruzzi/67a9d68afc63ab11fc09 to your computer and use it in GitHub Desktop.
Download ZIP
render geojson in hexagon with leaflet
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>A Simple Map</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.hexbin.v0.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script src="js/colorbrewer.js"></script>
<script src="js/leaflet.hexbin-layer.js"></script>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
var map = L.map('map').setView([34.20, 108.86], 10);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// $.getJSON('/places-local-juntao.geojson', function(data) {
$.getJSON('/places-local-wanghuan.geojson', function(data) {
L.hexLayer(data, {
applyStyle: hex_style
}).addTo(map);
});
var max, scale,
classes = 9,
scheme = colorbrewer["Greens"][classes];
function hex_style(hexagons) {
// Maintain a density scale relative to initial zoom level.
if (!(max && scale)) {
max = d3.max(hexagons.data(), function (d) { return d.length; });
scale = d3.scale.quantize()
.domain([0, max])
.range(d3.range(classes));
}
hexagons
.attr("stroke", scheme[classes - 1])
.attr("fill", function (d) {
return scheme[scale(d.length)];
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment