Skip to content

Commit

Permalink
Merge pull request #62 from starschema/choropleth-hover-options
Browse files Browse the repository at this point in the history 
Choropleth hover highlight options
  • Loading branch information
@szilardhuber
szilardhuber authored Apr 12, 2023
2 parents 5d5cd3d + 53b0c44 commit 9ea1df8
Show file tree
Hide file tree
Showing 3 changed files with 111 additions and 4 deletions.
56 changes: 56 additions & 0 deletions capabilities.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1666,6 +1666,62 @@
"integer": true
}
},
"hoverHighlight": {
"displayName": "Hover Highlight",
"displayNameKey": "hoverHighlight",
"description": "Enable hover highlight",
"type": {
"bool": true
}
},
"hoverHighlightColor": {
"displayName": "Hover Highlight Color",
"displayNameKey": "hoverHighlightColor",
"description": "Defines the hover color of a polygon.",
"type": {
"fill": {
"solid": {
"color": true
}
}
}
},
"hoverHighlightOpacity": {
"displayName": "Hover Highlight Opacity",
"displayNameKey": "hoverHighlightOpacity",
"description": "Defines the hover highlight opacity of a polygon.",
"type": {
"numeric": true
}
},
"hoverHighlightOutlineColor": {
"displayName": "Hover Highlight Outline Color",
"displayNameKey": "hoverHighlightOutlineColor",
"description": "Defines the hover color of the highlight outline of a polygon.",
"type": {
"fill": {
"solid": {
"color": true
}
}
}
},
"hoverHighlightOutlineOpacity": {
"displayName": "Hover Highlight Outline Opacity",
"displayNameKey": "hoverHighlightOutlineOpacity",
"description": "Defines the hover highlight outline opacity of a polygon.",
"type": {
"numeric": true
}
},
"hoverHighlightOutlineWidth": {
"displayName": "Hover Highlight Outline Width",
"displayNameKey": "hoverHighlightOutlineWidth",
"description": "Defines the hover highlight outline width of a polygon.",
"type": {
"numeric": true
}
},
"legend": {
"displayName": "Legend",
"displayNameKey": "legend",
Expand Down
44 changes: 40 additions & 4 deletions src/layers/choropleth.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,17 @@ export class Choropleth extends Layer {
public static readonly OutlineID = 'choropleth-outline'
public static readonly HighlightID = 'choropleth-highlight'
public static readonly HighlightOutlineID = 'choropleth-highlight-outline'
public static readonly HoverHighlightID = 'choropleth-hover-highlight'
public static readonly HoverHighlightOutlineID = 'choropleth-hover-highlight-outline'
public static readonly ExtrusionID = 'choropleth-extrusion'
public static readonly ExtrusionHighlightID = 'choropleth-extrusion-highlight'
private static readonly LayerOrder = [
Choropleth.ID,
Choropleth.OutlineID,
Choropleth.HighlightID,
Choropleth.HighlightOutlineID,
Choropleth.HoverHighlightID,
Choropleth.HoverHighlightOutlineID,
Choropleth.ExtrusionID,
Choropleth.ExtrusionHighlightID,
]
Expand Down Expand Up @@ -113,6 +117,31 @@ export class Choropleth extends Layer {
"source-layer": sourceLayer,
filter: zeroFilter,
});
layers[Choropleth.HoverHighlightID] = decorateLayer({
id: Choropleth.HoverHighlightID,
type: 'fill',
source: 'choropleth-source',
paint: {
"fill-color": choroSettings.hoverHighlightColor,
"fill-opacity": choroSettings.hoverHighlightOpacity / 100
},
"source-layer": sourceLayer,
filter: zeroFilter
});
layers[Choropleth.HoverHighlightOutlineID] = decorateLayer({
id: Choropleth.HoverHighlightOutlineID,
type: 'line',
layout: {
"line-join": "round"
},
paint: {
"line-width": choroSettings.hoverHighlightOutlineWidth,
"line-color": choroSettings.hoverHighlightOutlineColor,
},
source: 'choropleth-source',
"source-layer": sourceLayer,
filter: zeroFilter,
});
layers[Choropleth.ExtrusionHighlightID] = decorateLayer({
id: Choropleth.ExtrusionHighlightID,
type: "fill-extrusion",
Expand Down Expand Up @@ -141,16 +170,17 @@ export class Choropleth extends Layer {
const choroSettings = this.settings;
const vectorProperty = choroSettings.getCurrentVectorProperty()
const featureVectorProperty = e.features[0].properties[vectorProperty]

if (!featureVectorProperty) {
return;
}

if (this.isExtruding()) {
map.setFilter(Choropleth.ExtrusionHighlightID, ["==", vectorProperty, featureVectorProperty]);
}
else {
map.setFilter(Choropleth.HighlightID, ["==", vectorProperty, featureVectorProperty]);
map.setFilter(Choropleth.HighlightOutlineID, ["==", vectorProperty, featureVectorProperty]);
else if (choroSettings.hoverHighlight) {
map.setFilter(Choropleth.HoverHighlightID, ["==", vectorProperty, featureVectorProperty]);
map.setFilter(Choropleth.HoverHighlightOutlineID, ["==", vectorProperty, featureVectorProperty]);
}
}

Expand All @@ -168,6 +198,8 @@ export class Choropleth extends Layer {
map.setPaintProperty(Choropleth.ExtrusionID, 'fill-extrusion-opacity', choroSettings.opacity / 100);
map.setFilter(Choropleth.HighlightID, zeroFilter);
map.setFilter(Choropleth.HighlightOutlineID, zeroFilter);
map.setFilter(Choropleth.HoverHighlightID, zeroFilter);
map.setFilter(Choropleth.HoverHighlightOutlineID, zeroFilter);
map.setFilter(Choropleth.ExtrusionHighlightID, zeroFilter);
}

Expand Down Expand Up @@ -272,14 +304,15 @@ export class Choropleth extends Layer {
map.setFilter(Choropleth.ExtrusionID, zeroFilter)
// map.setPitch(0)
}

}

setFillProps(map: any, settings: ChoroplethSettings) {
map.setPaintProperty(Choropleth.ID, 'fill-outline-color', 'rgba(0,0,0,0.05)');
map.setPaintProperty(Choropleth.ID, 'fill-opacity', settings.opacity / 100);
map.setPaintProperty(Choropleth.HighlightID, "fill-color", settings.highlightColor)
map.setPaintProperty(Choropleth.HighlightID, "fill-opacity", settings.highlightOpacity / 100)
map.setPaintProperty(Choropleth.HoverHighlightID, "fill-color", settings.hoverHighlightColor)
map.setPaintProperty(Choropleth.HoverHighlightID, "fill-opacity", settings.hoverHighlightOpacity / 100)
map.setPaintProperty(Choropleth.ExtrusionHighlightID, "fill-extrusion-color", settings.highlightColor)
map.setPaintProperty(Choropleth.ExtrusionHighlightID, 'fill-extrusion-base', settings.baseHeight);
map.setPaintProperty(Choropleth.ExtrusionID, 'fill-extrusion-base', settings.baseHeight);
Expand All @@ -292,6 +325,9 @@ export class Choropleth extends Layer {
map.setPaintProperty(Choropleth.HighlightOutlineID, 'line-color', settings.highlightOutlineColor);
map.setPaintProperty(Choropleth.HighlightOutlineID, 'line-opacity', settings.highlightOutlineOpacity / 100);
map.setPaintProperty(Choropleth.HighlightOutlineID, 'line-width', settings.highlightOutlineWidth);
map.setPaintProperty(Choropleth.HoverHighlightOutlineID, 'line-color', settings.hoverHighlightOutlineColor);
map.setPaintProperty(Choropleth.HoverHighlightOutlineID, 'line-opacity', settings.hoverHighlightOutlineOpacity / 100);
map.setPaintProperty(Choropleth.HoverHighlightOutlineID, 'line-width', settings.hoverHighlightOutlineWidth);
}

setZoom(map: any, settings: ChoroplethSettings) {
Expand Down
15 changes: 15 additions & 0 deletions src/settings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -303,6 +303,13 @@ export class ChoroplethSettings {
public outlineWidth: number = 1;
public outlineOpacity: number = 50;

public hoverHighlight: boolean = true;
public hoverHighlightColor: string = "#2c7fb8";
public hoverHighlightOpacity: number = 100;
public hoverHighlightOutlineColor: string = "#000000";
public hoverHighlightOutlineOpacity: number = 100;
public hoverHighlightOutlineWidth: number = 1;

public legend: boolean = true;
public legendPosition: string = "bottom-right";

Expand Down Expand Up @@ -450,6 +457,14 @@ export class ChoroplethSettings {
delete properties.legendPosition
}

if (!properties.hoverHighlight) {
delete properties.hoverHighlightColor
delete properties.hoverHighlightOpacity
delete properties.hoverHighlightOutlineColor
delete properties.hoverHighlightOutlineOpacity
delete properties.hoverHighlightOutlineWidth
}

return { instances };
}

Expand Down

0 comments on commit 9ea1df8

Please sign in to comment.