Clustering + custom map layer

home/App.tsx

@@ -6,6 +6,7 @@ import Polygons from "./Polygons";
 import Element from "./Element";
 import RouteInfo from './RouteInfo'
 import MapElement from './MapElement'
+import Clustering from './Clustering'
 
 declare global {
   interface Window {
@@ -23,6 +24,7 @@ const App = () => {
       <DynamicRoute />
       <Polygons />
       <RouteInfo />
+      <Clustering />
     </>
   )
 }

home/Clustering.tsx

@@ -0,0 +1,68 @@
+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 {githubGist} from "react-syntax-highlighter/dist/esm/styles/hljs";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import Section from "./components/Section";
+
+const SElement = styled(Section)`
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+`;
+
+const Clustering = () => {
+  const code = `
+    <Map height="200px" center={{lat: 50.0755, lng: 14.4378}}>
+      <KeyboardControl/>
+      <ZoomControl/>
+      <MouseControl zoom={true} pan={true} wheel={true}/>
+      <CompassControl right={10} top={50}/>
+      <SyncControl />
+      <MarkerLayer>
+        <Marker coords={{lat: 50.0755, lng: 14.4378}} card={markerCard}/>
+      </MarkerLayer>
+    </Map>
+  `
+
+  const markerCard = {
+    header: "<strong>Card header</strong>",
+    body: "<p>Card body</p><img src='https://via.placeholder.com/150x60/454545/eb4034'/>",
+    footer: "Card footer",
+    options: {
+      width: 200,
+      height: 200,
+    }
+  }
+
+  return (
+    <SElement id="section-element">
+      <div style={{width: '40%'}}>
+        <Map height="600px" center={{lat: 50.0755, lng: 14.4378}}>
+          <KeyboardControl/>
+          <ZoomControl/>
+          <MouseControl zoom={true} pan={true} wheel={true}/>
+          <CompassControl right={10} top={50}/>
+          <SyncControl />
+          <MarkerLayer enableClustering={true}>
+            <Marker coords={{lat: 50.0755, lng: 14.4378}} card={markerCard} />
+            <Marker coords={{lat: 50.0760, lng: 14.4378}} card={markerCard} />
+            <Marker coords={{lat: 50.0960, lng: 14.4378}} card={markerCard} />
+            <Marker coords={{lat: 50.1, lng: 14.4378}} card={markerCard} />
+          </MarkerLayer>
+        </Map>
+        <SyntaxHighlighter
+          language="jsx"
+          wrapLongLines={true}
+          style={githubGist}
+        >
+          {code}
+        </SyntaxHighlighter>
+      </div>
+
+    </SElement>
+  )
+}
+
+export default Clustering;

src/Map.tsx

@@ -37,18 +37,29 @@ const handleEventListener = (e: MapEvent, sMap: unknown, onEvent: MapEventListen
   onEvent(e, coordinates)
 }
 
+
 const Map = (props: MapProps) => {
   const mapNode = useRef(null);
   const [map, setMap] = useState<any>(null);
   const {width, height, children, onEvent, eventNameListener = "*", zoom, center, animateCenterZoom} = props;
 
+  const customLayer = new window.SMap.Layer.WMS(null, "https://services.cuzk.cz/wms/local-km-wms.asp", {layers:"KN,bp,bp_ppbp"});
+
+
   useEffect(() => {
     if (!map && mapNode) {
       const centerCoords = center ? window.SMap.Coords.fromWGS84(center.lng, center.lat) : undefined;
       const sMap = new window.SMap(mapNode.current, centerCoords, zoom);
-      const l = sMap.addDefaultLayer(props.baseLayer ?? BaseLayers.TURIST_NEW);
+      // const l = sMap.addDefaultLayer(props.baseLayer ?? BaseLayers.TURIST_NEW);
+
+      console.log('-- layer --', customLayer)
+      const l = sMap.addLayer(customLayer);
       l.enable();
 
+      console.log('-called-')
+
+      //
+
       setMap(sMap);
       if (onEvent) {
         const signals = sMap.getSignals();

src/MarkerLayer.tsx

@@ -19,7 +19,7 @@ const MarkerLayer = ({children, enableClustering, clusterConfig, id}: MarkerLaye
         const clusterer = new window.SMap.Marker.Clusterer(
             map,
             clusterConfig?.maxDistance,
-            clusterConfig?.clusterCtor
+            window.SMap.Marker.Cluster(id, { color: "#ff0000"})
         );
         markerLayer.setClusterer(clusterer);
     }
@@ -37,4 +37,4 @@ const MarkerLayer = ({children, enableClustering, clusterConfig, id}: MarkerLaye
     return <MarkerLayerContext.Provider value={markerLayer}>{children}</MarkerLayerContext.Provider>;
 }
 
-export default MarkerLayer;
+export default MarkerLayer;