Skip to content

Instantly share code, notes, and snippets.

@Hirosaji
Last active February 19, 2020 02:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Hirosaji/1598745b92e0ce21cd8223700e639089 to your computer and use it in GitHub Desktop.
Save Hirosaji/1598745b92e0ce21cd8223700e639089 to your computer and use it in GitHub Desktop.
turf × leaflet × d3v4 - Hex Grid on Map
# Turf.js × Leaflet.js × D3.js - Hex Grid on Map
license: mit
<!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>
<body>
<div id="map"></div>
<script>
//jsonデータの読み込み
d3.queue()
.defer(d3.json, 'kyotoWifiMap.geojson')
.await(function(error, points) {
//取得する統計情報(今回は合計値のみ)
var aggregations = [
{
aggregation: 'count',
inField: '',
outField: 'pt_count'
}
]
map = L.map('map').setView([35.0, 135.75], 12);
//地理院地図レイヤー追加
L.tileLayer(
'http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png',
{
attribution: "<a href='http://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>
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
#map {
width: 100%;
height: 500px;
}
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
}
.info h4 {
margin: 0 0 5px;
color: #777;
}
.legend {
line-height: 18px;
color: #555;
}
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment