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

@@ -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
+      <TileLayer url={tile.url} attribution={tile.attribution} {...tile.data} />
-        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-      />
       <LayersControl position="bottomright">
         {layers.map((layer) => {
           const data = layersData.find(

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: {