Skip to content

Commit

Permalink
Update filters when changed (#106)
Browse files Browse the repository at this point in the history
  • Loading branch information
dabreegster authored Nov 24, 2023
1 parent 55818fe commit 36a1ec3
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 1 deletion.
5 changes: 5 additions & 0 deletions .changeset/clever-chairs-live.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'svelte-maplibre': minor
---

Update filters when changed
11 changes: 11 additions & 0 deletions src/lib/Layer.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@
let hoverFeatureId: string | number | undefined = undefined;
let first = true;
$: if ($map && $layer !== id && actualSource) {
if ($layer) {
layerInfo.delete($layer);
Expand Down Expand Up @@ -115,6 +116,7 @@
}),
actualBeforeId
);
first = true;
function handleClick(e: MapMouseEvent & { features?: MapGeoJSONFeature[] }) {
if (!interactive || !$layer || !$map) {
Expand Down Expand Up @@ -261,6 +263,15 @@
$: applyPaint?.(paint);
$: applyLayout?.(layout);
$: if ($layer) $map?.setLayerZoomRange($layer, actualMinZoom, actualMaxZoom);
// Don't set the filter again after we've just created it.
$: if ($layer) {
if (first) {
first = false;
} else {
$map?.setFilter($layer, layerFilter);
}
}
</script>

<!--
Expand Down
9 changes: 8 additions & 1 deletion src/routes/examples/geojson_polygon/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,21 @@
map.setPaintProperty(layer.id, 'text-halo-color', colors.textOutlineColor);
}
}
let filterStates = false;
$: filter = filterStates ? ['==', 'T', ['slice', ['get', 'NAME'], 0, 1]] : undefined;
// END EXTRACT
</script>

<div class="self-start w-full max-w-md grid gap-y-2 items-center">
<div class="grid w-full max-w-md items-center gap-y-2 self-start">
<label><input type="checkbox" bind:checked={showFill} /> Show fill</label>
<label><input type="color" bind:value={fillColor} /> Fill Color </label>
<label><input type="checkbox" bind:checked={showBorder} /> Show border</label>
<label><input type="color" bind:value={borderColor} /> Border Color </label>
</div>
<label
><input type="checkbox" bind:checked={filterStates} /> Only show states starting with 'T'</label
>

<MapLibre
bind:map
Expand All @@ -57,6 +63,7 @@
'fill-color': hoverStateFilter(fillColor, colors.hoverBgColor),
'fill-opacity': 0.5,
}}
{filter}
beforeLayerType="symbol"
manageHoverState
/>
Expand Down

1 comment on commit 36a1ec3

@vercel
Copy link

@vercel vercel bot commented on 36a1ec3 Nov 24, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.