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 });