From 0197c02f5a5d23af9b77aea8b8c8978f203ee48c Mon Sep 17 00:00:00 2001
From: Tobias <tobias@fixmycity.de>
Date: Fri, 10 May 2024 16:54:38 +0200
Subject: [PATCH 1/4] Autoformatting

---
 examples/filter/index.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/examples/filter/index.html b/examples/filter/index.html
index ed5a6c73b..e68292fad 100644
--- a/examples/filter/index.html
+++ b/examples/filter/index.html
@@ -1,7 +1,7 @@
-<!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>
@@ -25,7 +25,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;

From 0d150d374fa73ebe460b916626761b90e6daf953 Mon Sep 17 00:00:00 2001
From: Tobias <tobias@fixmycity.de>
Date: Fri, 10 May 2024 16:59:58 +0200
Subject: [PATCH 2/4] Migrate to Maplibre and Maptiler Example data

---
 examples/filter/.env.example      |  1 +
 examples/filter/.gitignore        |  1 +
 examples/filter/index.html        |  1 -
 examples/filter/package.json      |  4 ++--
 examples/filter/src/app.tsx       | 33 +++++++++++++++----------------
 examples/filter/src/map-style.ts  |  4 +---
 examples/filter/src/vite-env.d.ts |  9 +++++++++
 examples/filter/vite.config.js    |  5 -----
 8 files changed, 30 insertions(+), 28 deletions(-)
 create mode 100644 examples/filter/.env.example
 create mode 100644 examples/filter/.gitignore
 create mode 100644 examples/filter/src/vite-env.d.ts
 delete mode 100644 examples/filter/vite.config.js

diff --git a/examples/filter/.env.example b/examples/filter/.env.example
new file mode 100644
index 000000000..20d6c3974
--- /dev/null
+++ b/examples/filter/.env.example
@@ -0,0 +1 @@
+VITE_MAPTILER_TOKEN=foo
diff --git a/examples/filter/.gitignore b/examples/filter/.gitignore
new file mode 100644
index 000000000..4c49bd78f
--- /dev/null
+++ b/examples/filter/.gitignore
@@ -0,0 +1 @@
+.env
diff --git a/examples/filter/index.html b/examples/filter/index.html
index e68292fad..ca5ddbe94 100644
--- a/examples/filter/index.html
+++ b/examples/filter/index.html
@@ -3,7 +3,6 @@
   <head>
     <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;
diff --git a/examples/filter/package.json b/examples/filter/package.json
index 677adc0fb..f9cb4cbbc 100644
--- 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
index 2a4aabd01..3748fea60 100644
--- 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 {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,28 @@ export default function App() {
           zoom: 3
         }}
         minZoom={2}
