Built with blockbuilder.org
Last active
June 24, 2018 20:55
-
-
Save EE2dev/75be7efe3faacedbeddfc384a0c4dabc to your computer and use it in GitHub Desktop.
leaflet and d3.legend
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> | |
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" | |
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" | |
crossorigin=""/> | |
<!-- Make sure you put this AFTER Leaflet's CSS --> | |
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" | |
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" | |
crossorigin=""></script> | |
<script src="http://d3js.org/d3.v5.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js"></script> | |
<style> | |
#map { height: 400px; } | |
aside, pre { display: none; } | |
</style> | |
</head> | |
<body> | |
<aside class="d1">group,lat,long,value,address | |
BK,48.157630,11.648014,30,loithringer | |
BK,48.141579,11.604729,1800,sdakjh | |
BK,48.143640,11.603463,200,dsfasfslk 3. | |
BK,48.143827,11.602895,500, sadkfjalsfj | |
BK,48.144099,11.602444,120, hansenstrasse 4A</aside> | |
<aside class="d2">group,lat,long,value | |
KK,48.157630,11.648014,30 | |
KK,48.141579,11.604729,1800 | |
KK,48.143640,11.603463,200</aside> | |
<aside class="d3">group,lat,long,value | |
KI,48.157630,11.648014,Sepp | |
KI,48.141579,11.604729,Schorsch | |
KI,48.143640,11.603463,Hans</aside> | |
<div id="map"></div> | |
<div id="legend"></div> | |
<script> | |
var mbAttr = 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' + | |
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + | |
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', | |
mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiZWUyZGV2IiwiYSI6ImNqaWdsMXJvdTE4azIzcXFscTB1Nmcwcm4ifQ.hECfwyQtM7RtkBtydKpc5g'; | |
var grayscale = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr}), | |
satellite = L.tileLayer(mbUrl, {id: 'mapbox.satellite', attribution: mbAttr}), | |
streets = L.tileLayer(mbUrl, {id: 'mapbox.streets', attribution: mbAttr}); | |
var layerGroups = {}; | |
// set scaleType to "scaleThreshold", | |
var data1 = readData("aside.d1", ",", ["lat","long","value"]); | |
data1.scaleType = "scaleThreshold"; | |
data1.scale = getScale(data1, data1.scaleType); | |
var group1 = L.layerGroup(); | |
addCircles(data1, group1); | |
addLegend(data1.scale, data1.scaleType, data1[0].group); | |
var data2 = readData("aside.d2", ",", ["lat","long","value"]); | |
data2.scaleType = "scaleQuantize"; | |
data2.scale = getScale(data2, data2.scaleType); | |
var group2 = L.layerGroup(); | |
addCircles(data2, group2) | |
addLegend(data2.scale, data2.scaleType, data2[0].group); | |
var data3 = readData("aside.d3", ",", ["lat","long"]); | |
data3.scaleType = "scaleOrdinal"; | |
data3.scale = getScale(data3, data3.scaleType); | |
var group3 = L.layerGroup(); | |
addCircles(data3, group3) | |
addLegend(data3.scale, data3.scaleType, data3[0].group); | |
var map = L.map('map', { | |
center: [48.1523107, 11.6231103], | |
zoom: 14, | |
layers: [grayscale, group1] | |
}); | |
var baseLayers = { | |
"Grayscale": grayscale, | |
"Streets": streets, | |
"Satellite": satellite | |
}; | |
var overlays = { | |
"BK" : group1, | |
"KK" : group2, | |
"KI" : group3 | |
}; | |
L.control.layers(baseLayers, overlays).addTo(map); | |
function addLegend(scale, scaleType, title) { | |
var svg = d3.select("#legend") | |
.append("svg") | |
.style("width", 300) | |
.style("height", 300); | |
svg.append("g") | |
.attr("class", "legend") | |
.attr("transform", "translate(20,20)"); | |
var legend = d3.legendColor() | |
.labelFormat(d3.format(".2f")) | |
.title(title); | |
if (scaleType === "scaleThreshold") { | |
legend = legend.labels(d3.legendHelpers.thresholdLabels); | |
} | |
legend.scale(scale); | |
svg.select("g.legend") | |
.call(legend); | |
} | |
function addCircles(data, group) { | |
var circle; | |
var colorScale = data.scale; | |
data.forEach(function(element) { | |
circle = L.circle([element.lat, element.long], { | |
color: "grey", | |
fillColor: colorScale(element.value), | |
fillOpacity: 1, | |
radius: 5 | |
}).addTo(group); | |
circle.bindPopup("Wert: " + element.value + "<br>Adresse: " + element.address); | |
}); | |
} | |
// see also: http://d3indepth.com/scales/ | |
function getScale(data, scaleType) { | |
var scale; | |
if (scaleType === "scaleThreshold") { | |
var min = d3.min(data, function(d) { return d.value; }); | |
var max = d3.max(data, function(d) { return d.value; }); | |
var d = (max-min)/7; | |
scale = d3.scaleThreshold() | |
.domain([min+1*d,min+2*d,min+3*d,min+4*d,min+5*d,min+6*d,min+7*d]) | |
.range(['#ffffe0','#ffd59b','#ffa474','#f47461','#db4551','#b81b34','#8b0000']); | |
} else if (scaleType === "scaleQuantize") { | |
scale = d3.scaleQuantize() | |
.domain(d3.extent(data, function(d) { return d.value; })) | |
.range(['#ffffe0','#ffd59b','#ffa474','#f47461','#db4551','#b81b34','#8b0000']); | |
} else if (scaleType === "scaleOrdinal") { | |
scale = d3.scaleOrdinal() | |
.domain(data.map(function(d) { return d.value; })) | |
.range(d3.schemePaired); | |
} | |
console.log(scale.domain); | |
return scale; | |
} | |
function readData(selector, delimiter, columnsNum) { | |
var psv = d3.dsvFormat(delimiter); | |
var _data = psv.parse(d3.select(selector).text()); | |
if (typeof columnsNum !== "undefined") { | |
_data.forEach( function (row) { | |
convertToNumber(row, columnsNum); | |
}); | |
} | |
console.log(_data); | |
return _data; | |
} | |
// helper for XHR | |
function convertToNumber(d, _columnsNum) { | |
for (var perm in d) { | |
if (_columnsNum.indexOf(perm) > -1) | |
if (Object.prototype.hasOwnProperty.call(d, perm)) { | |
d[perm] = +d[perm]; | |
} | |
} | |
return d; | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment