Use MapLibre in examples/editable-layers (#75)

birkskyum · web-flow · commit 470e69b89445 · 2024-05-01T17:40:13.000-04:00
diff --git a/examples/editable-layers/advanced/index.html b/examples/editable-layers/advanced/index.html
@@ -4,7 +4,7 @@
         <meta charset="utf-8" />
         <title>deck.gl Community Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link href="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css" rel="stylesheet" />
+        <link href="https://unpkg.com/maplibre-gl@^4.1.3/dist/maplibre-gl.css" rel="stylesheet" />
     </head>
     <body></body>
     <script type="module" src="./src/app.tsx"></script>
diff --git a/examples/editable-layers/advanced/package.json b/examples/editable-layers/advanced/package.json
@@ -13,7 +13,7 @@
     "@deck.gl/react": "^9.0.12",
     "@types/react": "^18.2.75",
     "@types/react-dom": "^18.2.24",
-    "mapbox-gl": "^3.2.0",
+    "maplibre-gl": "^4.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-map-gl": "^7.1.7",
diff --git a/examples/editable-layers/advanced/src/app.tsx b/examples/editable-layers/advanced/src/app.tsx
@@ -12,6 +12,3 @@ if (document.body) {
   const root = createRoot(container);
   root.render(<Example />);
 }
-
-// eslint-disable-next-line no-console
-console.info('MapboxAccessToken', import.meta.env.VITE_MAPBOX_ACCESS_TOKEN);
diff --git a/examples/editable-layers/advanced/src/example.tsx b/examples/editable-layers/advanced/src/example.tsx
@@ -5,6 +5,7 @@ import {MapView, MapController} from '@deck.gl/core';
 import StaticMap from 'react-map-gl';
 import {GL} from '@luma.gl/constants';
 import circle from '@turf/circle';
+import MapLibre from 'maplibre-gl';
 
 import {
   EditableGeoJsonLayer,
@@ -828,8 +829,9 @@ export default class Example extends React.Component<
   renderStaticMap(viewport: Record<string, any>) {
     return (
       <StaticMap
+        mapLib={MapLibre}
         {...viewport}
-        mapStyle={'https://basemaps.cartocdn.com/gl/positron-gl-style/style.jsondark-v10'}
+        mapStyle={'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json'}
       />
     );
   }
diff --git a/examples/editable-layers/codesandbox/getting-started/index.js b/examples/editable-layers/codesandbox/getting-started/index.js
@@ -5,9 +5,7 @@ import DeckGL from '@deck.gl/react';
 // eslint-disable-next-line import/named, import/no-extraneous-dependencies
 import {HtmlOverlayItem, HtmlClusterOverlay} from '@deck.gl-community/react';
 import StaticMap from 'react-map-gl';
-
-const MAPBOX_ACCESS_TOKEN =
-  'pk.eyJ1IjoiZ2Vvcmdpb3MtdWJlciIsImEiOiJjanZidTZzczAwajMxNGVwOGZrd2E5NG90In0.gdsRu_UeU_uPi9IulBruXA';
+import MapLibre from 'maplibre-gl';
 
 const DATA_URL = 'https://cors-tube.vercel.app/?url=https://whc.unesco.org/en/list/georss/';
 
@@ -119,7 +117,7 @@ export class WorldHeritageApp extends React.Component {
   render() {
     return (
       <DeckGL initialViewState={initialViewState} controller={true}>
-        <StaticMap mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
+        <StaticMap mapLib={MapLibre} />
         {this.renderWorldHeritage()}
       </DeckGL>
     );
diff --git a/examples/editable-layers/codesandbox/getting-started/package.json b/examples/editable-layers/codesandbox/getting-started/package.json
@@ -4,6 +4,7 @@
     "@deck.gl/react": "^8.8.23",
     "@turf/helpers": "^6.5.0",
     "global": "4.4.0",
+    "maplibre-gl": "^4.1.3",
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "react-map-gl": "7.1.7",
diff --git a/examples/editable-layers/codesandbox/world-heritage/index.js b/examples/editable-layers/codesandbox/world-heritage/index.js
@@ -5,9 +5,7 @@ import DeckGL from '@deck.gl/react';
 // eslint-disable-next-line import/named
 import {HtmlOverlayItem, HtmlClusterOverlay} from '@deck.gl-community/react';
 import {StaticMap} from 'react-map-gl';
-
-const MAPBOX_ACCESS_TOKEN =
-  'pk.eyJ1IjoiZ2Vvcmdpb3MtdWJlciIsImEiOiJjanZidTZzczAwajMxNGVwOGZrd2E5NG90In0.gdsRu_UeU_uPi9IulBruXA';
+import MapLibre from 'maplibre-gl';
 
 const DATA_URL = 'https://cors-tube.vercel.app/?url=https://whc.unesco.org/en/list/georss/';
 
@@ -119,7 +117,7 @@ export class WorldHeritageApp extends React.Component {
   render() {
     return (
       <DeckGL initialViewState={initialViewState} controller={true}>
-        <StaticMap mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
+        <StaticMap mapLib={MapLibre} />
         {this.renderWorldHeritage()}
       </DeckGL>
     );
diff --git a/examples/editable-layers/editable-h3-cluster-layer/index.html b/examples/editable-layers/editable-h3-cluster-layer/index.html
@@ -4,7 +4,7 @@
         <meta charset="utf-8" />
         <title>deck.gl Community Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link href="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css" rel="stylesheet" />
+        <link href="https://unpkg.com/maplibre-gl@^4.1.3/dist/maplibre-gl.css" rel="stylesheet" />
     </head>
     <body></body>
     <script type="module" src="./index.tsx"></script>
diff --git a/examples/editable-layers/editable-h3-cluster-layer/index.tsx b/examples/editable-layers/editable-h3-cluster-layer/index.tsx
@@ -10,9 +10,7 @@ import {
 } from '@deck.gl-community/editable-layers';
 import StaticMap from 'react-map-gl';
 import {hexagonCluster1, hexagonCluster2, hexagonCluster3} from './data';
-
-const MAPBOX_ACCESS_TOKEN =
-  'pk.eyJ1IjoiZ2Vvcmdpb3MtdWJlciIsImEiOiJjanZidTZzczAwajMxNGVwOGZrd2E5NG90In0.gdsRu_UeU_uPi9IulBruXA';
+import MapLibre from 'maplibre-gl';
 
 const SELECTED_FILL_COLOR = [50, 100, 200, 230];
 const UNSELECTED_FILL_COLOR = [50, 100, 200, 100];
@@ -197,7 +195,10 @@ export function Example() {
         layers={[layer]}
         getCursor={layer.getCursor.bind(layer)}
       >
-        <StaticMap mapStyle={'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json'} />
+        <StaticMap
+          mapLib={MapLibre}
+          mapStyle={'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json'}
+        />
       </DeckGL>
       <Toolbar
         {...{
diff --git a/examples/editable-layers/editable-h3-cluster-layer/package.json b/examples/editable-layers/editable-h3-cluster-layer/package.json
@@ -15,7 +15,7 @@
     "@deck.gl/react": "^9.0.12",
     "@types/react": "^18.2.75",
     "@types/react-dom": "^18.2.24",
-    "mapbox-gl": "^3.2.0",
+    "maplibre-gl": "^4.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-map-gl": "^7.1.7"
diff --git a/examples/editable-layers/editor/example.tsx b/examples/editable-layers/editor/example.tsx
@@ -3,9 +3,7 @@ import DeckGL from '@deck.gl/react';
 import {ViewMode, EditableGeoJsonLayer} from '@deck.gl-community/editable-layers';
 import {Toolbox} from '@deck.gl-community/react-editable-layers';
 import StaticMap from 'react-map-gl';
-
-const MAPBOX_ACCESS_TOKEN =
-  'pk.eyJ1IjoiZ2Vvcmdpb3MtdWJlciIsImEiOiJjanZidTZzczAwajMxNGVwOGZrd2E5NG90In0.gdsRu_UeU_uPi9IulBruXA';
+import MapLibre from 'maplibre-gl';
 
 const initialViewState = {
   longitude: -122.43,
@@ -83,7 +81,10 @@ export function Example() {
             }
         }}
       >
-        <StaticMap mapStyle={'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json'} />
+        <StaticMap
+          mapLib={MapLibre}
+          mapStyle={'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json'}
+        />
       </DeckGL>
 
       <Toolbox
diff --git a/examples/editable-layers/editor/index.html b/examples/editable-layers/editor/index.html
@@ -4,7 +4,7 @@
         <meta charset="utf-8" />
         <title>deck.gl Community Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link href="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css" rel="stylesheet" />
+        <link href="https://unpkg.com/maplibre-gl@^4.1.3/dist/maplibre-gl.css" rel="stylesheet" />
     </head>
     <body></body>
     <script type="module" src="./app.tsx"></script>
diff --git a/examples/editable-layers/editor/package.json b/examples/editable-layers/editor/package.json
@@ -15,7 +15,7 @@
     "@deck.gl/react": "^9.0.12",
     "@types/react": "^18.2.74",
     "@types/react-dom": "^18.2.24",
-    "mapbox-gl": "^3.2.0",
+    "maplibre-gl": "^4.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-map-gl": "^7.1.7"
diff --git a/examples/editable-layers/overlays/example.tsx b/examples/editable-layers/overlays/example.tsx
@@ -4,6 +4,7 @@ import StaticMap from 'react-map-gl';
 import {INITIAL_COORDS, INITIAL_VIEW_STATE} from './constants';
 import {HtmlOverlay, HtmlOverlayItem} from '@deck.gl-community/react';
 import type {WikipediaEntry} from './types';
+import MapLibre from 'maplibre-gl';
 
 const styles = {
   mapContainer: {
@@ -58,7 +59,10 @@ const Example = () => {
   return (
     <div style={styles.mapContainer}>
       <DeckGL initialViewState={INITIAL_VIEW_STATE} controller={true}>
-        <StaticMap mapStyle="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json" />
+        <StaticMap
+          mapLib={MapLibre}
+          mapStyle="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
+        />
         {data ? (
           <HtmlOverlay>
             {data.map((feature) => (
diff --git a/examples/editable-layers/overlays/index.html b/examples/editable-layers/overlays/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <title>deck.gl Community Example</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css" rel="stylesheet" />
+    <link href="https://unpkg.com/maplibre-gl@^4.1.3/dist/maplibre-gl.css" rel="stylesheet" />
   </head>
   <body></body>
   <script type="module" src="./app.tsx"></script>
diff --git a/examples/editable-layers/overlays/package.json b/examples/editable-layers/overlays/package.json
@@ -14,7 +14,7 @@
     "@deck.gl/react": "^9.0.12",
     "@types/react": "^18.2.74",
     "@types/react-dom": "^18.2.24",
-    "mapbox-gl": "^3.2.0",
+    "maplibre-gl": "^4.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-map-gl": "^7.1.7"
diff --git a/examples/editable-layers/sf/example.tsx b/examples/editable-layers/sf/example.tsx
@@ -5,6 +5,7 @@ import CSS from 'csstype';
 import DeckGL from '@deck.gl/react';
 import {WebMercatorViewport} from '@deck.gl/core';
 import {TextLayer} from '@deck.gl/layers';
+import MapLibre from 'maplibre-gl';
 
 import {
   NebulaCore,
@@ -306,8 +307,9 @@ export default class Example extends React.Component<
 
     return (
       <div style={mapContainerStyle}>
-        <link href="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css" rel="stylesheet" />
+        <link href="https://unpkg.com/maplibre-gl@^4.1.3/dist/maplibre-gl.css" rel="stylesheet" />
         <StaticMap
+          mapLib={MapLibre}
           {...viewState}
           mapStyle={'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json'}
         >
diff --git a/examples/editable-layers/sf/index.html b/examples/editable-layers/sf/index.html
@@ -4,7 +4,7 @@
         <meta charset="utf-8" />
         <title>deck.gl Community Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link href="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css" rel="stylesheet" />
+        <link href="https://unpkg.com/maplibre-gl@^4.1.3/dist/maplibre-gl.css" rel="stylesheet" />
     </head>
     <body></body>
     <script type="module" src="./app.tsx"></script>
diff --git a/examples/editable-layers/sf/package.json b/examples/editable-layers/sf/package.json
@@ -16,7 +16,7 @@
     "@luma.gl/webgl": "^9.0.12",
     "@types/react": "^18.2.75",
     "@types/react-dom": "^18.2.24",
-    "mapbox-gl": "^3.2.0",
+    "maplibre-gl": "^4.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-map-gl": "^7.1.7"

Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,3 @@ if (document.body) {`
`12`	`12`	`const root = createRoot(container);`
`13`	`13`	`root.render(<Example />);`
`14`	`14`	`}`
`15`		`-`
`16`		`-// eslint-disable-next-line no-console`
`17`		`-console.info('MapboxAccessToken', import.meta.env.VITE_MAPBOX_ACCESS_TOKEN);`