-        mapStyle="mapbox://styles/mapbox/light-v9"
-        mapboxAccessToken={MAPBOX_TOKEN}
+        mapStyle={`https://api.maptiler.com/maps/streets/style.json?key=${
+          import.meta.env.VITE_MAPTILER_TOKEN
+        }`}
         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={['in', '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
index 556c2cc1e..de8368a6f 100644
--- 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/src/vite-env.d.ts b/examples/filter/src/vite-env.d.ts
new file mode 100644
index 000000000..8ea7746ab
--- /dev/null
+++ b/examples/filter/src/vite-env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_MAPTILER_TOKEN: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/examples/filter/vite.config.js b/examples/filter/vite.config.js
deleted file mode 100644
index a32c20430..000000000
--- a/examples/filter/vite.config.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export default {
-  define: {
-    'process.env.MapboxAccessToken': JSON.stringify(process.env.MapboxAccessToken)
-  }
-};

From 8a3643825f41a5bf0ed11ee6c0906e5649e6be9e Mon Sep 17 00:00:00 2001
From: Tobias <tobias@fixmycity.de>
Date: Fri, 10 May 2024 17:07:09 +0200
Subject: [PATCH 3/4] Update Readme

---
 examples/filter/README.md   | 7 +------
 examples/filter/src/app.tsx | 2 +-
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/examples/filter/README.md b/examples/filter/README.md
index 43a5c91e9..f1ff684ed 100644
--- a/examples/filter/README.md
+++ b/examples/filter/README.md
@@ -6,14 +6,9 @@ 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.
+To run this example, you need a [Maptiler API Key](https://docs.maptiler.com/cloud/api/authentication-key/). Create a `.env` based on `.env.example` to provide your `VITE_MAPTILER_TOKEN`.
 
 ```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/src/app.tsx b/examples/filter/src/app.tsx
index 3748fea60..dafa79fe9 100644
--- a/examples/filter/src/app.tsx
+++ b/examples/filter/src/app.tsx
@@ -1,5 +1,5 @@
 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/maplibre';
 import ControlPanel from './control-panel';

From 3e60ef7f0f9d48c476fb68a990f88c36f9fc3339 Mon Sep 17 00:00:00 2001
From: Tobias <tobias@fixmycity.de>
Date: Fri, 10 May 2024 17:08:29 +0200
Subject: [PATCH 4/4] Simplify Setup by using maptiler demotiles

---
 examples/filter/.env.example      |  1 -
 examples/filter/.gitignore        |  1 -
 examples/filter/README.md         |  2 --
 examples/filter/src/app.tsx       | 10 ++++++----
 examples/filter/src/vite-env.d.ts |  9 ---------
 5 files changed, 6 insertions(+), 17 deletions(-)
 delete mode 100644 examples/filter/.env.example
 delete mode 100644 examples/filter/.gitignore
 delete mode 100644 examples/filter/src/vite-env.d.ts

diff --git a/examples/filter/.env.example b/examples/filter/.env.example
deleted file mode 100644
index 20d6c3974..000000000
--- a/examples/filter/.env.example
+++ /dev/null
@@ -1 +0,0 @@
-VITE_MAPTILER_TOKEN=foo
diff --git a/examples/filter/.gitignore b/examples/filter/.gitignore
deleted file mode 100644
index 4c49bd78f..000000000
--- a/examples/filter/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-.env
diff --git a/examples/filter/README.md b/examples/filter/README.md
index f1ff684ed..bae62eade 100644
--- a/examples/filter/README.md
+++ b/examples/filter/README.md
@@ -6,8 +6,6 @@ This example showcases how to dynamically add/remove filters from layers.
 
 ## Usage
 
-To run this example, you need a [Maptiler API Key](https://docs.maptiler.com/cloud/api/authentication-key/). Create a `.env` based on `.env.example` to provide your `VITE_MAPTILER_TOKEN`.
-
 ```bash
 npm i
 npm run start
diff --git a/examples/filter/src/app.tsx b/examples/filter/src/app.tsx
index dafa79fe9..d87d267d3 100644
--- a/examples/filter/src/app.tsx
+++ b/examples/filter/src/app.tsx
@@ -30,9 +30,8 @@ export default function App() {
           zoom: 3
         }}
         minZoom={2}
-        mapStyle={`https://api.maptiler.com/maps/streets/style.json?key=${
-          import.meta.env.VITE_MAPTILER_TOKEN
-        }`}
+        maplibre
+        mapStyle="https://demotiles.maplibre.org/style.json"
         onMouseMove={onHover}
         interactiveLayerIds={['counties']}
       >
@@ -42,7 +41,10 @@ export default function App() {
           data="https://maplibre.org/maplibre-gl-js/docs/assets/us_states.geojson"
         >
           <Layer {...countiesLayer} />
-          <Layer {...highlightLayer} filter={['in', 'STATE_ID', selectedStateId]} />
+          <Layer
+            {...highlightLayer}
+            filter={['any', ['in', ['get', 'STATE_ID'], selectedStateId]]}
+          />
         </Source>
         {selectedStateId && (
           <Popup
diff --git a/examples/filter/src/vite-env.d.ts b/examples/filter/src/vite-env.d.ts
deleted file mode 100644
index 8ea7746ab..000000000
--- a/examples/filter/src/vite-env.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/// <reference types="vite/client" />
-
-interface ImportMetaEnv {
-  readonly VITE_MAPTILER_TOKEN: string;
-}
-
-interface ImportMeta {
-  readonly env: ImportMetaEnv;
-}
