Skip to content

Commit

Permalink
Display multiple entries from the same location within single popup
Browse files Browse the repository at this point in the history
  • Loading branch information
amotl committed Dec 13, 2019
1 parent d63edbd commit bde9969
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 27 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

## development
- Fix "Fit to data" zooming (#25)
- Display multiple entries from the same location within single popup (#27).


## v0.7.0
Expand Down
102 changes: 76 additions & 26 deletions src/worldmap.ts
Original file line number Diff line number Diff line change
Expand Up @@ -181,40 +181,52 @@ export default class WorldMap {
createCircles(data) {
console.log('createCircles: begin');
const circles: any[] = [];
const circles_by_key = {};
data.forEach(dataPoint => {
// Todo: Review: Is a "locationName" really required
// just for displaying a circle on a map?
// just for displaying a circle on a map?
if (!dataPoint.locationName) {
return;
}
circles.push(this.createCircle(dataPoint));
let circle;

// Create circle.
if (circles_by_key[dataPoint.key] == undefined) {
circle = this.createCircle(dataPoint);
circles_by_key[dataPoint.key] = circle;

// Amend popup content if circle has been created already.
} else {
circle = circles_by_key[dataPoint.key];
this.extendPopupContent(circle, dataPoint);
}
circles.push(circle);
});
this.circlesLayer = this.addCircles(circles);
this.circles = circles;
console.log('createCircles: end');
}

updateCircles(data) {
const circles_by_key = {};
data.forEach(dataPoint => {
// Todo: Review: Is a "locationName" really required
// just for displaying a circle on a map?
if (!dataPoint.locationName) {
return;
}

const circle = _.find(this.circles, cir => {
return cir.options.location === dataPoint.key;
});
// Update circle.
if (circles_by_key[dataPoint.key] == undefined) {
const circle = this.updateCircle(dataPoint);
if (circle) {
circles_by_key[dataPoint.key] = circle;
}

if (circle) {
circle.setRadius(this.calcCircleSize(dataPoint.value || 0));
circle.setStyle({
color: this.getColor(dataPoint.value),
fillColor: this.getColor(dataPoint.value),
fillOpacity: 0.5,
location: dataPoint.key,
});
circle.unbindPopup();
this.createClickthrough(circle, dataPoint);
this.createPopup(circle, dataPoint.locationName, dataPoint.valueRounded);
// Amend popup content if circle has been updated already.
} else {
const circle = circles_by_key[dataPoint.key];
this.extendPopupContent(circle, dataPoint);
}
});
}
Expand All @@ -231,10 +243,38 @@ export default class WorldMap {
});

this.createClickthrough(circle, dataPoint);
this.createPopup(circle, dataPoint.locationName, dataPoint.valueRounded);
const content = this.getPopupContent(dataPoint.locationName, dataPoint.valueRounded);
this.createPopup(circle, content);
return circle;
}

updateCircle(dataPoint) {
// Find back circle object by data point key.
const circle = _.find(this.circles, cir => {
return cir.options.location === dataPoint.key;
});

if (circle) {
circle.setRadius(this.calcCircleSize(dataPoint.value || 0));
circle.setStyle({
color: this.getColor(dataPoint.value),
fillColor: this.getColor(dataPoint.value),
fillOpacity: 0.5,
location: dataPoint.key,
});

// Re-create popup.
circle.unbindPopup();
const content = this.getPopupContent(dataPoint.locationName, dataPoint.valueRounded);
this.createPopup(circle, content);

// Re-create clickthrough-link.
this.createClickthrough(circle, dataPoint);

return circle;
}
}

calcCircleSize(dataPointValue) {
const circleMinSize = parseInt(this.ctrl.settings.circleMinSize, 10) || 1;
const circleMaxSize = parseInt(this.ctrl.settings.circleMaxSize, 10) || 10;
Expand Down Expand Up @@ -294,14 +334,7 @@ export default class WorldMap {
}
}

createPopup(circle, locationName, value) {
let unit;
if (_.isNaN(value)) {
value = 'n/a';
} else {
unit = value && value === 1 ? this.ctrl.settings.unitSingular : this.ctrl.settings.unitPlural;
}
const label = `${locationName}: ${value} ${unit || ''}`.trim();
createPopup(circle, label) {
circle.bindPopup(label, {
offset: (window as any).L.point(0, -2),
className: 'worldmap-popup',
Expand All @@ -323,6 +356,24 @@ export default class WorldMap {
}
}

extendPopupContent(circle, dataPoint) {
const popup = circle.getPopup();
let popupContent = popup._content;
popupContent += `\n${this.getPopupContent(dataPoint.locationName, dataPoint.valueRounded)}`;
circle.setPopupContent(popupContent);
}

getPopupContent(locationName, value) {
let unit;
if (_.isNaN(value)) {
value = 'n/a';
} else {
unit = value && value === 1 ? this.ctrl.settings.unitSingular : this.ctrl.settings.unitPlural;
}
const label = `${locationName}: ${value} ${unit || ''}`.trim();
return label;
}

getColor(value) {
for (let index = this.ctrl.data.thresholds.length; index > 0; index -= 1) {
if (value >= this.ctrl.data.thresholds[index - 1]) {
Expand All @@ -337,7 +388,6 @@ export default class WorldMap {
}

panToMapCenter(options?: any) {

console.log('panToMapCenter');

// Get a bunch of metadata from settings and data which
Expand Down
1 change: 0 additions & 1 deletion src/worldmap_ctrl.ts
Original file line number Diff line number Diff line change
Expand Up @@ -420,7 +420,6 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
if (ctrl.mapCenterMoved) {
ctrl.map.panToMapCenter();
}

}
}

Expand Down

0 comments on commit bde9969

Please sign in to comment.