working on #62: try to change the order of controls

src/index.js

@@ -63,6 +63,7 @@ if (window.location.pathname === "/follower") {
 
       {/* <TopicMapsExamples.MostSimpleTopicMapWithGazetteerData /> */}
       {/* <TopicMapsExamples.SimpleTopicMap /> */}
+      <TopicMapsExamples.SimpleTopicMapWithScales />
       {/* <TopicMapsExamples.SimpleTopicMapWithAdditiopnalStylingInfo /> */}
       {/* <TopicMapsExamples.SimpleTopicMapWithCustomMenu /> */}
       {/* <TopicMapsExamples.SimpleTopicMapWithDefaultInfoBox /> */}

src/lib/ProjGeoJson.js

@@ -16,6 +16,9 @@ import markerClusterGroup from "leaflet.markercluster";
 
 class ProjGeoJson extends Path {
   componentWillMount() {
+    //with map can the leaflet map be accesed
+    //const { map } = this.context;
+
     super.componentWillMount();
     const { featureCollection, ...props } = this.props;
 
@@ -215,6 +218,8 @@ class ProjGeoJson extends Path {
   createLeafletElement() {}
 
   componentDidUpdate(prevProps) {
+    console.log("componentDidUpdate", prevProps);
+
     if (isFunction(this.props.style)) {
       this.setStyle(this.props.style);
     } else {

src/lib/RoutedMap.js

@@ -3,7 +3,7 @@ import md5 from "md5";
 import proj4 from "proj4";
 import PropTypes from "prop-types";
 import React from "react";
-import { Map, ZoomControl } from "react-leaflet";
+import { Map, ScaleControl, ZoomControl } from "react-leaflet";
 //see https://github.com/makinacorpus/Leaflet.GeometryUtil/issues/59
 import { reproject } from "reproject";
 
@@ -495,6 +495,8 @@ export class RoutedMap extends React.Component {
     if (this.props.fullScreenControlEnabled) {
       fullscreenControl = (
         <FullscreenControl
+          orderManipulatable
+          key="fullscreenControl"
           title="Vollbildmodus"
           forceSeparateButton={true}
           titleCancel="Vollbildmodus beenden"
@@ -524,6 +526,8 @@ export class RoutedMap extends React.Component {
     if (this.props.locateControlEnabled) {
       locateControl = (
         <LocateControl
+          key="locateControl"
+          orderManipulatable
           setView="once"
           flyTo={true}
           strings={{
@@ -545,6 +549,111 @@ export class RoutedMap extends React.Component {
               // Check if the context values are already set
               this.crossTabCommunicationContext = crossTabCommunicationContext;
               this.crossTabCommunicationDispatchContext = crossTabCommunicationDispatchContext;
+
+              const children = [];
+              //add ^children here
+              if (this.props.zoomControlEnabled) {
+                children.push(
+                  <ZoomControl
+                    key="zoomControl"
+                    _order="0000000"
+                    orderManipulatable
+                    position="topleft"
+                    zoomInTitle="Vergr&ouml;ßern"
+                    zoomOutTitle="Verkleinern"
+                  />
+                );
+              }
+              children.push(fullscreenControl);
+              children.push(locateControl);
+
+              if (this.props.children && Array.isArray(this.props.children)) {
+                children.push(...this.props.children);
+              }
+
+              // flatten the children array. that means if there is an array as a child
+              // add the children of the array to the children array
+              const flatchildren = [];
+
+              const flatten = (arr) => {
+                for (const el of arr) {
+                  if (Array.isArray(el)) {
+                    flatten(el);
+                  } else {
+                    if (el) {
+                      flatchildren.push(el);
+                    }
+                  }
+                }
+              };
+
+              flatten(children);
+              // go through the flatchildren and remove the ones that have a prop orderManipulatbale
+              // and add them to the orderManipulatedChildren array
+              const _children = [];
+              const orderManipulationCandidates = [];
+              console.log("xxxx flatchildren", flatchildren);
+
+              for (const child of flatchildren || []) {
+                console.log("xxx child", child);
+                console.log("xxx child.props.orderManipulatbale", child?.props?.orderManipulatable);
+
+                if (child?.props?.orderManipulatable) {
+                  orderManipulationCandidates.push(child);
+                } else {
+                  _children.push(child);
+                }
+              }
+
+              console.log("xxx children", _children);
+
+              // Helper function to determine the order of two elements
+              // const determineOrder = (a, b) => {
+              //   const orderA = a.props.order || "";
+              //   const orderB = b.props.order || "";
+
+              //   // If a should be before b
+              //   if (orderA === `before::${b.key}`) return -1;
+
+              //   // If a should be after b
+              //   if (orderA === `after::${b.key}`) return 1;
+
+              //   // If b should be before a
+              //   if (orderB === `before::${a.key}`) return 1;
+
+              //   // If b should be after a
+              //   if (orderB === `after::${a.key}`) return -1;
+
+              //   // If neither have order props, or if the order props don't specify the other element, keep original order
+              //   return 0;
+              // };
+              const determineOrder = (a, b) => {
+                const orderA = a.props.order || "";
+                const orderB = b.props.order || "";
+
+                if (orderA < orderB) return -1;
+                if (orderA > orderB) return 1;
+
+                return 0;
+              };
+              console.log(
+                "xxx orderManipulationCandidates",
+                orderManipulationCandidates.map((c) => c.props.order + "..." + c.key)
+              );
+
+              const orderedChildren = orderManipulationCandidates.sort(determineOrder);
+              const defaults = {
+                maxWidth: 200,
+                metric: true,
+                imperial: false,
+                updateWhenIdle: false,
+                position: "bottomleft",
+              };
+              console.log(
+                "xxx orderedChildren",
+                orderedChildren.map((c) => c.props.order + "..." + c.key)
+              );
+
               return (
                 <div className={iosClass}>
                   <Map
@@ -573,16 +682,6 @@ export class RoutedMap extends React.Component {
                       CROSSTABCOMMUNICATION_SCOPE
                     ] || [])}
                   >
-                    {this.props.zoomControlEnabled && (
-                      <ZoomControl
-                        position="topleft"
-                        zoomInTitle="Vergr&ouml;ßern"
-                        zoomOutTitle="Verkleinern"
-                      />
-                    )}
-
-                    {fullscreenControl}
-                    {locateControl}
                     <div
                       key={
                         this.props.backgroundlayers +
@@ -605,8 +704,8 @@ export class RoutedMap extends React.Component {
                         this.props.baseLayerConf
                       )}
                     </div>
-
-                    {this.props.children}
+                    {orderedChildren}
+                    {_children}
                   </Map>
                 </div>
               );

src/lib/_stories/complex/TopicMap.stories.js

@@ -56,6 +56,8 @@ import CrossTabCommunicationContextProvider, {
   CrossTabCommunicationContext,
 } from "../../contexts/CrossTabCommunicationContextProvider";
 
+import { ScaleControl } from "react-leaflet";
+
 export default {
   title: storiesCategory + "TopicMapComponent",
 };
@@ -130,10 +132,65 @@ export const SimpleTopicMap = () => {
     getGazData(setGazData);
   }, []);
 
+  return (
+    <TopicMapContextProvider featureItemsURL="/data/parkscheinautomatenfeatures.json">
+      <TopicMapComponent
+        locatorControl={true}
+        gazData={gazData}
+        scaleControl={{ position: "bottomright" }}
+      >
+        <FeatureCollection />
+      </TopicMapComponent>
+    </TopicMapContextProvider>
+  );
+};
+export const SimpleTopicMapWithScales = () => {
+  const defaults = {
+    maxWidth: 200,
+    metric: true,
+    imperial: false,
+    updateWhenIdle: false,
+    position: "bottomleft",
+  };
+  const [gazData, setGazData] = useState([]);
+  useEffect(() => {
+    getGazData(setGazData);
+  }, []);
+
   return (
     <TopicMapContextProvider featureItemsURL="/data/parkscheinautomatenfeatures.json">
       <TopicMapComponent locatorControl={true} gazData={gazData}>
         <FeatureCollection />
+        <ScaleControl
+          orderManipulatable
+          order="0005000"
+          type="control"
+          key="ScaleControl-bottomright"
+          {...defaults}
+          position="bottomright"
+        />
+        <ScaleControl
+          orderManipulatable
+          order="0005000"
+          type="control"
+          key="ScaleControl-topright"
+          {...defaults}
+          position="topright"
+        />
+        <ScaleControl
+          orderManipulatable
+          key="ScaleControl-topleft"
+          order="0005000"
+          {...defaults}
+          position="topleft"
+        />{" "}
+        <ScaleControl
+          orderManipulatable
+          key="ScaleControl-bottomleft"
+          order="0005000"
+          {...defaults}
+          position="bottomleft"
+        />
       </TopicMapComponent>
     </TopicMapContextProvider>
   );

src/lib/_stories/mainComponents/FeatureCollection.stories.js

@@ -449,6 +449,7 @@ export const PolygonsWithStyling = (args) => {
   const myRegularHoverer = (feature) => {
     return "id=" + feature.id;
   };
+  console.log("kassenzeichen", kassenzeichen);
 
   return (
     <div>
@@ -493,13 +494,13 @@ export const PolygonsWithStyling = (args) => {
           key={"FeatureCollectionDisplay" + JSON.stringify(args) + urlSearch}
           style={(feature) => {
             return {
-              color: "#00000040", // stroke
-              fillColor: "#00000010", //fill
+              color: "#000000", // stroke
+              fillColor: "#000000", //fill
               weight: 0.5,
             };
           }}
-          hoverer={myVirtHoverer}
-          //   hoverer={myRegularHoverer}
+          // hoverer={myVirtHoverer}
+          hoverer={myRegularHoverer}
           mapRef={(mapRef.current || {}).leafletMap}
           featureCollection={kassenzeichen}
         />

src/lib/topicmaps/TopicMapComponent.js

@@ -80,7 +80,16 @@ const TopicMapComponent = (props) => {
     hamburgerMenu = true,
     zoomControls = true,
     leafletMapProps = {},
+    scaleControl = undefined,
   } = props;
+
+  const scaleControlDefaults = {
+    maxWidth: 200,
+    metric: true,
+    imperial: false,
+    updateWhenIdle: false,
+    position: "bottomleft",
+  };
   const { history, referenceSystem, referenceSystemDefinition, maskingPolygon } = useContext(
     TopicMapContext
   );
@@ -278,6 +287,9 @@ const TopicMapComponent = (props) => {
             {featureCollectionDisplay}
             {gazetteerSearchControl && (
               <GazetteerSearchControl
+                orderManipulatable
+                key="gazetteerSearchControl"
+                order="0005000"
                 mapRef={leafletRoutedMapRef}
                 gazetteerHit={gazetteerHit}
                 setGazetteerHit={setGazetteerHit}
@@ -294,7 +306,7 @@ const TopicMapComponent = (props) => {
             {infoBox}
 
             {hamburgerMenu && (
-              <Control position="topright">
+              <Control orderManipulatable key="hamburgerMenu" position="topright">
                 <OverlayTrigger
                   placement="left"
                   overlay={