aboutsummaryrefslogtreecommitdiff
path: root/app/javascript/controllers
diff options
context:
space:
mode:
Diffstat (limited to 'app/javascript/controllers')
-rw-r--r--app/javascript/controllers/map_controller.js59
-rw-r--r--app/javascript/controllers/taxonomy_controller.js112
2 files changed, 154 insertions, 17 deletions
diff --git a/app/javascript/controllers/map_controller.js b/app/javascript/controllers/map_controller.js
index 30c1361..1704da8 100644
--- a/app/javascript/controllers/map_controller.js
+++ b/app/javascript/controllers/map_controller.js
@@ -7,32 +7,65 @@
//
import { Controller } from "stimulus"
-import "leaflet/dist/leaflet.css"
-import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css'; // Re-uses images from ~leaflet package
-import L from "leaflet"
+import 'leaflet/dist/leaflet.css'
+// Re-uses images from ~leaflet package
+import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css'
+
+import * as L from 'leaflet'
+import 'leaflet-defaulticon-compatibility'
+import "leaflet-providers"
+import "leaflet.markercluster/dist/leaflet.markercluster.js"
+
+import 'leaflet-makimarkers'
export default class extends Controller {
static targets = [ "container" ]
initialize() {
-
+ console.log("Map controller initialized.")
+ this.mapBoxAPIToken = 'pk.eyJ1IjoibmVtYWVsIiwiYSI6ImNrZzBrYjBudTB3bnMyenFmNWtrN3h3bmMifQ.Rkeyhm-9iIQOV7NAMA5LaA'
}
connect() {
- this.map = L.map(this.containerTarget, {
- zoomDelta: 0.5,
- zoomSnap: 0.5,
- }).setView(this._coordinates(), this._zoom());
+ L.MakiMarkers.accessToken = this.mapBoxAPIToken
- L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
+ 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,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
- accessToken: 'pk.eyJ1IjoibmVtYWVsIiwiYSI6ImNrZzBrYjBudTB3bnMyenFmNWtrN3h3bmMifQ.Rkeyhm-9iIQOV7NAMA5LaA'
- }).addTo(this.map);
+ accessToken: this.mapBoxAPIToken
+ })
+
+ var stamen_tr = L.tileLayer.provider('Stamen.Toner')
+ var stamen_wc = L.tileLayer.provider('Stamen.Watercolor')
+ var tiles_osm = L.tileLayer.provider('OpenStreetMap.Mapnik')
+ var tiles_sat = L.tileLayer.provider('Esri.WorldImagery')
+
+ const tilemaps = {
+ 'osm': tiles_osm,
+ 'mapbox': mapbox,
+ 'watercolor': stamen_wc,
+ 'greyscale': stamen_tr,
+ 'satellite': tiles_sat
+ }
+
+ const overlays = {}
+
+ this.map = L.map(this.containerTarget, {
+ zoomDelta: 0.5,
+ zoomSnap: 0.5,
+ layers: [ tiles_osm ],
+ }).setView(this._coordinates(), this._zoom());
+
+ L.control.layers(tilemaps, overlays).addTo(this.map)
+
+ L.DomEvent.on(window, 'hashchange', this.doSomethingCool);
+
+ // Allow calling the mapController from elsewhere.
+ this.element[this.identifier] = this
}
disconnect() {
@@ -40,6 +73,10 @@ export default class extends Controller {
console.log('Map controller disconnected.')
}
+ doSomethingCool() {
+ console.log(window.location.hash)
+ }
+
_coordinates() {
return [this.data.get('latitude'), this.data.get('longitude')];
}
diff --git a/app/javascript/controllers/taxonomy_controller.js b/app/javascript/controllers/taxonomy_controller.js
index 16d57fa..02b1483 100644
--- a/app/javascript/controllers/taxonomy_controller.js
+++ b/app/javascript/controllers/taxonomy_controller.js
@@ -9,15 +9,18 @@
import { Controller } from "stimulus"
export default class extends Controller {
- static targets = [ "category", "deploy", "filter", "section", "toggle" ]
+ static targets = [ "category", "deploy", "filter", "layers", "section", "toggle" ]
initialize() {
console.log("Taxonomy controller initialized.")
+
+ this.overlays = {}
+ this.sectionsOnMap = []
}
connect() {
console.log("Taxonomy controller connected.")
-
+ this.taxonomy_uuid = this.data.get('uuid')
if (this.hasFilterTarget) {
let url = `/taxonomies/${this.data.get('uuid')}/filter.js`
console.log(`loading url = ${url}`)
@@ -29,10 +32,19 @@ export default class extends Controller {
} else {
console.log("Taxonomy filter is missing")
}
+
+ // Access the map
+ if (this.map = document.querySelector('#map').parentElement.map.map) {
+ console.log("Taxonomy Controller connected to this.map")
+ } else {
+ console.log("Taxonomy Controller could not load map!")
+ }
}
+
deploy() {
console.log(`deploying taxonomy ${this.data.get('uuid')}`);
+
fetch(`/taxonomies/${this.data.get('uuid')}.js`)
.then(response => response.text())
.then(html => this.deployTarget.innerHTML = html);
@@ -45,12 +57,100 @@ export default class extends Controller {
}
category(event) {
- let catId = event.target.dataset.taxonomyCategoryId
- event.target.classList.toggle('active')
+ let catId = (event.target.dataset.taxonomyCategoryId || event.target.parentNode.parentNode.dataset.CategoryId)
+ let secId = event.target.dataset.taxonomySectionId
+ console.log(`Category: ${catId}/${secId}`)
+ var active = event.target.classList.toggle('active')
+ if (active) {
+ console.log('activated')
+ } else {
+ console.log('deactivated')
+ }
+ }
+
+ loadCategory(catId) {
+ document.querySelector(`#category-${catId}`).lastChild.childNodes.forEach(function(li) {
+ this._mapLayerToggleSection(li.dataset.taxonomySectionId)
+ })
}
section(event) {
- let catId = event.target.dataset.taxonomySectionId
- event.target.classList.toggle('active')
+ let secId = event.target.dataset.taxonomySectionId
+ console.log(`Section: ${secId} to be loaded`)
+ this._loadMarkers(secId)
+ 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)}]...`)
+ let overlay = L.layerGroup();
+ let markers = L.markerClusterGroup();
+ let iconName = this._sectionIconName(secId);
+
+ fetch(`/sections/${secId}.json`, {
+ headers: { 'X-CSRF-Token': this._csrfToken() }
+ })
+ .then(response => response.json())
+ .then(data => {
+ L.geoJSON(data, {
+ 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'
+ })
+ });
+ },
+ onEachFeature: (feature, layer) => {
+ layer.on('click', () => this.onClick(layer))
+ layer.addTo(markers)
+ }
+ })
+ })
+ console.log(`cluster counts ${markers.length} markers`)
+ this.overlays[secId] = markers
+ }
+ }
+
+ onClick(layer) {
+ console.log(layer)
+ }
+
+ _mapLayerToggleSection(secId) {
+ if (this.sectionsOnMap.includes(secId)) {
+ console.log(`removing section ${secId} from map`)
+ this.map.removeLayer(this.overlays[secId])
+ this.sectionsOnMap.pop(secId)
+ } else {
+ console.log(`adding section ${secId} to the map`)
+ this.sectionsOnMap.push(secId)
+ this.overlays[secId].addTo(this.map)
+ }
+ }
+
+ _csrfToken() {
+ return document.querySelector('[name=csrf-token]').content
}
}