Tile layer for Map component

[anuveyatsu]

I was looking at the Map component in the library and I wanted to change default tile layer, e.g., I want to use something prettier. It looks like we have it hardcoded here https://github.com/datopian/datahub/blob/main/packages/components/src/components/Map.tsx#L147-L150 - don't you think we should make it default but also provide a way for users to configure it via a parameter in the Map component?

Acceptance criteria

• [ ] I can use Map component out-of-the-box without any customization/env var etc., eg, pass url to my geojson file and it renders it with default tiles etc.
• [ ] I can configure my tile layer by passing a parameter(s) to Map component.

Tasks

• [x] Remove hardcoded tile layer and make it configurable via Map component's params.
• [x] Introduce a way to set env vars for a selected provider(s):
  • [x] Mapbox (for now only this provider).

Notes

Auth

From @anuveyatsu :

I think the question is how to do auth in this case, e.g., if your tile layer server is a service such as Mapbox that requires an API key to be supplied. I think that's not something we need to consider under the scope of this issue - for now just allow people to customize it.

Here is the list of free tile providers - https://github.com/leaflet-extras/leaflet-providers

From @demenech :

in terms of using environment variables to define the default values, I think you are going to have to use the NEXT_PUBLIC_ prefix on all of them, so that they are available on the browser

besides that, I think we could have one to explicitly choose the provider., e.g.:

NEXT_PUBLIC_MAP_PROVIDER=mapbox

and then others that are based on which provider was chosen, because different providers have different parameters.

e.g.

NEXT_PUBLIC_MAP_PROVIDER=mapbox
NEXT_PUBLIC_MAP_MAPBOX_MAP_ID=123
NEXT_PUBLIC_MAP_MAPBOX_ACCESS_TOKEN=123

[anuveyatsu]

@willy1989cv any updates on that?

[willy1989cv]

hi @anuveyatsu at the moment I've implemented this approach: https://hackmd.io/@1kPvEKNGQAa77DV7pjEh5Q/Sk0geNvEA

please review if its what we want.

[willy1989cv]

Hi @anuveyatsu this was implemented here: https://github.com/datopian/datahub/pull/1122

[willy1989cv]

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

• leaflet-providers demo
• component storybook

---

Configuring through 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...).

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.

---

Environment Variables

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

NEXT_PUBLIC_MAP_TILE_LAYER_NAME=ProviderName NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_accessToken=xyz123

NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_url=
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.

[olayway]

@willy1989cv Can this be closed?

[willy1989cv]

@willy1989cv Can this be closed?

Sorry I missed this. I believe yes

[anuveyatsu]

Closing as FIXED, see https://storybook.portaljs.org/?path=/docs/components-geospatial-map--docs