Merge pull request #317 from kartoza/map

Update styles of map
kartoza · Nov 30, 2023 · eb0574c · eb0574c
2 parents f972717 + 9c1a077
commit eb0574c
Show file tree

Hide file tree

Showing 7 changed files with 134 additions and 35 deletions.
diff --git a/django_project/minisass_frontend/src/components/DataInputForm/index.tsx b/django_project/minisass_frontend/src/components/DataInputForm/index.tsx
@@ -7,7 +7,7 @@ import { Instance } from '@popperjs/core';
 import { Formik, Form, Field } from 'formik';
 import ScoreForm from "../../components/ScoreForm";
 import axios from "axios";
-import { globalVariables } from "../../utils";
+import { globalVariables, formatDate } from "../../utils";
 import CoordinatesInputForm from "../CoordinatesInputForm";
 
 
@@ -539,6 +539,8 @@ const DataInputForm: React.FC<DataInputFormProps> = (props) => {
                         padding: '8px 12px',
                         marginRight: '-10px'
                       }}
+                      min={'2010-01-01'}
+                      max={formatDate(new Date())}
                       value={values.date}
                       onChange={handleChange}
                     />

diff --git a/django_project/minisass_frontend/src/components/Map/Layer/MinisassLayer.tsx b/django_project/minisass_frontend/src/components/Map/Layer/MinisassLayer.tsx
@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from "react";
+import { FormControlLabel } from "@mui/material";
+import Checkbox from "@mui/material/Checkbox";
+import maplibregl from "maplibre-gl";
+import { hideLayer, showLayer } from "../utils";
+
+interface Interface {
+  map: maplibregl.Map,
+}
+
+export const minisassObservationId = 'MiniSASS Observations'
+
+/**
+ * MiniSASS Layer component
+ */
+export default function MinisassLayer({ map }: Interface) {
+  const [active, setActive] = useState<boolean>(true);
+  const disabled = false
+
+  /** First initiate */
+  useEffect(() => {
+    map.getStyle().layers.map(layer => {
+      if (layer.source === minisassObservationId) {
+        if (active) {
+          showLayer(map, layer.id)
+        } else {
+          hideLayer(map, layer.id)
+        }
+      }
+    })
+  }, [active]);
+
+  return <>
+    <FormControlLabel
+      disabled={disabled}
+      control={
+        <Checkbox
+          checked={active}
+          onChange={evt => {
+            setActive(!active)
+          }}/>
+      }
+      label={'miniSASS Observations'}
+    />
+    <br/>
+  </>
+}
diff --git a/django_project/minisass_frontend/src/components/Map/Layer/Selector.tsx b/django_project/minisass_frontend/src/components/Map/Layer/Selector.tsx
@@ -4,6 +4,7 @@ import LayersIcon from "../../../../static/icons/LayersIcon";
 
 import Basemap, { BasemapConfiguration } from "./Basemap"
 import Overlay, { layerConfiguration } from "./Overlay"
+import MiniSassLayer from "./MinisassLayer";
 
 import "./style.css"
 
