From bca27cce3995e2cb3b5b0c1daf745f909ba24c36 Mon Sep 17 00:00:00 2001
From: Will Freeman <hohosanta@me.com>
Date: Sun, 22 Dec 2024 21:26:41 -0800
Subject: [PATCH] use configurable marker color

---
 webapp/src/components/LeafletMap.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/webapp/src/components/LeafletMap.vue b/webapp/src/components/LeafletMap.vue
index 1d37586..70cc281 100644
--- a/webapp/src/components/LeafletMap.vue
+++ b/webapp/src/components/LeafletMap.vue
@@ -22,6 +22,9 @@ import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
 import 'leaflet.markercluster/dist/MarkerCluster.css';
 import { createVuetify } from 'vuetify'
 
+// Color of Marker Circle
+const MARKER_COLOR = 'rgb(63,84,243)';
+
 const props = defineProps({
   center: {
     required: true,
@@ -109,8 +112,8 @@ function populateMap() {
         <path class="someSVGpath" d="M215.248,221.461L99.696,43.732C144.935,16.031 198.536,0 256,0C313.464,0 367.065,16.031 412.304,43.732L296.752,221.461C287.138,209.593 272.448,202.001 256,202.001C239.552,202.001 224.862,209.593 215.248,221.461Z" style="fill:rgb(87,87,87);fill-opacity:0.46;"/>
         <path class="someSVGpath" d="M215.248,221.461L99.696,43.732C144.935,16.031 198.536,0 256,0C313.464,0 367.065,16.031 412.304,43.732L296.752,221.461C287.138,209.593 272.448,202.001 256,202.001C239.552,202.001 224.862,209.593 215.248,221.461ZM217.92,200.242C228.694,192.652 241.831,188.195 256,188.195C270.169,188.195 283.306,192.652 294.08,200.242C294.08,200.242 392.803,48.4 392.803,48.4C352.363,26.364 305.694,13.806 256,13.806C206.306,13.806 159.637,26.364 119.197,48.4L217.92,200.242Z" style="fill:rgb(137,135,135);"/>
         <g transform="matrix(0.906623,0,0,0.906623,23.9045,22.3271)">
-          <circle class="someSVGpath" cx="256" cy="256" r="57.821" style="fill:rgb(63,84,243);fill-opacity:0.41;"/>
-          <path class="someSVGpath" d="M256,174.25C301.119,174.25 337.75,210.881 337.75,256C337.75,301.119 301.119,337.75 256,337.75C210.881,337.75 174.25,301.119 174.25,256C174.25,210.881 210.881,174.25 256,174.25ZM256,198.179C224.088,198.179 198.179,224.088 198.179,256C198.179,287.912 224.088,313.821 256,313.821C287.912,313.821 313.821,287.912 313.821,256C313.821,224.088 287.912,198.179 256,198.179Z" style="fill:rgb(63,84,243);"/>
+          <circle class="someSVGpath" cx="256" cy="256" r="57.821" style="fill:${MARKER_COLOR};fill-opacity:0.41;"/>
+          <path class="someSVGpath" d="M256,174.25C301.119,174.25 337.75,210.881 337.75,256C337.75,301.119 301.119,337.75 256,337.75C210.881,337.75 174.25,301.119 174.25,256C174.25,210.881 210.881,174.25 256,174.25ZM256,198.179C224.088,198.179 198.179,224.088 198.179,256C198.179,287.912 224.088,313.821 256,313.821C287.912,313.821 313.821,287.912 313.821,256C313.821,224.088 287.912,198.179 256,198.179Z" style="fill:${MARKER_COLOR};"/>
         </g>
       </svg>
       `;
@@ -133,10 +136,10 @@ function populateMap() {
     } else {
       marker = L.circleMarker([lat, lng], {
         fill: true,
-        fillColor: '#3f54f3',
+        fillColor: MARKER_COLOR,
         fillOpacity: 0.6,
         stroke: true,
-        color: '#3f54f3',
+        color: MARKER_COLOR,
         opacity: 1,
         radius: 8,
         weight: 3,