Added layout control (#569)

kolebjak · Aug 27, 2023 · 6da1651 · 6da1651
1 parent 9e7b567
commit 6da1651
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 11 deletions.
diff --git a/home/Element.tsx b/home/Element.tsx
@@ -1,7 +1,14 @@
 import React from 'react';
 import styled from "styled-components";
-import {CompassControl, KeyboardControl, MouseControl, SyncControl, ZoomControl} from "../src/controls";
-import {Map, Marker, MarkerLayer} from "../src";
+import {
+  CompassControl,
+  KeyboardControl,
+  LayoutControl,
+  MouseControl,
+  SyncControl,
+  ZoomControl,
+} from '../src/controls'
+import { BaseLayers, Map, Marker, MarkerLayer } from '../src'
 import {githubGist} from "react-syntax-highlighter/dist/esm/styles/hljs";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import Section from "./components/Section";
@@ -21,6 +28,7 @@ const Element = () => {
       <MouseControl zoom={true} pan={true} wheel={true}/>
       <CompassControl right={10} top={50}/>
       <SyncControl />
+      <LayoutControl layers={[BaseLayers.HISTORIC, BaseLayers.SMART_BASE, BaseLayers.GEOGRAPHY]} top={10} left={10} />
       <MarkerLayer>
         <Marker coords={{lat: 50.0755, lng: 14.4378}} card={markerCard}/>
       </MarkerLayer>
@@ -46,6 +54,7 @@ const Element = () => {
           <MouseControl zoom={true} pan={true} wheel={true}/>
           <CompassControl right={10} top={50}/>
           <SyncControl />
+          <LayoutControl layers={[BaseLayers.HISTORIC, BaseLayers.SMART_BASE, BaseLayers.GEOGRAPHY]} top={10} left={10} />
           <MarkerLayer>
             <Marker coords={{lat: 50.0755, lng: 14.4378}} card={markerCard} />
           </MarkerLayer>

diff --git a/home/MapElement.tsx b/home/MapElement.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
-import styled from "styled-components";
-import {Map} from "../src";
-import {githubGist} from "react-syntax-highlighter/dist/esm/styles/hljs";
-import SyntaxHighlighter from "react-syntax-highlighter";
-import Section from "./components/Section";
-import ScrollDown from "./components/ScrollDown";
+import React from 'react'
+import styled from 'styled-components'
+import { Map } from '../src'
+import { githubGist } from 'react-syntax-highlighter/dist/esm/styles/hljs'
+import SyntaxHighlighter from 'react-syntax-highlighter'
+import Section from './components/Section'
+import ScrollDown from './components/ScrollDown'
 
 const SMapElement = styled(Section)`
   display: flex;
@@ -29,7 +29,7 @@ const MapElement = () => {
           <li>zoom: <i>optional</i> Default map zoom, defaults to 13</li>
           <li>minZoom: <i>optional</i> Minimal map zoom, defaults to 1</li>
           <li>maxZoom: <i>optional</i> Max map zoom, defaults to 21</li>
-          <li>baseLayers: <i>optional</i> Map layers, array of values from <a target="_blank" href="https://github.com/flsy/react-mapycz/blob/master/src/BaseLayers.tsx">BaseLayers</a></li>
+          <li>baseLayer: <i>optional</i> Map layer, value from <a target="_blank" href="https://github.com/flsy/react-mapycz/blob/master/src/BaseLayers.tsx">BaseLayers</a> enum</li>
         </ul>
       </div>
       <div style={{width: '40%'}}>

diff --git a/src/controls/LayoutControl.tsx b/src/controls/LayoutControl.tsx
@@ -0,0 +1,29 @@
+import { useContext } from 'react';
+import { MapContext } from "../Map";
+import BaseLayers from '../BaseLayers'
+
+export type LayoutControlProps = {
+    layers: BaseLayers[]
+    left?: number;
+    top?: number;
+    right?: number;
+    bottom?: number;
+}
+
+const LayoutControl = ({ layers, left, top, bottom, right }: LayoutControlProps) => {
+    const map = useContext<any>(MapContext);
+    const layerControl = new window.SMap.Control.Layer({ width: 65, items: 2, page: 2 });
+
+    layers.forEach((layer) => {
+        map.addDefaultLayer(layer);
+        layerControl.addDefaultLayer(layer);
+    })
+
+    map.addControl(layerControl, { left: `${left}px`, top: `${top}px`, right: `${right}px`, bottom: `${bottom}px` });
+
+    return null;
+}
+
+LayoutControl.defaultProps = {}
+
+export default LayoutControl;
diff --git a/src/controls/index.tsx b/src/controls/index.tsx
@@ -3,9 +3,10 @@ export {default as CompassControl} from './CompassControl';
 export {default as MouseControl} from './MouseControl';
 export {default as KeyboardControl} from './KeyboardControl';
 export {default as SyncControl} from './SyncControl';
+export {default as LayoutControl} from './LayoutControl';
 
 export type {ZoomControlProps} from './ZoomControl';
 export type {CompassControlProps} from './CompassControl';
 export type {MouseControlProps} from './MouseControl';
 export type {KeyboardControlProps} from './KeyboardControl';
-export type {SyncControlProps, SyncControlOptions} from './SyncControl';
+export type {SyncControlProps, SyncControlOptions} from './SyncControl';