Map: satellite hybrid overlays for labels and roads

contao/dca/tl_module.php

@@ -9,7 +9,7 @@ use Contao\StringUtil;
 $GLOBALS['TL_DCA']['tl_module']['palettes']['member_organizations'] = '{title_legend},name,headline,type;{eventmanager_legend},editPage;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
 $GLOBALS['TL_DCA']['tl_module']['palettes']['member_events'] = '{title_legend},name,headline,type;{eventmanager_legend},editPage;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
 $GLOBALS['TL_DCA']['tl_module']['palettes']['event_filter'] = '{title_legend},name,headline,type;{eventmanager_legend},cal_calendar,eventListDomId;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
-$GLOBALS['TL_DCA']['tl_module']['palettes']['eventmanager_map'] = '{title_legend},name,headline,type;{eventmanager_legend},mapShowOrganizations,organizationTypeTags,mapShowExternalOrganizations,mapShowEvents,mapInitialDisplay,mapEventColor,mapOrganizationColor,mapCenterMode;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
+$GLOBALS['TL_DCA']['tl_module']['palettes']['eventmanager_map'] = '{title_legend},name,headline,type;{eventmanager_legend},mapShowOrganizations,mapOrganizationListPage,organizationTypeTags,mapShowExternalOrganizations,mapShowEvents,mapInitialDisplay,mapEventColor,mapOrganizationColor,mapPitch,mapCenterMode;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
 $GLOBALS['TL_DCA']['tl_module']['palettes']['organization_edit'] = '{title_legend},name,headline,type;{eventmanager_legend},listPage,logoFolder,organizationTypeTags;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
 $GLOBALS['TL_DCA']['tl_module']['palettes']['event_edit'] = '{title_legend},name,headline,type;{eventmanager_legend},listPage,eventFolder,termsPage,frontendAuthorId,frontendArchiveId,eventTypeTags;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
 
