Merge pull request #103 from geoCML/webmap-legend

Add legend to web map

Author: TristanDamron

build-resources/geocml-server/portal/src/components/Legend.js

@@ -0,0 +1,23 @@
+import { useSelector } from "react-redux";
+
+export function Legend() {
+  const layers = useSelector((state) => state.app.layers);
+
+  return (
+    <div
+      id="legend"
+      className="position-absolute bg-light rounded p-2 overflow-auto"
+      style={{
+        bottom: "25px",
+		right: 0,
+        zIndex: 99,
+        maxHeight: "40%",
+        maxWidth: "20%",
+      }}
+    >
+	  <img src={`/cgi-bin/qgis_mapserv.fcgi?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetLegendGraphic&FORMAT=image%2Fpng&TRANSPARENT=true&LAYERTITLE=true&RULELABEL=true&LAYERS=${layers.map((layer) => {
+		  return layer.name
+	  }).join(",")}`} alt="Legend"/>
+    </div>
+  );
+}

build-resources/geocml-server/portal/src/components/WebMap.js

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { LayersPane } from "./LayersPane";
+import { Legend } from "./Legend";
 import { hideWebMap } from "../app-slice";
 
 const L = require("leaflet");
@@ -67,7 +68,8 @@ export function WebMap() {
         </div>
 
         <LayersPane />
-      </div>
+		<Legend />
+	</div>
     );
   }
 }