Add color change to marker

mainio · Mar 21, 2024 · 2775a37 · 2775a37
1 parent 0c33a6d
commit 2775a37
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 13 deletions.
diff --git 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
@@ -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();
       }
     })