feat: show photos taken in locations visible in map

appinfo/routes.php

@@ -21,6 +21,7 @@ return [
         ['name' => 'Page#videos', 'url' => '/videos', 'verb' => 'GET'],
         ['name' => 'Page#archive', 'url' => '/archive', 'verb' => 'GET'],
         ['name' => 'Page#thisday', 'url' => '/thisday', 'verb' => 'GET'],
+        ['name' => 'Page#locations', 'url' => '/locations', 'verb' => 'GET'],
 
         // Routes with params
         w(['name' => 'Page#folder', 'url' => '/folders/{path}', 'verb' => 'GET'], 'path'),
@@ -76,6 +77,9 @@ return [
         ['name' => 'Download#file', 'url' => '/api/download/{handle}', 'verb' => 'GET'],
         ['name' => 'Download#one', 'url' => '/api/stream/{fileid}', 'verb' => 'GET'],
 
+        ['name' => 'Locations#daysWithBounds', 'url' => '/api/location/days/{minLat}/{maxLat}/{minLng}/{maxLng}', 'verb' => 'GET'],
+        ['name' => 'Locations#dayWithBounds', 'url' => '/api/location/days/{id}/{minLat}/{maxLat}/{minLng}/{maxLng}', 'verb' => 'GET'],
+
         // Config API
         ['name' => 'Other#setUserConfig', 'url' => '/api/config/{key}', 'verb' => 'PUT'],
 

lib/Controller/LocationsController.php

@@ -0,0 +1,299 @@
+<?php
+
+declare(strict_types=1);
+
+/**
+ * @copyright Copyright (c) 2022 Varun Patil <radialapps@gmail.com>
+ * @author Varun Patil <radialapps@gmail.com>, Raymond Huang <raymond860909@gmail.com>
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+namespace OCA\Memories\Controller;
+
+use OCA\Memories\Db\TimelineRoot;
+use OCP\AppFramework\Http;
+use OCP\AppFramework\Http\JSONResponse;
+
+class LocationsController extends ApiBase
+{
+    use FoldersTrait;
+
+    /**
+     * @NoAdminRequired
+     *
+     * @PublicPage
+     */
+    public function daysWithBounds(string $minLat, string $maxLat, string $minLng, string $maxLng): JSONResponse
+    {
+        if (null === $minLat || null === $maxLat || null === $minLng || null === $maxLng) {
+            return new JSONResponse([], Http::STATUS_BAD_REQUEST);
+        }
+
+        // Get the folder to show
+        try {
+            $uid = $this->getUID();
+        } catch (\Exception $e) {
+            return new JSONResponse(['message' => $e->getMessage()], Http::STATUS_PRECONDITION_FAILED);
+        }
+
+        // Get the folder to show
+        $root = null;
+
+        try {
+            $root = $this->getRequestRoot();
+        } catch (\Exception $e) {
+            return new JSONResponse(['message' => $e->getMessage()], Http::STATUS_NOT_FOUND);
+        }
+
+        // Run actual query
+        try {
+            $list = $this->timelineQuery->getDaysWithBounds(
+                $root,
+                $uid,
+                $this->isRecursive(),
+                $this->isArchive(),
+                $this->getTransformations(true),
+                $minLat,
+                $maxLat,
+                $minLng,
+                $maxLng
+            );
+
+            if ($this->isMonthView()) {
+                // Group days together into months
+                $list = $this->timelineQuery->daysToMonths($list);
+            } else {
+                // Preload some day responses
+                $this->preloadDays($list, $uid, $root);
+            }
+
+            // Reverse response if requested. Folders still stay at top.
+            if ($this->isReverse()) {
+                $list = array_reverse($list);
+            }
+
+            // Add subfolder info if querying non-recursively
+            if (!$this->isRecursive()) {
+                array_unshift($list, $this->getSubfoldersEntry($root->getFolder($root->getOneId())));
+            }
+
+            return new JSONResponse($list, Http::STATUS_OK);
+        } catch (\Exception $e) {
+            return new JSONResponse(['message' => $e->getMessage()], Http::STATUS_INTERNAL_SERVER_ERROR);
+        }
+    }
+
+    public function dayWithBounds(string $id, string $minLat, string $maxLat, string $minLng, string $maxLng): JSONResponse
+    {
+        // $minLat = (float) $minLat;
+        // $maxLat = (float) $maxLat;
+        // $minLng = (float) $minLng;
+        // $maxLng = (float) $maxLng;
+        if (null === $minLat || null === $maxLat || null === $minLng || null === $maxLng) {
+            return new JSONResponse([], Http::STATUS_BAD_REQUEST);
+        }
+
+        // Get user
+        $uid = $this->getUID();
+
+        // Check for wildcard
+        $dayIds = [];
+        if ('*' === $id) {
+            $dayIds = null;
+        } else {
+            // Split at commas and convert all parts to int
+            $dayIds = array_map(function ($part) {
+                return (int) $part;
+            }, explode(',', $id));
+        }
+
+        // Check if $dayIds is empty
+        if (null !== $dayIds && 0 === \count($dayIds)) {
+            return new JSONResponse([], Http::STATUS_OK);
+        }
+
+        // Get the folder to show
+        $root = null;
+
+        try {
+            $root = $this->getRequestRoot();
+        } catch (\Exception $e) {
+            return new JSONResponse(['message' => $e->getMessage()], Http::STATUS_NOT_FOUND);
+        }
+
+        // Convert to actual dayIds if month view
+        if ($this->isMonthView()) {
+            $dayIds = $this->timelineQuery->monthIdToDayIds((int) $dayIds[0]);
+        }
+
+        // Run actual query
+        try {
+            $list = $this->timelineQuery->getDayWithBounds(
+                $root,
+                $uid,
+                $dayIds,
+                $this->isRecursive(),
+                $this->isArchive(),
+                $this->getTransformations(false),
+                $minLat,
+                $maxLat,
+                $minLng,
+                $maxLng
+            );
+
+            // Force month id for dayId for month view
+            if ($this->isMonthView()) {
+                foreach ($list as &$photo) {
+                    $photo['dayid'] = (int) $dayIds[0];
+                }
+            }
+
+            // Reverse response if requested.
+            if ($this->isReverse()) {
+                $list = array_reverse($list);
+            }
+
+            return new JSONResponse($list, Http::STATUS_OK);
+        } catch (\Exception $e) {
+            return new JSONResponse(['message' => $e->getMessage()], Http::STATUS_INTERNAL_SERVER_ERROR);
+        }
+    }
+
+    /**
+     * Get transformations depending on the request.
+     *
+     * @param bool $aggregateOnly Only apply transformations for aggregation (days call)
+     */
+    private function getTransformations(bool $aggregateOnly)
+    {
+        $transforms = [];
+
+        // Add extra information, basename and mimetype
+        if (!$aggregateOnly && ($fields = $this->request->getParam('fields'))) {
+            $fields = explode(',', $fields);
+            $transforms[] = [$this->timelineQuery, 'transformExtraFields', $fields];
+        }
+
+        // Filter for one album
+        if ($this->albumsIsEnabled()) {
+            if ($albumId = $this->request->getParam('album')) {
+                $transforms[] = [$this->timelineQuery, 'transformAlbumFilter', $albumId];
+            }
+        }
+
+        // Other transforms not allowed for public shares
+        if (null === $this->userSession->getUser()) {
+            return $transforms;
+        }
+
+        // Filter only favorites
+        if ($this->request->getParam('fav')) {
+            $transforms[] = [$this->timelineQuery, 'transformFavoriteFilter'];
+        }
+
+        // Filter only videos
+        if ($this->request->getParam('vid')) {
+            $transforms[] = [$this->timelineQuery, 'transformVideoFilter'];
+        }
+
+        // Filter only for one face on Recognize
+        if (($recognize = $this->request->getParam('recognize')) && $this->recognizeIsEnabled()) {
+            $transforms[] = [$this->timelineQuery, 'transformPeopleRecognitionFilter', $recognize];
+
+            $faceRect = $this->request->getParam('facerect');
+            if ($faceRect && !$aggregateOnly) {
+                $transforms[] = [$this->timelineQuery, 'transformPeopleRecognizeRect', $recognize];
+            }
+        }
+
+        // Filter only for one face on Face Recognition
+        if (($face = $this->request->getParam('facerecognition')) && $this->facerecognitionIsEnabled()) {
+            $currentModel = (int) $this->config->getAppValue('facerecognition', 'model', -1);
+            $transforms[] = [$this->timelineQuery, 'transformPeopleFaceRecognitionFilter', $currentModel, $face];
+
+            $faceRect = $this->request->getParam('facerect');
+            if ($faceRect && !$aggregateOnly) {
+                $transforms[] = [$this->timelineQuery, 'transformPeopleFaceRecognitionRect', $face];
+            }
+        }
+
+        // Filter only for one tag
+        if ($this->tagsIsEnabled()) {
+            if ($tagName = $this->request->getParam('tag')) {
+                $transforms[] = [$this->timelineQuery, 'transformTagFilter', $tagName];
+            }
+        }
+
+        // Limit number of responses for day query
+        $limit = $this->request->getParam('limit');
+        if ($limit) {
+            $transforms[] = [$this->timelineQuery, 'transformLimitDay', (int) $limit];
+        }
+
+        return $transforms;
+    }
+
+    /**
+     * Preload a few "day" at the start of "days" response.
+     *
+     * @param array        $days the days array
+     * @param string       $uid  User ID or blank for public shares
+     * @param TimelineRoot $root the root folder
+     */
+    private function preloadDays(array &$days, string $uid, TimelineRoot &$root)
+    {
+        $transforms = $this->getTransformations(false);
+        $preloaded = 0;
+        $preloadDayIds = [];
+        $preloadDays = [];
+        foreach ($days as &$day) {
+            if ($day['count'] <= 0) {
+                continue;
+            }
+
+            $preloaded += $day['count'];
+            $preloadDayIds[] = $day['dayid'];
+            $preloadDays[] = & $day;
+
+            if ($preloaded >= 50 || \count($preloadDayIds) > 5) { // should be enough
+                break;
+            }
+        }
+
+        if (\count($preloadDayIds) > 0) {
+            $allDetails = $this->timelineQuery->getDay(
+                $root,
+                $uid,
+                $preloadDayIds,
+                $this->isRecursive(),
+                $this->isArchive(),
+                $transforms,
+            );
+
+            // Group into dayid
+            $detailMap = [];
+            foreach ($allDetails as &$detail) {
+                $detailMap[$detail['dayid']][] = & $detail;
+            }
+            foreach ($preloadDays as &$day) {
+                $m = $detailMap[$day['dayid']];
+                if (isset($m) && null !== $m && \count($m) > 0) {
+                    $day['detail'] = $m;
+                }
+            }
+        }
+    }
+}

lib/Controller/PageController.php

@@ -34,7 +34,8 @@ class PageController extends Controller
         IInitialState $initialState,
         IUserSession $userSession,
         IConfig $config
-    ) {
+    )
+    {
         parent::__construct($AppName, $request);
         $this->userId = $UserId;
         $this->appName = $AppName;
@@ -68,19 +69,22 @@ class PageController extends Controller
             Application::APPNAME,
             'timelinePath',
             'EMPTY'
-        ));
+        )
+        );
         $this->initialState->provideInitialState('foldersPath', $this->config->getUserValue(
             $uid,
             Application::APPNAME,
             'foldersPath',
             '/'
-        ));
+        )
+        );
         $this->initialState->provideInitialState('showHidden', $this->config->getUserValue(
             $uid,
             Application::APPNAME,
             'showHidden',
             false
-        ));
+        )
+        );
 
         // Apps enabled
         $this->initialState->provideInitialState('systemtags', true === $this->appManager->isEnabledForUser('systemtags'));
