[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","crs":{"type":"name","properties":{"name":"urn:ogc:def:crs:OGC:1.3:CRS84"}},"features":[{"type":"Feature","properties":{"JCODE":"12100","KEN":"千葉県","SICHO":null,"GUN":null,"SEIREI":"千葉市","SIKUCHOSON":"","CITY_ENG":"Chiba-shi, Chuo-ku","uid":"code12100"},"geometry":{"type":"MultiPolygon","coordinates":[[[[140.1328302384817,35.54521190166826],[140.115471543813,35.550611247727225],[140.0912190562705,35.56117331511747],[140.09680861806004,35.5664005704654],[140.12689909236053,35.56766973945933],[140.11370151591296,35.57050923619154],[140.08609529129672,35.5694551805864],[140.08159258874403,35.58829911344558],[140.10295713602858,35.587352614534844],[140.1141362596077,35.572509790707414],[140.10885722902867,35.599893725102085],[140.08879691282834,35.594838560465206],[140.0985786459601,35.60634712676618],[140.0829899791914,35.61389760671318],[140.07792832045976,35.61041276981457],[140.08392157282302,35.596774580964436],[140.06966819025962,35.61075695123665],[140.01970371848515,35.65242441464787],[140.03485764155909,35.66971953110766],[140.04175143443285,35.67785081720443],[140.0661591875806,35.67634502348281],[140.08159258874403,35.69471570688662],[140.09339277474422,35.69241399362642],[140.1127388691603,35.713882309829],[140.1236074615289,35.69903948600157],[140.13674293173437,35.69751218094106],[140.14680414295557,35.69176865346001],[140.13947560638704,35.68815474852811],[140.13649450676593,35.670536961985114],[140.14990945506088,35.66812769203052],[140.152300545382,35.674796207083425],[140.1559958667873,35.65412381041942],[140.1635417752032,35.645347184156236],[140.1736650926665,35.654059276402776],[140.19003008746154,35.64317453892933],[140.18506158809302,35.62912763464046],[140.19338382453526,35.62678289870251],[140.21331992825137,35.6545755485359],[140.21962371182514,35.651972676531386],[140.22185953654096,35.63717287538171],[140.2577569444784,35.62547070703081],[140.26480600295744,35.626847432719146],[140.26710393391537,35.60694944425484],[140.26129700027843,35.59963558903552],[140.2766993483208,35.58653518365739],[140.28707109075253,35.57291850614614],[140.28865479992623,35.56992843004177],[140.2943685742,35.560527974951064],[140.29194643075786,35.54826651178927],[140.28169890081034,35.550051952916334],[140.2812641571156,35.54146892870308],[140.29203959012102,35.53122953139604],[140.28865479992623,35.51933376099522],[140.2743703642418,35.50791124004975],[140.272165592647,35.49360619969433],[140.2621664876679,35.4980160241648],[140.25617323530466,35.494230028521855],[140.25424794179938,35.5017374857911],[140.232386544578,35.50378106298473],[140.22167321781464,35.518000057984636],[140.23213811960954,35.53340217662296],[140.22738699208844,35.540974167908836],[140.2092519693934,35.545448526395944],[140.17835411394555,35.53273532511766],[140.15816958526102,35.53574691256091],[140.142363546645,35.54798686438382],[140.1328302384817,35.54521190166826]]],[[[140.14680414295557,35.69176865346001],[140.14941260512404,35.69163958542673],[140.15186580168722,35.68985414429966],[140.14680414295557,35.69176865346001]]]]}}]} |
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