From a6047a9341fb8726cc7ba82ac81d05e10a71214b Mon Sep 17 00:00:00 2001
From: William Lima <willy.lima89@gmail.com>
Date: Mon, 13 May 2024 12:51:28 -0100
Subject: [PATCH] Implements Custom Tile Layer

#1121 adds default tile layer and allows user to pass a tile object to map
---
 packages/components/src/components/Map.tsx | 15 +++++++++++----
 packages/components/stories/Map.stories.ts |  7 +++++++
 2 files changed, 18 insertions(+), 4 deletions(-)

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:
+      '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+  },
   layers = [
     {
       data: null,
@@ -144,10 +154,7 @@ export function Map({
         map.target.fitBounds(layerToZoomBounds);
       }}
     >
-      <TileLayer
-        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-      />
+      <TileLayer url={tile.url} attribution={tile.attribution} {...tile.data} />
       <LayersControl position="bottomright">
         {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<MapProps>;
 export const GeoJSONPolygons: Story = {
   name: 'GeoJSON polygons map',
   args: {
+    tile : {
+      url : 'https://tiles.stadiamaps.com/tiles/alidade_satellite/{z}/{x}/{y}{r}.{ext}',
+      attribution:'&copy; CNES, Distribution Airbus DS, © Airbus DS, © PlanetObserver (Contains Copernicus Data) | &copy; <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+      data: {
+        ext: 'jpg'
+      }
+    },
     layers: [
       {
         data: {