feat: Add map

[RmStorm]

Started work on a map. I considered spatialite or running clustering in Rust but ultimately you want the map to be responsive. So clusters must appear and disappear based on zoomstate and doing backend roundtrips on those just didn't seem like a simple or sane starting point.

What this code does now is basically load every image with a location and send their url's and positions over to the frontend. Mapbox is then responsible for clustering them. When enabling clustering on a geojson source mapbox adds some properties to points that represent clusters. This can be used to render clusters in one layer with simple circles. Points that represent individual images can be displayed in another layer (a symbol layer).

One clever thingy here is that the thumbnails are not loaded up front! So I send over urls for every single image with a position but they are not loaded untill needed. And this is done by listening to mapbox's styleimagemissing event. When that happens we add that specific thumbnail to the map and 🎉 it works with almost no latency.

Work left to do:

• Test performance with many more images. Off my couple 1000 images only 700 actually have location data in the exif.
• When clicking on an image display it in a preview. My idea is to make a preview screen with all the images that were under the cursor when clicked or something.

[gbbirkisson]

Really love this PR. I think it will be an awesome feature, just needs a bit more work 😄

[gbbirkisson]

Suggested change

	Some(data) => match data.pos {
	Some(p) => {
	sqlx::query!(
	r#"
	INSERT OR REPLACE INTO media ( id, path, taken_at, type, latitude, longitude, walked )
	VALUES ( ?1, ?2, ?3, ?4, ?5, ?6, 1 )
	"#,
	processed_media.uuid,
	processed_media.path,
	data.taken_at,
	media_type,
	p.0,
	p.1,
	).execute(pool).await?
	}
	None => {
	sqlx::query!(
	r#"
	INSERT OR REPLACE INTO media ( id, path, taken_at, type, walked )
	VALUES ( ?1, ?2, ?3, ?4, 1 )
	"#,
	processed_media.uuid,
	processed_media.path,
	data.taken_at,
	media_type,
	)
	.execute(pool)
	.await?
	}
	},
	Some(data) => {
	let lat = data.pos.map(|p| p.0);
	let lon = data.pos.map(|p| p.1);
	sqlx::query!(
	r#"
	INSERT OR REPLACE INTO media ( id, path, taken_at, type, latitude, longitude, walked )
	VALUES ( ?1, ?2, ?3, ?4, ?5, ?6, 1 )
	"#,
	processed_media.uuid,
	processed_media.path,
	data.taken_at,
	media_type,
	lat,
	lon
	).execute(pool).await?
	}

[gbbirkisson]

Suggested change

	#[allow(clippy::future_not_send)]
	pub async fn media_with_pos(pool: &SqlitePool) -> Result<Vec<MediaRow>> {
	let query = r"
	SELECT id, path, taken_at, type as media_type, archived, favorite, latitude, longitude FROM media
	WHERE latitude IS NOT NULL;
	"
	.to_string();
	let query = sqlx::query_as::<Sqlite, MediaRow>(&query);
	query.fetch_all(pool).await.wrap_err("Failed to fetch rows")
	}
	#[allow(clippy::future_not_send)]
	pub async fn media_with_pos(pool: &SqlitePool, filter: impl Into<Filter>) -> Result<Vec<MediaRow>> {
	let filter = filter.into();
	let query = format!(
	r"
	SELECT id, path, taken_at, type as media_type, archived, favorite, latitude, longitude FROM media
	{filter} AND latitude IS NOT NULL;
	"
	);
	let mut query = sqlx::query_as::<Sqlite, MediaRow>(&query);
	query = filter.bind(query);
	query.fetch_all(pool).await.wrap_err("Failed to fetch rows")
	}

Allow filtering, more on that below ....

While you are developing you can just add this implementation to call your method:

impl From<()> for Filter {
    fn from(_value: ()) -> Self {
        Self {
            archived: false,
            favorite: None,
            taken_after: None,
            taken_before: None,
        }
    }
}

...
db::media_with_pos(pool, ())
....

[gbbirkisson]

Suggested change

	use exif::{Exif, In, Rational, Tag, Value};
	use exif::{Exif, In, Tag, Value};

[gbbirkisson]

Suggested change

	let media = db::media_with_pos(pool)
	let media = db::media_with_pos(pool, &state)

Pass in state to filter ....

[gbbirkisson]

Nice, didn't realize this was a problem 🙈

[gbbirkisson]

Can we pull in the dependencies and bake them into the binary, similar to what I do here. I was very much trying to make an effort to have the server no depend on any external dependencies during runtime.

[gbbirkisson]

Instead of doing this, my idea is to keep the filter bar in the regular view, and just replace the <div class="media-gallery"> with the map. That way we can still use the filters while using the map ...

[gbbirkisson]

This needs to be parameterized, and maybe just disable the map functionality all together if the token is not supplied.