remove map wrapper

docs/components/Leaflet.tsx

@@ -1,70 +0,0 @@
-import React, { ReactElement, useRef, useEffect } from 'react';
-import 'leaflet/dist/leaflet.css';
-import { Map, TileLayer } from 'react-leaflet';
-
-import '../../assets/css/leaflet.css';
-import useConfigureLeaflet from '../hooks/useConfigureLeaflet';
-import * as providers from '../../src/providers';
-import GeoSearchControl from '../../src/leafletControl';
-import styles from './Leaflet.module.css';
-
-import { MapProps } from './Map';
-
-const providerMap = {
-  Bing: new providers.BingProvider({
-    params: { key: process.env.GATSBY_BING_API_KEY },
-  }),
-  Esri: new providers.EsriProvider(),
-  Google: new providers.GoogleProvider({
-    params: { key: process.env.GATSBY_GOOGLE_API_KEY },
-  }),
-  LocationIQ: new providers.LocationIQProvider({
-    params: { key: process.env.GATSBY_LOCATIONIQ_API_KEY },
-  }),
-  OpenCage: new providers.OpenCageProvider({
-    params: { key: process.env.GATSBY_OPENCAGE_API_KEY },
-  }),
-  OpenStreetMap: new providers.OpenStreetMapProvider(),
-};
-
-function Leaflet(props: MapProps): ReactElement {
-  const { provider = 'OpenStreetMap' } = props;
-
-  const ref = useRef(null);
-  const control = useRef(null);
-
-  const { viewport } = useConfigureLeaflet();
-
-  useEffect(() => {
-    if (ref.current) {
-      if (!providerMap[provider]) {
-        throw new Error('unknown provider');
-      }
-
-      control.current = GeoSearchControl({
-        style: 'bar',
-        provider: providerMap[provider],
-      });
-
-      ref.current.leafletElement.addControl(control.current);
-    }
-
-    return () => {
-      if (control.current) {
-        ref.current.leafletElement.removeControl(control.current);
-      }
-    };
-  }, [ref.current, control.current, provider]);
-
-  // I'm not sure what's causing it, but the className from the outer
-  // div is being removed. Hence the useless wrapper
-  return (
-    <div>
-      <Map ref={ref} viewport={viewport} id="map" className={styles.map}>
-        <TileLayer url="//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
-      </Map>
-    </div>
-  );
-}
-
-export default Leaflet;

docs/components/Map.tsx

@@ -1,17 +1,77 @@
-import React, { ReactElement } from 'react';
-import Leaflet from './Leaflet';
+import React, { ReactElement, useRef, useEffect } from 'react';
+import 'leaflet/dist/leaflet.css';
+import { Map as BaseMap, TileLayer } from 'react-leaflet';
+
+import '../../assets/css/leaflet.css';
+import useConfigureLeaflet from '../hooks/useConfigureLeaflet';
+import * as providers from '../../src/providers';
+import GeoSearchControl from '../../src/leafletControl';
+import styles from './Map.module.css';
 
 export interface MapProps {
   provider?: 'OpenStreetMap' | 'Google' | 'Bing';
   providerOptions: any;
 }
 
+const providerMap = {
+  Bing: new providers.BingProvider({
+    params: { key: process.env.GATSBY_BING_API_KEY },
+  }),
+  Esri: new providers.EsriProvider(),
+  Google: new providers.GoogleProvider({
+    params: { key: process.env.GATSBY_GOOGLE_API_KEY },
+  }),
+  LocationIQ: new providers.LocationIQProvider({
+    params: { key: process.env.GATSBY_LOCATIONIQ_API_KEY },
+  }),
+  OpenCage: new providers.OpenCageProvider({
+    params: { key: process.env.GATSBY_OPENCAGE_API_KEY },
+  }),
+  OpenStreetMap: new providers.OpenStreetMapProvider(),
+};
+
 function Map(props: MapProps): ReactElement {
+  const { provider = 'OpenStreetMap' } = props;
+
+  const ref = useRef(null);
+  const control = useRef(null);
+
+  const { viewport } = useConfigureLeaflet();
+
+  useEffect(() => {
+    if (ref.current) {
+      if (!providerMap[provider]) {
+        throw new Error('unknown provider');
+      }
+
+      control.current = GeoSearchControl({
+        style: 'bar',
+        provider: providerMap[provider],
+      });
+
+      ref.current.leafletElement.addControl(control.current);
+    }
+
+    return () => {
+      if (control.current) {
+        ref.current.leafletElement.removeControl(control.current);
+      }
+    };
+  }, [ref.current, control.current, provider]);
+
   if (typeof window === 'undefined') {
     return <div>loading...</div>;
   }
 
-  return <Leaflet provider={props.provider} />;
+  // I'm not sure what's causing it, but the className from the outer
+  // div is being removed. Hence the useless wrapper
+  return (
+    <div>
+      <BaseMap ref={ref} viewport={viewport} id="map" className={styles.map}>
+        <TileLayer url="//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
+      </BaseMap>
+    </div>
+  );
 }
 
 export default Map;