Leaflet and Popup with D3
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Leaflet with D3 popups</title> | |
<meta charset="utf-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script> | |
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/> | |
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script> | |
<style> | |
.leaflet-popup-content { | |
width: auto !important; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="mapid" style="width: 960px; height: 500px;"></div> | |
<script> | |
var features = { "type":"featureCollection", features: [ | |
{ | |
"type":"Feature", | |
"properties":{data:[10,12,16,20,25,30],title:"Injuries Due to Swan Bite by Month"}, | |
"geometry":{ | |
"type":"Polygon", | |
"coordinates":[[[-0.1398611068725586,51.50203767899114],[-0.13994693756103516,51.50142324743368],[-0.13887405395507812,51.50051494213073],[-0.13063430786132812,51.501369818211096],[-0.1299905776977539,51.50144996202149],[-0.12973308563232422,51.50281238523426],[-0.12921810150146484,51.503400084633526],[-0.12926101684570312,51.504014489537944],[-0.12943267822265625,51.504575460694184],[-0.1295614242553711,51.50502957514356],[-0.13084888458251953,51.505724094371274],[-0.1398611068725586,51.50203767899114]]] | |
} | |
}, | |
{ | |
"type": "Feature", | |
"properties": {data:[100,112,130,200,210,190],title:"Some Statistic"}, | |
"geometry": { | |
"type": "Polygon", | |
"coordinates": [[[-0.14938831329345703,51.503132949482534],[-0.1494741439819336,51.502625388381375],[-0.14200687408447266,51.502358248689035],[-0.14127731323242188,51.502732243819835],[-0.1403331756591797,51.50281238523426],[-0.13956069946289062,51.50251853269236],[-0.13441085815429688,51.504869299972306],[-0.1347970962524414,51.50510971251776],[-0.13956069946289062,51.50329323076107],[-0.14265060424804688,51.506739141893],[-0.14664173126220703,51.50468231156],[-0.14732837677001953,51.504148054725356],[-0.14938831329345703,51.503132949482534]]] | |
} | |
} | |
]}; | |
var mymap = L.map('mapid').setView([51.5, -0.14], 14); | |
L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', { | |
maxZoom: 18, | |
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' | |
}).addTo(mymap); | |
L.geoJSON(features) | |
.addTo(mymap) | |
.bindPopup(chart); | |
var parties = [ | |
'Party 1', 'Party 2', 'Party 3', | |
'Party 4', 'Party 5', 'Last party' | |
]; | |
var colorParties = [ | |
'red', 'green', 'yellow', | |
'blue', 'orange', '#ff00ff' | |
]; | |
function chart(d) { | |
var feature = d.feature; | |
var data = feature.properties.data; | |
var width = 300; | |
var height = 80; | |
var margin = {left:20,right:15,top:40,bottom:60}; | |
var div = d3.create("div") | |
var svg = div.append("svg") | |
.attr("width", width+margin.left+margin.right) | |
.attr("height", height+margin.top+margin.bottom); | |
var g = svg.append("g") | |
.attr("transform","translate("+[margin.left,margin.top]+")"); | |
var y = d3.scaleLinear() | |
.domain([0, d3.max(data, function(d) { return d; }) ]) | |
.range([height,0]); | |
var yAxis = d3.axisLeft() | |
.ticks(4) | |
.scale(y); | |
g.append("g").call(yAxis); | |
var x = d3.scaleBand() | |
.domain(d3.range(6)) | |
.range([0,width]); | |
var xAxis = d3.axisBottom() | |
.scale(x) | |
.tickFormat(function(d) { return parties[d]; }); | |
g.append("g") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis) | |
.selectAll("text") | |
.attr("text-anchor","end") | |
.attr("transform","rotate(-90)translate(-12,-15)") | |
var rects = g.selectAll("rect") | |
.data(data) | |
.enter() | |
.append("rect") | |
.attr("y",height) | |
.attr("height",0) | |
.attr("width", x.bandwidth()-2 ) | |
.attr("x", function(d,i) { return x(i); }) | |
.attr("fill",function(d,i) { return colorParties[i]; }) | |
.transition() | |
.attr("height", function(d) { return height-y(d); }) | |
.attr("y", function(d) { return y(d); }) | |
.duration(1000); | |
var title = svg.append("text") | |
.style("font-size", "20px") | |
.text(feature.properties.title) | |
.attr("x", width/2 + margin.left) | |
.attr("y", 30) | |
.attr("text-anchor","middle"); | |
return div.node(); | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment