turf × leaflet × d3v4 - Hex Grid on Map

▶︎ What's this?: Web mapping content visualizing the density of public free Wi-Fi spot in Kyoto

▶︎ Color mean: The number of Wi-Fi spots in the hex-grid

▶︎ Data Source: MLIT - Free public wireless LAN spot data

▶︎ Written by: Javascript (Turf.js, Leaflet.js, D3.js)

[Gist] https://gist.github.com/Hirosaji/1598745b92e0ce21cd8223700e639089

Built with blockbuilder.org

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta http-equiv="content-language" content="ja">
	<title>Kyoto Wifi Map</title>
	<link rel="stylesheet" href="./style.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/turf.js/2.0.0/turf.js"></script>
	<script src="https://d3js.org/d3.v4.min.js"></script>
</head>

map = L.map('map').setView([35.0, 135.75], 12);

//地理院地図レイヤー追加
            L.tileLayer(
              'https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png',
              {
                attribution: "<a href='https://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>",
                accessToken: 'pk.eyJ1IjoiaGlyb3NhamkiLCJhIjoiY2phYW1qM2lyMHRzcTMybzd1dzhlaG83NCJ9.2QcsoUxneas4TQFI3F-DyQ',
                maxZoom: 18,
              }
			).addTo(map);

//hexグリッド用のレイヤーを準備
            var hexLayer = L.geoJson().addTo(map);

//表示されている四隅の緯度経度を取得
			var b = map.getBounds();
            extend = [b.getSouthWest().lng , b.getSouthWest().lat , b.getNorthEast().lng, b.getNorthEast().lat];

//表示されている範囲をhexで埋める
            var grid = turf.hexGrid(extend, 1, 'kilometers');

//squareデータに統計情報を付加(今回はマーカーの数のみ)
			var grid = turf.aggregate(grid, points, aggregations);

//各セルのスタイルを設定
            grid.features.forEach(setStyle);

//hexグリッドを地図に追加
            hexLayer.addData(grid);

//統計情報に合わせてhexグリッドのスタイルを調整
            hexLayer.eachLayer(function(l) {
            	l.setStyle(l.feature.properties.withSum);
            });

//凡例の追加
            var legend = L.control({position: 'bottomright'});
            legend.onAdd = function (map) {

var div = L.DomUtil.create('div', 'info legend'),
                    grades = [0, 2, 4, 6, 8, 10],
                    labels = [];

for (var i = 0; i < grades.length; i++) {
                    div.innerHTML +=
                        '<i style="background:#FF0000; opacity:' + getOpacity(grades[i] + 1) + ';"></i> ' +
                        grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+');
                }
                return div;
            };
            legend.addTo(map);

});

//各セルのスタイルを指定
		function setStyle(cell){
				cell.properties.withSum= {};

var pt_count = cell.properties.pt_count;

var _withSum = {};
				_withSum.color = '#FF0000';
				_withSum.weight = 0;
				_withSum.fill = '#FF0000';
				_withSum.fillOpacity = 0;
				_withSum.fillOpacity = getOpacity(pt_count);
				_withSum.weight = getStrokeWeight(pt_count);
				cell.properties.withSum = _withSum;
		}
    
		//各セルのopacityを指定
		function getOpacity(value) {
			return value > 10 ? 0.9 :
				value > 8  ? 0.7 :
				value > 6  ? 0.5 :
				value > 4  ? 0.3 :
				value > 2  ? 0.1 :
							 0;
		}

//各セルのstrokeの太さを指定
		function getStrokeWeight(value) {
			return value > 10 ? 4 :
				value > 8  ? 3 :
				value > 6  ? 2 :
				value > 4  ? 1 :
				value > 2  ? 0 :
							 0;
		}
	</script>

</html>

Updated missing url https://cdnjs.cloudflare.com/ajax/libs/Turf.js/2.0.0/turf.js to https://cdnjs.cloudflare.com/ajax/libs/turf.js/2.0.0/turf.js

https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet.js

https://cdnjs.cloudflare.com/ajax/libs/Turf.js/2.0.0/turf.js

https://d3js.org/d3.v4.min.js