# [1.0.0-alpha.71](https://code.podlibre.org/podlibre/castopod-host/compare/v1.0.0-alpha.70...v1.0.0-alpha.71) (2021-09-17)
### Features
- **map:** display geolocated episodes on a map page
([4357cc2](https://code.podlibre.org/podlibre/castopod-host/commit/4357cc25ccc585ce398035c1c25d566b6a9df775))
# [1.0.0-alpha.70](https://code.podlibre.org/podlibre/castopod-host/compare/v1.0.0-alpha.69...v1.0.0-alpha.70) (2021-08-31)
### Bug Fixes
......
......@@ -11,7 +11,7 @@ declare(strict_types=1);
|
| NOTE: this constant is updated upon release with Continuous Integration.
*/
defined('CP_VERSION') || define('CP_VERSION', '1.0.0-alpha.70');
defined('CP_VERSION') || define('CP_VERSION', '1.0.0-alpha.71');
/*
| --------------------------------------------------------------------
......
......@@ -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',
]);
......
......@@ -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'],
);
}
......
<?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);
}
}
......@@ -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,
]);
}
......
......@@ -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',
......
......@@ -26,4 +26,5 @@ return [
'messages' => [
'createSuccess' => 'The page “{pageTitle}” was created successfully!',
],
'map' => 'Map',
];
......@@ -26,4 +26,5 @@ return [
'messages' => [
'createSuccess' => 'La page {pageTitle} a été créée avec succès !',
],
'map' => 'Cartographie',
];
......@@ -299,6 +299,8 @@ class EpisodeModel extends Model
->deleteMatching("page_podcast#{$episode->podcast_id}*");
cache()
->deleteMatching('page_credits_*');
cache()
->delete('episodes_markers');
return $data;
}
......
import "core-js";
import DrawEpisodesMaps from "./modules/EpisodesMap";
DrawEpisodesMaps();
// Import modules
import am4geodata_worldLow from "@amcharts/amcharts4-geodata/worldLow";
import * as am4charts from "@amcharts/amcharts4/charts";
import * as am4core from "@amcharts/amcharts4/core";
......
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;
declare module "prosemirror-markdown";
declare module "prosemirror-example-setup";
declare module "leaflet.markercluster";
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;
declare const DrawMaps: () => void;
export default DrawMaps;