refactor code

src/components/MlIconLayer/MlIconLayer.stories.js

@@ -23,18 +23,14 @@ const Template = (args) => {
   const [timeParam, setTimeParam] = useState();
   const timeRef = useRef();
 
-
   const dataUrl = useMemo(
-    // currently vv is used to prevent cache as time requires an opensky account
     () =>
       timeParam
         ? "https://meri.digitraffic.fi/api/ais/v1/locations?from=" + (timeParam)
         : "",
     [timeParam]
   );
 
-  const plainDataUrl = "https://meri.digitraffic.fi/api/ais/v1/locations?mmsi=312691000";
-
   const increaseTimeParam = () => {
     setTimeParam(timeParam + 10);
   };
@@ -45,58 +41,57 @@ const Template = (args) => {
 
   useEffect(() => {
     if (mapContext.map) {
-      //mapContext.map.setZoom(8.5);
-      mapContext.map.jumpTo({ center: [22.870581, 62.543826], zoom:5.5 });
+      mapContext.map.jumpTo({ center: [22.870581, 62.543826], zoom: 5.5 });
       setTimeParam(Math.floor(new Date().getTime()) - 5000);
     }
   }, [mapContext.map]);
 
   return (
     <>
-    <SimpleDataProvider
-      format="json"
-      url={dataUrl}
-      formatData={(d) => {        
-        timeRef.current = new Date().getTime();
-        const props = d.properties;
-        return {
-          mmsi: props.mmsi,
-          velocity:props.sog,
-          navStat: d.properties.navStat,
-          time_contact: props.timestampExternal,
-          longitude: d.geometry?.coordinates[0],
-          latitude: d.geometry?.coordinates[1], 
-          true_track: props.cog,
-          accurancy: props.posAcc,
-          interpolatePos: d3.geoInterpolate(
-            [d.geometry?.coordinates[0], d.geometry?.coordinates[1]],            
-            d.geometry?.coordinates[0] === null
-              ? [d.geometry?.coordinates[0], d.geometry?.coordinates[1]]
-              : 
+      <SimpleDataProvider
+        format="json"
+        url={dataUrl}
+        formatData={(d) => {
+          timeRef.current = new Date().getTime();
+          const props = d.properties;
+          return {
+            mmsi: props.mmsi,
+            velocity: props.sog,
+            navStat: d.properties.navStat,
+            time_contact: props.timestampExternal,
+            longitude: d.geometry?.coordinates[0],
+            latitude: d.geometry?.coordinates[1],
+            true_track: props.cog,
+            accurancy: props.posAcc,
+            interpolatePos: d3.geoInterpolate(
+              [d.geometry?.coordinates[0], d.geometry?.coordinates[1]],
+              d.geometry?.coordinates[0] === null
+                ? [d.geometry?.coordinates[0], d.geometry?.coordinates[1]]
+                : 
                turf.transformTranslate(
-                  turf.point([
-                    d.geometry?.coordinates[0],
-                    d.geometry?.coordinates[1],
-                  ]),
-                  props.sog * 5.14444444 ,  //distance in meters over 10 sec
-                  props.heading,
-                  {
-                    units: "meters",
-                  }
-                ).geometry.coordinates
-          ),
-        };
-      }}
-      data_property="features"
-      onData={renewDataUrl}
-    >
-      <MlIconLayer />
-    </SimpleDataProvider>
-    <MlWmsLayer 
-    url="https://openwms.statkart.no/skwms1/wms.dybdekurver_havomraader?"
-      layerId="dybdekontur_oversiktsdata"
-          urlParameters={{format: "image/png", layers: ["dybdekontur_oversiktsdata", "dybdekontur_label"], transparent: "true"}}
-    />
+                    turf.point([
+                      d.geometry?.coordinates[0],
+                      d.geometry?.coordinates[1],
+                    ]),
+                    props.sog * 5.14444444, //distance in meters over 10 sec
+                    props.heading,
+                    {
+                      units: "meters",
+                    }
+                  ).geometry.coordinates
+            ),
+          };
+        }}
+        data_property="features"
+        onData={renewDataUrl}
+      >
+        <MlIconLayer />
+      </SimpleDataProvider>
+      <MlWmsLayer
+        url="https://openwms.statkart.no/skwms1/wms.dybdekurver_havomraader?"
+        layerId="dybdekontur_oversiktsdata"
+        urlParameters={{format: "image/png", layers: ["dybdekontur_oversiktsdata", "dybdekontur_label"], transparent: "true"}}
+      />
     </>
   );
 };