@@ -74,15 +74,33 @@ $GLOBALS['TL_DCA']['tl_module']['fields']['organizationTypeTags'] = [
     'exclude' => true,
     'inputType' => 'checkbox',
     'options_callback' => static function () {
+        $database = Database::getInstance();
+        $labelExpression = $database->fieldExists('title', 'tl_tags')
+            ? "COALESCE(NULLIF(t.title, ''), t.tag)"
+            : 't.tag';
+
         $rows = Database::getInstance()
-            ->prepare('SELECT DISTINCT t.id, t.tag FROM tl_tags t LEFT JOIN tl_tags_rel r ON r.tag_id=t.id AND r.ptable=? AND r.field=? ORDER BY t.tag ASC')
+            ->prepare(sprintf(
+                'SELECT DISTINCT t.id, %1$s AS label
+                 FROM tl_tags_rel r
+                 INNER JOIN tl_tags t ON t.id=r.tag_id
+                 WHERE r.ptable=? AND r.field=?
+                 ORDER BY label ASC',
+                $labelExpression,
+            ))
             ->execute('tl_organization', 'tags')
             ->fetchAllAssoc();
 
         $options = [];
 
         foreach ($rows as $row) {
-            $options[(int) $row['id']] = (string) $row['tag'];
+            $label = trim((string) ($row['label'] ?? ''));
+
+            if ('' === $label) {
+                continue;
+            }
+
+            $options[(int) $row['id']] = $label;
         }
 
         return $options;
@@ -162,7 +180,7 @@ $GLOBALS['TL_DCA']['tl_module']['fields']['eventListDomId'] = [
 
 $GLOBALS['TL_DCA']['tl_module']['palettes']['__selector__'][] = 'mapCenterMode';
 $GLOBALS['TL_DCA']['tl_module']['palettes']['__selector__'][] = 'mapInitialDisplay';
-$GLOBALS['TL_DCA']['tl_module']['subpalettes']['mapCenterMode_custom'] = 'mapCenterLat,mapCenterLng,mapCenterZoom,mapPitch';
+$GLOBALS['TL_DCA']['tl_module']['subpalettes']['mapCenterMode_custom'] = 'mapCenterLat,mapCenterLng,mapCenterZoom';
 $GLOBALS['TL_DCA']['tl_module']['subpalettes']['mapInitialDisplay_organization_tag'] = 'mapInitialOrganizationTagId';
 
 $GLOBALS['TL_DCA']['tl_module']['fields']['mapShowOrganizations'] = [
@@ -173,6 +191,14 @@ $GLOBALS['TL_DCA']['tl_module']['fields']['mapShowOrganizations'] = [
     'sql' => ['type' => 'string', 'length' => 1, 'fixed' => true, 'default' => ''],
 ];
 
+$GLOBALS['TL_DCA']['tl_module']['fields']['mapOrganizationListPage'] = [
+    'label' => &$GLOBALS['TL_LANG']['tl_module']['mapOrganizationListPage'],
+    'exclude' => true,
+    'inputType' => 'pageTree',
+    'eval' => ['fieldType' => 'radio', 'mandatory' => false, 'tl_class' => 'w50'],
+    'sql' => ['type' => 'integer', 'unsigned' => true, 'default' => 0],
+];
+
 $GLOBALS['TL_DCA']['tl_module']['fields']['mapShowExternalOrganizations'] = [
     'label' => &$GLOBALS['TL_LANG']['tl_module']['mapShowExternalOrganizations'],
     'exclude' => true,
@@ -204,15 +230,33 @@ $GLOBALS['TL_DCA']['tl_module']['fields']['mapInitialOrganizationTagId'] = [
     'exclude' => true,
     'inputType' => 'select',
     'options_callback' => static function (): array {
-        $rows = Database::getInstance()
+        $database = Database::getInstance();
-            ->prepare('SELECT DISTINCT t.id, t.tag FROM tl_tags t LEFT JOIN tl_tags_rel r ON r.tag_id=t.id AND r.ptable=? AND r.field=? ORDER BY t.tag ASC')
+        $labelExpression = $database->fieldExists('title', 'tl_tags')
+            ? "COALESCE(NULLIF(t.title, ''), t.tag)"
+            : 't.tag';
+
+        $rows = $database
+            ->prepare(sprintf(
+                'SELECT DISTINCT t.id, %1$s AS label
+                 FROM tl_tags_rel r
+                 INNER JOIN tl_tags t ON t.id=r.tag_id
+                 WHERE r.ptable=? AND r.field=?
+                 ORDER BY label ASC',
+                $labelExpression,
+            ))
             ->execute('tl_organization', 'tags')
             ->fetchAllAssoc();
 
         $options = [];
 
         foreach ($rows as $row) {
-            $options[(int) $row['id']] = (string) $row['tag'];
+            $label = trim((string) ($row['label'] ?? ''));
+
+            if ('' === $label) {
+                continue;
+            }
+
+            $options[(int) $row['id']] = $label;
         }
 
         return $options;

contao/languages/de/tl_module.php

@@ -14,6 +14,7 @@ $GLOBALS['TL_LANG']['tl_module']['eventListDomId'] = ['Eventlisten-ID (DOM)', 'W
 $GLOBALS['TL_LANG']['tl_module']['organizationTypeTags'] = ['Anzuzeigende Organisationstypen', 'Optional: Begrenzen Sie die im Frontend anzeigbaren Organisationstyp-Tags. Leer = alle.'];
 $GLOBALS['TL_LANG']['tl_module']['eventTypeTags'] = ['Anzuzeigende Veranstaltungstypen', 'Optional: Begrenzen Sie die im Frontend anzeigbaren Veranstaltungstyp-Tags. Leer = alle.'];
 $GLOBALS['TL_LANG']['tl_module']['mapShowOrganizations'] = ['Organisationen anzeigen', 'Wenn aktiviert, werden Organisations-Marker auf der Karte dargestellt.'];
+$GLOBALS['TL_LANG']['tl_module']['mapOrganizationListPage'] = ['Seite für Organisationsliste', 'Optional: Seite, auf der die Organisationsliste liegt. Wird für den Link „mehr Infos“ im Organisations-Popup verwendet.'];
 $GLOBALS['TL_LANG']['tl_module']['mapShowExternalOrganizations'] = ['Externe Organisationen anzeigen', 'Wenn aktiviert, werden externe Organisationen (isExternal=1) zusätzlich auf der Karte dargestellt. Standard: nein.'];
 $GLOBALS['TL_LANG']['tl_module']['mapShowEvents'] = ['Veranstaltungen anzeigen', 'Wenn aktiviert, werden Event- (inkl. Orts-) Marker auf der Karte dargestellt.'];
 $GLOBALS['TL_LANG']['tl_module']['mapInitialDisplay'] = ['Initiale Anzeige', 'Definiert, welche Marker beim Laden der Karte initial angezeigt werden.'];

contao/languages/en/tl_module.php

@@ -14,6 +14,7 @@ $GLOBALS['TL_LANG']['tl_module']['eventListDomId'] = ['Event list ID (DOM)', 'Se
 $GLOBALS['TL_LANG']['tl_module']['organizationTypeTags'] = ['Displayed organization types', 'Optional: Limit which organization type tags can be selected in the frontend. Empty = all.'];
 $GLOBALS['TL_LANG']['tl_module']['eventTypeTags'] = ['Displayed event types', 'Optional: Limit which event type tags can be selected in the frontend. Empty = all.'];
 $GLOBALS['TL_LANG']['tl_module']['mapShowOrganizations'] = ['Show organizations', 'If enabled, organization markers are rendered on the map.'];
+$GLOBALS['TL_LANG']['tl_module']['mapOrganizationListPage'] = ['Organization list page', 'Optional: page containing the organization list. Used for the "more info" link in organization popups.'];
 $GLOBALS['TL_LANG']['tl_module']['mapShowExternalOrganizations'] = ['Show external organizations', 'If enabled, external organizations (isExternal=1) are additionally rendered on the map. Default: no.'];
 $GLOBALS['TL_LANG']['tl_module']['mapShowEvents'] = ['Show events', 'If enabled, event markers (including related locations) are rendered on the map.'];
 $GLOBALS['TL_LANG']['tl_module']['mapInitialDisplay'] = ['Initial display', 'Defines which markers are initially shown when the map is loaded.'];

contao/templates/frontend/event_map.html.twig

@@ -105,7 +105,11 @@
         width: 100%;
         min-height: 420px;
     }
+
+    .maplibregl-popup {
+        z-index: 2147483647;
+    }
 </style>
 
 <script type="application/json" id="{{ mapDataElementId|e('html_attr') }}">{{ mapItemsJson|raw }}</script>
-<script type="module" src="/bundles/mummertmediaeventmanager/assets/map-module.js?v=20260226h"></script>
+<script type="module" src="/bundles/mummertmediaeventmanager/assets/map-module.js?v=20260227a"></script>

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 });
@@ -438,6 +491,20 @@ const popupHtmlFor = (item) => {
         ].join('');
     }
 
+    if (item.type === 'organisation') {
+        const title = sanitizeDisplayText(item.title || '');
+        const detailUrl = String(item.extra?.detailUrl || '').trim();
+        const hasDetailUrl = /^(https?:\/\/|\/)/i.test(detailUrl);
+        const detailLink = hasDetailUrl
+            ? `<div><a href="${escapeHtml(detailUrl)}">mehr Infos</a></div>`
+            : '';
+
+        return [
+            `<strong>${title}</strong>`,
+            detailLink,
+        ].join('');
+    }
+
     return `<strong>${sanitizeDisplayText(item.title)}</strong>`;
 };
 

src/Controller/Frontend/EventMapController.php

@@ -8,6 +8,7 @@ use Contao\CoreBundle\Controller\FrontendModule\AbstractFrontendModuleController
 use Contao\CoreBundle\DependencyInjection\Attribute\AsFrontendModule;
 use Contao\CoreBundle\Twig\FragmentTemplate;
 use Contao\ModuleModel;
+use Contao\PageModel;
 use Contao\StringUtil;
 use MummertMedia\EventManagerBundle\Service\MapModuleDataProvider;
 use Symfony\Component\HttpFoundation\Request;
@@ -44,6 +45,16 @@ class EventMapController extends AbstractFrontendModuleController
             array_map('intval', StringUtil::deserialize($model->organizationTypeTags ?? null, true)),
             static fn (int $tagId): bool => $tagId > 0,
         )));
+        $availableOrganizationTags = $this->mapModuleDataProvider->getOrganizationTags();
+        $availableOrganizationTagIds = array_map(
+            static fn (array $tag): int => (int) ($tag['id'] ?? 0),
+            $availableOrganizationTags,
+        );
+        $selectedOrganizationTagIds = [] === $selectedOrganizationTagIds
+            ? []
+            : array_values(array_intersect($selectedOrganizationTagIds, $availableOrganizationTagIds));
+        $organizationListPageId = (int) ($model->mapOrganizationListPage ?? 0);
+        $organizationListBaseUrl = $this->buildOrganizationListBaseUrl($organizationListPageId, $request);
         $initialDisplay = (string) ($model->mapInitialDisplay ?? self::DEFAULT_INITIAL_DISPLAY);
         $initialOrganizationTagId = (int) ($model->mapInitialOrganizationTagId ?? 0);
         $centerMode = (string) ($model->mapCenterMode ?? self::DEFAULT_CENTER_MODE);
@@ -80,7 +91,7 @@ class EventMapController extends AbstractFrontendModuleController
         $template->set('mapCenterZoom', (int) ($model->mapCenterZoom ?? 12));
         $template->set('mapPitch', $mapPitch);
         $template->set('mapItemsJson', json_encode(
-            $this->mapModuleDataProvider->getMapItems($showOrganizations, $showEvents, $showExternalOrganizations, $selectedOrganizationTagIds),
+            $this->mapModuleDataProvider->getMapItems($showOrganizations, $showEvents, $showExternalOrganizations, $selectedOrganizationTagIds, $organizationListBaseUrl),
             \JSON_HEX_TAG | \JSON_HEX_AMP | \JSON_HEX_APOS | \JSON_HEX_QUOT | \JSON_UNESCAPED_UNICODE | \JSON_THROW_ON_ERROR,
         ));
         $template->set('mapOrganizationTags', $this->mapModuleDataProvider->getOrganizationTags($selectedOrganizationTagIds));
@@ -139,4 +150,29 @@ class EventMapController extends AbstractFrontendModuleController
 
         return $parsedPitch;
     }