@@ -60,6 +61,7 @@ export default function Selector(props: Interface) {
       />
       <br/>
       <div className="font-bold mb-[0.5rem]">Overlay Layer</div>
+      <MiniSassLayer map={props.map}/>
       {
         props.overlayLayers.map(
           (layerConfig, idx) => {

diff --git a/django_project/minisass_frontend/src/components/Map/Map.tsx b/django_project/minisass_frontend/src/components/Map/Map.tsx
@@ -11,6 +11,7 @@ import LayerSelector from "./Layer/Selector";
 import { BasemapConfiguration } from "./Layer/Basemap"
 import { layerConfiguration } from "./Layer/Overlay";
 import { hasLayer, hasSource, removeLayer, removeSource } from "./utils"
+import { minisassObservationId } from "./Layer/MinisassLayer";
 
 import 'maplibre-gl/dist/maplibre-gl.css';
 
@@ -45,31 +46,45 @@ export const Map = forwardRef((props: Interface, ref) => {
     /** First initiate */
     useEffect(() => {
       if (!map) {
-        const newMap = new maplibregl.Map(
-          {
-            container: 'map',
-            style: {
-              version: 8,
-              sources: {},
-              layers: [],
-              glyphs: "/static/fonts/{fontstack}/{range}.pbf"
-            },
-            center: [24.679864950000024, -28.671882886975247],
-            zoom: 5.3695883239884745,
-            attributionControl: false,
-            maxZoom: 17
+        (
+          async () => {
+            const response = await fetch('https://raw.githubusercontent.com/kartoza/miniSASS/main/django_project/webmapping/styles/minisass_style_v1.json');
+            const styles = await response.json();
+            const urlTile = new URL(styles.sources[minisassObservationId].tiles[0])
+            const currUrl = new URL(window.location)
+            currUrl.pathname = urlTile.pathname
+            styles.sources[minisassObservationId].tiles[0] = decodeURIComponent(currUrl.href)
+
+            // Just using 'MiniSASS Observations' source
+            for (const [key, value] of Object.entries(styles.sources)) {
+              if (key !== minisassObservationId) {
+                delete styles.sources[key]
+              }
+            }
+            styles.layers = styles.layers.filter(layer => layer.source === minisassObservationId)
+
+            const newMap = new maplibregl.Map(
+              {
+                container: 'map',
+                style: styles,
+                center: [24.679864950000024, -28.671882886975247],
+                zoom: 5.3695883239884745,
+                attributionControl: false,
+                maxZoom: 17
+              }
+            ).addControl(
+              new maplibregl.AttributionControl({ compact: true })
+            );
+            newMap.once("load", () => {
+              setMap(newMap)
+              newMap.fitBounds([
+                [16.4679158, -34.8344038],
+                [32.8918141, -22.1246704]
+              ]);
+            })
+            newMap.addControl(new maplibregl.NavigationControl(), 'top-left');
           }
-        ).addControl(
-          new maplibregl.AttributionControl({ compact: true })
-        );
-        newMap.once("load", () => {
-          setMap(newMap)
-          newMap.fitBounds([
-            [16.4679158, -34.8344038],
-            [32.8918141, -22.1246704]
-          ]);
-        })
-        newMap.addControl(new maplibregl.NavigationControl(), 'top-left');
+        )();
       }
     }, []);
 

diff --git a/django_project/minisass_frontend/src/components/Map/utils.tsx b/django_project/minisass_frontend/src/components/Map/utils.tsx
@@ -25,6 +25,32 @@ export const removeLayer = (map: maplibregl.Map, id: string) => {
   }
 }
 
+/**
+ * Show layer from map
+ * @param {Object} map Map
+ * @param {String} id of layer
+ */
+export const showLayer = (map: maplibregl.Map, id: string) => {
+  if (hasLayer(map, id)) {
+    map.setLayoutProperty(
+      id, 'visibility', 'visible'
+    );
+  }
+}
+
+/**
+ * Hide layer from map
+ * @param {Object} map Map
+ * @param {String} id of layer
+ */
+export const hideLayer = (map: maplibregl.Map, id: string) => {
+  if (hasLayer(map, id)) {
+    map.setLayoutProperty(
+      id, 'visibility', 'none'
+    );
+  }
+}
+
 /**
  * Return if source exist
  * @param {Object} map Map

diff --git a/django_project/minisass_frontend/src/pages/Map/config/overlay.config.json b/django_project/minisass_frontend/src/pages/Map/config/overlay.config.json
@@ -1,10 +1 @@
-[
-  {
-    "name": "miniSASS Observations",
-    "tiles": [
-      "https://minisass.org/geoserver/wms?LAYERS=miniSASS%3Aminisass_observations&TRANSPARENT=TRUE&FORMAT=image%2Fpng&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG%3A3857&BBOX={bbox-epsg-3857}&WIDTH=512&HEIGHT=512"
-    ],
-    "type": "raster",
-    "activeByDefault": true
-  }
-]
+[]
diff --git a/django_project/minisass_frontend/src/utils/index.tsx b/django_project/minisass_frontend/src/utils/index.tsx
@@ -26,3 +26,19 @@ export const globalVariables = {
   staticPath,
 };
 
+/** Format date */
+export function formatDate(d, reverseDate = false) {
+  let month = '' + (d.getMonth() + 1),
+    day = '' + d.getDate(),
+    year = d.getFullYear();
+
+  if (month.length < 2)
+    month = '0' + month;
+  if (day.length < 2)
+    day = '0' + day;
+  if (reverseDate) {
+    return [day, month, year].join('-');
+  } else {
+    return [year, month, day].join('-');
+  }
+}