@@ -117,6 +121,7 @@ class PageController extends Controller
         // Allow nominatim for metadata
         $policy->addAllowedConnectDomain('nominatim.openstreetmap.org');
         $policy->addAllowedFrameDomain('www.openstreetmap.org');
+        $policy->addAllowedImageDomain('https://*.tile.openstreetmap.org');
 
         return $policy;
     }
@@ -223,4 +228,14 @@ class PageController extends Controller
     {
         return $this->main();
     }
+
+    /**
+     * @NoAdminRequired
+     *
+     * @NoCSRFRequired
+     */
+    public function locations()
+    {
+        return $this->main();
+    }
 }

lib/Db/TimelineQueryDays.php

@@ -99,7 +99,8 @@ trait TimelineQueryDays
         bool $recursive,
         bool $archive,
         array $queryTransforms = []
-    ): array {
+    ): array
+    {
         $query = $this->connection->getQueryBuilder();
 
         // Get all entries also present in filecache
@@ -124,6 +125,64 @@ trait TimelineQueryDays
         return $this->processDays($rows);
     }
 
+    /**
+     * Get the geomatrically filtered days response from the database for the location timeline.
+     *
+     * @param TimelineRoot $root            The root to get the days from
+     * @param bool         $recursive       Whether to get the days recursively
+     * @param bool         $archive         Whether to get the days only from the archive folder
+     * @param array        $queryTransforms An array of query transforms to apply to the query
+     * @param float        $minLat          The minimum latitude
+     * @param float        $maxLat          The maximum latitude
+     * @param float        $minLng          The minimum longitude
+     * @param float        $maxLng          The maximum longitude
+     * 
+     * @return array The days response
+     */
+    public function getDaysWithBounds(
+        TimelineRoot &$root,
+        string $uid,
+        bool $recursive,
+        bool $archive,
+        array $queryTransforms = [],
+        string $minLat,
+        string $maxLat,
+        string $minLng,
+        string $maxLng
+    ): array
+    {
+        $query = $this->connection->getQueryBuilder();
+
+        // Get all entries also present in filecache
+        $count = $query->func()->count($query->createFunction('DISTINCT m.fileid'), 'count');
+        $query->select('m.dayid', $count)
+            ->from('memories', 'm')
+            ->where(
+                $query->expr()->andX(
+                    $query->expr()->gte('m.latitude', $query->createNamedParameter($minLat, IQueryBuilder::PARAM_STR)),
+                    $query->expr()->lte('m.latitude', $query->createNamedParameter($maxLat, IQueryBuilder::PARAM_STR)),
+                    $query->expr()->gte('m.longitude', $query->createNamedParameter($minLng, IQueryBuilder::PARAM_STR)),
+                    $query->expr()->lte('m.longitude', $query->createNamedParameter($maxLng, IQueryBuilder::PARAM_STR))
+                )
+            )
+        ;
+        $query = $this->joinFilecache($query, $root, $recursive, $archive);
+
+        // Group and sort by dayid
+        $query->groupBy('m.dayid')
+            ->orderBy('m.dayid', 'DESC')
+        ;
+
+        // Apply all transformations
+        $this->applyAllTransforms($queryTransforms, $query, $uid);
+
+        $cursor = $this->executeQueryWithCTEs($query);
+        $rows = $cursor->fetchAll();
+        $cursor->closeCursor();
+
+        return $this->processDays($rows);
+    }
+
     /**
      * Get the day response from the database for the timeline.
      *
@@ -144,7 +203,8 @@ trait TimelineQueryDays
         bool $recursive,
         bool $archive,
         array $queryTransforms = []
-    ): array {
+    ): array
+    {
         $query = $this->connection->getQueryBuilder();
 
         // Get all entries also present in filecache
@@ -195,6 +255,95 @@ trait TimelineQueryDays
         return $this->processDay($rows, $uid, $root);
     }
 
+    /**
+     * Get the geomatrically filtered day response from the database for the location timeline.
+     *
+     * @param TimelineRoot $root            The root to get the day from
+     * @param string       $uid             The user id
+     * @param int[]        $day_ids         The day ids to fetch
+     * @param bool         $recursive       If the query should be recursive
+     * @param bool         $archive         If the query should include only the archive folder
+     * @param array        $queryTransforms The query transformations to apply
+     * @param mixed        $day_ids
+     * @param mixed        $minLat          The minimum latitude
+     * @param mixed        $maxLat          The maximum latitude
+     * @param mixed        $minLng          The minimum longitude
+     * @param mixed        $maxLng          The maximum longitude
+     *
+     * @return array An array of day responses
+     */
+
+    public function getDayWithBounds(
+        TimelineRoot &$root,
+        string $uid,
+        ?array $day_ids,
+        bool $recursive,
+        bool $archive,
+        array $queryTransforms = [],
+        string $minLat,
+        string $maxLat,
+        string $minLng,
+        string $maxLng
+    ): array
+    {
+        $query = $this->connection->getQueryBuilder();
+
+        // Get all entries also present in filecache
+        $fileid = $query->createFunction('DISTINCT m.fileid');
+
+        // We don't actually use m.datetaken here, but postgres
+        // needs that all fields in ORDER BY are also in SELECT
+        // when using DISTINCT on selected fields
+        $query->select($fileid, 'm.isvideo', 'm.video_duration', 'm.datetaken', 'm.dayid', 'm.w', 'm.h', 'm.liveid')
+            ->from('memories', 'm')
+            ->where(
+                $query->expr()->andX(
+                    $query->expr()->gte('m.latitude', $query->createNamedParameter($minLat, IQueryBuilder::PARAM_STR)),
+                    $query->expr()->lte('m.latitude', $query->createNamedParameter($maxLat, IQueryBuilder::PARAM_STR)),
+                    $query->expr()->gte('m.longitude', $query->createNamedParameter($minLng, IQueryBuilder::PARAM_STR)),
+                    $query->expr()->lte('m.longitude', $query->createNamedParameter($maxLng, IQueryBuilder::PARAM_STR))
+                )
+            )
+        ;
+
+        // JOIN with filecache for existing files
+        $query = $this->joinFilecache($query, $root, $recursive, $archive);
+        $query->addSelect('f.etag', 'f.path', 'f.name AS basename');
+
+        // SELECT rootid if not a single folder
+        if ($recursive && !$root->isEmpty()) {
+            $query->addSelect('cte_f.rootid');
+        }
+
+        // JOIN with mimetypes to get the mimetype
+        $query->join('f', 'mimetypes', 'mimetypes', $query->expr()->eq('f.mimetype', 'mimetypes.id'));
+        $query->addSelect('mimetypes.mimetype');
+
+        // Filter by dayid unless wildcard
+        if (null !== $day_ids) {
+            $query->andWhere($query->expr()->in('m.dayid', $query->createNamedParameter($day_ids, IQueryBuilder::PARAM_INT_ARRAY)));
+        } else {
+            // Limit wildcard to 100 results
+            $query->setMaxResults(100);
+        }
+
+        // Add favorite field
+        $this->addFavoriteTag($query, $uid);
+
+        // Group and sort by date taken
+        $query->orderBy('m.datetaken', 'DESC');
+        $query->addOrderBy('m.fileid', 'DESC'); // tie-breaker
+
+        // Apply all transformations
+        $this->applyAllTransforms($queryTransforms, $query, $uid);
+
+        $cursor = $this->executeQueryWithCTEs($query);
+        $rows = $cursor->fetchAll();
+        $cursor->closeCursor();
+
+        return $this->processDay($rows, $uid, $root);
+    }
+
     /**
      * Process the days response.
      *
@@ -259,7 +408,7 @@ trait TimelineQueryDays
                         $actualPath[1] = $actualPath[2];
                         $actualPath[2] = $tmp;
                         $davPath = implode('/', $actualPath);
-                        $davPaths[$fileid] = Exif::removeExtraSlash('/'.$davPath.'/');
+                        $davPaths[$fileid] = Exif::removeExtraSlash('/' . $davPath . '/');
                     }
                 }
             }
@@ -292,7 +441,7 @@ trait TimelineQueryDays
 
                 if (0 === strpos($row['path'], $basePath)) {
                     $rpath = substr($row['path'], \strlen($basePath));
-                    $row['filename'] = Exif::removeExtraSlash($davPath.$rpath);
+                    $row['filename'] = Exif::removeExtraSlash($davPath . $rpath);
                 }
 
                 unset($row['path']);
@@ -322,7 +471,7 @@ trait TimelineQueryDays
 
         // Add WITH clause if needed
         if (false !== strpos($sql, 'cte_folders')) {
-            $sql = $CTE_SQL.' '.$sql;
+            $sql = $CTE_SQL . ' ' . $sql;
         }
 
         return $this->connection->executeQuery($sql, $params, $types);
@@ -335,7 +484,8 @@ trait TimelineQueryDays
         IQueryBuilder &$query,
         TimelineRoot &$root,
         bool $archive
-    ) {
+    )
+    {
         // Add query parameters
         $query->setParameter('topFolderIds', $root->getIds(), IQueryBuilder::PARAM_INT_ARRAY);
         $query->setParameter('cteFoldersArchive', $archive, IQueryBuilder::PARAM_BOOL);
@@ -354,7 +504,8 @@ trait TimelineQueryDays
         TimelineRoot &$root,
         bool $recursive,
         bool $archive
-    ) {
+    )
+    {
         // Join with memories
         $baseOp = $query->expr()->eq('f.fileid', 'm.fileid');
         if ($root->isEmpty()) {
@@ -372,9 +523,13 @@ trait TimelineQueryDays
             $pathOp = $query->expr()->eq('f.parent', $query->createNamedParameter($root->getOneId(), IQueryBuilder::PARAM_INT));
         }
 
-        return $query->innerJoin('m', 'filecache', 'f', $query->expr()->andX(
+        return $query->innerJoin(
-            $baseOp,
+            'm',
-            $pathOp,
+            'filecache',
-        ));
+            'f', $query->expr()->andX(
+                $baseOp,
+                $pathOp,
+            )
+        );
     }
 }

package-lock.json

@@ -16,6 +16,7 @@
         "camelcase": "^7.0.1",
         "filerobot-image-editor": "^4.3.7",
         "justified-layout": "^4.1.0",
+        "leaflet": "^1.9.3",
         "moment": "^2.29.4",
         "path-posix": "^1.0.0",
         "photoswipe": "^5.3.4",
@@ -27,6 +28,8 @@
         "vue-material-design-icons": "^5.1.2",
         "vue-router": "^3.6.5",
         "vue-virtual-scroller": "1.1.2",
+        "vue2-leaflet": "^2.7.1",
+        "vue2-leaflet-markercluster": "^3.1.0",
         "webdav": "^4.11.2"
       },
       "devDependencies": {
@@ -2297,6 +2300,12 @@
         "@types/range-parser": "*"
       }
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.10",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
+      "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==",
+      "peer": true
+    },
     "node_modules/@types/http-proxy": {
       "version": "1.17.9",
       "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.9.tgz",
@@ -2319,6 +2328,15 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/@types/leaflet": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.0.tgz",
+      "integrity": "sha512-7LeOSj7EloC5UcyOMo+1kc3S1UT3MjJxwqsMT1d2PTyvQz53w0Y0oSSk9nwZnOZubCmBvpSNGceucxiq+ZPEUw==",
+      "peer": true,
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/mime": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
@@ -6166,9 +6184,9 @@
       "peer": true
     },
     "node_modules/json5": {
-      "version": "2.2.1",
+      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-      "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
       "dev": true,
       "bin": {
         "json5": "lib/cli.js"
@@ -6253,6 +6271,19 @@
       "resolved": "https://registry.npmjs.org/layerr/-/layerr-0.1.2.tgz",
       "integrity": "sha512-ob5kTd9H3S4GOG2nVXyQhOu9O8nBgP555XxWPkJI0tR0JeRilfyTp8WtPdIJHLXBmHMSdEq5+KMxiYABeScsIQ=="
     },
+    "node_modules/leaflet": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.3.tgz",
+      "integrity": "sha512-iB2cR9vAkDOu5l3HAay2obcUHZ7xwUBBjph8+PGtmW/2lYhbLizWtG7nTeYht36WfOslixQF9D/uSIzhZgGMfQ=="
+    },
+    "node_modules/leaflet.markercluster": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz",
+      "integrity": "sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==",
+      "peerDependencies": {
+        "leaflet": "^1.3.1"
+      }
+    },
     "node_modules/leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -6287,9 +6318,9 @@
       }
     },
     "node_modules/loader-utils": {
-      "version": "2.0.3",
+      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
-      "integrity": "sha512-THWqIsn8QRnvLl0shHYVBN9syumU8pYWEHPTmkiVGd+7K5eFNVSY6AJhRvgGF70gg1Dz+l/k8WicvFCxdEs60A==",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
       "dev": true,
       "peer": true,
       "dependencies": {
@@ -9518,9 +9549,9 @@
       }
     },
     "node_modules/vue-loader/node_modules/json5": {
-      "version": "1.0.1",
+      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-      "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
       "dev": true,
       "peer": true,
       "dependencies": {
@@ -9531,9 +9562,9 @@
       }
     },
     "node_modules/vue-loader/node_modules/loader-utils": {
-      "version": "1.4.0",
+      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
-      "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+      "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
       "dev": true,
       "peer": true,
       "dependencies": {
@@ -9600,9 +9631,9 @@
       }
     },
     "node_modules/vue-style-loader/node_modules/json5": {
-      "version": "1.0.1",
+      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-      "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
       "dev": true,
       "peer": true,
       "dependencies": {
@@ -9613,9 +9644,9 @@
       }
     },
     "node_modules/vue-style-loader/node_modules/loader-utils": {
-      "version": "1.4.0",
+      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
-      "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+      "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
       "dev": true,
       "peer": true,
       "dependencies": {
@@ -9677,6 +9708,27 @@
         "vue": "^2.5.0"
       }
     },
+    "node_modules/vue2-leaflet": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/vue2-leaflet/-/vue2-leaflet-2.7.1.tgz",
+      "integrity": "sha512-K7HOlzRhjt3Z7+IvTqEavIBRbmCwSZSCVUlz9u4Rc+3xGCLsHKz4TAL4diAmfHElCQdPPVdZdJk8wPUt2fu6WQ==",
+      "peerDependencies": {
+        "@types/leaflet": "^1.5.7",
+        "leaflet": "^1.3.4",
+        "vue": "^2.5.17"
+      }
+    },
+    "node_modules/vue2-leaflet-markercluster": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vue2-leaflet-markercluster/-/vue2-leaflet-markercluster-3.1.0.tgz",
+      "integrity": "sha512-v94tns6/PmBlFaPY2XvCUL69yUwRO43qYAP7T9hLmPDdu3Vgl15SDcC1qara8M56aNzWMPAcfP/uy4toUE5wcA==",
+      "dependencies": {
+        "leaflet.markercluster": "^1.4.1"
+      },
+      "peerDependencies": {
+        "leaflet": "^1.3.4"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -12124,6 +12176,12 @@
         "@types/range-parser": "*"
       }
     },
+    "@types/geojson": {
+      "version": "7946.0.10",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
+      "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==",
+      "peer": true
+    },
     "@types/http-proxy": {
       "version": "1.17.9",
       "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.9.tgz",
@@ -12146,6 +12204,15 @@
       "dev": true,
       "peer": true
     },
+    "@types/leaflet": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.0.tgz",
+      "integrity": "sha512-7LeOSj7EloC5UcyOMo+1kc3S1UT3MjJxwqsMT1d2PTyvQz53w0Y0oSSk9nwZnOZubCmBvpSNGceucxiq+ZPEUw==",
+      "peer": true,
+      "requires": {
+        "@types/geojson": "*"
+      }
+    },
     "@types/mime": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
@@ -15203,9 +15270,9 @@
       "peer": true
     },
     "json5": {
-      "version": "2.2.1",
+      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-      "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
       "dev": true
     },
     "jsonfile": {
@@ -15259,6 +15326,17 @@
       "resolved": "https://registry.npmjs.org/layerr/-/layerr-0.1.2.tgz",
       "integrity": "sha512-ob5kTd9H3S4GOG2nVXyQhOu9O8nBgP555XxWPkJI0tR0JeRilfyTp8WtPdIJHLXBmHMSdEq5+KMxiYABeScsIQ=="
     },
+    "leaflet": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.3.tgz",
+      "integrity": "sha512-iB2cR9vAkDOu5l3HAay2obcUHZ7xwUBBjph8+PGtmW/2lYhbLizWtG7nTeYht36WfOslixQF9D/uSIzhZgGMfQ=="
+    },
+    "leaflet.markercluster": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz",
+      "integrity": "sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==",
+      "requires": {}
+    },
     "leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -15285,9 +15363,9 @@
       "peer": true
     },
     "loader-utils": {
-      "version": "2.0.3",
+      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
-      "integrity": "sha512-THWqIsn8QRnvLl0shHYVBN9syumU8pYWEHPTmkiVGd+7K5eFNVSY6AJhRvgGF70gg1Dz+l/k8WicvFCxdEs60A==",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
       "dev": true,
       "peer": true,
       "requires": {
@@ -17760,9 +17838,9 @@
       },
       "dependencies": {
         "json5": {
-          "version": "1.0.1",
+          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "dev": true,
           "peer": true,
           "requires": {
@@ -17770,9 +17848,9 @@
           }
         },
         "loader-utils": {
-          "version": "1.4.0",
+          "version": "1.4.2",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
-          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
           "dev": true,
           "peer": true,
           "requires": {
@@ -17829,9 +17907,9 @@
       },
       "dependencies": {
         "json5": {
-          "version": "1.0.1",
+          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "dev": true,
           "peer": true,
           "requires": {
@@ -17839,9 +17917,9 @@
           }
         },
         "loader-utils": {
-          "version": "1.4.0",
+          "version": "1.4.2",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
-          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
           "dev": true,
           "peer": true,
           "requires": {
@@ -17896,6 +17974,20 @@
         "date-format-parse": "^0.2.7"
       }
     },
+    "vue2-leaflet": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/vue2-leaflet/-/vue2-leaflet-2.7.1.tgz",
+      "integrity": "sha512-K7HOlzRhjt3Z7+IvTqEavIBRbmCwSZSCVUlz9u4Rc+3xGCLsHKz4TAL4diAmfHElCQdPPVdZdJk8wPUt2fu6WQ==",
+      "requires": {}
+    },
+    "vue2-leaflet-markercluster": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vue2-leaflet-markercluster/-/vue2-leaflet-markercluster-3.1.0.tgz",
+      "integrity": "sha512-v94tns6/PmBlFaPY2XvCUL69yUwRO43qYAP7T9hLmPDdu3Vgl15SDcC1qara8M56aNzWMPAcfP/uy4toUE5wcA==",
+      "requires": {
+        "leaflet.markercluster": "^1.4.1"
+      }
+    },
     "watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",

package.json

@@ -36,6 +36,7 @@
     "camelcase": "^7.0.1",
     "filerobot-image-editor": "^4.3.7",
     "justified-layout": "^4.1.0",
+    "leaflet": "^1.9.3",
     "moment": "^2.29.4",
     "path-posix": "^1.0.0",
     "photoswipe": "^5.3.4",
@@ -47,6 +48,8 @@
     "vue-material-design-icons": "^5.1.2",
     "vue-router": "^3.6.5",
     "vue-virtual-scroller": "1.1.2",
+    "vue2-leaflet": "^2.7.1",
+    "vue2-leaflet-markercluster": "^3.1.0",
     "webdav": "^4.11.2"
   },
   "browserslist": [

src/App.vue

@@ -1,23 +1,13 @@
 <template>
   <FirstStart v-if="isFirstStart" />
 
-  <NcContent
+  <NcContent app-name="memories" v-else :class="{
-    app-name="memories"
+    'remove-gap': removeOuterGap,
-    v-else
+  }">
-    :class="{
-      'remove-gap': removeOuterGap,
-    }"
-  >
     <NcAppNavigation v-if="showNavigation" ref="nav">
       <template id="app-memories-navigation" #list>
-        <NcAppNavigationItem
+        <NcAppNavigationItem v-for="item in navItems" :key="item.name" :to="{ name: item.name }" :title="item.title"
-          v-for="item in navItems"
+          @click="linkClick" exact>
-          :key="item.name"
-          :to="{ name: item.name }"
-          :title="item.title"
-          @click="linkClick"
-          exact
-        >
           <component :is="item.icon" slot="icon" :size="20" />
         </NcAppNavigationItem>
       </template>
@@ -258,6 +248,11 @@ export default defineComponent({
           title: t("memories", "Maps"),
           if: this.config_mapsEnabled,
         },
+        {
+          name: "locations",
+          icon: MapIcon,
+          title: t("memories", "Locations"),
+        },
       ];
     },
 

src/components/Timeline.vue

@@ -1,18 +1,11 @@
 <template>
-  <div
+  <div class="container" ref="container" :class="{ 'icon-loading': loading > 0 }">
-    class="container"
-    ref="container"
-    :class="{ 'icon-loading': loading > 0 }"
-  >
     <!-- Static top matter -->
-    <TopMatter ref="topmatter" />
+    <TopMatter ref="topmatter" @updateBoundary="updateBoundary" />
 
     <!-- No content found and nothing is loading -->
-    <NcEmptyContent
+    <NcEmptyContent title="Nothing to show here" :description="emptyViewDescription"
-      title="Nothing to show here"
+      v-if="loading === 0 && list.length === 0">
-      :description="emptyViewDescription"
-      v-if="loading === 0 && list.length === 0"
-    >
       <template #icon>
         <PeopleIcon v-if="routeIsPeople" />
         <ArchiveIcon v-else-if="routeIsArchive" />
@@ -21,21 +14,9 @@
     </NcEmptyContent>
 
     <!-- Main recycler view for rows -->
-    <RecycleScroller
+    <RecycleScroller ref="recycler" class="recycler" :class="{ empty: list.length === 0 }" :items="list"
-      ref="recycler"
+      :emit-update="true" :buffer="800" :skipHover="true" key-field="id" size-field="size" type-field="type"
-      class="recycler"
+      :updateInterval="100" @update="scrollChange" @resize="handleResizeWithDelay">
-      :class="{ empty: list.length === 0 }"
-      :items="list"
-      :emit-update="true"
-      :buffer="800"
-      :skipHover="true"
-      key-field="id"
-      size-field="size"
-      type-field="type"
-      :updateInterval="100"
-      @update="scrollChange"
-      @resize="handleResizeWithDelay"
-    >
       <template #before>
         <!-- Show dynamic top matter, name of the view -->
         <div class="recycler-before" ref="recyclerBefore">
@@ -43,24 +24,15 @@
             {{ viewName }}
           </div>
 
-          <OnThisDay
+          <OnThisDay v-if="routeIsBase" :key="config_timelinePath" :viewer="$refs.viewer"
-            v-if="routeIsBase"
+            @load="scrollerManager.adjust()">
-            :key="config_timelinePath"
-            :viewer="$refs.viewer"
-            @load="scrollerManager.adjust()"
-          >
           </OnThisDay>
         </div>
       </template>
 
       <template v-slot="{ item, index }">
-        <div
+        <div v-if="item.type === 0" class="head-row" :class="{ selected: item.selected }"
-          v-if="item.type === 0"
+          :style="{ height: item.size + 'px' }" :key="item.id">
-          class="head-row"
-          :class="{ selected: item.selected }"
-          :style="{ height: item.size + 'px' }"
-          :key="item.id"
-        >
           <div class="super" v-if="item.super !== undefined">
             {{ item.super }}
           </div>
@@ -71,63 +43,34 @@
         </div>
 
         <template v-else>
-          <div
+          <div class="photo" v-for="photo of item.photos" :key="photo.key" :style="{
-            class="photo"
+            height: photo.dispH + 'px',
-            v-for="photo of item.photos"
+            width: photo.dispW + 'px',
-            :key="photo.key"
+            transform: `translate(${photo.dispX}px, ${photo.dispY}px`,
-            :style="{
+          }">
-              height: photo.dispH + 'px',
-              width: photo.dispW + 'px',
-              transform: `translate(${photo.dispX}px, ${photo.dispY}px`,
-            }"
-          >
             <Folder v-if="photo.flag & c.FLAG_IS_FOLDER" :data="photo" />
 
             <Tag v-else-if="photo.flag & c.FLAG_IS_TAG" :data="photo" />
 
-            <Photo
+            <Photo v-else :data="photo" :day="item.day" @select="selectionManager.selectPhoto"
-              v-else
+              @pointerdown="selectionManager.clickPhoto(photo, $event, index)" @touchstart="
-              :data="photo"
-              :day="item.day"
-              @select="selectionManager.selectPhoto"
-              @pointerdown="selectionManager.clickPhoto(photo, $event, index)"
-              @touchstart="
                 selectionManager.touchstartPhoto(photo, $event, index)
-              "
+              " @touchend="selectionManager.touchendPhoto(photo, $event, index)"
-              @touchend="selectionManager.touchendPhoto(photo, $event, index)"
+              @touchmove="selectionManager.touchmovePhoto(photo, $event, index)" />
-              @touchmove="selectionManager.touchmovePhoto(photo, $event, index)"
-            />
           </div>
         </template>
       </template>
     </RecycleScroller>
 
     <!-- Managers -->
-    <ScrollerManager
+    <ScrollerManager ref="scrollerManager" :rows="list" :height="scrollerHeight" :recycler="$refs.recycler"
-      ref="scrollerManager"
+      :recyclerBefore="$refs.recyclerBefore" />
-      :rows="list"
-      :height="scrollerHeight"
-      :recycler="$refs.recycler"
-      :recyclerBefore="$refs.recyclerBefore"
-    />
 
-    <SelectionManager
+    <SelectionManager ref="selectionManager" :heads="heads" :rows="list" :isreverse="isMonthView"
-      ref="selectionManager"
+      :recycler="$refs.recycler" @refresh="softRefresh" @delete="deleteFromViewWithAnimation"
-      :heads="heads"
+      @updateLoading="updateLoading" />
-      :rows="list"
-      :isreverse="isMonthView"
-      :recycler="$refs.recycler"
-      @refresh="softRefresh"
-      @delete="deleteFromViewWithAnimation"
-      @updateLoading="updateLoading"
-    />
 
-    <Viewer
+    <Viewer ref="viewer" @deleted="deleteFromViewWithAnimation" @fetchDay="fetchDay" @updateLoading="updateLoading" />
-      ref="viewer"
-      @deleted="deleteFromViewWithAnimation"
-      @fetchDay="fetchDay"
-      @updateLoading="updateLoading"
-    />
   </div>
 </template>
 
@@ -140,7 +83,7 @@ import { subscribe, unsubscribe } from "@nextcloud/event-bus";
 import NcEmptyContent from "@nextcloud/vue/dist/Components/NcEmptyContent";
 
 import { getLayout } from "../services/Layout";
-import { IDay, IFolder, IHeadRow, IPhoto, IRow, IRowType } from "../types";
+import { IDay, IFolder, IHeadRow, IPhoto, IRow, IRowType, MapBoundary } from "../types";
 import Folder from "./frame/Folder.vue";
 import Photo from "./frame/Photo.vue";
 import Tag from "./frame/Tag.vue";
@@ -223,6 +166,14 @@ export default defineComponent({
     selectionManager: null as InstanceType<typeof SelectionManager> & any,
     /** Scroller manager component */
     scrollerManager: null as InstanceType<typeof ScrollerManager> & any,
