Add markers and popups

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

7 files changed, 51 insertions, 47 deletions

diff --git a/app/assets/stylesheets/application/_fonts.scss b/app/assets/stylesheets/application/_fonts.scss
new file mode 100644
index 0000000..2d3565c
--- /dev/null
+++ b/app/assets/stylesheets/application/_fonts.scss
@@ -0,0 +1,12 @@
+/* Override ForkAwesome font path to match Webpack's */
+@fa-font-path: '../media/fonts';
+
+/* Align font icon with the marker's head */
+.extra-marker-svg i.fa {
+    position: absolute;
+    top: 9px;
+    font-size: 16px;
+    left: -2px;
+    right: 0px;
+    text-align: center;
+}
diff --git a/app/helpers/leaflet_helper.rb b/app/helpers/leaflet_helper.rb
index 6ca03f3..67820d3 100644
--- a/app/helpers/leaflet_helper.rb
+++ b/app/helpers/leaflet_helper.rb
@@ -1,11 +1,22 @@
 module LeafletHelper
-  def marker_for(resource, options = {})
-    coords = [resource.latitude, resource.longitude]
+  def json_marker_for(resource, section)
+    # Style according to requested section
+    marker          = resource.to_geojson
+    marker['style'] = {
+      classes: "cat#{section.category_id} sec#{section.id}",
+      color: section.category.color
+    }
+    marker['icon']  = {
+      name: 'fa-neuter' || section.icon_name || 'fa-circle',
+      shape: 'penta' # TODO: change shape according to marker state
+    }
+    # Render HTML popup
+    marker['popup'] = popup_for(resource)
 
-    "L.marker(#{coords}, #{options}).bindPopup(%s)" % popup_for(resource)
+    marker.to_json
   end
 
   def popup_for(resource)
-    render partial: 'resource/popup', locals: { resource: resource }
+    render partial: 'resources/popup', locals: { resource: resource }, formats: [:html]
   end
 end
diff --git a/app/helpers/sections_helper.rb b/app/helpers/sections_helper.rb
index 8180fee..20f602b 100644
--- a/app/helpers/sections_helper.rb
+++ b/app/helpers/sections_helper.rb
@@ -1,19 +1,8 @@
 module SectionsHelper
   # Render a section as a GeoJSON FeatureCollection
   def geojson_feature_collection(section)
-    out = []
-    class_name = { baseVal: "cat#{section.category_id} sec#{section.id}" }
-    style = { fill: section.category.color }
+    features = section.resources.map { |res| json_marker_for(res, section) }.join(',')
 
-    section.resources.each do |marker|
-      # Add styling
-      marker = marker.to_geojson
-      marker['className'] = class_name
-      marker['style'] = style
-
-      out << marker.to_json
-    end
-
-    raw("{ \"type\": \"FeatureCollection\", \"features\": [ #{out.join(',')} ] }")
+    raw("{ \"type\": \"FeatureCollection\", \"features\": [ #{features} ] }")
   end
 end
diff --git a/app/javascript/controllers/map_controller.js b/app/javascript/controllers/map_controller.js
index 1704da8..9770cf4 100644
--- a/app/javascript/controllers/map_controller.js
+++ b/app/javascript/controllers/map_controller.js
@@ -17,7 +17,7 @@ import 'leaflet-defaulticon-compatibility'
 import "leaflet-providers"
 import "leaflet.markercluster/dist/leaflet.markercluster.js"
 
-import 'leaflet-makimarkers'
+import 'leaflet-extra-markers'
 
 export default class extends Controller {
     static targets = [ "container" ]
@@ -28,8 +28,6 @@ export default class extends Controller {
     }
 
     connect() {
-        L.MakiMarkers.accessToken = this.mapBoxAPIToken
-
         var mapbox = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
 		        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery <a href="https://www.mapbox.com/">Mapbox</a>',
 		        maxZoom: 18,
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))
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index a4b51a8..011c3fe 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -20,5 +20,6 @@ require("@rails/activestorage").start()
 //= require leaflet.markercluster
 
 import "controllers"
-
+import "fork-awesome/scss/fork-awesome"
+import "fork-awesome/fonts/forkawesome-webfont"
 import 'stylesheets/application'
diff --git a/app/views/resources/_popup.html.erb b/app/views/resources/_popup.html.erb
new file mode 100644
index 0000000..0841264
--- /dev/null
+++ b/app/views/resources/_popup.html.erb
@@ -0,0 +1,10 @@
+<article class="resource" id="res-<%= resource.uuid %>">
+    <h1><%= resource.name %></h1>
+    <p class="summary"><%= h resource.summary %></p>
+    <% unless resource.description.blank? %>
+    <section class="description">
+        <h2>Description</h2>
+        <%= m resource.description %>
+    </section>
+    <% end %>
+</article>