Added default layer and view to map.tsx, so that users doesn't need to add them

Author: allen-kim-chi

src/lib/Map.tsx

@@ -1,41 +1,62 @@
 import {
-  forwardRef, useImperativeHandle,
-  useRef, useEffect, useState,
-  createContext, useContext,
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+  useState,
+  createContext,
+  useContext,
 } from 'react';
-import * as ol from 'ol';
 import {defaults as defaultControls} from 'ol/control/defaults.js';
-import VectorLayer from 'ol/layer/Vector';
-import VectorSource from 'ol/source/Vector';
+import { Map as OlMap } from 'ol';
+import View from 'ol/View'; 
 import './ol.css';
 import './Map.css';
+import TileLayer from 'ol/layer/Tile';
+import { OSM } from 'ol/source';
 
-const MapContext = createContext<ol.Map>(undefined);
+interface MapProps {
+  children?: React.ReactNode;
+  [key: string]: any; // Allow other OpenLayers Map options
+}
+
+const MapContext = createContext<OlMap | undefined>(undefined);
+
+export const useMap = () => {
+  const map = useContext(MapContext);
+  // if (!map) throw new Error('useMap must be used within a Map component');
+  return map;
+};
 
-export const Map = forwardRef( (props:any, ref:any) => {
-  const [map, setMap] = useState<ol.Map>();
-  const mapRef = useRef<any>();
+export const Map = forwardRef<OlMap | undefined, MapProps>((props, ref) => {
+  const [map, setMap] = useState<OlMap>();
+  const mapRef = useRef<HTMLDivElement>(null); // Type the DOM ref
 
   useImperativeHandle(ref, () => map, [map]);
 
-  const markerLayer = new VectorLayer({
-    source: new VectorSource({ features: [] }),
-    properties: {key: 'markerLayer'},
-    zIndex: 1,
-  });
+  const mounted = useRef(false);
+  const defaultLayer = new TileLayer({ source: new OSM() }); 
 
   useEffect(() => {
-    if (!mapRef.current) return;
-    const mapProps = {...{
-      target: mapRef.current,
-      layers: [markerLayer],
-      controls: defaultControls(),
-    }, ...props}
-    const notInitialized = mapRef.current?.children?.length === 0;
-    if (notInitialized) { // Do not render twice with <React.StriceMode>
-      const olMap = new ol.Map(mapProps);
-      setMap(olMap);
-    }
+    if (!mapRef.current || mounted.current) return;
+    const mapProps = {
+      ...{
+        target: mapRef.current,
+        layers: [defaultLayer],
+        controls: defaultControls(),
+        view: new View({
+          center: [0, 0], // Default to [lon, lat]
+          zoom: 2, // Default zoom level
+        }),
+      },
+      ...props, // Override with props.view if provided
+    };
+    const olMap = new OlMap(mapProps);
+    setMap(olMap);
+    mounted.current = true;
+    return () => {
+      olMap.setTarget(null);
+    };
   }, []);
 
   return (
@@ -45,7 +66,4 @@ export const Map = forwardRef( (props:any, ref:any) => {
       </div>
     </MapContext.Provider>
   );
-}
-);
-
-export const useMap = () => useContext(MapContext);
+});

src/lib/Marker.tsx

@@ -1,12 +1,13 @@
 import { useEffect } from 'react';
-import * as ol from 'ol';
-import {fromLonLat, toLonLat} from 'ol/proj';
+import { Feature as OlFeature } from 'ol';
+import { fromLonLat, toLonLat } from 'ol/proj';
 import Style from 'ol/style/Style';
 import Icon from 'ol/style/Icon';
 import Point from 'ol/geom/Point';
 import VectorLayer from 'ol/layer/Vector';
 import { useMap } from './Map';
 import { getLonLat } from './util';
+import VectorSource from 'ol/source/Vector';
 
 export function getMarkerImage(color='red', text='A') {
   return `data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E` +
@@ -28,6 +29,43 @@ function getNextChar(char) {
   }
 }
 
+
+function addMarker(markerLayer, lonLat, color, char) {
+  const markerFeature = new OlFeature({
+    geometry: new Point(fromLonLat(lonLat))
+  });
+  markerFeature.setStyle(new Style({
+    image: new Icon({
+      scale: 1,
+      anchor: [0.5,40],
+      anchorXUnits: 'fraction',
+      anchorYUnits: 'pixels',
+      src: getMarkerImage(color, char)
+    }),
+  }));
+
+  markerLayer.getSource().addFeature(markerFeature);
+  return markerFeature;
+}
+
+function getMarkerLayer(map) {
+  const markerLayer = map.getLayers().getArray()
+    .find(el => el.get('key') === 'markerLayer') as VectorLayer;
+  if (markerLayer) {
+    return markerLayer;
+  }
+
+  // container of markers, this can be set when marker is added, so that I can remove it here.
+  const newMarkerLayer = new VectorLayer({
+    source: new VectorSource({ features: [] }),
+    properties: {key: 'markerLayer'},
+    zIndex: 1,
+  });
+
+  map.addLayer(newMarkerLayer);
+  return newMarkerLayer;
+}
+
 export function Marker({
   lonLat=undefined,
   address=undefined,
@@ -39,29 +77,11 @@ export function Marker({
   const map = useMap();
   let markerChar = char;
 
-  function addMarker(layer, lonLat, color, char) {
-    const markerFeature = new ol.Feature({
-      geometry: new Point(fromLonLat(lonLat))
-    });
-    markerFeature.setStyle(new Style({
-      image: new Icon({
-        scale: 1,
-        anchor: [0.5,40],
-        anchorXUnits: 'fraction',
-        anchorYUnits: 'pixels',
-        src: getMarkerImage(color, char)
-      }),
-    }));
-
-    layer.getSource().addFeature(markerFeature);
-    return markerFeature;
-  }
-
   useEffect(() => {
     if (!map) return;
 
-    const markerLayer = map.getLayers().getArray()
-      .find(el => el.get('key') === 'markerLayer') as VectorLayer;
+    const markerLayer = getMarkerLayer(map);
+
     if (lonLat) {
       addMarker(markerLayer, lonLat, color, markerChar);
       map.getView().setCenter(fromLonLat(lonLat))

src/lib/layers/LayerGroup.tsx

@@ -0,0 +1,43 @@
+import * as ol from 'ol';
+import { createContext, useContext, useEffect, useRef } from 'react';
+import olLayerGroup from 'ol/layer/Group';
+import { useMap } from '../Map';
+
+const LayerGroupContext = createContext<olLayerGroup | undefined>(undefined);
+
+export const useGroup = () => useContext(LayerGroupContext);
+
+export const LayerGroup = (props: any) => {
+  const map = useMap();
+  const parentGroup = useContext(LayerGroupContext); // Check for a parent LayerGroup
+  const layerGroupRef = useRef(new olLayerGroup(props));
+
+  useEffect(() => {
+    const layerGroup = layerGroupRef.current;
+    const target = parentGroup || map; // Prefer parent LayerGroup, else Map
+
+    if (target) {
+      if (target instanceof ol.Map) {
+        target.addLayer(layerGroup);
+      } else {
+        target.getLayers().push(layerGroup); // Add to parent LayerGroup
+      }
+    }
+
+    return () => {
+      if (target) {
+        if (target instanceof ol.Map) {
+          target.removeLayer(layerGroup);
+        } else {
+          target.getLayers().remove(layerGroup);
+        }
+      }
+    };
+  }, [map, parentGroup]);
+
+  return (
+    <LayerGroupContext.Provider value={layerGroupRef.current}>
+      {props.children}
+    </LayerGroupContext.Provider>
+  );
+};

src/lib/layers/TileLayer.tsx

@@ -1,15 +1,38 @@
-import { useEffect } from 'react';
+import * as ol from 'ol';
+import { useEffect, useRef } from 'react';
 import OlTileLayer from 'ol/layer/Tile';
 import { useMap } from '../Map';
+import { useGroup } from './LayerGroup';
 
-export function TileLayer(props) {
+export function TileLayer(props: any) {
   const map = useMap();
+  const group = useGroup();
+  const layerRef = useRef(new OlTileLayer(props)); // single instance
 
   useEffect(() => {
-    if (!map) return;
-    const layer = new OlTileLayer(props);
-    map.addLayer(layer);
-  }, [map]);
+    if (!map && !group) return;
+
+    const layer = layerRef.current; // same instance every time
+    const target = group || map;
+
+    if (target) {
+      if (target instanceof ol.Map) {
+        target.addLayer(layer);
+      } else {
+        target.getLayers().push(layer);
+      }
+    }
+
+    return () => {
+      if (target) {
+        if (target instanceof ol.Map) {
+          target.removeLayer(layer);
+        } else {
+          target.getLayers().remove(layer);
+        }
+      }
+    };
+  }, [map, group]);
 
   return null;
-};
+}

src/stories/Map/Map.mdx

@@ -11,20 +11,8 @@ https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html
 
 ### Usage
 ```typescript
-import * as ol from 'ol';
-import { OSM } from 'ol/source';
-import { Map, View, TileLayer } from 'react-openlayers';
-
-export default function(props) {
-  const mapRef= useRef<ol.Map>();
-  setTimeout(() => console.log(olMap.current), 1000));
-
-  return ( 
-    <Map ref={mapRef} controls={[]} interactions={[]}>
-      <TileLayer source={new OSM()} />
-      <View center={[-10997148, 4569099]} zoom={4}/>
-    </Map>
-  );
+export default function() {
+  return <Map />;
 }
 ```
 

src/stories/Map/Map.stories.tsx

@@ -7,19 +7,7 @@ export default { title: 'Map' } as Meta;
 declare let window:any;
 
 export const Primary: StoryObj<any> = {
-  render: (props) => {
-    const mapRef = useRef();
-
-    setTimeout(() => {
-      window.map=mapRef.current;
-      console.log({map: window.map});
-    }, 1000);
-
-    return (
-      <Map ref={mapRef} controls={[]} interactions={[]}>
-        <TileLayer source={new OSM()} />
-        <View center={[0,0]} zoom={4}/>
-      </Map>
-    );
+  render: () => {
+    return <Map />;
   }
 }

src/stories/controls/AttributionControl/AttributionControl.mdx

@@ -15,15 +15,12 @@ https://openlayers.org/en/latest/apidoc/module-ol_control_Attribution-Attributio
 
 ### Usage
 ```typescript
-import OSM from 'ol/source/OSM';
 import { Map, TileLayer, View, AttributionControl } from 'react-openlayers';
 
 export default function(props) {
-  const mapRef = useRef();
   return (
-    <Map ref={mapRef}>
+    <Map controls={[]}>
       <AttributionControl attributions="Hello me"/>
-      <TileLayer source={new OSM()} />
       <View center={[-10997148, 4569099]} zoom={4}/>
     </Map>
   )

src/stories/controls/AttributionControl/AttributionControl.stories.tsx

@@ -8,9 +8,8 @@ export default {
 export const Primary = {
   render: (props) => {
     return (
-      <Map>
+      <Map controls={[]}>
         <AttributionControl collapsible={true} attributions='Hello Attribution' />
-        <TileLayer source={new OSM()} />
         <View center={[-10997148, 4569099]} zoom={4}/>
       </Map>
     );

src/stories/controls/DrawControl/DrawControl.mdx

@@ -22,15 +22,12 @@ Press shift key for freehand drawing.
 
 ### Usage
 ```typescript
-import OSM from 'ol/source/OSM';
 import { Map, TileLayer, View, DrawControl, SelectInteraction, ModifyInteraction } from 'react-openlayers';
 
 export default function(props) {
-  const mapRef = useRef();
   return (
-    <Map ref={mapRef}>
+    <Map controls={[]}>
       <DrawControl />
-      <TileLayer source={new OSM()} />
       <View center={[-10997148, 4569099]} zoom={4}/>
       <SelectInteraction />
       <TranslateInteraction />

src/stories/controls/DrawControl/DrawControl.stories.tsx

@@ -1,4 +1,3 @@
-import OSM from 'ol/source/OSM';
 import {Map, TileLayer, View, DrawControl, SelectInteraction, TranslateInteraction} from '../../../lib';
 
 export default {
@@ -8,9 +7,8 @@ export default {
 export const Primary = {
   render: (props) => {
     return (
-      <Map>
+      <Map controls={[]}>
         <DrawControl />
-        <TileLayer source={new OSM()} />
         <View center={[-10997148, 4569099]} zoom={4}/>
         <SelectInteraction />
         <TranslateInteraction />