implement default MapToolbar & Legend

Author: sheppard

packages/leaflet/src/components/MapContainer.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export default function MapContainer({ children }) {
+    const [mapTools, map] = React.children(children).toArray();
+    return React.cloneElement(map, {}, [mapTools, ...map.props.children]);
+}

packages/leaflet/src/components/Legend.js renamed to packages/leaflet/src/components/MapToolbar.js

@@ -2,8 +2,21 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { LayersControl } from 'react-leaflet';
 const { BaseLayer, Overlay } = LayersControl;
+import { useComponents } from '@wq/react';
 
-export default function Legend({ position, collapsed, children }) {
+export default function MapToolbar({
+    overlays,
+    basemaps,
+    context,
+    position,
+    collapsed
+}) {
+    const {
+        AutoBasemap,
+        AutoOverlay,
+        BasemapToggle,
+        OverlayToggle
+    } = useComponents();
     if (!position) {
         position = 'topright';
     }
@@ -12,11 +25,31 @@ export default function Legend({ position, collapsed, children }) {
     }
     return (
         <LayersControl position={position} collapsed={collapsed}>
-            {children}
+            {basemaps.map(conf => (
+                <BasemapToggle
+                    key={conf.name}
+                    name={conf.name}
+                    active={conf.active}
+                >
+                    <AutoBasemap {...conf} />
+                </BasemapToggle>
+            ))}
+            {overlays.map(conf => (
+                <OverlayToggle
+                    key={conf.name}
+                    name={conf.name}
+                    active={conf.active}
+                >
+                    <AutoOverlay {...conf} context={context} />
+                </OverlayToggle>
+            ))}
         </LayersControl>
     );
 }
-Legend.propTypes = {
+MapToolbar.propTypes = {
+    overlays: PropTypes.arrayOf(PropTypes.object),
+    basemaps: PropTypes.arrayOf(PropTypes.object),
+    context: PropTypes.object,
     position: PropTypes.object,
     collapsed: PropTypes.bool,
     children: PropTypes.node

packages/leaflet/src/components/index.js

@@ -1,5 +1,13 @@
+import MapContainer from './MapContainer';
+import MapToolbar, { BasemapToggle, OverlayToggle } from './MapToolbar';
 import Map from './Map';
 import MapAutoZoom from './MapAutoZoom';
-import Legend, { BasemapToggle, OverlayToggle } from './Legend';
 
-export { Map, MapAutoZoom, Legend, BasemapToggle, OverlayToggle };
+export {
+    MapContainer,
+    MapToolbar,
+    Map,
+    MapAutoZoom,
+    BasemapToggle,
+    OverlayToggle
+};

packages/leaflet/src/index.js

@@ -1,8 +1,9 @@
 import map from '@wq/map';
 import {
+    MapContainer,
+    MapToolbar,
     Map,
     MapAutoZoom,
-    Legend,
     BasemapToggle,
     OverlayToggle
 } from './components/index';
@@ -44,9 +45,11 @@ export default {
         }));
     },
     components: {
+        MapContainer,
+        MapToolbar,
         Map,
         MapAutoZoom,
-        Legend,
+        MapLayers: () => null,
         BasemapToggle,
         OverlayToggle
     },
@@ -74,8 +77,9 @@ export default {
 };
 
 export {
+    MapContainer,
+    MapToolbar,
     Map,
-    Legend,
     BasemapToggle,
     OverlayToggle,
     Tile,

packages/map-gl/src/components/BasemapToggle.js

@@ -0,0 +1,3 @@
+import { Fragment } from 'react';
+
+export default Fragment;

packages/map-gl/src/components/Legend.js

@@ -1,17 +1,7 @@
-import BasemapToggle from './BasemapToggle';
-import Legend from './Legend';
 import Map from './Map';
 import MapInteraction from './MapInteraction';
 import MapAutoZoom from './MapAutoZoom';
 import MapIdentify from './MapIdentify';
-import OverlayToggle from './OverlayToggle';
+import MapLayers from './MapLayers';
 
-export {
-    BasemapToggle,
-    Legend,
-    Map,
-    MapInteraction,
-    MapAutoZoom,
-    MapIdentify,
-    OverlayToggle
-};
+export { Map, MapInteraction, MapAutoZoom, MapIdentify, MapLayers };

packages/map-gl/src/components/MapLayers.js

@@ -5,9 +5,7 @@ import {
     MapInteraction,
     MapAutoZoom,
     MapIdentify,
-    Legend,
-    BasemapToggle,
-    OverlayToggle
+    MapLayers
 } from './components/index';
 
 import { VectorTile, Tile } from './basemaps/index';
@@ -31,9 +29,7 @@ export default {
         MapInteraction,
         MapAutoZoom,
         MapIdentify,
-        Legend,
-        BasemapToggle,
-        OverlayToggle
+        MapLayers
     },
     basemaps: {
         VectorTile,
@@ -55,9 +51,6 @@ export {
     MapInteraction,
     MapAutoZoom,
     MapIdentify,
-    Legend,
-    BasemapToggle,
-    OverlayToggle,
     VectorTile,
     Tile,
     Geojson,