diff --git a/app/src/pages/MapContainer.tsx b/app/src/pages/MapContainer.tsx index 3599a888..0211ab05 100644 --- a/app/src/pages/MapContainer.tsx +++ b/app/src/pages/MapContainer.tsx @@ -89,6 +89,8 @@ function MapContainer({ layers, map }: { layers: LayerProps[]; map: any }) { tilesType={map.tiles_type} maplibreStyle={map.maplibre_style} showFullscreenControl={map.show_fullscreen_control} + zoomOffset={map.zoom_offset} + tileSize={map.tile_size} > {layers && apis && diff --git a/backend/directus-config/development/snapshot/fields/maps/tile_server_attribution.json b/backend/directus-config/development/snapshot/fields/maps/tile_server_attribution.json index 86025949..1f566cfb 100644 --- a/backend/directus-config/development/snapshot/fields/maps/tile_server_attribution.json +++ b/backend/directus-config/development/snapshot/fields/maps/tile_server_attribution.json @@ -8,7 +8,7 @@ "display": null, "display_options": null, "field": "tile_server_attribution", - "group": "raster_tiles", + "group": "tile_server", "hidden": false, "interface": "input", "note": "Attribution text for raster tiles", @@ -17,7 +17,7 @@ }, "readonly": false, "required": false, - "sort": 2, + "sort": 4, "special": null, "translations": null, "validation": null, diff --git a/backend/directus-config/development/snapshot/fields/maps/tile_size.json b/backend/directus-config/development/snapshot/fields/maps/tile_size.json new file mode 100644 index 00000000..5e497e78 --- /dev/null +++ b/backend/directus-config/development/snapshot/fields/maps/tile_size.json @@ -0,0 +1,43 @@ +{ + "collection": "maps", + "field": "tile_size", + "type": "integer", + "meta": { + "collection": "maps", + "conditions": null, + "display": null, + "display_options": null, + "field": "tile_size", + "group": "raster_tiles", + "hidden": false, + "interface": "input", + "note": null, + "options": null, + "readonly": false, + "required": false, + "sort": 2, + "special": null, + "translations": null, + "validation": null, + "validation_message": null, + "width": "half" + }, + "schema": { + "name": "tile_size", + "table": "maps", + "data_type": "integer", + "default_value": 256, + "max_length": null, + "numeric_precision": 32, + "numeric_scale": 0, + "is_nullable": true, + "is_unique": false, + "is_indexed": false, + "is_primary_key": false, + "is_generated": false, + "generation_expression": null, + "has_auto_increment": false, + "foreign_key_table": null, + "foreign_key_column": null + } +} diff --git a/backend/directus-config/development/snapshot/fields/maps/zoom_offset.json b/backend/directus-config/development/snapshot/fields/maps/zoom_offset.json new file mode 100644 index 00000000..39200271 --- /dev/null +++ b/backend/directus-config/development/snapshot/fields/maps/zoom_offset.json @@ -0,0 +1,45 @@ +{ + "collection": "maps", + "field": "zoom_offset", + "type": "integer", + "meta": { + "collection": "maps", + "conditions": null, + "display": null, + "display_options": null, + "field": "zoom_offset", + "group": "raster_tiles", + "hidden": false, + "interface": "input", + "note": null, + "options": { + "min": 0 + }, + "readonly": false, + "required": false, + "sort": 3, + "special": null, + "translations": null, + "validation": null, + "validation_message": null, + "width": "half" + }, + "schema": { + "name": "zoom_offset", + "table": "maps", + "data_type": "integer", + "default_value": -1, + "max_length": null, + "numeric_precision": 32, + "numeric_scale": 0, + "is_nullable": true, + "is_unique": false, + "is_indexed": false, + "is_primary_key": false, + "is_generated": false, + "generation_expression": null, + "has_auto_increment": false, + "foreign_key_table": null, + "foreign_key_column": null + } +} diff --git a/lib/src/Components/Map/UtopiaMap.tsx b/lib/src/Components/Map/UtopiaMap.tsx index 70bd695f..ebf80cbf 100644 --- a/lib/src/Components/Map/UtopiaMap.tsx +++ b/lib/src/Components/Map/UtopiaMap.tsx @@ -61,6 +61,8 @@ function UtopiaMap({ tileServerAttribution, tilesType = 'raster', maplibreStyle, + zoomOffset, + tileSize, }: { /** height of the map (default '500px') */ height?: string @@ -100,6 +102,10 @@ function UtopiaMap({ tilesType?: 'raster' | 'maplibre' /** MapLibre style URL for vector tiles (default: OpenFreeMap Liberty) */ maplibreStyle?: string + /** zoom offset which is needed for some raster tile provider (eg. Mapbox) */ + zoomOffset?: number + /** tile size (default 256) */ + tileSize?: number }) { return ( @@ -124,6 +130,8 @@ function UtopiaMap({ tileServerAttribution={tileServerAttribution} tilesType={tilesType} maplibreStyle={maplibreStyle} + zoomOffset={zoomOffset} + tileSize={tileSize} > {children} diff --git a/lib/src/Components/Map/UtopiaMapInner.tsx b/lib/src/Components/Map/UtopiaMapInner.tsx index 0a550e56..f3760b82 100644 --- a/lib/src/Components/Map/UtopiaMapInner.tsx +++ b/lib/src/Components/Map/UtopiaMapInner.tsx @@ -62,6 +62,8 @@ export function UtopiaMapInner({ tileServerAttribution, tilesType, maplibreStyle, + zoomOffset = 0, + tileSize = 256, }: { children?: React.ReactNode geo?: GeoJsonObject @@ -77,6 +79,8 @@ export function UtopiaMapInner({ tileServerAttribution?: string tilesType?: 'raster' | 'maplibre' maplibreStyle?: string + zoomOffset?: number + tileSize?: number }) { const selectNewItemPosition = useSelectPosition() const setSelectNewItemPosition = useSetSelectPosition() @@ -292,6 +296,8 @@ export function UtopiaMapInner({ {tilesType === 'raster' ? ( OpenStreetMap' @@ -299,7 +305,7 @@ export function UtopiaMapInner({ url={tileServerUrl ?? 'https://tile.osmand.net/hd/{z}/{x}/{y}.png'} /> ) : ( - + )} setClusterRef(r as any)}