//////////////////////////////////////////////////////////////////
// Usage:
//
// data: csv file with
// long, lat for position
// one numerical or categorical attribute to be visualized
// + (optional) one attribute calles "address" to be shown in tooltip
//
// 1. set class of <aside> element above to match the name of the data
// 2. insert data into aside element
// 3. specify the following dp (data parameters)
// 4. initialize map center with [lat, long]
//
// options for scales:
// "scaleThreshold", "scaleOrdinal", "scaleOrdinal" or "scaleQuantile"
//////////////////////////////////////////////////////////////////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; }
div#allLegends { position: relative; }
div.legend { position: relative; width: 300px; float: left; }
</style>
</head>
<body>
<!-- 1. + 2. insert aside block + data -->
<aside class="myDataset">
group,lat,long,index,address
BK,48.157630,11.648014,1800,lothringer
BK,48.141579,11.604729,100,sdakjh
BK,48.143640,11.603463,1800,dsfasfslk 3.
BK,48.157630,11.648014,1800,loithringer
BK,48.141579,11.604729,100,sdakjh
BK,48.143640,11.603463,1800,dsfasfslk 3.
BK,48.143827,11.602895,500, sadkfjalsfj
BK,48.143640,11.603463,,dsfasfslk 3.
BK,48.143827,11.602895,, 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="allLegends"></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 = {};
var dataParameters = [];
var dp = {};
//////////////////////////////////////////////////////////////////
// Usage:
//
// data: csv file with
// long, lat for position
// one numerical or categorical attribute to be visualized
// + (optional) one attribute calles "address" to be shown in tooltip
//
// 1. set class of aside element above to match the name of the data
// 2. insert data into aside element
// 3. specify the following dp (data parameters)
// 4. initialize map center with [lat, long]
//
// options for scales:
// "scaleThreshold", "scaleOrdinal", "scaleOrdinal" or "scaleQuantile"
//////////////////////////////////////////////////////////////////
// ------> for more data sets, copy FROM here
// 3. dataset 1
// specify start
dp = {
selector: "aside.myDataset",
delimiter: ",",
numColumns: ["lat","long","index"],
valueColumn: "index",
scaleType: "scaleThreshold",
}
dp.name = dp.selector.split(".").pop(); // name: myDataset
// specify end
dp.data = readData(dp.selector, dp.delimiter, dp.numColumns, dp.valueColumn);
dp.scale = getScale(dp.data, dp.scaleType, dp.valueColumn);
dp.group = L.layerGroup();
dataParameters.push(dp);
addCircles(dp);
addLegend(dp.scale, dp.scaleType, dp.name);
// ------> for more data sets, copy TO here
// 3. dataset 2
// specify start
dp = {
selector: "aside.d2",
delimiter: ",",
numColumns: ["lat","long","value"],
valueColumn: "value",
scaleType: "scaleQuantize",
}
dp.name = dp.selector.split(".").pop(); // name: d2
// specify end
dp.data = readData(dp.selector, dp.delimiter, dp.numColumns, dp.valueColumn);
dp.scale = getScale(dp.data, dp.scaleType, dp.valueColumn);
dp.group = L.layerGroup();
dataParameters.push(dp);
addCircles(dp);
addLegend(dp.scale, dp.scaleType, dp.name);
// 3. dataset 3
// specify start
dp = {
selector: "aside.d3",
delimiter: ",",
numColumns: ["lat","long"],
valueColumn: "value",
scaleType: "scaleOrdinal",
}
dp.name = dp.selector.split(".").pop(); // name: d3
// specify end
dp.data = readData(dp.selector, dp.delimiter, dp.numColumns, dp.valueColumn);
dp.scale = getScale(dp.data, dp.scaleType, dp.valueColumn);
dp.group = L.layerGroup();
dataParameters.push(dp);
addCircles(dp);
addLegend(dp.scale, dp.scaleType, dp.name);
// 3. dataset 4
// specify start
dp = {
selector: "aside.myDataset",
delimiter: ",",
numColumns: ["lat","long","index"],
valueColumn: "index",
scaleType: "scaleQuantile",
}
dp.name = "new name";
// specify end
dp.data = readData(dp.selector, dp.delimiter, dp.numColumns, dp.valueColumn);
dp.scale = getScale(dp.data, dp.scaleType, dp.valueColumn);
dp.group = L.layerGroup();
dataParameters.push(dp);
addCircles(dp);
addLegend(dp.scale, dp.scaleType, dp.name);
// 4. set center of map here
var mapCenter = [48.1523107, 11.6231103]; // [latitude, longitude]
// setup map
var map = L.map('map', {
center: mapCenter,
zoom: 14,
layers: [grayscale, dataParameters[0].group]
});
var baseLayers = {
"Grayscale": grayscale,
"Streets": streets,
"Satellite": satellite
};
var overlays = {};
dataParameters.forEach(function(ele) {
overlays[ele.name] = ele.group;
})
L.control.layers(baseLayers, overlays).addTo(map);
/////////////////////////////////////////
// helper functions
/////////////////////////////////////////
function addLegend(scale, scaleType, title) {
var svg = d3.select("#allLegends")
.append("div")
.attr("class", "legend " + title)
.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(dp) {
var circle;
var colorScale = dp.scale;
dp.data.forEach(function(element) {
circle = L.circle([element.lat, element.long], {
color: colorScale(element[dp.valueColumn]),
fillColor: colorScale(element[dp.valueColumn]),
fillOpacity: 1,
radius: 5
}).addTo(dp.group);
circle.bindPopup("Wert: " + element[dp.valueColumn] + "<br>Adresse: " + element.address);
});
}
// see also: //d3indepth.com/scales/
function getScale(data, scaleType, valueCol) {
var scale;
if (scaleType === "scaleThreshold") {
var min = d3.min(data, function(d) { return d[valueCol]; });
var max = d3.max(data, function(d) { return d[valueCol]; });
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])
.range(['#ffffe0','#ffd59b','#ffa474','#f47461','#db4551','#b81b34','#8b0000']);
} else if (scaleType === "scaleQuantize") {
scale = d3.scaleQuantize()
.domain(d3.extent(data, function(d) { return d[valueCol]; }))
.range(['#ffffe0','#ffd59b','#ffa474','#f47461','#db4551','#b81b34','#8b0000']);
} else if (scaleType === "scaleQuantile") {
scale = d3.scaleQuantile()
.domain(data.map(function(d) { return d[valueCol]; }).sort(function(a, b){return a-b}))
.range(['#ffffe0','#ffd59b','#ffa474','#f47461','#db4551','#b81b34','#8b0000']);
} else if (scaleType === "scaleOrdinal") {
scale = d3.scaleOrdinal()
.domain(data.map(function(d) { return d[valueCol]; }))
.range(d3.schemePaired);
}
return scale;
}
function readData(selector, delimiter, columnsNum, valueCol) {
var psv = d3.dsvFormat(delimiter);
var initialData = psv.parse(removeWhiteSpaces(d3.select(selector).text()));
_data = initialData.filter(function(e) { return e[valueCol].length !== 0; });
console.log("Skipped: " + (initialData.length - _data.length) + " rows.");
if (typeof columnsNum !== "undefined") {
_data.forEach( function (row) {
convertToNumber(row, columnsNum);
});
}
console.log(_data);
return _data;
}
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;
}
function removeWhiteSpaces (str) {
return str.replace(/^\s+|\s+$|\s+(?=\s)/g, "");
}
</script>
</body>
</html>