include configs on .env vars or pass through props

packages/components/.storybook/preview.ts

@@ -1,9 +1,14 @@
 import 'tailwindcss/tailwind.css'
 import '../src/index.css'
-
-
 import type { Preview } from '@storybook/react';
 
+window.process = {
+ ...window.process,
+ env:{
+  ...window.process?.env
+ }
+};
+
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },

packages/components/src/components/Map.tsx

@@ -8,17 +8,14 @@ import {
   TileLayer,
   GeoJSON as GeoJSONLayer,
   LayersControl,
+  TileLayerProps,
 } from 'react-leaflet';
 
 import 'leaflet/dist/leaflet.css';
 import * as L from 'leaflet';
 
 export type MapProps = {
-  tile?: {
-    attribution?: string;
-    url: string;
-    data?: any;
-  };
+  tile?: TileLayerProps;
   layers: {
     data: GeospatialData;
     name: string;
@@ -64,6 +61,30 @@ export function Map({
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [layersData, setLayersData] = useState<any>([]);
 
+  /*
+  tileEnvVars
+  extract all environment variables thats starts with NEXT_PUBLIC_MAP_TILE_.
+    the variables names are the same as the TileLayer object properties:
+    - url:
+    - attribution
+    - accessToken
+    - id
+    - ext
+    - bounds
+    - maxZoom
+    - minZoom
+    see TileLayerOptions inteface
+   */
+  const tileEnvVars = Object.keys(process?.env)
+    .filter((key) => key.startsWith('NEXT_PUBLIC_MAP_TILE_'))
+    .reduce((obj, key) => {
+      obj[key.split('NEXT_PUBLIC_MAP_TILE_')[1]] = process.env[key];
+      return obj;
+    }, {});
+
+  //tileData prioritizes properties passed through component over those passed through .env variables
+  const tileData = Object.assign(tileEnvVars, tile);
+
   useEffect(() => {
     const loadDataPromises = layers.map(async (layer) => {
       const url = layer.data.url;
@@ -154,7 +175,8 @@ export function Map({
         map.target.fitBounds(layerToZoomBounds);
       }}
     >
-      <TileLayer url={tile.url} attribution={tile.attribution} {...tile.data} />
+      {tileData.url && <TileLayer {...tileData} />}
+
       <LayersControl position="bottomright">
         {layers.map((layer) => {
           const data = layersData.find(

packages/components/stories/Map.stories.ts

@@ -44,11 +44,10 @@ 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'
-      }
+      url : 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}',
+      attribution:'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://www.mapbox.com/about/maps/">Mapbox</a>',
+      accessToken : 'pk.eyJ1Ijoid2lsbHktcGFsbWFyZWpvIiwiYSI6ImNqNzk5NmRpNDFzb2cyeG9sc2luMHNjajUifQ.lkoVRFSI8hOLH4uJeOzwXw',
+      id: 'mapbox/streets-v10'
     },
     layers: [
       {