ske087/moto-adv-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Map: Use standard Leaflet green/red pin icons for GPX route start/end markers in map_iframe_single.html

Browse Source
This commit is contained in:
ske087
2025-07-27 01:29:12 +03:00
parent cee3711fd8
commit a64e206fc8
12 changed files with 2116 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
app/static/map_iframe.html
View File

@@ -143,8 +143,6 @@
<!-- Map Controls -->
<div class="map-controls">
<button id="fit-routes" class="map-control-btn" title="Fit all routes">🎯</button>
<button id="toggle-routes" class="map-control-btn active" title="Toggle routes">🛣️</button>
<button id="refresh-map" class="map-control-btn" title="Refresh map">🔄</button>
</div>
@@ -162,10 +160,22 @@
// Create map
map = L.map('map', {
zoomControl: true,
scrollWheelZoom: true,
scrollWheelZoom: false, // Disable default scroll wheel zoom
doubleClickZoom: true,
touchZoom: true
}).setView(romaniaCenter, romaniaZoom);
// Enable zoom with Ctrl/Cmd + wheel only
map.getContainer().addEventListener('wheel', function(e) {
if ((e.ctrlKey || e.metaKey) && map.options.scrollWheelZoom !== true) {
map.options.scrollWheelZoom = true;
} else if (!(e.ctrlKey || e.metaKey) && map.options.scrollWheelZoom !== false) {
map.options.scrollWheelZoom = false;
}
if (!(e.ctrlKey || e.metaKey)) {
e.preventDefault(); // Prevent zoom if not holding Ctrl/Cmd
}
}, { passive: false });
// Add OpenStreetMap tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
@@ -226,7 +236,7 @@
routesData.forEach((route, index) => {
if (route.coordinates && route.coordinates.length > 0) {
const color = colors[index % colors.length];
// Create polyline
const polyline = L.polyline(route.coordinates, {
color: color,
@@ -234,7 +244,7 @@
opacity: 0.8,
smoothFactor: 1
});
// Create popup content
const popupContent = `
<div class="route-popup">
@@ -260,15 +270,43 @@
</a>
</div>
`;
polyline.bindPopup(popupContent);
// Add to route layer
routeLayer.addLayer(polyline);
// Add start and end markers
const startCoord = route.coordinates[0];
const endCoord = route.coordinates[route.coordinates.length - 1];
// Green start marker
const startMarker = L.marker(startCoord, {
icon: L.icon({
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
shadowSize: [41, 41]
})
}).bindPopup(`<b>Start of route</b><br>${route.title}`);
routeLayer.addLayer(startMarker);
// Red end marker
const endMarker = L.marker(endCoord, {
icon: L.icon({
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
shadowSize: [41, 41]
})
}).bindPopup(`<b>End of route</b><br>${route.title}`);
routeLayer.addLayer(endMarker);
// Collect bounds for fitting
allBounds.push(...route.coordinates);
console.log(`Added route: ${route.title} (${route.coordinates.length} points)`);
}
});
@@ -298,27 +336,7 @@
}
function setupControls() {
// Fit routes button
document.getElementById('fit-routes').addEventListener('click', () => {
if (routeLayer.getLayers().length > 0) {
const group = new L.FeatureGroup();
routeLayer.eachLayer(layer => group.addLayer(layer));
map.fitBounds(group.getBounds(), { padding: [20, 20] });
}
});
// Toggle routes button
document.getElementById('toggle-routes').addEventListener('click', (e) => {
if (routesVisible) {
map.removeLayer(routeLayer);
e.target.classList.remove('active');
routesVisible = false;
} else {
map.addLayer(routeLayer);
e.target.classList.add('active');
routesVisible = true;
}
});
// Only refresh map button remains
// Refresh map button
document.getElementById('refresh-map').addEventListener('click', () => {