This should provide instructions for configuring the tile layer in your Map component, including both component properties and environment variables.

---

# **Component Properties**

We can configure a tile layer for the Map component by passing the following properties:

### **tileLayerName**
A list of pre-defined out-of-the-box tile layer providers. (MapBox, OpenStreetMap, Esri, etc...). See options [here](https://leaflet-extras.github.io/leaflet-providers/preview/index.html).

tileLayerName: 'MapBox' | 'OpenStreetMap' | 'custom' | ...

### **tileLayerOptions**
Additional options for the specified tile provider.

tileLayerOptions: {
    id?: string;
    accessToken?: string;
    minZoom?: number;
    maxZoom?: number;
    maxNativeZoom?: number;
    minNativeZoom?: number;
    subdomains?: string | string[];
    errorTileUrl?: string;
    zoomOffset?: number;
    tms?: boolean;
    zoomReverse?: boolean;
    detectRetina?: boolean;
    crossOrigin?: CrossOrigin | boolean;
    referrerPolicy?: ReferrerPolicy | boolean;
}

Some of the properties, such as accessToken, might be required for some of the providers.

All available options and documentation can be found [here](https://leafletjs.com/reference#tilelayer).

---

# **Environment Variables**

Given that most projects using `@portajs` are built with Next.js, we can also configure the tile layer using `.env` variables with the prefix:

**NEXT_PUBLIC_MAP_TILE_LAYER_Name**=MapBox
**NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_**{option}.

NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_url=https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}
NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_id=
NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_accessToken=
NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_minZoom=
NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_maxZoom=
NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_maxNativeZoom=
NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_minNativeZoom=
NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_subdomains=
NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_errorTileUrl=
NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_zoomOffset=
NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_tms=
NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_zoomReverse=
NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_detectRetina=
NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_crossOrigin=
NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_referrerPolicy=

---

# **.env Variables vs Component Properties Priority**

**The options passed through the component's properties will prevail over those defined in `.env`.**