Implement LArgeIcon so colors are respected in timeslider marker hand…

…ling (refs #301)
a-thousand-channels · May 20, 2024 · 9ee0b9a · 9ee0b9a
1 parent 2ba0fc9
commit 9ee0b9a
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 13 deletions.
diff --git a/app/assets/javascripts/graphics/marker.js b/app/assets/javascripts/graphics/marker.js
@@ -13,22 +13,25 @@ var params = {
 var icon = LargeMarkerIcon.create(params);
 
 */
-var LargeMarkers = {
+var LargeMarkerIcon = {
 
-    CustomLargeIcon = L.Icon.extend({
+    CustomLargeIcon: L.Icon.extend({
         options: {
-            iconSize:     [this.params.marker_size, this.params.marker_size],
+            iconSize:     [30, 30],
             iconAnchor:   [15, 15],
             popupAnchor:  [0, -15]
         }
-    })
+    }),
     iconSVG: function(params) {
-        var svg = `<svg height="${marker_size}" width="${marker_size}" xmlns="http://www.w3.org/2000/svg">${params.defs_with_gradient}<circle class="cls-1" cx="${marker_size/2}" cy="${marker_size/2}" r="${marker_size/2}" fill="${params.color}" fill-opacity="${params.opacity}" stroke="${params.stroke}" stroke-width="${params.stroke_width}" stroke-opacity="${params.stroke_opacity}" shape-rendering="geometricPrecision"></circle></svg>`;
+        console.log("PARAMS",params);
+        var svg = `<svg height="${params.marker_size}" width="${params.marker_size}" xmlns="http://www.w3.org/2000/svg">${params.defs_with_gradient}<circle class="cls-1" cx="${params.marker_size/2}" cy="${params.marker_size/2}" r="${params.marker_size/2}" fill="${params.color}" fill-opacity="${params.opacity}" stroke="${params.stroke}" stroke-width="${params.stroke_width}" stroke-opacity="${params.stroke_opacity}" shape-rendering="geometricPrecision"></circle></svg>`;
         return encodeURI("data:image/svg+xml," + svg).replace(new RegExp('#', 'g'),'%23');
     },
-    create: function(params = {color: "black", opacity: 0.5, stroke: "transparent", stroke_width: 0, stroke_opacity: 0, defs_with_gradient: ""}) {
-
-        return new CustomLargeIcon({iconUrl: iconSVG(params)});
+    create: function(params) {
+        var defaultParams = {marker_size: 30, color: "black", opacity: 0.7, stroke: "transparent", stroke_width: 0, stroke_opacity: 0, defs_with_gradient: ""};
+        params = Object.assign({}, defaultParams, params);        
+        console.log("PARAMS",params);
+        return new this.CustomLargeIcon({iconUrl: this.iconSVG(params)});
     }
 
 };
diff --git a/app/assets/javascripts/helpers/timeslider.js b/app/assets/javascripts/helpers/timeslider.js
@@ -56,12 +56,13 @@ function filterMarkers(selectedYear) {
       return;
     }
     if (marker.data.fromYear <= selectedYear && marker.data.endYear >= selectedYear) {
-        console.log("1", marker.data.fromYear,selectedYear,marker.data.endYear);
+        console.log("1", marker.data.fromYear,selectedYear,marker.data.endYear,marker.data.color, marker.data.title, marker.data.layer_id);
         marker.addTo(window.map);
         // TODO: add color!
-        marker.setIcon(window.icon);
+        icon = LargeMarkerIcon.create({color: marker.data.color});
+        marker.setIcon(icon);
     } else {       
-      console.log("X", marker.data.fromYear,selectedYear,marker.data.endYear);
+      console.log("X", marker.data.fromYear,selectedYear,marker.data.endYear,marker.data.color, marker.data.title, marker.data.layer_id);
       if ( selectedYear <= current_selected_year ) {
         window.map.removeLayer(marker);  
         // marker.setIcon(icon_past);
@@ -77,6 +78,7 @@ function filterMarkers(selectedYear) {
 function resetMarkers() {
   markers.forEach(function(marker) {
       marker.addTo(map);
+      icon = LargeMarkerIcon.create({color: marker.data.color});
       marker.setIcon(icon);       
   });
 }

diff --git a/app/assets/javascripts/markers/draw_markers.js.erb b/app/assets/javascripts/markers/draw_markers.js.erb
@@ -78,7 +78,8 @@ function drawMarkers(map,layer_id,layer_type,level,show_annotations_on_map,text_
         if ( layer_type === 'image' ) {
          icon = new CustomSmallIcon({iconUrl: url});
         } else {
-         icon = new CustomLargeIcon({iconUrl: url});
+         icon = new CustomLargeIcon({iconUrl: url});      
+         icon = LargeMarkerIcon.create({color: color});
         }
       } else {
         if ( parseInt(place.id) === parseInt(params.place) ) {
@@ -130,7 +131,7 @@ function drawMarkers(map,layer_id,layer_type,level,show_annotations_on_map,text_
           popupAnchor:[0,0] });
       var imagemarker = new L.marker([place.lat, place.lon], {customId:"context"+c, icon: imageicon}).addTo(image_layers);
 
-      window.icon = icon;
+
       window.map = map;
 
       // TODO: add to layer, not map
@@ -144,9 +145,16 @@ function drawMarkers(map,layer_id,layer_type,level,show_annotations_on_map,text_
         marker_layers.addLayer(marker);
         text_layers.addLayer(textmarker);
         // text_layers.addLayer(marker);
+        if ( place.startdate && !place.enddate ) {
+
+          place.enddate = parseInt(place.startdate.substring(0, 4))+"-12-31T00:00:00.000Z";
+          console.log("set enddate with startdate", place.startdate,place.enddate);
+        }
         if ( place.startdate && place.enddate ) {
           marker.data = setFromToYears(place.startdate,place.enddate); 
+          marker.data.title = place.title;
           marker.data.color = color;
+          marker.data.layer_id = layer_id;
 
           // Attach fromYear and toYear attributes to marker 
           console.log("Marker data");