1 files changed, 48 insertions, 11 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')];
     }