Modularize LargeIcon generation (refs #301)

app/assets/javascripts/application.js.erb

@@ -1,14 +1,6 @@
 // This is a manifest file that'll be compiled into application.js, which will include all the files
 // listed below.
 //
-// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
-// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
-//
-// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
-// compiled file.
-//
-// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
-// about supported directives.
 //
 //= require jquery
 //= require jquery_ujs

app/assets/javascripts/graphics/marker.js

@@ -0,0 +1,34 @@
+/*
+call me like this:
+
+var params = {
+  color: "red",
+  opacity: 1,
+  stroke: "black",
+  stroke_width: 1,
+  stroke_opacity: 1,
+  defs_with_gradient: ""
+};
+
+var icon = LargeMarkerIcon.create(params);
+
+*/
+var LargeMarkers = {
+
+    CustomLargeIcon = L.Icon.extend({
+        options: {
+            iconSize:     [this.params.marker_size, this.params.marker_size],
+            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>`;
+        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)});
+    }
+
+};

app/assets/javascripts/helpers/timeslider.js

@@ -58,12 +58,14 @@ function filterMarkers(selectedYear) {
     if (marker.data.fromYear <= selectedYear && marker.data.endYear >= selectedYear) {
         console.log("1", marker.data.fromYear,selectedYear,marker.data.endYear);
         marker.addTo(window.map);
+        // TODO: add color!
         marker.setIcon(window.icon);
     } else {       
       console.log("X", marker.data.fromYear,selectedYear,marker.data.endYear);
       if ( selectedYear <= current_selected_year ) {
         window.map.removeLayer(marker);  
         // marker.setIcon(icon_past);
+        // TODO: remove relations and other elements!
       } else {
         window.map.removeLayer(marker);  
         window.icon_past = window.icon;
@@ -95,35 +97,38 @@ function SelectAndFilterByYear(el,yearDivs,year) {
   }
 }
 document.addEventListener("DOMContentLoaded", function() {
-  const timelineContent = document.getElementById("timeline-content");
-  const scrollLeft = document.getElementById("scroll-left");
-  const scrollRight = document.getElementById("scroll-right");
-  const yearDivs = document.querySelectorAll(".year");
-
-   console.log("Prep eventListeners")
-  scrollLeft.addEventListener("click", function() {
-    timelineContent.scrollBy({
-      left: -100, // Adjust the scroll amount as needed
-      behavior: "smooth"
+  let body = document.querySelector("body");
+  if ( body.classList.contains("show") && ( body.id === 'maps') ) {
+    const timelineContent = document.getElementById("timeline-content");
+    const scrollLeft = document.getElementById("scroll-left");
+    const scrollRight = document.getElementById("scroll-right");
+    const yearDivs = document.querySelectorAll(".year");
+
+    console.log("Prep eventListeners")
+    scrollLeft.addEventListener("click", function() {
+      timelineContent.scrollBy({
+        left: -100, // Adjust the scroll amount as needed
+        behavior: "smooth"
+      });
     });
-  });
 
-  scrollRight.addEventListener("click", function() {
-    timelineContent.scrollBy({
-      left: 100, // Adjust the scroll amount as needed
-      behavior: "smooth"
+    scrollRight.addEventListener("click", function() {
+      timelineContent.scrollBy({
+        left: 100, // Adjust the scroll amount as needed
+        behavior: "smooth"
+      });
     });
-  });
-  yearDivs.forEach(function(yearDiv) {
-    yearDiv.addEventListener("click", function() {
+    yearDivs.forEach(function(yearDiv) {
+      yearDiv.addEventListener("click", function() {
 
-      var selectedYear = this.getAttribute('data-year');
-      SelectAndFilterByYear(this,yearDivs,selectedYear);
+        var selectedYear = this.getAttribute('data-year');
+        SelectAndFilterByYear(this,yearDivs,selectedYear);
+      });
     });
-  });
-  let startyear = $('#selection').data('map-timeline-minyear');
-  el = document.getElementById('year'+startyear); 
-  SelectAndFilterByYear(el,yearDivs,startyear);
+    let startyear = $('#selection').data('map-timeline-minyear');
+    el = document.getElementById('year'+startyear); 
+    SelectAndFilterByYear(el,yearDivs,startyear);
+  }
 });
 
 

app/assets/javascripts/layers.js.erb

@@ -252,14 +252,6 @@ function ShowPlacesForLayer(map,text_layers,image_layers,marker_meta_layers,curv
         }
         else if ( $('#selection').data('map-extent-northeast') ) {
           console.log("Fit to custom map extent");
-          /*
-          var northeast_array = $('#selection').data('map-extent-northeast').split(",").map(Number);
-          console.log(northeast_array);
-          var southwest_array = $('#selection').data('map-extent-southwest').split(",").map(Number);
-          console.log(southwest_array);
-          northeast = L.latLng(northeast_array[0],northeast_array[1]);
-          southwest = L.latLng(southwest_array[0],southwest_array[1]);
-          */
           var northeast_array = $('#selection').data('map-extent-northeast');
           console.log("Map custom extend: NE "+  northeast_array);
           var southwest_array = $('#selection').data('map-extent-southwest');

app/assets/javascripts/markers/draw_markers.js.erb

@@ -72,6 +72,7 @@ function drawMarkers(map,layer_id,layer_type,level,show_annotations_on_map,text_
 
         var svg = '<svg height="'+marker_size+'" width="'+marker_size+'" xmlns="http://www.w3.org/2000/svg">'+defs_with_gradient+'<circle class="cls-1" cx="'+marker_size/2+'" cy="'+marker_size/2+'" r="'+marker_size/2+'" fill="'+color+'" fill-opacity="'+opacity+'" stroke="'+stroke+'" stroke-width="'+stroke_width+'" stroke-opacity="'+stroke_opacity+'" shape-rendering="geometricPrecision"></circle></svg>';
 
+        // major marker definition
         var url = encodeURI("data:image/svg+xml," + svg).replace(new RegExp('#', 'g'),'%23');
         var icon;
         if ( layer_type === 'image' ) {
@@ -145,6 +146,8 @@ function drawMarkers(map,layer_id,layer_type,level,show_annotations_on_map,text_
         // text_layers.addLayer(marker);
         if ( place.startdate && place.enddate ) {
           marker.data = setFromToYears(place.startdate,place.enddate); 
+          marker.data.color = color;
+
           // Attach fromYear and toYear attributes to marker 
           console.log("Marker data");
           console.log(marker.data);