diff --git a/packages/components/src/components/Map.tsx b/packages/components/src/components/Map.tsx
index 722740f7..212efd79 100644
--- a/packages/components/src/components/Map.tsx
+++ b/packages/components/src/components/Map.tsx
@@ -14,6 +14,11 @@ import 'leaflet/dist/leaflet.css';
import * as L from 'leaflet';
export type MapProps = {
+ tile?: {
+ attribution?: string;
+ url: string;
+ data?: any;
+ };
layers: {
data: GeospatialData;
name: string;
@@ -37,6 +42,11 @@ export type MapProps = {
};
export function Map({
+ tile = {
+ url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+ attribution:
+ '© OpenStreetMap contributors',
+ },
layers = [
{
data: null,
@@ -144,10 +154,7 @@ export function Map({
map.target.fitBounds(layerToZoomBounds);
}}
>
-
+
{layers.map((layer) => {
const data = layersData.find(
diff --git a/packages/components/stories/Map.stories.ts b/packages/components/stories/Map.stories.ts
index c7bc8081..343d1587 100644
--- a/packages/components/stories/Map.stories.ts
+++ b/packages/components/stories/Map.stories.ts
@@ -43,6 +43,13 @@ type Story = StoryObj;
export const GeoJSONPolygons: Story = {
name: 'GeoJSON polygons map',
args: {
+ tile : {
+ url : 'https://tiles.stadiamaps.com/tiles/alidade_satellite/{z}/{x}/{y}{r}.{ext}',
+ attribution:'© CNES, Distribution Airbus DS, © Airbus DS, © PlanetObserver (Contains Copernicus Data) | © Stadia Maps © OpenMapTiles © OpenStreetMap contributors',
+ data: {
+ ext: 'jpg'
+ }
+ },
layers: [
{
data: {