brian/wanderer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adds map_with_elevation_multiple

Browse Source
This commit is contained in:
Christian Beutel
2024-09-10 00:06:21 +02:00
parent da658fdf27
commit 86c377225b
22 changed files with 559 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
web/src/lib/vendor/leaflet-elevation/libs/leaflet-gpxgroup.js vendored
View File

@@ -110,6 +110,8 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
this._hotline = L.featureGroup();
this._elevation = L.control.elevation(this.options.elevation_options);
this._routes = [];
this.options.points.forEach((poi) =>
L
.marker(poi.latlng, { icon: L.icon(this.options.points_options.icon) })
@@ -123,9 +125,9 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
},
addTo: function (map) {
this._hotline.addTo(map);
this._layers.addTo(map);
this._markers.addTo(map);
this._hotline.addTo(map);
this._map = map;
@@ -137,23 +139,37 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
this._tracks.forEach(this._addTrack, this);
},
select(index) {
if (index > this._routes.length - 1) {
return
}
this.setSelection(this._routes[index])
},
_addTrack: function (track) {
if (track instanceof Object) {
this._loadGeoJSON(track);
} else {
this._elevation._parseFromString(track)
.then(geojson => this._loadGeoJSON(geojson, track.split('/').pop().split('#')[0].split('?')[0]))
.then(geojson => this._loadGeoJSON(geojson, this._hashCode(track), track.split('/').pop().split('#')[0].split('?')[0]))
}
},
_hashCode: (s) => s.split('').reduce((a,b) => (((a << 5) - a) + b.charCodeAt(0))|0, 0),
clear: function () {
this._elevation.clear()
this._elevation.remove();
this._clearLayers();
this._clearLayers(this._markers);
this._clearLayers(this._hotline)
this._count = 0;
this._loadedCount = 0;
this._tracks = []
this._routes = []
this.fire('clear')
},
_clearLayers(l) {
@@ -164,8 +180,9 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
}
},
_loadGeoJSON: function (geojson, fallbackName) {
if (geojson) {
_loadGeoJSON: function (geojson, hash, fallbackName) {
if (geojson) {
geojson.hash = hash
geojson.name = geojson.name || (geojson[0] && geojson[0].properties.name) || fallbackName;
this._loadRoute(geojson);
}
@@ -180,14 +197,14 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
weight: 5,
distanceMarkers: this.options.distanceMarkers_options,
};
var route = L.geoJson(data, {
name: data.name || '',
style: (feature) => line_style,
distanceMarkers: line_style.distanceMarkers,
originalStyle: line_style,
isGroupLayer: true,
index: this._count - 1,
hash: data.hash,
filter: feature => feature.geometry.type != "Point",
});
@@ -196,6 +213,8 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
route.addTo(this._layers);
route.eachLayer((layer) => this._onEachRouteLayer(route, layer));
this._onEachRouteLoaded(route);
});
@@ -204,6 +223,8 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
_onEachRouteLayer: function (route, layer) {
var polyline = layer;
this._routes.push(route)
route.on('selected', L.bind(this._onRouteSelected, this, route, polyline));
polyline.on('mouseover', L.bind(this._onRouteMouseOver, this, route, polyline));
@@ -211,15 +232,14 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
polyline.on('click', L.bind(this._onRouteClick, this, route, polyline));
const startIcon = L.divIcon({
html: '<i class="px-2 py-2 text-white bg-gray-500 rounded-lg fa fa-bullseye"></i>',
html: '<i class="px-2 py-2 text-white bg-gray-500 rounded-lg fa fa-bullseye -translate-x-1/2"></i>',
className: 'start-icon'
});
const endIcon = L.divIcon({
html: '<i class="px-2 py-2 text-white bg-gray-500 rounded-lg fa fa-flag-checkered"></i>',
html: '<i class="px-2 py-2 text-white bg-gray-500 rounded-lg fa fa-flag-checkered -translate-x-1/2"></i>',
className: 'end-icon'
});
const latlngs = polyline.getLatLngs();
const latlngs = polyline.getLatLngs();
if (this._loadedCount == 0) {
L.marker(latlngs[0], { icon: startIcon }).addTo(this._markers)
@@ -280,26 +300,35 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
}
},
_onSelectionChanged: function (e) {
_onSelectionChanged: async function (e) {
var elevation = this._elevation;
var eleDiv = elevation.getContainer();
var route = this.getSelection();
var hotline = this._hotline;
elevation.clear();
hotline.clearLayers();
if (route && route.isSelected()) {
elevation.clear();
if (!eleDiv) {
elevation.addTo(this._map);
this._map.invalidateSize()
}
route.getLayers().forEach(function (layer) {
for (const layer of route.getLayers()) {
if (layer instanceof L.Polyline) {
elevation.addData(layer, false);
await elevation.addData(layer, false);
}
});
}
await elevation._initHotLine(route, this._hotline)
this._map.flyToBounds(route.getBounds(), { duration: 0.25, easeLinearity: 0.25, noMoveStart: true });
} else {
if (eleDiv) {
elevation.remove();
this._map.invalidateSize()
}
}
},

32
web/src/lib/vendor/leaflet-elevation/src/control.js vendored
View File

@@ -38,18 +38,17 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
/*
* Add data to the diagram either from GPX or GeoJSON and update the axis domain and data
*/
addData(d, layer) {
this.import(this.__D3)
.then(() => {
if (this._modulesLoaded) {
layer = layer ?? (d.on && d);
this._addData(d);
this._addLayer(layer);
this._fireEvt("eledata_added", { data: d, layer: layer, track_info: this.track_info });
} else {
this.once('modules_loaded', () => this.addData(d, layer));
}
});
async addData(d, layer) {
await this.import(this.__D3)
if (this._modulesLoaded) {
layer = layer ?? (d.on && d);
this._addData(d);
this._addLayer(layer);
this._fireEvt("eledata_added", { data: d, layer: layer, track_info: this.track_info });
} else {
this.once('modules_loaded', () => this.addData(d, layer));
}
},
/**
@@ -450,10 +449,14 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
let prop = typeof this.options.hotline == 'string' ? this.options.hotline : 'elevation';
return this.options.hotline ? this.import(/* @vite-ignore */this.__LHOTLINE)
.then(() => {
const map = this._map
map.createPane('hotline');
map.getPane('hotline').style.pointerEvents = 'none';
layer.eachLayer((trkseg) => {
if (trkseg.feature.geometry.type != "Point") {
let line = L.hotline(this._data.map(m => [m.x, m.y, m[prop] || 0]), {
renderer: L.Hotline.renderer(),
renderer: L.Hotline.renderer({pane: "hotline"}),
min: isFinite(this.track_info[prop + '_min']) ? this.track_info[prop + '_min'] : 0,
max: isFinite(this.track_info[prop + '_max']) ? this.track_info[prop + '_max'] : 1,
palette: {
@@ -465,8 +468,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
outlineColor: '#000000',
outlineWidth: 1
}).addTo(target);
console.log(this._data);
let alpha = trkseg.options.style && trkseg.options.style.opacity || 1;
trkseg.on('add remove', ({ type }) => {
trkseg.setStyle({ opacity: (type == 'add' ? 0 : alpha) });