fix: added external draw support for layerswitcher

Author: sjhoeksma

CHANGELOG.md

@@ -32,6 +32,9 @@
 * Make timeline example with https://service.pdok.nl/hwh/luchtfotocir/wms/v1_0?request=GetCapabilities&service=wms
 * implement cluster: https://openlayers.org/en/latest/examples/clusters-dynamic.html
 * add the custom projections to the ui as property editor
+* add option to control elements without the use of buttons
+* add bookmark options https://viglino.github.io/ol-ext/examples/control/map.control.geobookmark.html
+* add legend https://viglino.github.io/ol-ext/examples/legend/map.control.legends.html
 
 
 ### Bugs

src/GEOComp.tsx

@@ -161,7 +161,7 @@ var GEOComp = (function () {
         splitscreen: false,
         tracker: false,
         timeline: false,
-        gpsCentered: false,
+        gpsCentered: true,
         north: false,
         scale: true,
         largeButtons: true,
@@ -180,6 +180,7 @@ var GEOComp = (function () {
         "splitscreen:vertical": false,
         debug: geoContext.previewMode,
       }),
+    external: jsonObjectExposingStateControl("external"),
   };
 
 
@@ -207,6 +208,7 @@ var GEOComp = (function () {
     startDate: string;
     endDate: string;
     extent: any;
+    external: any
 
     test: any
   }) => {
@@ -332,6 +334,7 @@ var GEOComp = (function () {
             startDate={props.startDate}
             endDate={props.endDate}
             extent={props.extent}
+            external={props.external.value}
           />
         </div>
       </div>
@@ -651,4 +654,5 @@ export default withExposingConfigs(GEOComp, [
   new NameConfig("event", trans("component.event")),
   new NameConfig("bbox", trans("component.bbox")),
   new NameConfig("feature", trans("component.feature")),
+  new NameConfig("external", trans("component.external")),
 ]);

src/i18n/comps/locales/en.ts

@@ -39,7 +39,8 @@ export const en = {
     "designer": "Designer mode",
     "buttons": "Buttons",
     "showLogo": "Show logo",
-    "feature": "feature"
+    "feature": "feature",
+    "external": "External control"
   },
   "methods": {
     "xml": "Get XML",

src/vendors/Geo.jsx

@@ -88,6 +88,17 @@ function Geo(props) {
     }
   }
 
+  //Return an external value object
+  const externalValue = function (name, obj) {
+    if (!obj) obj = props.external || {}
+    const names = name.split('.', 2)
+    if (names.length > 1) {
+      if (obj[names[0]]) return externalValue(names[1], obj[names[0]])
+      return null //not found
+    }
+    return obj[names[0]]
+  }
+
   //Fetch the geolocation based on browser or ip when center is not set
   const elementRef = useCallback(ref => {
     setGeoRef(ref);
@@ -444,9 +455,14 @@ function Geo(props) {
       // Add a simple push button to save features
       // Add control inside the map
       var layerCtrl = new LayerSwitcher({
+        target: externalValue('layerswitcher.target')
         // collapsed: false,
         // mouseover: true
       });
+      //Connect external drawer if needed
+      if (externalValue('layerswitcher.draw')) {
+        layerCtrl.on('drawlist', externalValue('layerswitcher.draw'))
+      }
       if (featureEnabled('layers')) map.addControl(layerCtrl);
 
       // Swipe control bar 
@@ -710,7 +726,7 @@ function Geo(props) {
       //Add map init event
       fireEvent('map:init', map)
     }
-  }, [props.features, props.extent, props.projection, props.startDate, props.endDate, geoRef]);
+  }, [props.features, props.extent, props.projection, props.startDate, props.endDate, props.external, geoRef]);
 
 
   useEffect(() => {
@@ -821,6 +837,7 @@ Geo.propTypes = {
   startDate: PropTypes.string,
   endDate: PropTypes.string,
   extent: PropTypes.array,
+  external: PropTypes.object,
 }
 
 export default Geo;