+
+    private function buildOrganizationListBaseUrl(int $pageId, Request $request): string
+    {
+        if ($pageId <= 0) {
+            return '';
+        }
+
+        $pageModel = PageModel::findById($pageId);
+
+        if (null === $pageModel) {
+            return '';
+        }
+
+        $frontendUrl = trim((string) $pageModel->getFrontendUrl());
+
+        if ('' === $frontendUrl) {
+            return '';
+        }
+
+        if (preg_match('#^https?://#i', $frontendUrl)) {
+            return $frontendUrl;
+        }
+
+        return rtrim($request->getSchemeAndHttpHost(), '/').'/'.ltrim($frontendUrl, '/');
+    }
 }

src/Service/MapModuleDataProvider.php

@@ -31,7 +31,7 @@ class MapModuleDataProvider
     /**
         * @return list<array{type:string,markerType:string,id:int,title:string,latitude:float,longitude:float,extra:array<string,mixed>}>
      */
-    public function getMapItems(bool $includeOrganizations = true, bool $includeEvents = true, bool $includeExternalOrganizations = false, array $selectedOrganizationTagIds = []): array
+    public function getMapItems(bool $includeOrganizations = true, bool $includeEvents = true, bool $includeExternalOrganizations = false, array $selectedOrganizationTagIds = [], string $organizationListBaseUrl = ''): array
     {
         if (!$includeOrganizations && !$includeEvents) {
             return [];
@@ -102,6 +102,7 @@ class MapModuleDataProvider
                     'extra' => [
                         'organizationTagIds' => $tagData['ids'],
                         'organizationTagLabels' => $tagData['labels'],
+                        'detailUrl' => $this->buildOrganizationDetailUrl($organizationListBaseUrl, $id),
                     ],
                 ];
             }
