From 97bfc3f6012027077077ea4a6b5f2f709c76158e Mon Sep 17 00:00:00 2001 From: hellekin Date: Fri, 22 Jan 2021 10:35:07 +0100 Subject: Add markers and popups - Replace MakiMarkers with ExtraMarkers and ForkAwesome - Add HTML popup binding --- app/javascript/controllers/map_controller.js | 4 +-- app/javascript/controllers/taxonomy_controller.js | 35 ++++++----------------- 2 files changed, 10 insertions(+), 29 deletions(-) (limited to 'app/javascript/controllers') 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 © OpenStreetMap contributors, CC-BY-SA, Imagery Mapbox', 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)) -- cgit v1.2.3