Release: Seachange layers for Protect the Coast

src/components/Legend.jsx

@@ -38,6 +38,7 @@ import {
   useMapLayerStyleStore,
 } from '../data/MapLayerStore';
 import { LegendGroups } from '../data/TextContent';
+import { ReactComponent as DotPatchSVG } from '../data/svg/DotPatch.svg';
 
 // Wraps Legend in a Box for large screen sizes.
 export const LegendPane = () => {
@@ -357,6 +358,10 @@ const LegendPatch = ({ layerId }) => {
     )
   }
 
+  if (layer.symbology === 'density') {
+    return <DensityDotPatch color={layer.color} />
+  }
+
   return layer.shape === 'point'
     ? <SinglePatchPoint style={layer.icon} />
     : layer.shape === 'line'
@@ -374,6 +379,7 @@ const SinglePatchPoint = ({ style }) => {
       fill={style.fill}
       stroke={style.stroke}
       src={style.src}
+      border={style.border}
       marginInline='-4px'
     />
   );
@@ -397,33 +403,6 @@ const ClassifiedPatchPoint = ({ styleMap }) => {
   )
 }
 
-const SinglePatchPolygon = ({ style }) => {
-  return (
-    <PolygonPatchSVG
-      fill={style?.fillColor ?? undefined}
-      stroke={style?.color ?? undefined}
-      dashed={style?.dashArray ? true : false}
-    />
-  )
-}
-
-const PolygonPatchSVG = ({ fill, stroke, dashed = false }) => (
-  <svg width="45" height="27" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect
-      x="0"
-      y="0"
-      width="45"
-      height="27"
-      strokeWidth="6"
-      strokeLinecap="butt"
-      fill={fill}
-      stroke={stroke}
-      strokeDashoffset={dashed ? "3" : undefined}
-      strokeDasharray={dashed ? "6 3" : undefined}
-    />
-  </svg>
-)
-
 const ClassifiedPatchPolygon = ({ styleMap }) => {
   const styles = [...styleMap.entries()].slice(0,6);
   return (
@@ -470,6 +449,35 @@ const LinePatchSVG = ({ fill, stroke, dashed = false }) => (
   </svg>
 )
 
+const SinglePatchPolygon = ({ style }) => {
+  return (
+    <PolygonPatchSVG
+      fill={style?.fillColor ?? undefined}
+      stroke={style?.color ?? undefined}
+      dashed={style?.dashArray ? true : false}
+    />
+  )
+}
+
+const PolygonPatchSVG = ({ fill, stroke, dashed = false }) => (
+  <svg width="45" height="27" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect
+      x="0"
+      y="0"
+      width="45"
+      height="27"
+      strokeWidth="6"
+      strokeLinecap="butt"
+      fill={fill}
+      stroke={stroke}
+      strokeDashoffset={dashed ? "3" : undefined}
+      strokeDasharray={dashed ? "6 3" : undefined}
+    />
+  </svg>
+)
+
+const DensityDotPatch = ({ color }) => <DotPatchSVG fill={color ?? 'black'} />
+
 // LegendItemOGM Component
 //   A single legend entry row for an OpenGreenMap layer.
 export const LegendItemOGM = ({ layerId }) => {

src/data/LeafletStyleHelpers.jsx

@@ -25,6 +25,7 @@ export const MapMarker = (props) => {
       width: (props.size) + 'px',
       height: (props.size) + 'px',
       fontSize: (props.size - props.padding - props.padding) + 'px',
+      border: props.border,
     }}>{props.icon}</div>
   )
 }

src/data/geojson/PumpoutStationsCRD.geojson

