Show photos taken in the visible area of the map

[RaymondHuang210129]

First of all, Thanks for your great project! This app allows me to migrate my photos from Google to my self-hosted NAS without compromising the user experience.

I like the location feature in Google Photos because I can locate my travel photos by dragging the map to specific places.
Thus I would like to contribute some codes to make this feature available in this app.

I added another page called 'Locations' which shows the map on the top, and the timeline shows the photos taken within the visible range in the map.

I guess the only way to change schema automatically is to have the app updated and run the migration script, so I manually added two columns (latitude, longitude) to the table oc_memories and runs the below query to fill each row:

ALTER TABLE oc_memories ADD latitude double DEFAULT NULL;
ALTER TABLE oc_memories ADD longitude double DEFAULT NULL;
UPDATE IGNORE oc_memories SET longitude = IF(exif REGEXP '(?<=GPSLatitude\":).*?(?=,)' AND exif REGEXP '(?<=GPSLongitude\":).*?(?=,)', REGEXP_SUBSTR(exif, '(?<=GPSLongitude\":).*?(?=,)') + 0.0, NULL);
UPDATE IGNORE oc_memories SET latitude = IF(exif REGEXP '(?<=GPSLatitude\":).*?(?=,)' AND exif REGEXP '(?<=GPSLongitude\":).*?(?=,)', REGEXP_SUBSTR(exif, '(?<=GPSLatitude\":).*?(?=,)') + 0.0, NULL);

The IGNORE statement results from the photos with malformed GPSLatitude/Longitude values taken by some devices (my old HTC phone treats it as string type instead of rational64u when the value is close to 0).

In my test bed with 13k photos, The webpage does not slow down after applying the geometric filter.

I did not implement the marker clustering feature on the map yet, since client-side clustering requires all marker information sent to the frontend and it could cause bad performance (as discussed in #121 ). I didn't find any server-side clustering library for PHP yet, so I think I should implement this feature in the next step.

BTW, My VSCode linter doesn't seem to match your coding style. Could you provide such configurations in README? Thanks a lot.

[pulsejet]

Hi @RaymondHuang210129, sorry for the delay in reviewing this.

I added another page called 'Locations' which shows the map on the top, and the timeline shows the photos taken within the visible range in the map.

Overall this seems like a good start for implementing the maps feature. I'd like to note here that this will have to be hidden behind a "experimental" flag until the rest of the features are completed: otherwise it'll be confusing UX.

I guess the only way to change schema automatically is to have the app updated and run the migration script, so I manually added two columns (latitude, longitude) to the table oc_memories and runs the below query to fill each row:

ALTER TABLE oc_memories ADD latitude double DEFAULT NULL;
ALTER TABLE oc_memories ADD longitude double DEFAULT NULL;
UPDATE IGNORE oc_memories SET longitude = IF(exif REGEXP '(?<=GPSLatitude\":).*?(?=,)' AND exif REGEXP '(?<=GPSLongitude\":).*?(?=,)', REGEXP_SUBSTR(exif, '(?<=GPSLongitude\":).*?(?=,)') + 0.0, NULL);
UPDATE IGNORE oc_memories SET latitude = IF(exif REGEXP '(?<=GPSLatitude\":).*?(?=,)' AND exif REGEXP '(?<=GPSLongitude\":).*?(?=,)', REGEXP_SUBSTR(exif, '(?<=GPSLatitude\":).*?(?=,)') + 0.0, NULL);

The IGNORE statement results from the photos with malformed GPSLatitude/Longitude values taken by some devices (my old HTC phone treats it as string type instead of rational64u when the value is close to 0).

I would not worry about this. Asking users to re-run indexing after a major upgrade is fine.

In my test bed with 13k photos, The webpage does not slow down after applying the geometric filter.

I don't expect it to. One thing to check would be the query response times (compared to the plain timeline queries). If everything is okay they should be very similar.

I did not implement the marker clustering feature on the map yet, since client-side clustering requires all marker information sent to the frontend and it could cause bad performance (as discussed in #121 ). I didn't find any server-side clustering library for PHP yet, so I think I should implement this feature in the next step.

Sounds good.

BTW, My VSCode linter doesn't seem to match your coding style. Could you provide such configurations in README? Thanks a lot.

Just use Prettier for Vue and TS. For PHP, you need to run make php-lint

[pulsejet]

Hmm, this is supposed to be generic. Maybe there's some better way to achieve this.

On a side note, I'm thinking a three column view might be better UX on desktop. That might need more thinking implementation-wise.

[RaymondHuang210129]

Refactored the code as a transform filter.

[pulsejet]

@RaymondHuang210129 I should've dropped a note earlier: I'm working on something similar right now for map clustering. Thankfully I think there's not a lot of conflict yet so I'm going to try merging in your code locally and continue from there. But I'll suggest putting this on hold for the time being to avoid duplicate efforts.

[RaymondHuang210129]

@pulsejet Got it, thanks! I will wait for your merging process. Sorry for knowing this message late.