Built with blockbuilder.org
Last active
November 23, 2017 05:21
-
-
Save shimizu/c0fed43b3e35e4613116e699fb6c8bb4 to your computer and use it in GitHub Desktop.
D3 v4 + leaflet v1 - Clickable
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
| 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"/> | |
| <title></title> | |
| <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" /> | |
| <style> | |
| html, body { | |
| padding: 0px; | |
| margin: 0px; | |
| } | |
| html, body, #map { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .tick line { | |
| stroke-dasharray: 2 2 ; | |
| stroke: #ccc; | |
| } | |
| /* svg 以下のpath要素でイベントを取得できるようにする */ | |
| .leaflet-overlay-pane svg path{ | |
| pointer-events: auto; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script> | |
| <script> | |
| !(function(){ | |
| "use strict" | |
| var map //leaflet obj | |
| d3.json("japan.geojson",main) | |
| function main(data) { | |
| addLmaps() | |
| drawFeatures(data) | |
| } | |
| function addLmaps() { | |
| //Leaflet初期設定 | |
| map = L.map('map').setView([39.702053 , 141.15448379999998], 5); | |
| L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { | |
| attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors', | |
| }).addTo(map); | |
| //Leafletに用意されたsvgを使う | |
| L.svg({clickable:true}).addTo(map); | |
| } | |
| //位置→座標変換 | |
| function projectPoint(x, y) { | |
| var point = map.latLngToLayerPoint(new L.LatLng(y, x)); | |
| this.stream.point(point.x, point.y); | |
| } | |
| function drawFeatures(data) { | |
| var svg = d3.select("#map").select("svg") | |
| .attr("pointer-events", "auto") | |
| var g = svg.select("g") | |
| var transform = d3.geoTransform({point: projectPoint}); | |
| var path = d3.geoPath().projection(transform) | |
| var featureElement = g.selectAll("path") | |
| .data(data.features) | |
| .enter() | |
| .append("path") | |
| .attr("stroke", "gray") | |
| .attr("fill", "green") | |
| .attr("fill-opacity", 0.6) | |
| .on("click", function(d){ | |
| d3.select(this).attr("fill", "red") | |
| }) | |
| map.on("moveend", update); | |
| update(); | |
| //pathのd属性を更新 | |
| function update() { | |
| featureElement.attr("d", path); | |
| } | |
| } | |
| }()); | |
| </script> | |
| </body> | |
| </html> |
Nevermind - I've worked it out. Ta!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi! I've been using this template for a map I'm putting together of Australia - thanks so much! I've got it working and now trying to introduce data from a csv file to fill the areas based on a data value. Where would you bring in the data? I'm getting confused by the main and drawFeatures functions and none of my combos seem to work. Any hints? Cheers!