Built with blockbuilder.org
<!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="//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: //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>