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

• Remove hardcoded tile layer and make it configurable via Map component's params.
• Introduce a way to set env vars for a selected provider(s):
  • 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