aboutsummaryrefslogtreecommitdiff
path: root/app/javascript
diff options
context:
space:
mode:
authorhellekin <hellekin@cepheide.org>2021-01-22 10:35:07 +0100
committerhellekin <hellekin@cepheide.org>2021-01-22 10:35:07 +0100
commit97bfc3f6012027077077ea4a6b5f2f709c76158e (patch)
tree51df0783d3c8ce8b2e928c73d28a77fffb417dbb /app/javascript
parentbf087e092cc60defb307f4625333c97327283cc3 (diff)
downloadincommon-map-97bfc3f6012027077077ea4a6b5f2f709c76158e.tar.gz
Add markers and popups
- Replace MakiMarkers with ExtraMarkers and ForkAwesome - Add HTML popup binding
Diffstat (limited to 'app/javascript')
-rw-r--r--app/javascript/controllers/map_controller.js4
-rw-r--r--app/javascript/controllers/taxonomy_controller.js35
-rw-r--r--app/javascript/packs/application.js3
3 files changed, 12 insertions, 30 deletions
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'