From 2775a37da10ef2f38b6e8df887b1147fd0617a6d Mon Sep 17 00:00:00 2001
From: Joonas <joonas.aapro@mainiotech.fi>
Date: Thu, 21 Mar 2024 08:44:47 +0200
Subject: [PATCH] Add color change to marker

---
 .../src/decidim/map/controller/markers.js     | 27 +++++++++++-----
 .../map/initialize_select_locations.js        | 31 +++++++++++++++----
 2 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/app/packs/src/decidim/map/controller/markers.js b/app/packs/src/decidim/map/controller/markers.js
index e4dc01e..3d6cc33 100644
--- a/app/packs/src/decidim/map/controller/markers.js
+++ b/app/packs/src/decidim/map/controller/markers.js
@@ -73,13 +73,26 @@ export default class MapMarkersController extends MapController {
       if (markerData.geojson.type) {
         const coordinates = markerData.geojson.geometry.coordinates;
         const location = markerData.location;
-
-        if (markerData.geojson.geometry.type === "Point") {
-          shape = L.marker(coordinates, {selected: false, geojson: JSON.stringify(markerData.geojson)})
-        } else if (markerData.geojson.geometry.type === "LineString") {
-          shape = L.polyline(coordinates, {selected: false, geojson: JSON.stringify(markerData.geojson)})
-        } else if (markerData.geojson.geometry.type === "Polygon") {
-          shape = L.polygon(coordinates, {selected: false, geojson: JSON.stringify(markerData.geojson)})
+        const objectShape = markerData.geojson.geometry.type;
+
+        if (objectShape === "Point") {
+          shape = L.marker(
+            coordinates,
+            {selected: false,
+              geojson: JSON.stringify(markerData.geojson),
+              shape: objectShape})
+        } else if (objectShape === "LineString") {
+          shape = L.polyline(
+            coordinates,
+            {selected: false,
+              geojson: JSON.stringify(markerData.geojson),
+              shape: objectShape})
+        } else if (objectShape === "Polygon") {
+          shape = L.polygon(
+            coordinates,
+            {selected: false,
+              geojson: JSON.stringify(markerData.geojson),
+              shape: objectShape})
         }
 
         shape.bindTooltip(location, {permanent: true, interactive: true});
diff --git a/app/packs/src/decidim/map/initialize_select_locations.js b/app/packs/src/decidim/map/initialize_select_locations.js
index e08a046..6289e66 100644
--- a/app/packs/src/decidim/map/initialize_select_locations.js
+++ b/app/packs/src/decidim/map/initialize_select_locations.js
@@ -1,26 +1,45 @@
 const initializeSelectLocations = function (markers) {
   markers.getLayers().forEach((shape) => {
     shape.addEventListener("mouseover", () => {
-      shape.setStyle({color: "#ff7b00"})
+      if (shape.options.shape === "Point") {
+        shape._icon.style.filter = "hue-rotate(155deg)"
+      } else {
+        shape.setStyle({color: "#ff7b00"})
+      }
     })
 
     shape.addEventListener("mouseout", () => {
       if (!shape.options.selected) {
-        shape.setStyle({color: "#3388ff"})
+        if (shape.options.shape === "Point") {
+          shape._icon.style.filter = "hue-rotate(0deg)"
+        } else {
+          shape.setStyle({color: "#3388ff"})
+        }
       } else if (shape.options.selected) {
-        shape.setStyle({color: "#2bff00"})
+        if (shape.options.shape === "Point") {
+          shape._icon.style.filter = "hue-rotate(275deg)"
+        } else {
+          shape.setStyle({color: "#2bff00"})
+        }
       }
     })
 
     shape.addEventListener("click", () => {
-      shape.setStyle({color: "#2bff00"})
       if (!shape.options.selected) {
+        if (shape.options.shape === "Point") {
+          shape._icon.style.filter = "hue-rotate(275deg)"
+        } else {
+          shape.setStyle({color: "#2bff00"})
+        }
         shape.options.selected = true;
-        shape.setStyle({color: "#2bff00"})
         document.querySelector(`input[value="${CSS.escape(shape.options.geojson)}"]`).click();
       } else if (shape.options.selected) {
+        if (shape.options.shape === "Point") {
+          shape._icon.style.filter = "hue-rotate(0deg)"
+        } else {
+          shape.setStyle({color: "#3388ff"})
+        }
         shape.options.selected = false;
-        shape.setStyle({color: "#3388ff"})
         document.querySelector(`input[value="${CSS.escape(shape.options.geojson)}"]`).click();
       }
     })