feat(map): display geolocated episodes on a map page

app/Config/Routes.php

@@ -781,6 +781,12 @@ $routes->group('@(:podcastName)', function ($routes): void {
 $routes->get('/credits', 'CreditsController', [
     'as' => 'credits',
 ]);
+$routes->get('/map', 'MapMarkerController', [
+    'as' => 'map',
+]);
+$routes->get('/episodes-markers', 'MapMarkerController::getEpisodesMarkers', [
+    'as' => 'episodes-markers',
+]);
 $routes->get('/pages/(:slug)', 'PageController/$1', [
     'as' => 'page',
 ]);

app/Controllers/Admin/PodcastImportController.php

@@ -124,8 +124,8 @@ class PodcastImportController extends BaseController
             if (property_exists($nsPodcast, 'location') && $nsPodcast->location !== null) {
                 $location = new Location(
                     (string) $nsPodcast->location,
-                    (string) $nsPodcast->location->attributes()['geo'],
-                    (string) $nsPodcast->location->attributes()['osm'],
+                    $nsPodcast->location->attributes()['geo'] === null ? null : (string) $nsPodcast->location->attributes()['geo'],
+                    $nsPodcast->location->attributes()['osm'] === null ? null : (string) $nsPodcast->location->attributes()['osm'],
                 );
             }
             if (property_exists($nsPodcast, 'guid') && $nsPodcast->guid !== null) {
@@ -338,8 +338,8 @@ class PodcastImportController extends BaseController
             if (property_exists($nsPodcast, 'location') && $nsPodcast->location !== null) {
                 $location = new Location(
                     (string) $nsPodcast->location,
-                    (string) $nsPodcast->location->attributes()['geo'],
-                    (string) $nsPodcast->location->attributes()['osm'],
+                    $nsPodcast->location->attributes()['geo'] === null ? null : (string) $nsPodcast->location->attributes()['geo'],
+                    $nsPodcast->location->attributes()['osm'] === null ? null : (string) $nsPodcast->location->attributes()['osm'],
                 );
             }
 

app/Controllers/MapMarkerController.php

+<?php
+
+declare(strict_types=1);
+
+/**
+ * @copyright  2020 Podlibre
+ * @license    https://www.gnu.org/licenses/agpl-3.0.en.html AGPL3
+ * @link       https://castopod.org/
+ */
+
+namespace App\Controllers;
+
+use App\Entities\Page;
+use App\Models\EpisodeModel;
+use CodeIgniter\HTTP\ResponseInterface;
+
+class MapMarkerController extends BaseController
+{
+    public function index(): string
+    {
+        $locale = service('request')
+            ->getLocale();
+        $cacheName = "page_map_{$locale}";
+        if (! ($found = cache($cacheName))) {
+            $found = view('map', [], [
+                'cache' => DECADE,
+                'cache_name' => $cacheName,
+            ]);
+        }
+        return $found;
+    }
+
+    public function getEpisodesMarkers(): ResponseInterface
+    {
+        $cacheName = 'episodes_markers';
+        if (! ($found = cache($cacheName))) {
+            $episodes = (new EpisodeModel())->where('location_geo is not', null)
+                ->findAll();
+            $found = [];
+            foreach ($episodes as $episode) {
+                $found[] = [
+                    'latitude' => $episode->location->latitude,
+                    'longitude' => $episode->location->longitude,
+                    'location_name' => $episode->location->name,
+                    'location_url' => $episode->location->url,
+                    'episode_link' => $episode->link,
+                    'podcast_link' => $episode->podcast->link,
+                    'image_path' => $episode->image->thumbnail_url,
+                    'podcast_title' => $episode->podcast->title,
+                    'episode_title' => $episode->title,
+                ];
+            }
+            // The page cache is set to a decade so it is deleted manually upon episode update
+            cache()
+                ->save($cacheName, $found, DECADE);
+        }
+        return $this->response->setJSON($found);
+    }
+}

app/Entities/Location.php

@@ -18,6 +18,8 @@ use Config\Services;
  * @property string $name
  * @property string|null $geo
  * @property string|null $osm
+ * @property double|null $latitude
+ * @property double|null $longitude
  */
 class Location extends Entity
 {
@@ -34,12 +36,21 @@ class Location extends Entity
     public function __construct(
         protected string $name,
         protected ?string $geo = null,
-        protected ?string $osm = null
+        protected ?string $osm = null,
     ) {
+        $latitude = null;
+        $longitude = null;
+        if ($geo !== null) {
+            $geoArray = explode(',', substr($geo, 4));
+            $latitude = floatval($geoArray[0]);
+            $longitude = floatval($geoArray[1]);
+        }
         parent::__construct([
             'name' => $name,
             'geo' => $geo,
             'osm' => $osm,
+            'latitude' => $latitude,
+            'longitude' => $longitude,
         ]);
     }
 

app/Helpers/page_helper.php

@@ -25,6 +25,9 @@ if (! function_exists('render_page_links')) {
         $links .= anchor(route_to('credits'), lang('Person.credits'), [
             'class' => 'px-2 underline hover:no-underline',
         ]);
+        $links .= anchor(route_to('map'), lang('Page.map'), [
+            'class' => 'px-2 underline hover:no-underline',
+        ]);
         foreach ($pages as $page) {
             $links .= anchor($page->link, $page->title, [
                 'class' => 'px-2 underline hover:no-underline',

app/Language/en/Page.php

@@ -26,4 +26,5 @@ return [
     'messages' => [
         'createSuccess' => 'The page “{pageTitle}” was created successfully!',
     ],
+    'map' => 'Map',
 ];

app/Language/fr/Page.php

@@ -26,4 +26,5 @@ return [
     'messages' => [
         'createSuccess' => 'La page {pageTitle} a été créée avec succès !',
     ],
+    'map' => 'Cartographie',
 ];

app/Models/EpisodeModel.php

@@ -299,6 +299,8 @@ class EpisodeModel extends Model
             ->deleteMatching("page_podcast#{$episode->podcast_id}*");
         cache()
             ->deleteMatching('page_credits_*');
+        cache()
+            ->delete('episodes_markers');
 
         return $data;
     }

app/Resources/js/map.ts

+import "core-js";
+import DrawEpisodesMaps from "./modules/EpisodesMap";
+
+DrawEpisodesMaps();

app/Resources/js/modules/Charts.ts

-// Import modules
 import am4geodata_worldLow from "@amcharts/amcharts4-geodata/worldLow";
 import * as am4charts from "@amcharts/amcharts4/charts";
 import * as am4core from "@amcharts/amcharts4/core";

app/Resources/js/modules/EpisodesMap.ts

+import {
+  control,
+  featureGroup,
+  icon,
+  map,
+  Marker,
+  marker,
+  tileLayer,
+} from "leaflet";
+import { MarkerClusterGroup } from "leaflet.markercluster";
+import "leaflet.markercluster/dist/MarkerCluster.css";
+import "leaflet.markercluster/dist/MarkerCluster.Default.css";
+import "leaflet/dist/leaflet.css";
+import markerIconRetina from "../../images/marker/marker-icon-2x.png";
+import markerIcon from "../../images/marker/marker-icon.png";
+import markerShadow from "../../images/marker/marker-shadow.png";
+
+Marker.prototype.options.icon = icon({
+  iconRetinaUrl: markerIconRetina,
+  iconUrl: markerIcon,
+  shadowUrl: markerShadow,
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  tooltipAnchor: [16, -28],
+  shadowSize: [41, 41],
+});
+
+const drawEpisodesMap = async (mapDivId: string, dataUrl: string) => {
+  const episodesMap = map(mapDivId).setView([48.858, 2.294], 13);
+
+  tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+    maxZoom: 19,
+    attribution:
+      '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>',
+  }).addTo(episodesMap);
+  control.scale({ imperial: true, metric: true }).addTo(episodesMap);
+
+  const data = await fetch(dataUrl).then((response) => response.json());
+
+  if (data.length > 0) {
+    const markers = [];
+    const cluster = new MarkerClusterGroup({ showCoverageOnHover: false });
+    for (let i = 0; i < data.length; i++) {
+      const currentMarker = marker([
+        data[i].latitude,
+        data[i].longitude,
+      ]).bindPopup(
+        '<div class="flex min-w-max"><img src="' +
+          data[i].image_path +
+          '" alt="' +
+          data[i].episode_title +
+          '" class="mr-2 rounded w-16 h-16" /><div class="flex flex-col"><h2 class="lg:text-base text-sm ! font-bold"><a href="' +
+          data[i].episode_link +
+          '" class="hover:underline !text-pine-800">' +
+          data[i].episode_title +
+          '</a></h2><a href="' +
+          data[i].podcast_link +
+          '" class="hover:underline text-xs !text-black !mt-0 !mb-2">' +
+          data[i].podcast_title +
+          "</a>" +
+          '<a href="' +
+          data[i].location_url +
+          '" class="inline-flex items-center hover:underline text-xs !text-gray-500" target="_blank" rel="noreferrer noopener"><svg class="mr-1" viewBox="0 0 24 24" fill="currentColor" width="1em" height="1em"><g><path fill="none" d="M0 0h24v24H0z"></path><path d="M18.364 17.364L12 23.728l-6.364-6.364a9 9 0 1 1 12.728 0zM12 13a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path></g></svg>' +
+          data[i].location_name +
+          "</a></div></div>"
+      );
+      markers.push(currentMarker);
+      cluster.addLayer(currentMarker);
+    }
+    episodesMap.addLayer(cluster);
+    const group = featureGroup(markers);
+    episodesMap.fitBounds(group.getBounds());
+  }
+};
+
+const DrawEpisodesMaps = (): void => {
+  const mapDivs: NodeListOf<HTMLDivElement> = document.querySelectorAll(
+    "div[data-episodes-map-data-url]"
+  );
+  for (let i = 0; i < mapDivs.length; i++) {
+    const mapDiv: HTMLDivElement = mapDivs[i];
+
+    if (mapDiv.dataset.episodesMapDataUrl) {
+      drawEpisodesMap(mapDiv.id, mapDiv.dataset.episodesMapDataUrl);
+    }
+  }
+};
+
+export default DrawEpisodesMaps;

app/Resources/js/typings.d.ts

 declare module "prosemirror-markdown";
 declare module "prosemirror-example-setup";
+declare module "leaflet.markercluster";

app/Resources/types/js/map.d.ts

+import "core-js";

app/Resources/types/js/modules/EpisodesMap.d.ts

+import "leaflet.markercluster/dist/MarkerCluster.css";
+import "leaflet.markercluster/dist/MarkerCluster.Default.css";
+import "leaflet/dist/leaflet.css";
+declare const DrawEpisodesMaps: () => void;
+export default DrawEpisodesMaps;

app/Resources/types/js/modules/Map.d.ts

+declare const DrawMaps: () => void;
+export default DrawMaps;

app/Views/_layout.php

@@ -12,25 +12,26 @@
 </head>
 
 <body class="flex flex-col min-h-screen mx-auto bg-gray-100">
-    <header class="bg-white border-b">
-        <div class="container flex items-center justify-between px-2 py-4 mx-auto">
-            <a href="<?= route_to('home') ?>" class="text-2xl"><?= isset($page)
+    <header class="py-8 text-white border-b bg-pine-900">
+        <div class="container flex flex-col px-2 py-4 mx-auto">
+            <a href="<?= route_to('home') ?>"
+            class="inline-flex items-center mb-2"><?= icon(
+                'arrow-left',
+                'mr-2',
+            ) . lang('Page.back_to_home') ?></a>
+            <h1 class="text-3xl font-semibold"><?= isset($page)
     ? $page->title
-    : 'Castopod' ?></a>
+    : 'Castopod' ?></h1>
         </div>
     </header>
     <main class="container flex-1 px-4 py-10 mx-auto">
         <?= $this->renderSection('content') ?>
     </main>
-    <footer class="px-2 py-4 bg-white border-t">
-        <div class="container flex flex-col items-center justify-between mx-auto text-xs md:flex-row ">
-            <?= render_page_links('inline-flex mb-4 md:mb-0') ?>
-            <p class="flex flex-col items-center md:items-end">
-                <?= lang('Common.powered_by', [
-                    'castopod' =>
-                        '<a class="underline hover:no-underline" href="https://castopod.org" target="_blank" rel="noreferrer noopener">Castopod</a>',
-                ]) ?>
-            </p>
-        </div>
-    </footer>    
+    <footer class="container flex justify-between px-2 py-4 mx-auto text-sm text-right border-t">
+        <?= render_page_links() ?>
+        <small><?= lang('Common.powered_by', [
+            'castopod' =>
+                '<a class="underline hover:no-underline" href="https://castopod.org/" target="_blank" rel="noreferrer noopener">Castopod</a>',
+        ]) ?></small>
+    </footer>
 </body>

app/Views/map.php

+<?= helper('page') ?>
+<!DOCTYPE html>
+<html lang="<?= service('request')->getLocale() ?>" class="h-full">
+
+<head>
+    <meta charset="UTF-8"/>
+    <title><?= lang('Page.map') ?></title>
+    <meta name="description" content="Castopod is an open-source hosting platform made for podcasters who want engage and interact with their audience."/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <link rel="shortcut icon" type="image/png" href="/favicon.ico" />
+    <?= service('vite')->asset('styles/index.css', 'css') ?>
+    <?= service('vite')->asset('js/map.ts', 'js') ?>
+</head>
+
+<body class="flex flex-col h-full min-h-screen mx-auto bg-gray-100">
+    <header class="py-8 text-white border-b bg-pine-900">
+        <div class="container flex flex-col px-2 py-4 mx-auto">
+            <a href="<?= route_to('home') ?>"
+            class="inline-flex items-center mb-2"><?= icon(
+                'arrow-left',
+                'mr-2',
+            ) . lang('Page.back_to_home') ?></a>
+            <h1 class="text-3xl font-semibold"><?= lang('Page.map') ?></h1>
+        </div>
+    </header>
+    <main class="flex-1 w-full h-full">
+        <div id="map" data-episodes-map-data-url="<?= url_to('episodes-markers') ?>" class="w-full h-full"></div>
+    </main>
+    <footer class="container flex justify-between px-2 py-4 mx-auto text-sm text-right border-t">
+        <?= render_page_links() ?>
+        <small><?= lang('Common.powered_by', [
+            'castopod' =>
+                '<a class="underline hover:no-underline" href="https://castopod.org/" target="_blank" rel="noreferrer noopener">Castopod</a>',
+        ]) ?></small>
+    </footer> 
+</body>