Add markers and popups

- Replace MakiMarkers with ExtraMarkers and ForkAwesome
- Add HTML popup binding

1 files changed, 9 insertions, 26 deletions

diff --git a/app/javascript/controllers/taxonomy_controller.js b/app/javascript/controllers/taxonomy_controller.js
index 02b1483..413872b 100644
--- a/app/javascript/controllers/taxonomy_controller.js
+++ b/app/javascript/controllers/taxonomy_controller.js
@@ -81,30 +81,11 @@ export default class extends Controller {
         this._mapLayerToggleSection(secId)
     }
 
-    _sectionIconName(secId) {
-        const names = {
-            215: 'campsite',
-            216: 'hospital',
-            217: 'landmark',
-            218: 'shelter',
-            219: 'lodging',
-            220: 'playground',
-            221: 'residential-community',
-            222: 'home',
-            223: 'residential-community',
-            224: 'residential-community',
-            225: 'home'
-
-        }
-        return names[secId] || 'circle'
-    }
-
     _loadMarkers(secId) {
         if (this.overlays[secId] == undefined) {
-            console.log(`loading markers for section ${secId} [${this._sectionIconName(secId)}]...`)
+            console.log(`loading markers for section ${secId}`)
             let overlay = L.layerGroup();
             let markers = L.markerClusterGroup();
-            let iconName = this._sectionIconName(secId);
 
             fetch(`/sections/${secId}.json`, {
                 headers: { 'X-CSRF-Token': this._csrfToken() }
@@ -115,13 +96,15 @@ export default class extends Controller {
                         pointToLayer: function (feature, latlng) {
                             return L.marker(latlng, {
                                 attribution: feature.source,
-                                icon: L.MakiMarkers.icon({
-                                    icon: iconName,
-                                    className: feature.className.baseVal,
-                                    color: feature.style.fill,
-                                    size: 'm'
+                                icon: L.ExtraMarkers.icon({
+                                    icon: feature.icon.name,
+                                    extraClasses: feature.style.classes,
+                                    markerColor: feature.style.color,
+                                    shape: feature.icon.shape,
+                                    prefix: 'fa',
+                                    svg: true
                                 })
-                            });
+                            }).bindPopup(feature.popup);
 		                    },
                         onEachFeature: (feature, layer) => {
                             layer.on('click', () => this.onClick(layer))