kevinsivic/dawarich
1
0
Fork 0
mirror of https://github.com/Freika/dawarich.git synced 2026-01-10 17:21:38 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Move js spaghetti to a tiny bit more structured codebase

Browse source
This commit is contained in:
Eugene Burmakin 2024-04-17 22:00:23 +02:00
parent 44c2d7eaf2
commit e0244335b7
1 changed files with 49 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -10,55 +10,27 @@ export default class extends Controller {
var markers = JSON.parse(this.element.dataset.coordinates)
var center = markers[markers.length - 1] || JSON.parse(this.element.dataset.center)
var center = (center === undefined) ? [52.516667, 13.383333] : center;
var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
});
var osmHOT = L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors, Tiles style by Humanitarian OpenStreetMap Team hosted by OpenStreetMap France'
});
var baseMaps = {
"OpenStreetMap": osm,
"OpenStreetMap.HOT": osmHOT
};
var map = L.map(this.containerTarget, {
layers: [osm, osmHOT]
layers: [this.osmMapLayer(), this.osmHotMapLayer()]
}).setView([center[0], center[1]], 14);
var markersArray = []
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})
markersArray.push(circleMarker.bindPopup(popupContent).openPopup())
}
var markersArray = this.markersArray(markers)
var markersLayer = L.layerGroup(markersArray)
markersLayer.addTo(map);
var polylineCoordinates = markers.map(element => element.slice(0, 2));
var polylineLayer = L.polyline(polylineCoordinates)
polylineLayer.addTo(map);
var controlsLayer = {
"Points": markersLayer,
"Polyline": polylineLayer
}
var layerControl = L.control.layers(baseMaps, controlsLayer).addTo(map);
var layerControl = L.control.layers(this.baseMaps(), controlsLayer).addTo(map);
this.addTileLayer(map);
// var markersLayer = this.addMarkers(map, markers);
// this.addPolyline(map, markers);
markersLayer.addTo(map);
polylineLayer.addTo(map);
this.addLastMarker(map, markers);
}
@ -66,6 +38,50 @@ export default class extends Controller {
this.map.remove();
}
osmMapLayer() {
return L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
})
}
osmHotMapLayer() {
return L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors, Tiles style by Humanitarian OpenStreetMap Team hosted by OpenStreetMap France'
})
}
baseMaps() {
return {
"OpenStreetMap": this.osmMapLayer(),
"OpenStreetMap.HOT": this.osmHotMapLayer()
}
}
controlsLayer() {
return {
"Points": this.markersLayer,
"Polyline": this.polylineLayer
}
}
markersArray(markers_data) {
var markersArray = []
for (var i = 0; i < markers_data.length; i++) {
var lat = markers_data[i][0];
var lon = markers_data[i][1];
var popupContent = this.popupContent(markers_data[i]);
var circleMarker = L.circleMarker([lat, lon], {radius: 4})
markersArray.push(circleMarker.bindPopup(popupContent).openPopup())
}
return markersArray
}
popupContent(marker) {
return `
<b>Timestamp:</b> ${this.formatDate(marker[4])}<br>