+
+    /** The boundary of the map */
+    mapBoundary: {
+      minLat: -90,
+      maxLat: 90,
+      minLng: -180,
+      maxLng: 180,
+    } as MapBoundary,
   }),
 
   mounted() {
@@ -715,7 +666,13 @@ export default defineComponent({
 
     /** Fetch timeline main call */
     async fetchDays(noCache = false) {
-      const url = API.Q(API.DAYS(), this.getQuery());
+
+      let url = "";
+      if (this.$route.name === "locations") {
+        url = API.Q(API.DAYS_WITH_BOUNDS(this.mapBoundary), this.getQuery());
+      } else {
+        url = API.Q(API.DAYS(), this.getQuery());
+      }
       const cacheUrl = <string>this.$route.name + url;
 
       // Try cache first
@@ -881,7 +838,11 @@ export default defineComponent({
 
     /** API url for Day call */
     getDayUrl(dayId: number | string) {
-      return API.Q(API.DAY(dayId), this.getQuery());
+      if (this.$route.name === "locations") {
+        return API.Q(API.DAY_WITH_BOUNDS(dayId, this.mapBoundary), this.getQuery());
+      } else {
+        return API.Q(API.DAY(dayId), this.getQuery());
+      }
     },
 
     /** Fetch image data for one dayId */
@@ -1280,6 +1241,12 @@ export default defineComponent({
         this.processDay(day.dayid, newDetail);
       }
     },
+
+    async updateBoundary(mapBoundary: MapBoundary) {
+      this.mapBoundary = mapBoundary;
+      console.log("parent get boundary:", this.mapBoundary);
+      await this.refresh();
+    },
   },
 });
 </script>
@@ -1347,13 +1314,15 @@ export default defineComponent({
   padding-left: 3px;
   font-size: 0.9em;
 
-  > div {
+  >div {
     position: relative;
+
     &.super {
       font-size: 1.4em;
       font-weight: bold;
       margin-bottom: 4px;
     }
+
     &.main {
       display: inline-block;
       font-weight: 600;
@@ -1371,6 +1340,7 @@ export default defineComponent({
     border-radius: 50%;
     cursor: pointer;
   }
+
   .name {
     display: block;
     transition: transform 0.2s ease;
@@ -1384,10 +1354,12 @@ export default defineComponent({
       display: flex;
       opacity: 0.7;
     }
+
     .name {
       transform: translateX(24px);
     }
   }
+
   &.selected .select {
     opacity: 1;
     color: var(--color-primary);
@@ -1401,16 +1373,20 @@ export default defineComponent({
 /** Static and dynamic top matter */
 .top-matter {
   padding-top: 4px;
+
   @include phone {
     padding-left: 40px;
   }
 }
+
 .recycler-before {
   width: 100%;
-  > .text {
+
+  >.text {
     font-size: 1.2em;
     padding-top: 13px;
     padding-left: 8px;
+
     @include phone {
       padding-left: 48px;
     }

src/components/top-matter/LocationTopMatter.vue

@@ -0,0 +1,105 @@
+<template>
+    <div class="location-top-matter">
+        <l-map style="height: 100%; width: 100%; margin-right: 3.5em;" :zoom="zoom" ref="map" @moveend="getBoundary"
+            @zoomend="getBoundary">
+            <l-tile-layer :url="url" :attribution="attribution" />
+            <v-marker-cluster>
+                <l-marker v-for="photo in getPhotos" :key="photo.key"
+                    :lat-lng="[photo.imageInfo.exif.GPSLatitude, photo.imageInfo.exif.GPSLongitude]"
+                    v-if="photo.imageInfo.exif.GPSLatitude && photo.imageInfo.exif.GPSLongitude">
+                    <l-popup :content="photo.filename" />
+                </l-marker>
+            </v-marker-cluster>
+        </l-map>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+import { LMap, LTileLayer, LMarker, LPopup } from "vue2-leaflet";
+import Vue2LeafletMarkerCluster from "vue2-leaflet-markercluster";
+import "leaflet/dist/leaflet.css"
+import { IRow, IPhoto } from "../../types";
+
+import { Icon } from 'leaflet';
+
+type D = Icon.Default & {
+    _getIconUrl?: string;
+};
+
+delete (Icon.Default.prototype as D)._getIconUrl;
+
+Icon.Default.mergeOptions({
+    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
+    iconUrl: require('leaflet/dist/images/marker-icon.png'),
+    shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
+});
+
+export default defineComponent({
+    name: "LocationTopMatter",
+    components: {
+        LMap,
+        LTileLayer,
+        LMarker,
+        LPopup,
+        'v-marker-cluster': Vue2LeafletMarkerCluster,
+    },
+
+    data: () => ({
+        name: "locations", // add for test
+        url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+        attribution:
+            '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
+        zoom: 1,
+    }),
+
+    watch: {
+        $route: function (from: any, to: any) {
+            this.createMatter();
+        },
+    },
+
+    mounted() {
+        this.createMatter();
+    },
+
+    computed: {
+        getPhotos() {
+            let photos: IPhoto[] = [];
+            return photos;
+        }
+    },
+
+    methods: {
+        createMatter() {
+            this.name = <string>this.$route.params.name || "";
+        },
+
+        getBoundary() {
+            let map = this.$refs.map as LMap;
+            let boundary = map.mapObject.getBounds();
+            this.$parent.$emit("updateBoundary", {
+                minLat: boundary.getSouth(),
+                maxLat: boundary.getNorth(),
+                minLng: boundary.getWest(),
+                maxLng: boundary.getEast(),
+            });
+        },
+    },
+});
+
+
+</script>
+
+<style lang="scss" scoped>
+@import "~leaflet/dist/leaflet.css";
+@import "~leaflet.markercluster/dist/MarkerCluster.css";
+@import "~leaflet.markercluster/dist/MarkerCluster.Default.css";
+
+.location-top-matter {
+    display: flex;
+    vertical-align: middle;
+    height: 20em;
+
+}
+</style>

src/components/top-matter/TopMatter.vue

@@ -4,26 +4,35 @@
     <TagTopMatter v-else-if="type === 2" />
     <FaceTopMatter v-else-if="type === 3" />
     <AlbumTopMatter v-else-if="type === 4" />
+    <LocationTopMatter v-else-if="type === 5" />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
 import FolderTopMatter from "./FolderTopMatter.vue";
 import TagTopMatter from "./TagTopMatter.vue";
 import FaceTopMatter from "./FaceTopMatter.vue";
 import AlbumTopMatter from "./AlbumTopMatter.vue";
+import LocationTopMatter from "./LocationTopMatter.vue";
 
-import { TopMatterType } from "../../types";
+import { TopMatterType, IRow } from "../../types";
 
 export default defineComponent({
   name: "TopMatter",
+  props: {
+    list: {
+      type: Array as PropType<IRow[]>,
+      required: true,
+    }
+  },
   components: {
     FolderTopMatter,
     TagTopMatter,
     FaceTopMatter,
     AlbumTopMatter,
+    LocationTopMatter,
   },
 
   data: () => ({
@@ -58,6 +67,8 @@ export default defineComponent({
               : TopMatterType.NONE;
           case "albums":
             return TopMatterType.ALBUM;
+          case "locations":
+            return TopMatterType.LOCATION;
           default:
             return TopMatterType.NONE;
         }

src/router.ts

@@ -129,5 +129,14 @@ export default new Router({
         rootTitle: t("memories", "Shared Album"),
       }),
     },
+
+    {
+      path: "/locations",
+      component: Timeline,
+      name: "locations",
+      props: (route) => ({
+        rootTitle: t("memories", "Locations"),
+      })
+    },
   ],
 });

src/services/API.ts

@@ -1,4 +1,5 @@
 import { generateUrl } from "@nextcloud/router";
+import { MapBoundary } from "../types";
 
 const BASE = "/apps/memories/api";
 
@@ -39,6 +40,14 @@ export class API {
     return tok(gen(`${BASE}/days/{id}`, { id }));
   }
 
+  static DAYS_WITH_BOUNDS(mapBoundary: MapBoundary) {
+    return tok(gen(`${BASE}/location/days/{minLat}/{maxLat}/{minLng}/{maxLng}`, mapBoundary));
+  }
+
+  static DAY_WITH_BOUNDS(id: number | string, mapBoundary: MapBoundary) {
+    return tok(gen(`${BASE}/location/days/{id}/{minLat}/{maxLat}/{minLng}/{maxLng}`, { id, ...mapBoundary }));
+  }
+
   static ALBUM_LIST(t: "1" | "2" | "3" = "3") {
     return gen(`${BASE}/albums?t=${t}`);
   }

src/types.ts

@@ -214,6 +214,7 @@ export enum TopMatterType {
   TAG = 2,
   FACE = 3,
   ALBUM = 4,
+  LOCATION = 5,
 }
 export type TopMatterFolder = TopMatter & {
   type: TopMatterType.FOLDER;
@@ -235,3 +236,10 @@ export type ISelectionAction = {
   /** Allow for public routes (default false) */
   allowPublic?: boolean;
 };
+
+export type MapBoundary = {
+  minLat: number;
+  maxLat: number;
+  minLng: number;
+  maxLng: number;
+}