implement default MapToolbar & Legend

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 → 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/MapLayers.js

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

packages/map-gl/src/components/index.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/index.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,

packages/map/src/components/AutoMap.js

@@ -1,26 +1,28 @@
 import React from 'react';
-import { useComponents } from '@wq/react';
+import { useComponents, usePlugin } from '@wq/react';
 import { useMapState, useOverlayComponents } from '../hooks';
 import PropTypes from 'prop-types';
 
 export default function AutoMap({
  name,
+ toolbar = true,
  containerStyle,
  context,
  state,
  children
 }) {
  const mapState = useMapState(),
+ { showOverlay, hideOverlay, setBasemap } = usePlugin('map'),
  {
+ MapContainer,
+ MapToolbar,
  Map,
  MapInteraction,
  MapAutoZoom,
  MapIdentify,
+ MapLayers,
  AutoBasemap,
- AutoOverlay,
- Legend,
- BasemapToggle,
- OverlayToggle
+ AutoOverlay
  } = useComponents(),
  { Highlight } = useOverlayComponents();
 
@@ -44,40 +46,45 @@ export default function AutoMap({
  const identify = overlays.some(overlay => !!overlay.popup);
 
  return (
- <Map
- name={name}
- initBounds={initBounds}
- mapProps={mapProps}
- containerStyle={containerStyle}
- >
- <MapInteraction name={name} />
- {!!autoZoom && (
- <MapAutoZoom name={name} context={context} {...autoZoom} />
+ <MapContainer name={name}>
+ {toolbar && (
+ <MapToolbar
+ name={name}
+ basemaps={basemaps}
+ overlays={overlays}
+ showOverlay={showOverlay}
+ hideOverlay={hideOverlay}
+ setBasemap={setBasemap}
+ context={context}
+ />
  )}
- {identify && <MapIdentify name={name} context={context} />}
- <Legend>
- {basemaps.map((conf, i) => (
- <BasemapToggle
- key={i}
- name={conf.name}
- active={conf.active}
- >
- <AutoBasemap {...conf} />
- </BasemapToggle>
- ))}
- {overlays.map((conf, i) => (
- <OverlayToggle
- key={i}
- name={conf.name}
- active={conf.active}
- >
- <AutoOverlay {...conf} context={context} />
- </OverlayToggle>
- ))}
- </Legend>
- {highlight && <Highlight data={highlight} />}
- {children}
- </Map>
+ <Map
+ name={name}
+ initBounds={initBounds}
+ mapProps={mapProps}
+ containerStyle={containerStyle}
+ >
+ <MapInteraction name={name} />
+ {!!autoZoom && (
+ <MapAutoZoom name={name} context={context} {...autoZoom} />
+ )}
+ {identify && <MapIdentify name={name} context={context} />}
+ <MapLayers>
+ {basemaps.map(conf => (
+ <AutoBasemap key={conf.name} {...conf} />
+ ))}
+ {overlays.map(conf => (
+ <AutoOverlay
+ key={conf.name}
+ {...conf}
+ context={context}
+ />
+ ))}
+ </MapLayers>
+ {highlight && <Highlight data={highlight} />}
+ {children}
+ </Map>
+ </MapContainer>
  );
 }
 
@@ -91,6 +98,7 @@ AutoMap.makeComponent = props => {
 
 AutoMap.propTypes = {
  name: PropTypes.string,
+ toolbar: PropTypes.bool,
  containerStyle: PropTypes.object,
  context: PropTypes.object,
  state: PropTypes.object,

packages/map/src/components/BasemapToggle.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useComponents } from '@wq/react';
+import PropTypes from 'prop-types';
+
+export default function BasemapToggle({ name, active, setActive }) {
+ const { ListItem, RadioButton } = useComponents();
+ return (
+ <ListItem
+ button
+ dense
+ disableGutters
+ onClick={() => setActive(true)}
+ icon={() => (
+ <RadioButton
+ style={{ marginLeft: 9 }}
+ color="primary"
+ checked={active}
+ />
+ )}
+ >
+ {name}
+ </ListItem>
+ );
+}
+
+BasemapToggle.propTypes = {
+ name: PropTypes.string,
+ active: PropTypes.bool,
+ setActive: PropTypes.func
+};