@@ -0,0 +1,15 @@
+{
+"type": "FeatureCollection",
+"name": "PumpoutStationsCRD",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+"features": [
+{ "type": "Feature", "properties": { "id": 1, "Name": "Victoria International Marina", "Details": "For marina customers only, sometimes make arrangements with commercial vessels.", "Cost": "$30" }, "geometry": { "type": "Point", "coordinates": [ -123.38312, 48.42742 ] } },
+{ "type": "Feature", "properties": { "id": 2, "Name": "Greater Victoria Harbour Authority", "Details": "Located on Finger B at Fisherman's Wharf, payment is only through visa and must be tap. GVHA also offers mobile pump out service for long term moorage customers at the marinas. The pumpout is self operated.", "Cost": "$10" }, "geometry": { "type": "Point", "coordinates": [ -123.38183, 48.42331 ] } },
+{ "type": "Feature", "properties": { "id": 3, "Name": "Angler's Anchorage Marina", "Details": "For long term customers only.", "Cost": "Free" }, "geometry": { "type": "Point", "coordinates": [ -123.46252, 48.57155 ] } },
+{ "type": "Feature", "properties": { "id": 4, "Name": "Port Sidney Marina", "Details": "Should be up and running very soon, some minor repairs have to be done first, only for vessels 40 ft and under.", "Cost": "$10 for stationary, $25 for mobile" }, "geometry": { "type": "Point", "coordinates": [ -123.39502, 48.65094 ] } },
+{ "type": "Feature", "properties": { "id": 5, "Name": "Van Isle Marina", "Details": "Available during business hours.", "Cost": "Under 29 ft: $19.05, 30 - 49 ft: $23.82, 50 ft and above: $28.57" }, "geometry": { "type": "Point", "coordinates": [ -123.40444, 48.66744 ] } },
+{ "type": "Feature", "properties": { "id": 6, "Name": "Mill Bay Marina", "Details": "Available during business hours.", "Cost": "$20" }, "geometry": { "type": "Point", "coordinates": [ -123.55245, 48.64981 ] } },
+{ "type": "Feature", "properties": { "id": 7, "Name": "Ganges Coast Guard Dock", "Details": "Self serve, $10 gets you 7 minutes of pumping.", "Cost": "$10" }, "geometry": { "type": "Point", "coordinates": [ -123.49753, 48.85389 ] } },
+{ "type": "Feature", "properties": { "id": 8, "Name": "Greater Victoria Habour Authority", "Details": "On Wednesdays they have a mobile service.", "Cost": "$80" }, "geometry": { "type": "Point", "coordinates": [ -123.36963, 48.4249 ] } }
+]
+}

src/data/layers/Eelgrass.jsx

@@ -0,0 +1,30 @@
+import { circle } from 'leaflet';
+
+const eelgrassColor = '#38a801';
+
+const layer = {
+  title: "Eelgrass",
+  description: [
+    {type: 'p', content: 'This layer depicts locations of known eelgrass areas within the CRD. Each point symbolizes eelgrass within 50 meters. When boating, it’s recommended to avoid anchoring in eelgrass beds to protect this important habitat. Learn more about protecting eelgrass from:'},
+    {type: 'link', url: 'https://resilientcoasts.ca/resource/protecting-eelgrass-when-boating/', content: 'Resilient Coasts for Salmon'},
+    {type: 'p', content: 'Data for this layer was sourced from Shorezone’s 2013 eelgrass data, SeaChange’s RESS maps, and the CRD’s published eelgrass survey.'},
+    {type: 'link', url: 'https://www.shorezone.org/downloadzone/', content: 'Shorezone'},
+    {type: 'link', url: 'https://seachangesociety.com/current-projects/resilient-estuaries-of-the-salish-sea-project-ress/', content: 'SeaChange Resilient Estuaries of the Salish Sea Project'},
+    {type: 'link', url: 'https://mapservices.crd.bc.ca/arcgis/rest/services/Harbours/MapServer/25', content: 'CRD Eelgrass Survey Data'},
+  ],
+  data: require('../geojson/CRDEelgrass.geojson'),
+  shape: 'point',
+  symbology: 'density',
+  color: eelgrassColor,
+  options: {
+    pointToLayer: (f,l) => circle(l, {
+      radius: 15,
+      stroke: false,
+      fill: true,
+      fillColor: eelgrassColor,
+      fillOpacity: 0.8
+    }),
+  },
+}
+
+export default layer;

src/data/layers/KelpBeds.jsx

