1 files changed, 49 insertions, 0 deletions
diff --git a/app/javascript/controllers/map_controller.js b/app/javascript/controllers/map_controller.js
new file mode 100644
index 0000000..5363e5e
--- /dev/null
+++ b/app/javascript/controllers/map_controller.js
@@ -0,0 +1,49 @@
+// SPDX-FileCopyrightText: 2020 IN COMMON Collective <collective@incommon.cc>
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+// Visit The Stimulus Handbook for more details
+// https://stimulusjs.org/handbook/introduction
+//
+
+import { Controller } from "stimulus"
+import L from "leaflet"
+import "leaflet/dist/leaflet.css"
+
+export default class extends Controller {
+    static targets = [ "container" ]
+
+    initialize() {
+        console.log("Map controller initialized.")
+    }
+
+    connect() {
+        this.map = L.map(this.containerTarget, {
+            zoomDelta: 0.5,
+            zoomSnap: 0.5,
+        }).setView(this._coordinates(), this._zoom());
+
+        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);
+    }
+
+    disconnect() {
+        this.map.remove();
+        console.log('Map controller disconnected.')
+    }
+
+    _coordinates() {
+        return [this.data.get('latitude'), this.data.get('longitude')];
+    }
+
+    _zoom() {
+        return this.data.get('zoom');
+    }
+
+}