Allow to set the default map center via an environment variable.

This commit is contained in:
Eugene Burmakin 2024-03-21 23:54:19 +01:00
parent 7bc1efef58
commit 4af91748f0
3 changed files with 45 additions and 23 deletions

View file

@ -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: '&copy; <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: '&copy; <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);
}
}
}

View file

@ -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>

View file

@ -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]')