@@ -0,0 +1,26 @@
+import { circle } from 'leaflet';
+
+const color = '#f0b500';
+
+const layer = {
+  title: "Kelp Beds",
+  description: [
+    {type: 'p', content: 'Location of kelp beds within the CRD. Each point symbolizes kelp found within a 50 x 50 meter grid. Data was sourced from the Government of Canada’s Coastal Resource Information Management System which collected data from 1979 onward.'},
+    {type: 'link', url: 'https://open.canada.ca/data/en/dataset/2d994dbd-0518-4463-ac52-28bd05129371/resource/f706b222-c7cd-4dc8-8ca0-4aa26020d822', content: 'Coastal Resource Information Management System - Kelp Beds'},
+  ],
+  data: require('../geojson/KelpBeds.geojson'),
+  shape: 'point',
+  symbology: 'density',
+  color: color,
+  options: {
+    pointToLayer: (f,l) => circle(l, {
+      radius: 10,
+      stroke: false,
+      fill: true,
+      fillColor: color,
+      fillOpacity: 0.8
+    }),
+  },
+}
+
+export default layer;

src/data/layers/PumpoutStations.jsx

@@ -0,0 +1,34 @@
+import { mapPopupContent, pointToIcon } from '../LeafletStyleHelpers';
+import { ReactComponent as PumpoutIcon } from '../svg/pumpout.svg';
+
+const iconStyle = {
+  icon: (<PumpoutIcon />),
+  border: '3px solid orange',
+  legendText: "Sewage Pumpout Station"
+}
+
+const layer = {
+  title: 'Sewage Pumpout Stations',
+  description: [
+    {type:'p', content:'Location and information on the sewage pumpout stations within the CRD.'},
+  ],
+  data: require('../geojson/PumpoutStationsCRD.geojson'),
+  shape: 'point',
+  symbology: 'single',
+  icon: iconStyle,
+  options: {
+    pointToLayer: (f,l) => pointToIcon(l, iconStyle),
+    onEachFeature: (f,l) => {
+      l.bindPopup(mapPopupContent(
+        f.properties.Name,
+        [
+          'Sewage Pumpout Station',
+          f.properties.Details,
+          'Cost: ' + f.properties.Cost,
+        ],
+        ), {offset: [0,-6]});
+    }
+  },
+}
+
+export default layer;

src/data/questions/CreateCommunity.jsx

@@ -81,7 +81,9 @@ const Question = {
     { key: 'VictoriaShelters', active: false, group: 'Community' },
     { key: 'WatershedRunoffAbsorption', active: false, group: 'Water' },
     { key: 'Watersheds', active: false, group: 'Water' },
-
+    { key: 'Eelgrass', active: false, group: 'Water' },
+    { key: 'KelpBeds', active: false, group: 'Water' },
+    { key: 'PumpoutStations', active: false, group: 'Water' },
     { key: "CulturalFoodsOGM", active: false, ...LegendGroups.OGM },
     { key: "CultureCompassOGM", active: false, ...LegendGroups.OGM },
   ],

src/data/questions/ProtectTheCoast.jsx

@@ -3,6 +3,7 @@ import {
   InitiativeTags as Tag,
 } from '../TextContent';
 
+
 const Question = {
   key: 'protect-the-coast',
   title: "Protect the Coast",
@@ -18,10 +19,13 @@ const Question = {
     { key: 'AquiferSusceptibilityBedrock', active: false, ...LegendGroups.StartOff },
     { key: 'AquiferSusceptibilitySediment', active: false, ...LegendGroups.StartOff },
     { key: 'CoastalFloodInundationScenarios', active: true, ...LegendGroups.StartOn },
+    { key: 'Eelgrass', active: true, ...LegendGroups.StartOn },
+    { key: 'KelpBeds', active: false, ...LegendGroups.StartOff },
     { key: 'HardShorelines', active: false, ...LegendGroups.StartOn },
     { key: 'ShellfishPO', active: false, ...LegendGroups.StartOn },
     { key: 'ShorelineSensitivity', active: true, ...LegendGroups.StartOn },
     { key: 'ForageFish', active: false, ...LegendGroups.StartOff },
+    { key: 'PumpoutStations', active: false, ...LegendGroups.StartOff },
   ],
   sections: {
     one: [