feat(views/geo): add the rest of the map layers

This commit is contained in:
Elian Doran 2025-07-24 15:33:39 +03:00
parent 5f9a054441
commit bea40d4c2f
No known key found for this signature in database
2 changed files with 44 additions and 16 deletions

View File

@ -3,6 +3,7 @@ import FNote from "../../entities/fnote";
import attributes from "../../services/attributes"; import attributes from "../../services/attributes";
import { ViewTypeOptions } from "../../services/note_list_renderer" import { ViewTypeOptions } from "../../services/note_list_renderer"
import NoteContextAwareWidget from "../note_context_aware_widget"; import NoteContextAwareWidget from "../note_context_aware_widget";
import { MAP_LAYERS } from "../view_widgets/geo_view/map_layer";
interface BookConfig { interface BookConfig {
properties: BookProperty[]; properties: BookProperty[];
@ -102,10 +103,10 @@ export const bookPropertiesConfig: Record<ViewTypeOptions, BookConfig> = {
label: t("book_properties_config.map-style"), label: t("book_properties_config.map-style"),
type: "combobox", type: "combobox",
bindToLabel: "mapStyle", bindToLabel: "mapStyle",
options: [ options: Object.entries(MAP_LAYERS).map(([id, layer]) => ({
{ value: "openstreetmap", label: "OpenStreetMap" }, value: id,
{ value: "versatiles-colorful", label: "Versatiles Colorful (vector)" } label: layer.name
] }))
} }
] ]
}, },

View File

@ -1,41 +1,68 @@
import L from "leaflet"; import L from "leaflet";
import type { StyleSpecification } from "maplibre-gl";
interface VectorLayer { interface Layer {
type: "vector"; name: string;
style: string | (() => Promise<StyleSpecification>)
} }
interface RasterLayer { interface VectorLayer extends Layer {
type: "vector";
style: string | (() => Promise<{}>)
}
interface RasterLayer extends Layer {
type: "raster"; type: "raster";
url: string; url: string;
attribution: string; attribution: string;
} }
const LAYERS: Record<string, VectorLayer | RasterLayer> = { export const MAP_LAYERS: Record<string, VectorLayer | RasterLayer> = {
"openstreetmap": { "openstreetmap": {
name: "OpenStreetMap",
type: "raster", type: "raster",
url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png", url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}, },
"versatiles-colorful": { "versatiles-colorful": {
name: "Versatiles Colorful (vector)",
type: "vector", type: "vector",
style: async () => { style: async () => (await import("./styles/colorful/en.json")).default
const style = await import("./styles/colorful/en.json"); },
return style.default as unknown as StyleSpecification; "versatiles-eclipse": {
} name: "Versatiles Eclipse (vector)",
type: "vector",
style: async () => (await import("./styles/eclipse/en.json")).default
},
"versatiles-empty": {
name: "Versatiles Empty (vector)",
type: "vector",
style: async () => (await import("./styles/empty/style.json")).default
},
"versatiles-graybeard": {
name: "Versatiles Graybeard (vector)",
type: "vector",
style: async () => (await import("./styles/graybeard/en.json")).default
},
"versatiles-neutrino": {
name: "Versatiles Neutrino (vector)",
type: "vector",
style: async () => (await import("./styles/neutrino/en.json")).default
},
"versatiles-shadow": {
name: "Versatiles Shadow (vector)",
type: "vector",
style: async () => (await import("./styles/shadow/en.json")).default
} }
}; };
export default async function getMapLayer(layerName: string) { export default async function getMapLayer(layerName: string) {
const layer = LAYERS[layerName] ?? LAYERS["openstreetmap"]; const layer = MAP_LAYERS[layerName] ?? MAP_LAYERS["openstreetmap"];
if (layer.type === "vector") { if (layer.type === "vector") {
const style = (typeof layer.style === "string" ? layer.style : await layer.style()); const style = (typeof layer.style === "string" ? layer.style : await layer.style());
await import("@maplibre/maplibre-gl-leaflet"); await import("@maplibre/maplibre-gl-leaflet");
return L.maplibreGL({ return L.maplibreGL({
style style: style as any
}); });
} }