Skip to content

Commit 3c899c8

Browse files
Claudio5Claudio5
committed
add legend
1 parent d5f7129 commit 3c899c8

File tree

3 files changed

+58
-36
lines changed

3 files changed

+58
-36
lines changed

‎css/leaflet.css

+6-1
Original file line numberDiff line numberDiff line change
@@ -353,9 +353,14 @@
353353
}
354354
.leaflet-control-layers-expanded {
355355
padding: 6px 10px 6px 6px;
356-
color: #333;
356+
color: #fff;
357357
background: #fff;
358358
}
359+
.leaflet-control-layers-expanded2 {
360+
padding: 6px 10px 6px 6px;
361+
color: #000;
362+
background: #fff;
363+
}
359364
.leaflet-control-layers-scrollbar {
360365
overflow-y: scroll;
361366
padding-right: 5px;

‎index.html

+31-17
Original file line numberDiff line numberDiff line change
@@ -265,32 +265,44 @@
265265
title.update = function(lat, log, val, canton) {
266266
console.log(lat);
267267
this._div.innerHTML = `<div class="leaflet-control-layers leaflet-control-layers-expanded" style="width:145px;height:90px;background:gray">
268-
<span>canton: ` + canton.toString() + `</span>
268+
<span>Canton: ` + canton.toString() + `</span>
269269
<span>Longtitude: ` + log.toString().substr(0,5) + `</span>
270270
<span>Latitude: ` + lat.toString().substr(0,5) + `<br /></span>
271271
<span>Value: ` + val.toString().substr(0,5) + ` </span>
272272
</div>`;
273273
};
274274
title.addTo(map);
275275

276+
var legend = L.control({position: 'topright'});
277+
legend.onAdd = function(map) {
278+
this._div = L.DomUtil.create('div');
279+
this.update()
280+
return this._div;
281+
};
282+
legend.update = function() {
283+
this._div.innerHTML = '<div class="leaflet-control-layers leaflet-control-layers-expanded2" id="legendBox" style="width:250px;height:80px;background:white"></div>';
284+
};
285+
legend.addTo(map);
286+
var legendSVG = d3.select('#legendBox')
287+
.append('svg')
288+
.attr('transform', 'translate(0,' + 0 + ')')
289+
.attr('width', 250)
290+
.attr('height', 80);
291+
276292
showBlock = true;
277293
function toggleBlock(num) {
278294
console.log('Toggle the block')
279295
if(showBlock === true && num == 1){
280296
/* use jquery to select your DOM elements that has the class 'legend' */
281297
$('.leaflet-control-layers').hide();
282-
showBlock= false;
298+
showBlock= false;
283299
}
284300
else if (showBlock === false && num == 0){
285301
$('.leaflet-control-layers').show();
286-
showBlock = true;
302+
showBlock = true;
287303
}
288304
}
289305

290-
291-
// Use the custom grouped layer control, not "L.control.layers"
292-
L.control.layers(basemaps, null).addTo(map);
293-
294306
// Remove the stupid leaflet copyright from bottom right
295307

296308
let stupid_element = document.querySelector('.leaflet-control-attribution.leaflet-control');
@@ -320,6 +332,8 @@
320332
const svg_y = - height_total - margin.top - margin.bottom - panel_guide_height;
321333
const color = 'steelblue';
322334

335+
createD3LegendBox(legendSVG, 0);
336+
323337
// Build statistics svg
324338
stat_svg = d3.select('#stat_elements_div')
325339
.append('svg')
@@ -335,9 +349,6 @@
335349
.attr('opacity', 0.6);
336350

337351

338-
createD3LegendBox(stat_svg, 0);
339-
340-
341352
// Add canton border to the map
342353
let svg = d3.select(map.getPanes().overlayPane).append('svg').attr('id', 'svg');
343354
let g = svg.append('g').attr('class', 'leaflet-zoom-hide');
@@ -365,7 +376,7 @@
365376
let typicals_rcp45_2040_25 = d3.json('./data/csv_quickflow/rcp45_2040_25pct/typical_provs.json');
366377
let typicals_rcp45_2040_25_allag = d3.json('./data/csv_quickflow/rcp45_2040_25pct_allag/typical_provs.json');
367378
let typicals_rcp85_2020_75 = d3.json('./data/csv_quickflow/rcp85_2020_75pct/typical_provs.json');
368-
let typicals_rcp85_2040_75 = d3.json('./data/csv_quickflow/rcp85_2040_75pct/typical_provs.json');
379+
let typicals_rcp85_2040_75 = d3.json('./data/csv_quickflow/rcp85_2040_75pct/typical_provs.json');
369380

370381
// Get summary data
371382
let summary_bf_history = d3.json('./data/B_historical_change/typical_summary.json')
@@ -375,7 +386,7 @@
375386
let summary_rcp45_2040_25 = d3.json('./data/csv_quickflow/rcp45_2040_25pct/typical_summary.json');
376387
let summary_rcp45_2040_25_allag = d3.json('./data/csv_quickflow/rcp45_2040_25pct_allag/typical_summary.json');
377388
let summary_rcp85_2020_75 = d3.json('./data/csv_quickflow/rcp85_2020_75pct/typical_summary.json');
378-
let summary_rcp85_2040_75 = d3.json('./data/csv_quickflow/rcp85_2040_75pct/typical_summary.json');
389+
let summary_rcp85_2040_75 = d3.json('./data/csv_quickflow/rcp85_2040_75pct/typical_summary.json');
379390
// Get national baseflow data
380391
let national_data = d3.json('./data/national_data.json');
381392

@@ -524,14 +535,16 @@
524535
for(var i = 0; i < radioButtons.length; i++) {
525536
radioButtons[i].addEventListener('change', function() {
526537
if(this.value !== "null") {
538+
legend.addTo(map);
539+
legendSVG = d3.select('#legendBox')
540+
.append('svg')
541+
.attr('transform', 'translate(0,' + 0 + ')')
542+
.attr('width', 380)
543+
.attr('height', 100);
527544
prev = this;
528545
getCorrectLayerAndAddToMap(this.value);
529546

530-
if(this.value === 0) {
531-
// Hide timeline
532-
}
533-
534-
createD3LegendBox(stat_svg, parseInt(this.value, 10));
547+
createD3LegendBox(legendSVG, parseInt(this.value, 10));
535548
}
536549

537550
if(this.value === "null") {
@@ -543,6 +556,7 @@
543556
if(baseflowLayer !== undefined) {
544557
map.removeLayer(baseflowLayer);
545558
}
559+
legend.remove();
546560
removeAllLegend();
547561
}
548562
});

‎js/colorMapLegend.js

+21-18
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,19 @@ var boxLegend = undefined;
55
function createD3LegendBox(svg, legend) {
66
removeAllLegend();
77

8-
svg.append('text')
9-
.text('Legend')
10-
.attr('fill', 'black')
11-
.attr('font-size', 25)
12-
.attr('transform', 'translate(10, 20)');
13-
148
if (legend === 0) {
9+
svg.append('text')
10+
.text('Legend Baseflow change values')
11+
.attr('fill', 'black')
12+
.attr('font-size', 15)
13+
.attr('transform', 'translate(10, 16)');
1514
createColorMapLegend(svg);
1615
} else if (legend === 1) {
16+
svg.append('text')
17+
.text('Legend heatmap')
18+
.attr('fill', 'black')
19+
.attr('font-size', 15)
20+
.attr('transform', 'translate(10, 16)');
1721
createBoxLegend(svg);
1822
}
1923

@@ -53,17 +57,17 @@ function createBoxLegend(svg) {
5357

5458
var linear = d3.scaleOrdinal()
5559
.domain(["Low", "Medium", "High"])
56-
.range(["rgb(10, 50, 200)", "rgb(255, 255, 10)", "rgb(255, 0, 0)"]);
60+
.range(["rgba(10, 50, 200)", "rgba(255, 255, 10)", "rgba(255, 0, 0)"]);
5761

5862
boxLegend = svg.append("g")
5963
.attr("class", "legendOrdinal")
60-
.attr("transform", "translate(30,40)");
64+
.attr("transform", "translate(30,30)");
6165

6266
var legendOrdinal = d3.legendColor()
63-
.shapeWidth(60)
64-
.shapeHeight(20)
67+
.shapeWidth(50)
68+
.shapeHeight(15)
6569
.cells(3)
66-
.shapePadding(15)
70+
.shapePadding(10)
6771
.orient('horizontal')
6872
.scale(linear);
6973

@@ -73,11 +77,10 @@ function createBoxLegend(svg) {
7377

7478
function createColorMapLegend(svg, value) {
7579
colorbar = svg.append('g')
76-
.attr('transform', 'translate(30, 40)')
77-
.attr('width', 20 + margin.right);
78-
79-
var w = 300, h = 50;
80+
.attr('transform', 'translate(15, 20)')
81+
.attr('width', 50);
8082

83+
var w = 200, h = 50;
8184

8285
var legend = colorbar.append("defs")
8386
.append("svg:linearGradient")
@@ -94,12 +97,12 @@ function createColorMapLegend(svg, value) {
9497

9598
colorbar.append("rect")
9699
.attr("width", w)
97-
.attr("height", h - 30)
100+
.attr("height", h - 36)
98101
.style("fill", "url(#gradient)")
99102
.attr("transform", "translate(0,10)");
100103

101104
var y = d3.scaleLinear()
102-
.range([0, 300])
105+
.range([0, 200])
103106
.domain([-100000, 100000]);
104107

105108
var yAxis = d3.axisBottom()
@@ -108,7 +111,7 @@ function createColorMapLegend(svg, value) {
108111

109112
colorbar.append("g")
110113
.attr("class", "y axis")
111-
.attr("transform", "translate(0,30)")
114+
.attr("transform", "translate(0,24)")
112115
.call(yAxis)
113116
.append("text")
114117
.attr("transform", "rotate(-90)")

0 commit comments

Comments
 (0)