@@ -150,7 +151,7 @@ class MapModuleDataProvider
      */
     public function getOrganizationTags(array $selectedTagIds = []): array
     {
-        if (!$this->tableExists('tl_tags')) {
+        if (!$this->tableExists('tl_tags') || !$this->tableExists('tl_tags_rel')) {
             return [];
         }
 
@@ -168,8 +169,13 @@ class MapModuleDataProvider
 
         $qb = $this->connection->createQueryBuilder();
         $qb
-            ->select('t.id', sprintf('t.%s AS label', $labelColumn))
+            ->select('DISTINCT t.id', sprintf('t.%s AS label', $labelColumn))
-            ->from('tl_tags', 't')
+            ->from('tl_tags_rel', 'r')
+            ->innerJoin('r', 'tl_tags', 't', 't.id = r.tag_id')
+            ->andWhere('r.ptable = :organization_ptable')
+            ->andWhere('(r.field = :organization_field OR r.field IS NULL OR r.field = \'\')')
+            ->setParameter('organization_ptable', 'tl_organization')
+            ->setParameter('organization_field', 'tags')
             ->orderBy(sprintf('t.%s', $labelColumn), 'ASC');
 
         if ([] !== $selectedTagIds) {
@@ -216,23 +222,36 @@ class MapModuleDataProvider
             return [];
         }
 
+        $tagColumns = $this->getColumnMap('tl_tags');
+        $tagLabelColumn = isset($tagColumns['title']) ? 'title' : (isset($tagColumns['tag']) ? 'tag' : null);
+
+        if (null === $tagLabelColumn) {
+            return [];
+        }
+
         $rows = $this->connection->executeQuery(
-            'SELECT r.pid AS organization_id, r.tag_id, t.tag AS label
+            sprintf(
+                'SELECT r.pid AS organization_id, r.tag_id, t.%s AS label
              FROM tl_tags_rel r
              INNER JOIN tl_tags t ON t.id = r.tag_id
              WHERE r.ptable = ? AND r.field = ? AND r.pid IN (?)
              ORDER BY r.pid ASC, r.tag_id ASC',
+                $tagLabelColumn,
+            ),
             ['tl_organization', 'tags', $organizationIds],
             [ParameterType::STRING, ParameterType::STRING, ArrayParameterType::INTEGER],
         )->fetchAllAssociative();
 
         if ([] === $rows) {
             $rows = $this->connection->executeQuery(
-                'SELECT r.pid AS organization_id, r.tag_id, t.tag AS label
+                sprintf(
+                    'SELECT r.pid AS organization_id, r.tag_id, t.%s AS label
                  FROM tl_tags_rel r
                  INNER JOIN tl_tags t ON t.id = r.tag_id
                  WHERE r.ptable = ? AND r.pid IN (?)
                  ORDER BY r.pid ASC, r.tag_id ASC',
+                    $tagLabelColumn,
+                ),
                 ['tl_organization', $organizationIds],
                 [ParameterType::STRING, ArrayParameterType::INTEGER],
             )->fetchAllAssociative();
@@ -246,13 +265,16 @@ class MapModuleDataProvider
             $tagId = (int) ($row['tag_id'] ?? 0);
             $label = trim((string) ($row['label'] ?? ''));
 
-            if ($organizationId <= 0 || $tagId <= 0 || '' === $label || isset($seen[$organizationId][$tagId])) {
+            if ($organizationId <= 0 || $tagId <= 0 || isset($seen[$organizationId][$tagId])) {
                 continue;
             }
 
             $seen[$organizationId][$tagId] = true;
             $map[$organizationId]['ids'][] = (string) $tagId;
-            $map[$organizationId]['labels'][] = $label;
+
+            if ('' !== $label) {
+                $map[$organizationId]['labels'][] = $label;
+            }
         }
 
         foreach ($map as $organizationId => $tagData) {
@@ -477,6 +499,19 @@ class MapModuleDataProvider
         }
     }
 
+    private function buildOrganizationDetailUrl(string $baseUrl, int $organizationId): string
+    {
+        $normalizedBaseUrl = trim($baseUrl);
+
+        if ('' === $normalizedBaseUrl || $organizationId <= 0) {
+            return '';
+        }
+
+        $separator = str_contains($normalizedBaseUrl, '?') ? '&' : '?';
+
+        return sprintf('%s%sshow=%d', $normalizedBaseUrl, $separator, $organizationId);
+    }
+
     /**
      * @param list<string> $candidates
      */