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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
// 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'
// 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-extra-markers'
import 'leaflet-easyprint'
import { GeoSearchControl, OpenStreetMapProvider } from 'leaflet-geosearch';
export default class extends Controller {
static targets = [ "container" ]
initialize() {
console.log("Map controller initialized.")
this.mapBoxAPIToken = 'pk.eyJ1IjoibmVtYWVsIiwiYSI6ImNrZzBrYjBudTB3bnMyenFmNWtrN3h3bmMifQ.Rkeyhm-9iIQOV7NAMA5LaA'
}
connect() {
var mapbox = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © <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: 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)
/* Show current scale in meters or kilometers */
L.control.scale({ imperial: false }).addTo(this.map);
L.DomEvent.on(window, 'hashchange', this.doSomethingCool);
/* Show a button to print the map */
L.easyPrint({
title: 'Print this map',
position: 'bottomright',
filename: `incommon-map-detail`,
exportOnly: true,
sizeModes: ['A4Portrait', 'A4Landscape']
}).addTo(this.map);
/* Add search */
const provider = new OpenStreetMapProvider();
const searchControl = new GeoSearchControl({
provider: provider,
style: 'button',
position: 'bottomright'
});
this.map.addControl(searchControl);
// Allow calling the mapController from elsewhere.
this.element[this.identifier] = this
}
disconnect() {
this.map.remove();
console.log('Map controller disconnected.')
}
doSomethingCool() {
console.log(window.location.hash)
}
_coordinates() {
return [this.data.get('latitude'), this.data.get('longitude')];
}
_zoom() {
return this.data.get('zoom');
}
}
|
