diff --git a/contao/templates/frontend/event_map.html.twig b/contao/templates/frontend/event_map.html.twig
index 1954168..9e2adb0 100644
--- a/contao/templates/frontend/event_map.html.twig
+++ b/contao/templates/frontend/event_map.html.twig
@@ -112,4 +112,4 @@
-
+
diff --git a/public/assets/map-module.js b/public/assets/map-module.js
index dfa8151..b515581 100644
--- a/public/assets/map-module.js
+++ b/public/assets/map-module.js
@@ -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 });