kevinsivic/dawarich
1
0
Fork 0
mirror of https://github.com/Freika/dawarich.git synced 2026-01-11 09:41:40 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

61
app/javascript/controllers/maps_controller.js
View file

@ -8,31 +8,14 @@ export default class extends Controller {
connect() { connect() {
console.log("Map controller connected") console.log("Map controller connected")
var markers = JSON.parse(this.element.dataset.coordinates) var markers = JSON.parse(this.element.dataset.coordinates)
var center = markers[0] var center = markers[0] || JSON.parse(this.element.dataset.center)
var lastMarker = markers[markers.length - 1].slice(0, 2)
var center = (center === undefined) ? [52.516667, 13.383333] : center; var center = (center === undefined) ? [52.516667, 13.383333] : center;
var map = L.map(this.containerTarget).setView([center[0], center[1]], 14); var map = L.map(this.containerTarget).setView([center[0], center[1]], 14);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { this.addTileLayer(map);
maxZoom: 19, this.addMarkers(map, markers);
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' this.addPolyline(map, markers);
}).addTo(map); this.addLastMarker(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);
}
var coordinates = markers.map(element => element.slice(0, 2));
L.marker(lastMarker).addTo(map);
L.polyline(coordinates).addTo(map);
} }
disconnect() { disconnect() {
@ -63,4 +46,38 @@ export default class extends Controller {
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; 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);
}
}
} }

6
app/views/points/index.html.erb
View file

@ -22,7 +22,11 @@
</div> </div>
<% end %> <% 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 data-maps-target="container" class="h-[25rem] w-auto min-h-screen"></div>
</div> </div>
</div> </div>

1
config/initializers/00_constants.rb
View file

@ -1 +1,2 @@
MINIMUM_POINTS_IN_CITY = ENV.fetch('MINIMUM_POINTS_IN_CITY', 5).to_i MINIMUM_POINTS_IN_CITY = ENV.fetch('MINIMUM_POINTS_IN_CITY', 5).to_i
MAP_CENTER = ENV.fetch('MAP_CENTER', '[55.7522, 37.6156]')