mummert/eventmanager-bundle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Map: satellite hybrid overlays for labels and roads

Browse Source
This commit is contained in:
Jürgen Mummert
2026-02-27 19:31:36 +01:00
parent 229f99ea19
commit 088bc58102
2 changed files with 54 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/map-module.js
+53
View File
@@ -15,6 +15,12 @@ const EVENT_UNCLUSTERED_LAYER_ID = 'eventmanager-events-unclustered';
const SATELLITE_SOURCE_ID = 'eventmanager-satellite-source';
const SATELLITE_LAYER_ID = 'eventmanager-satellite-layer';
const SATELLITE_TILE_URL = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}';
const SATELLITE_LABELS_SOURCE_ID = 'eventmanager-satellite-labels-source';
const SATELLITE_LABELS_LAYER_ID = 'eventmanager-satellite-labels-layer';
const SATELLITE_LABELS_TILE_URL = 'https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}';
const SATELLITE_ROADS_SOURCE_ID = 'eventmanager-satellite-roads-source';
const SATELLITE_ROADS_LAYER_ID = 'eventmanager-satellite-roads-layer';
const SATELLITE_ROADS_TILE_URL = 'https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer/tile/{z}/{y}/{x}';
const SATELLITE_ATTRIBUTION = '© Esri, Maxar';
let dependenciesPromise = null;
@@ -312,6 +318,44 @@ const ensureSatelliteLayer = (map) => {
'raster-saturation': 0,
},
}, beforeId);
map.addSource(SATELLITE_ROADS_SOURCE_ID, {
type: 'raster',
tiles: [SATELLITE_ROADS_TILE_URL],
tileSize: 256,
attribution: SATELLITE_ATTRIBUTION,
});
map.addLayer({
id: SATELLITE_ROADS_LAYER_ID,
type: 'raster',
source: SATELLITE_ROADS_SOURCE_ID,
layout: {
visibility: 'none',
},
paint: {
'raster-opacity': 1,
},
}, beforeId);
map.addSource(SATELLITE_LABELS_SOURCE_ID, {
type: 'raster',
tiles: [SATELLITE_LABELS_TILE_URL],
tileSize: 256,
attribution: SATELLITE_ATTRIBUTION,
});
map.addLayer({
id: SATELLITE_LABELS_LAYER_ID,
type: 'raster',
source: SATELLITE_LABELS_SOURCE_ID,
layout: {
visibility: 'none',
},
paint: {
'raster-opacity': 1,
},
}, beforeId);
};
const setSatelliteMode = (map, enabled) => {
@@ -325,7 +369,16 @@ const setSatelliteMode = (map, enabled) => {
return;
}
const hybridOverlayLayerIds = [SATELLITE_ROADS_LAYER_ID, SATELLITE_LABELS_LAYER_ID];
map.setLayoutProperty(SATELLITE_LAYER_ID, 'visibility', enabled ? 'visible' : 'none');
hybridOverlayLayerIds.forEach((layerId) => {
if (map.getLayer(layerId)) {
map.setLayoutProperty(layerId, 'visibility', enabled ? 'visible' : 'none');
map.setPaintProperty(layerId, 'raster-opacity-transition', { duration: EVENT_FADE_DURATION_MS, delay: 0 });
map.setPaintProperty(layerId, 'raster-opacity', enabled ? 1 : 0);
}
});
map.setPaintProperty(SATELLITE_LAYER_ID, 'raster-opacity-transition', { duration: EVENT_FADE_DURATION_MS, delay: 0 });
map.setPaintProperty(SATELLITE_LAYER_ID, 'raster-brightness-min-transition', { duration: EVENT_FADE_DURATION_MS, delay: 0 });
map.setPaintProperty(SATELLITE_LAYER_ID, 'raster-brightness-max-transition', { duration: EVENT_FADE_DURATION_MS, delay: 0 });