aboutsummaryrefslogtreecommitdiff
path: root/app/javascript/controllers/map_controller.js
blob: 2a2b31057a66fa810bfba835f141501d82b870a6 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
// 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 "leaflet/dist/leaflet.css"
import L from "leaflet"


export default class extends Controller {
    static targets = [ "container" ]

    initialize() {

    }

    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');
    }

}