mirror of
https://github.com/Freika/dawarich.git
synced 2026-01-10 17:21:38 -05:00
Allow to set the default map center via an environment variable.
This commit is contained in:
parent
7bc1efef58
commit
4af91748f0
3 changed files with 45 additions and 23 deletions
|
|
@ -8,31 +8,14 @@ export default class extends Controller {
|
|||
connect() {
|
||||
console.log("Map controller connected")
|
||||
var markers = JSON.parse(this.element.dataset.coordinates)
|
||||
var center = markers[0]
|
||||
var lastMarker = markers[markers.length - 1].slice(0, 2)
|
||||
var center = markers[0] || JSON.parse(this.element.dataset.center)
|
||||
var center = (center === undefined) ? [52.516667, 13.383333] : center;
|
||||
var map = L.map(this.containerTarget).setView([center[0], center[1]], 14);
|
||||
|
||||
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
maxZoom: 19,
|
||||
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||||
}).addTo(map);
|
||||
|
||||
for (var i = 0; i < markers.length; i++) {
|
||||
var lat = markers[i][0];
|
||||
var lon = markers[i][1];
|
||||
|
||||
var popupContent = this.popupContent(markers[i]);
|
||||
var circleMarker = L.circleMarker([lat, lon], {radius: 4})
|
||||
|
||||
circleMarker.bindPopup(popupContent).openPopup();
|
||||
circleMarker.addTo(map);
|
||||
}
|
||||
|
||||
var coordinates = markers.map(element => element.slice(0, 2));
|
||||
|
||||
L.marker(lastMarker).addTo(map);
|
||||
L.polyline(coordinates).addTo(map);
|
||||
this.addTileLayer(map);
|
||||
this.addMarkers(map, markers);
|
||||
this.addPolyline(map, markers);
|
||||
this.addLastMarker(map, markers);
|
||||
}
|
||||
|
||||
disconnect() {
|
||||
|
|
@ -63,4 +46,38 @@ export default class extends Controller {
|
|||
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
}
|
||||
|
||||
setMap
|
||||
|
||||
addTileLayer(map) {
|
||||
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
maxZoom: 19,
|
||||
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||||
}).addTo(map);
|
||||
}
|
||||
|
||||
addMarkers(map, markers) {
|
||||
for (var i = 0; i < markers.length; i++) {
|
||||
var lat = markers[i][0];
|
||||
var lon = markers[i][1];
|
||||
|
||||
var popupContent = this.popupContent(markers[i]);
|
||||
var circleMarker = L.circleMarker([lat, lon], {radius: 4})
|
||||
|
||||
circleMarker.bindPopup(popupContent).openPopup();
|
||||
circleMarker.addTo(map);
|
||||
}
|
||||
}
|
||||
|
||||
addPolyline(map, markers) {
|
||||
var coordinates = markers.map(element => element.slice(0, 2));
|
||||
L.polyline(coordinates).addTo(map);
|
||||
}
|
||||
|
||||
addLastMarker(map, markers) {
|
||||
if (markers.length > 0) {
|
||||
var lastMarker = markers[markers.length - 1].slice(0, 2)
|
||||
L.marker(lastMarker).addTo(map);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,11 @@
|
|||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="w-full" data-controller="maps" data-coordinates="<%= @coordinates %>">
|
||||
<div
|
||||
class="w-full"
|
||||
data-controller="maps"
|
||||
data-coordinates="<%= @coordinates %>"
|
||||
data-center="<%= MAP_CENTER %>">
|
||||
<div data-maps-target="container" class="h-[25rem] w-auto min-h-screen"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1 +1,2 @@
|
|||
MINIMUM_POINTS_IN_CITY = ENV.fetch('MINIMUM_POINTS_IN_CITY', 5).to_i
|
||||
MAP_CENTER = ENV.fetch('MAP_CENTER', '[55.7522, 37.6156]')
|
||||
|
|
|
|||
Loading…
Reference in a new issue