visgl · tordans · May 10, 2024 · May 10, 2024 · May 10, 2024 · May 10, 2024
diff --git a/examples/filter/README.md b/examples/filter/README.md
@@ -6,14 +6,7 @@ This example showcases how to dynamically add/remove filters from layers.
 
 ## Usage
 
-To run this example, you need a [Mapbox token](http://visgl.github.io/react-map-gl/docs/get-started/mapbox-tokens). You can either set it as `MAPBOX_TOKEN` in `src/app.js`, or set a `MapboxAccessToken` environment variable in the command line.
-
 ```bash
 npm i
 npm run start
 ```
-
-Alternative to acquiring a Mapbox token, you can use `maplibre-gl` instead. Follow these steps:
-- Run `npm install maplibre-gl`
-- In the source, change all `import ... from 'react-map-gl'` to `import ... from 'react-map-gl/maplibre'`
-- Change the `mapStyle` prop of `<Map>` to `"https://demotiles.maplibre.org/style.json"` or a self-hosted URL
diff --git a/examples/filter/index.html b/examples/filter/index.html
@@ -1,9 +1,8 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
   <head>
-    <meta charset='UTF-8' />
+    <meta charset="UTF-8" />
     <title>react-map-gl Example</title>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet">
     <style>
       body {
         margin: 0;
@@ -25,7 +24,7 @@
         right: 0;
         max-width: 320px;
         background: #fff;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
         padding: 12px 24px;
         margin: 20px;
         font-size: 13px;

diff --git a/examples/filter/package.json b/examples/filter/package.json
@@ -5,10 +5,10 @@
     "build": "vite build"
   },
   "dependencies": {
-    "mapbox-gl": "^2.0.0",
+    "maplibre-gl": "^4.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-map-gl": "^7.1.0"
+    "react-map-gl": "^7.1.7"
   },
   "devDependencies": {
     "typescript": "^4.0.0",

diff --git a/examples/filter/src/app.tsx b/examples/filter/src/app.tsx
@@ -1,13 +1,12 @@
 import * as React from 'react';
-import {useState, useMemo, useCallback} from 'react';
+import {useState, useCallback} from 'react';
 import {createRoot} from 'react-dom/client';
-import Map, {Popup, Source, Layer} from 'react-map-gl';
+import Map, {Popup, Source, Layer} from 'react-map-gl/maplibre';
 import ControlPanel from './control-panel';
+import 'maplibre-gl/dist/maplibre-gl.css';
 
 import {countiesLayer, highlightLayer} from './map-style';
 
-const MAPBOX_TOKEN = ''; // Set your mapbox token here
-
 export default function App() {
   const [hoverInfo, setHoverInfo] = useState(null);
 
@@ -16,15 +15,11 @@ export default function App() {
     setHoverInfo({
       longitude: event.lngLat.lng,
       latitude: event.lngLat.lat,
-      countyName: county && county.properties.COUNTY
+      stateId: county && county.properties.STATE_ID
     });
   }, []);
 
-  const selectedCounty = (hoverInfo && hoverInfo.countyName) || '';
-  const filter: ['in', string, string] = useMemo(
-    () => ['in', 'COUNTY', selectedCounty],
-    [selectedCounty]
-  );
+  const selectedStateId = hoverInfo?.stateId || '';
 
   return (
     <>
@@ -35,24 +30,30 @@ export default function App() {
           zoom: 3
         }}
         minZoom={2}
-        mapStyle="mapbox://styles/mapbox/light-v9"
-        mapboxAccessToken={MAPBOX_TOKEN}
+        maplibre
+        mapStyle="https://demotiles.maplibre.org/style.json"
         onMouseMove={onHover}
         interactiveLayerIds={['counties']}
       >
-        <Source type="vector" url="mapbox://mapbox.82pkq93d">
-          <Layer beforeId="waterway-label" {...countiesLayer} />
-          <Layer beforeId="waterway-label" {...highlightLayer} filter={filter} />
+        <Source
+          type="geojson"
+          // https://github.com/maplibre/maplibre-gl-js/tree/main/docs/assets
+          data="https://maplibre.org/maplibre-gl-js/docs/assets/us_states.geojson"
+        >
+          <Layer {...countiesLayer} />
+          <Layer
+            {...highlightLayer}
+            filter={['any', ['in', ['get', 'STATE_ID'], selectedStateId]]}
+          />
         </Source>
-        {selectedCounty && (
+        {selectedStateId && (
           <Popup
             longitude={hoverInfo.longitude}
             latitude={hoverInfo.latitude}
             offset={[0, -10] as [number, number]}
             closeButton={false}
-            className="county-info"
           >
-            {selectedCounty}
+            {selectedStateId}
           </Popup>
         )}
       </Map>

diff --git a/examples/filter/src/map-style.ts b/examples/filter/src/map-style.ts
@@ -1,10 +1,9 @@
-import type {FillLayer} from 'react-map-gl';
+import type {FillLayer} from 'react-map-gl/maplibre';
 
 export const countiesLayer: FillLayer = {
   id: 'counties',
   source: '',
   type: 'fill',
-  'source-layer': 'original',
   paint: {
     'fill-outline-color': 'rgba(0,0,0,0.1)',
     'fill-color': 'rgba(0,0,0,0.1)'
@@ -15,7 +14,6 @@ export const highlightLayer: FillLayer = {
   id: 'counties-highlighted',
   type: 'fill',
   source: 'counties',
-  'source-layer': 'original',
   paint: {
     'fill-outline-color': '#484896',
     'fill-color': '#6e599f',

diff --git a/examples/filter/vite.config.js b/examples/filter/vite.config.js