[Gist] https://gist.github.com/Hirosaji/bf521aff2c54f88d96d1424397c87916
Built with blockbuilder.org
Last active
February 19, 2020 21:20
-
-
Save Hirosaji/bf521aff2c54f88d96d1424397c87916 to your computer and use it in GitHub Desktop.
turf × leaflet × d3v4 - Square Grid on Map
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # Turf.js × Leaflet.js × D3.js - Square Grid on Map | |
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"value":1,"name":"千葉富士見町店"},"geometry":{"type":"Point","coordinates":[140.116418011,35.6108731292]}},{"type":"Feature","properties":{"value":1,"name":"１４号幸町店"},"geometry":{"type":"Point","coordinates":[140.096747945,35.6192899877]}},{"type":"Feature","properties":{"value":1,"name":"１４号幕張店"},"geometry":{"type":"Point","coordinates":[140.044457566,35.6624945597]}},{"type":"Feature","properties":{"value":1,"name":"１６号穴川店"},"geometry":{"type":"Point","coordinates":[140.117913805,35.649917397]}},{"type":"Feature","properties":{"value":1,"name":"５１号若松町店"},"geometry":{"type":"Point","coordinates":[140.164944316,35.6351644894]}},{"type":"Feature","properties":{"value":1,"name":"幕張テクノガーデン店"},"geometry":{"type":"Point","coordinates":[140.042328493,35.6508783076]}},{"type":"Feature","properties":{"value":1,"name":"イオン稲毛店"},"geometry":{"type":"Point","coordinates":[140.09537291,35.6367599335]}},{"type":"Feature","properties":{"value":1,"name":"千葉東寺山店"},"geometry":{"type":"Point","coordinates":[140.126518145,35.6276717936]}},{"type":"Feature","properties":{"value":1,"name":"千葉都町店"},"geometry":{"type":"Point","coordinates":[140.144489539,35.6106011388]}},{"type":"Feature","properties":{"value":1,"name":"イオン鎌取店"},"geometry":{"type":"Point","coordinates":[140.177680375,35.5617958421]}},{"type":"Feature","properties":{"value":1,"name":"茂原街道古市場店"},"geometry":{"type":"Point","coordinates":[140.14577146,35.5465722449]}},{"type":"Feature","properties":{"value":1,"name":"京成千葉中央店"},"geometry":{"type":"Point","coordinates":[140.118333233,35.6082554191]}},{"type":"Feature","properties":{"value":1,"name":"幕張イトーヨーカドー店"},"geometry":{"type":"Point","coordinates":[140.051198092,35.6559713075]}},{"type":"Feature","properties":{"value":1,"name":"おゆみ野店"},"geometry":{"type":"Point","coordinates":[140.170376119,35.5517617703]}},{"type":"Feature","properties":{"value":1,"name":"稲毛マリンピア店"},"geometry":{"type":"Point","coordinates":[140.073688964,35.6285674915]}},{"type":"Feature","properties":{"value":1,"name":"千葉寺リブレ京成店"},"geometry":{"type":"Point","coordinates":[140.132230299,35.5899145186]}},{"type":"Feature","properties":{"value":1,"name":"大網街道土気店"},"geometry":{"type":"Point","coordinates":[140.257889496,35.5329745699]}},{"type":"Feature","properties":{"value":1,"name":"都賀駅前店"},"geometry":{"type":"Point","coordinates":[140.149214241,35.6355415224]}},{"type":"Feature","properties":{"value":1,"name":"長沼ワンズモール店"},"geometry":{"type":"Point","coordinates":[140.118466265,35.6566149931]}},{"type":"Feature","properties":{"value":1,"name":"花見川店"},"geometry":{"type":"Point","coordinates":[140.089699075,35.6884423079]}},{"type":"Feature","properties":{"value":1,"name":"おゆみ野ミスターマックス店"},"geometry":{"type":"Point","coordinates":[140.161216189,35.5554063926]}},{"type":"Feature","properties":{"value":1,"name":"蘇我ホームズ店"},"geometry":{"type":"Point","coordinates":[140.123808697,35.5853061976]}},{"type":"Feature","properties":{"value":1,"name":"大網街道赤井店"},"geometry":{"type":"Point","coordinates":[140.168633352,35.5757787523]}},{"type":"Feature","properties":{"value":1,"name":"パサール幕張上り店"},"geometry":{"type":"Point","coordinates":[140.053879255,35.6696917825]}},{"type":"Feature","properties":{"value":1,"name":"１４号稲毛店"},"geometry":{"type":"Point","coordinates":[140.077735477,35.6376493583]}},{"type":"Feature","properties":{"value":1,"name":"イオンモール幕張新都心店"},"geometry":{"type":"Point","coordinates":[140.033175294,35.6529875464]}}]} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="ja"> | |
| <head> | |
| <meta http-equiv="content-language" content="ja"> | |
| <title>Chiba McDonald's Map</title> | |
| <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/5.1.5/turf.js"></script> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| #map { | |
| width: 100%; | |
| height: 500px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script> | |
| //jsonデータの読み込み | |
| d3.queue() | |
| .defer(d3.json, 'chibaMacMap.geojson') | |
| .defer(d3.json, 'chibaChoroplethMap.geojson') | |
| .await(function(error, points, geojson) { | |
| map = L.map('map').setView([35.6, 140.15], 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); | |
| // コロプレス図の配置 | |
| L.geoJson(geojson).addTo(map); | |
| //マーカークリック時にポップアップを表示 | |
| var onEachFeature = function(feature, layer) { | |
| layer.bindPopup(feature.properties.name); | |
| } | |
| //マーカーを地図に追加 | |
| var markerLayer = L.geoJson(points, { onEachFeature: onEachFeature }).addTo(map); | |
| //squareグリッド用のレイヤーを準備 | |
| var squareLayer = L.geoJson().addTo(map); | |
| //表示されている四隅の緯度経度を取得 | |
| var b = map.getBounds(); | |
| extend = [b.getSouthWest().lng , b.getSouthWest().lat , b.getNorthEast().lng, b.getNorthEast().lat]; | |
| //表示されている範囲をsquareで埋める | |
| var grid = turf.squareGrid(extend, 2, {units: 'kilometers'}); | |
| //squareデータに統計情報を付加(今回はマーカーの数のみ) | |
| var grid = turf.collect(grid, points, 'value', 'values'); | |
| //各セルのスタイルを設定 | |
| grid.features.forEach(setStyle); | |
| //squareグリッドを地図に追加 | |
| squareLayer.addData(grid); | |
| //統計情報に合わせてsquareグリッドのスタイルを調整 | |
| squareLayer.eachLayer(function(l) { | |
| l.setStyle(l.feature.properties.withSum); | |
| }); | |
| }); | |
| //各セルのスタイルを指定 | |
| function setStyle(cell){ | |
| cell.properties.withSum= {}; | |
| var pt_sum = cell.properties.values.length; | |
| var _withSum = {}; | |
| _withSum.color = '#FF0000'; | |
| _withSum.weight = 0; | |
| _withSum.fill = '#FF0000'; | |
| _withSum.fillOpacity = 0; | |
| if(pt_sum >= 1) { | |
| _withSum.fillOpacity = 0.1; | |
| } if(pt_sum >= 2) { | |
| _withSum.fillOpacity = 0.3; | |
| _withSum.weight = 1; | |
| } if(pt_sum >= 3) { | |
| _withSum.weight = 2; | |
| _withSum.fillOpacity = 0.6; | |
| } if(pt_sum >= 4) { | |
| _withSum.weight = 3; | |
| _withSum.fillOpacity = 0.9; | |
| } | |
| cell.properties.withSum = _withSum; | |
| } | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment