Feature: Be Firewise question

src/data/TextContent.jsx

@@ -57,24 +57,26 @@ export const LegendGroups = {
 };
 
 export const InitiativeTags = {
-  StoryMap: "StoryMap",
-  Report: "Report",
-  Organization: "Organization",
+  Agreement: "Agreement",
   Business: "Business",
+  Book: "Book",
+  Funding: "Funding",
+  Government: "Government",
   Indigenous: "Indigenous",
-  Map: "Map",
-  Agreement: "Agreement",
-  Target: "Target",
+  Infographic: "Infographic",
   Initiative: "Initiative",
-  Program: "Program",
+  Map: "Map",
+  Organization: "Organization",
   Portal: "Info Portal",
-  Funding: "Funding",
-  Government: "Government",
+  Program: "Program",
+  Report: "Report",
+  StoryMap: "StoryMap",
+  Target: "Target",
   Video: "Video",
-  Infographic: "Infographic",
 };
 
 export const InitiativeTagColors = {
+  Book: "gray",
   Organization: "blue",
   Business: "blue",
   Initiative: "cyan",

src/data/layers/CRDWatersheds.jsx

@@ -0,0 +1,62 @@
+import {
+  getStyleMapProperty,
+  mapPopupContent,
+  setStyleIfSupported
+} from '../LeafletStyleHelpers';
+
+const styleMap = new Map([
+  [ 1, { color: '#b79be9', legendText: 'Full Watershed' }],
+  [ 3, { color: '#909090', legendText: 'Direct Drainage' }],
+]);
+
+const layer = {
+  title: 'Watersheds',
+  description: [
+    {type: 'p', content: 'A watershed (also known as a hydrologic unit, catchment, or drainage basin) is defined as that area of land draining into a particular stream or other surface water body. For any location in a stream, there is an associated area that contributes water to its flow. The watershed divide is that line which divides the area contributing water to the stream and that which contributes water to neighboring streams or water bodies. Therefore, each watershed is defined by its outlet or pour point (the point in the stream which receives all water in the watershed) and the associated watershed divide derived from that point and the local topography.¹'},
+    {type: 'p', content: 'If a drop of rain or snow falls on any spot within the boundary of a watershed, if it is not absorbed into the ground or somehow otherwise collected, it can be expected to eventually make its way to the central stream and flow along it to the sea. Even water that soaks into the ground can flow towards the stream as it reaches denser soils or bedrock that it cannot infiltrate. Some water travels much deeper into underground resevoirs, called aquifers, that provide drinking water when accessed by a well.²'},
+    {type: 'link', content: '1. GeoBC, 2010. "Freshwater Atlas User Guide." Integrated Land Management Bureau, Victoria, BC. ', url: 'https://www2.gov.bc.ca/assets/gov/data/geographic/topography/fwa/fwa_user_guide.pdf'},
+    {type: 'link', content: '2. NOAA. "What is a watershed?" Accessed: May 15, 2023.', url: 'https://oceanservice.noaa.gov/facts/watershed.html'},
+  ],
+  data: require('../geojson/CRDWatershedBoundary.geojson'),
+  shape: 'polygon',
+  symbology: 'classified',
+  styleMap: styleMap,
+  options: {
+    style: function (f) {
+      const baseStyle = {
+        stroke: true,
+        opacity: 0.7,
+        dashArray: '',
+        lineCap: 'butt',
+        lineJoin: 'miter',
+        weight: 2,
+        fill: true,
+        fillOpacity: 0,
+        fillColor: 'rgb(132,182,185)',
+        interactive: true,
+      }
+      return {
+        ...baseStyle,
+        color: getStyleMapProperty(
+          'color',
+          f.properties.type,
+          styleMap
+        ),
+      }
+    },
+    onEachFeature: (f,l) => {
+      l.bindPopup(
+        mapPopupContent(
+          'Watershed',
+          f.properties.name ?? 'Unnamed Watershed',
+          ),
+        {offset: [0,8]});
+      l.on({
+        mouseover: (e) => setStyleIfSupported(e, { fillOpacity: 0.7 }),
+        mouseout: (e) => setStyleIfSupported(e, { fillOpacity: 0 }),
+      });
+    }
+  },
+}
+
+export default layer;

src/data/layers/FireHydrants.jsx

@@ -0,0 +1,59 @@
+import ReactDOMServer from "react-dom/server";
+import { divIcon } from 'leaflet';
+import { IconContext } from "react-icons";
+import { TbFireHydrant } from 'react-icons/tb'
+import { pointToIcon, MapMarker } from '../LeafletStyleHelpers';
+
+const iconColor = "#b80302"
+const iconOpts = { color: iconColor, size: '22px' }
+const FireHydrantIconStyle = {
+  fill: '#b80302',
+  icon: (<IconContext.Provider value={iconOpts}><TbFireHydrant /></IconContext.Provider>)
+}
+
+const layer = {
+  title: 'Fire Hydrants',
+  description: [
+    {type:'p', content:'Location of fire hydrants in Esquimalt, Oak Bay, Saanich, and Victoria.'},
+  ],
+  data: require('../geojson/FireHydrants.geojson'),
+  shape: 'point',
+  symbology: 'single',
+  cluster: true,
+  clusterOpts: {
+    disableClusteringAtZoom: 16,
+    maxClusterRadius: 60,
+    spiderfyOnMaxZoom: false,
+    chunkedLoading: true,
+    polygonOptions: {
+      color: FireHydrantIconStyle.fill,
+    },
+    iconCreateFunction: (cluster) => {
+      return divIcon({
+        className: "",
+        iconSize: [32, 32],
+        iconAnchor: [16, 16],
+        html: ReactDOMServer.renderToString(
+          <>
+            <MapMarker {...FireHydrantIconStyle} size={32} padding={3} bgColor='rgba(227,232,240,0.8)' />
+            <div style={{
+              position: 'absolute',
+              top: '50%',
+              transform: 'translate(0, -50%)',
+              width: '100%',
+              textAlign: 'center',
+              fontWeight: 'bold',
+              textShadow: '#FFF 2px 2px 4px, #FFF -2px 2px 4px, #FFF 2px -2px 4px, #FFF -2px -2px 4px;',
+            }}>{cluster.getChildCount()}</div>
+          </>
+        ),
+      })
+    }
+  },
+  icon: FireHydrantIconStyle,
+  options: {
+    pointToLayer: (f,l) => pointToIcon(l, FireHydrantIconStyle),
+  },
+}
+
+export default layer;

src/data/layers/GarryOakAreas.jsx

@@ -7,7 +7,7 @@ const styleMap = new Map([
 ]);
 
 const layer = {
-  title: 'Garry Oak Areas',
+  title: 'Historic Garry Oak Areas',
   description: [
     {type: 'p', content: 'This map illustrates Garry Oak Ecosystems, Wetlands, and Mostly Coniferous Forests within Victoria and the Greater Victoria Area in the 1850s. These data were collected from an 1858 Land Survey Map Excerpt, which showcases how these ecosystems looked at the time. Source: J.D. Pemberton, (1858), Historical Map of Garry Oak Areas [Map], BC Surveyor General’s Office.'},
   ],

src/data/layers/GarryOak_NativeEcosystems.jsx

@@ -1,19 +1,19 @@
 import { getStyleMapProperty, mapPopupContent } from '../LeafletStyleHelpers';
 
 const styleMap = new Map([
-  ['Arbutus_DouglasFir', { fillColor: '#b7484b', legendText: 'Arbutus - Douglas Fir' }],
-  ['Arbutus_GarryOak', { fillColor: '#987db7', legendText: 'Arbutus - Garry Oak' }],
-  ['Arbutus_LodgePine_DouglasFir', { fillColor: '#e15989', legendText: 'Arbutus - Lodgepole Pine - Douglas-fir' }],
-  ['BlackCottonwood_Crabapple_Willow', { fillColor: '#c43c39', legendText: 'Black Cottonwood - Crabapple - Willow' }],
-  ['FreshWater_Wetland', { fillColor: '#91522d', legendText: 'Fresh-water Wetland' }],
-  ['GarrOak', { fillColor: '#85b66f', legendText: 'Garry Oak' }],
-  ['GarryOak_Arbutus', { fillColor: '#d5b43c', legendText: 'Garry Oak - Arbutus' }],
-  ['Salal_Lichen', { fillColor: '#8d5a99', legendText: 'Salal - Lichen' }],
-  ['Salal_OG', { fillColor: '#ff9e17', legendText: 'Salal - Oregon Grape' }],
-  ['SF_Salal', { fillColor: '#e77148', legendText: 'Swordfern - Salal' }],
-  ['SW_Wetland', { fillColor: '#becf50', legendText: 'Salt-water Wetland' }],
-  ['Swo_Hem_AF', { fillColor: '#e5b636', legendText: 'Swordfern - Hemlock - Amabilis-fir' }],
-  ['SwordFern', { fillColor: '#beb297', legendText: 'Swordfern' }],
+  ['Arbutus_DouglasFir', { fillColor: '#e36c87', legendText: 'Arbutus - Douglas Fir' }],
+  ['Arbutus_GarryOak', { fillColor: '#da4129', legendText: 'Arbutus - Garry Oak' }],
+  ['Arbutus_LodgePine_DouglasFir', { fillColor: '#8f3f82', legendText: 'Arbutus - Lodgepole Pine - Douglas-fir' }],
+  ['BlackCottonwood_Crabapple_Willow', { fillColor: '#3866a3', legendText: 'Black Cottonwood - Crabapple - Willow' }],
+  ['FreshWater_Wetland', { fillColor: '#6b5687', legendText: 'Fresh-water Wetland' }],
+  ['GarrOak', { fillColor: '#f0e735', legendText: 'Garry Oak' }],
+  ['GarryOak_Arbutus', { fillColor: '#f2a539', legendText: 'Garry Oak - Arbutus' }],
+  ['Salal_Lichen', { fillColor: '#bd593e', legendText: 'Salal - Lichen' }],
+  ['Salal_OG', { fillColor: '#88b32f', legendText: 'Salal - Oregon Grape' }],
+  ['SF_Salal', { fillColor: '#427a38', legendText: 'Swordfern - Salal' }],
+  ['SW_Wetland', { fillColor: '#8d8b8c', legendText: 'Salt-water Wetland' }],
+  ['Swo_Hem_AF', { fillColor: '#75a691', legendText: 'Swordfern - Hemlock - Amabilis-fir' }],
+  ['SwordFern', { fillColor: '#285d41', legendText: 'Swordfern' }],
 ]);
 
 const layer = {

src/data/layers/Wetlands.jsx

@@ -0,0 +1,37 @@
+const styleMap = new Map([
+  ['Wetland', {
+    color: '#94e6fa',
+    fillColor: '#4c9ca4',
+    legendText: 'Wetland'
+  }],
+]);
+
+const layer = {
+  title: 'Wetlands',
+  description: [
+    {type:'p', content:'Land use represents a significant factor in the climate change equation. Ecosystem connectivity is important to consider as well, as greater biodiversity can improve these potentials.'},
+  ],
+  data: require('../geojson/CRDLandCoverNoJDF.geojson'),
+  format: 'polygon',
+  symbology: 'classified',
+  styleMap: styleMap,
+  //legendTitle: 'IPCC Land Cover Class',
+  options: {
+    filter: (f) => f.properties.LandCoverClass === 'Wetland',
+    style: {
+      stroke: true,
+      opacity: 0.5,
+      color: styleMap.get('Wetland').color,
+      fillColor: styleMap.get('Wetland').fillColor,
+      dashArray: '',
+      lineCap: 'butt',
+      lineJoin: 'miter',
+      weight: 3,
+      fill: true,
+      fillOpacity: 0.8,
+      interactive: true
+    },
+  },
+}
+
+export default layer;