examples: Use maplibre export from react-map-gl (#77)

birkskyum · web-flow · commit f23e7ebb7b11 · 2024-05-02T07:06:22.000-04:00
diff --git a/examples/editable-layers/advanced/src/example.tsx b/examples/editable-layers/advanced/src/example.tsx
@@ -2,10 +2,9 @@
 import * as React from 'react';
 import DeckGL from '@deck.gl/react';
 import {MapView, MapController} from '@deck.gl/core';
-import StaticMap from 'react-map-gl';
+import StaticMap from 'react-map-gl/maplibre';
 import {GL} from '@luma.gl/constants';
 import circle from '@turf/circle';
-import MapLibre from 'maplibre-gl';
 
 import {
   EditableGeoJsonLayer,
@@ -829,7 +828,6 @@ 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.json'}
       />
diff --git a/examples/editable-layers/codesandbox/getting-started/index.js b/examples/editable-layers/codesandbox/getting-started/index.js
@@ -4,8 +4,7 @@ import DeckGL from '@deck.gl/react';
 // TODO Enable eslint after package is published.
 // eslint-disable-next-line import/named, import/no-extraneous-dependencies
 import {HtmlOverlayItem, HtmlClusterOverlay} from '@deck.gl-community/react';
-import StaticMap from 'react-map-gl';
-import MapLibre from 'maplibre-gl';
+import StaticMap from 'react-map-gl/maplibre';
 
 const DATA_URL = 'https://cors-tube.vercel.app/?url=https://whc.unesco.org/en/list/georss/';
 
@@ -117,7 +116,7 @@ export class WorldHeritageApp extends React.Component {
   render() {
     return (
       <DeckGL initialViewState={initialViewState} controller={true}>
-        <StaticMap mapLib={MapLibre} />
+        <StaticMap />
         {this.renderWorldHeritage()}
       </DeckGL>
     );
diff --git a/examples/editable-layers/codesandbox/world-heritage/index.js b/examples/editable-layers/codesandbox/world-heritage/index.js
@@ -4,8 +4,7 @@ import DeckGL from '@deck.gl/react';
 // TODO Enable eslint after package is published.
 // eslint-disable-next-line import/named
 import {HtmlOverlayItem, HtmlClusterOverlay} from '@deck.gl-community/react';
-import {StaticMap} from 'react-map-gl';
-import MapLibre from 'maplibre-gl';
+import {StaticMap} from 'react-map-gl/maplibre';
 
 const DATA_URL = 'https://cors-tube.vercel.app/?url=https://whc.unesco.org/en/list/georss/';
 
@@ -117,7 +116,7 @@ export class WorldHeritageApp extends React.Component {
   render() {
     return (
       <DeckGL initialViewState={initialViewState} controller={true}>
-        <StaticMap mapLib={MapLibre} />
+        <StaticMap />
         {this.renderWorldHeritage()}
       </DeckGL>
     );
diff --git a/examples/editable-layers/editable-h3-cluster-layer/index.tsx b/examples/editable-layers/editable-h3-cluster-layer/index.tsx
@@ -8,9 +8,8 @@ import {
   DrawCircleFromCenterMode,
   DrawRectangleMode
 } from '@deck.gl-community/editable-layers';
-import StaticMap from 'react-map-gl';
+import StaticMap from 'react-map-gl/maplibre';
 import {hexagonCluster1, hexagonCluster2, hexagonCluster3} from './data';
-import MapLibre from 'maplibre-gl';
 
 const SELECTED_FILL_COLOR = [50, 100, 200, 230];
 const UNSELECTED_FILL_COLOR = [50, 100, 200, 100];
@@ -195,10 +194,7 @@ export function Example() {
         layers={[layer]}
         getCursor={layer.getCursor.bind(layer)}
       >
-        <StaticMap
-          mapLib={MapLibre}
-          mapStyle={'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json'}
-        />
+        <StaticMap mapStyle={'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json'} />
       </DeckGL>
       <Toolbar
         {...{
diff --git a/examples/editable-layers/editor/example.tsx b/examples/editable-layers/editor/example.tsx
@@ -2,8 +2,7 @@ import React, {useState} from 'react';
 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';
-import MapLibre from 'maplibre-gl';
+import StaticMap from 'react-map-gl/maplibre';
 
 const initialViewState = {
   longitude: -122.43,
@@ -81,10 +80,7 @@ export function Example() {
             }
         }}
       >
-        <StaticMap
-          mapLib={MapLibre}
-          mapStyle={'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json'}
-        />
+        <StaticMap mapStyle={'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json'} />
       </DeckGL>
 
       <Toolbox
diff --git a/examples/editable-layers/overlays/example.tsx b/examples/editable-layers/overlays/example.tsx
@@ -1,10 +1,9 @@
 import React, {useEffect, useState} from 'react';
 import DeckGL from '@deck.gl/react';
-import StaticMap from 'react-map-gl';
+import StaticMap from 'react-map-gl/maplibre';
 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: {
@@ -59,10 +58,7 @@ const Example = () => {
   return (
     <div style={styles.mapContainer}>
       <DeckGL initialViewState={INITIAL_VIEW_STATE} controller={true}>
-        <StaticMap
-          mapLib={MapLibre}
-          mapStyle="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
-        />
+        <StaticMap mapStyle="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json" />
         {data ? (
           <HtmlOverlay>
             {data.map((feature) => (
diff --git a/examples/editable-layers/sf/example.tsx b/examples/editable-layers/sf/example.tsx
@@ -1,11 +1,10 @@
 import * as React from 'react';
-import StaticMap from 'react-map-gl';
+import StaticMap from 'react-map-gl/maplibre';
 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,
@@ -309,7 +308,6 @@ export default class Example extends React.Component<
       <div style={mapContainerStyle}>
         <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/website/src/doc-demos/demo-base.js b/website/src/doc-demos/demo-base.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import DeckGL from '@deck.gl/react';
-import {Map} from 'react-map-gl';
+import {Map} from 'react-map-gl/maplibre';
 import styled from 'styled-components';
 import {useColorMode} from '@docusaurus/theme-common';
 import {MAPBOX_STYLES} from '../constants/defaults';
@@ -129,7 +129,6 @@ export function makeLayerDemo(config) {
             {mapStyle && (
               <Map
                 reuseMaps
-                mapLib={import('maplibre-gl')}
                 mapStyle={mapStyleSheet}
                 preventStyleDiffing={true}
               />
