diff options
Diffstat (limited to 'app')
| -rw-r--r-- | app/assets/stylesheets/application/_fonts.scss | 12 | ||||
| -rw-r--r-- | app/helpers/leaflet_helper.rb | 19 | ||||
| -rw-r--r-- | app/helpers/sections_helper.rb | 15 | ||||
| -rw-r--r-- | app/javascript/controllers/map_controller.js | 4 | ||||
| -rw-r--r-- | app/javascript/controllers/taxonomy_controller.js | 35 | ||||
| -rw-r--r-- | app/javascript/packs/application.js | 3 | ||||
| -rw-r--r-- | app/views/resources/_popup.html.erb | 10 |
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 © <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> |