Custom Tile Layer for Map Component #1122
Conversation
#1121 adds default tile layer and allows user to pass a tile object to map
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
8 Ignored Deployments
|
|
| @@ -14,6 +14,11 @@ import 'leaflet/dist/leaflet.css'; | |||
| import * as L from 'leaflet'; | |||
|
|
|||
| export type MapProps = { | |||
| tile?: { | |||
There was a problem hiding this comment.
IMO we should support both this flexible approach + the default providers from this lib https://github.com/leaflet-extras/leaflet-providers
This tile prop (which I think could be renamed to something like tileLayerSettings for more clarity) should have an interface like:
type UrlTileLayerSettings = { url: string }
// based on https://github.com/leaflet-extras/leaflet-providers
type MapboxTileLayerSettings = {
id: string,
accessToken: string
}
type TileLayerSettings = UrlTileLayerSettings | MapboxTileLayerSettings // ...
...
tileLayerSettings: TileLayerSettings
| tile?: { | ||
| attribution?: string; | ||
| url: string; | ||
| data?: any; |
| attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' | ||
| url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" | ||
| /> | ||
| <TileLayer url={tile.url} attribution={tile.attribution} {...tile.data} /> |
There was a problem hiding this comment.
Based on which provider was chosen, we can pass different props to this component.
I think you can do an implementation based on this code https://github.com/leaflet-extras/leaflet-providers/blob/master/leaflet-providers.js
| @@ -43,6 +43,13 @@ type Story = StoryObj<MapProps>; | |||
| export const GeoJSONPolygons: Story = { | |||
| name: 'GeoJSON polygons map', | |||
| args: { | |||
| tile : { | |||
There was a problem hiding this comment.
We should document this new parameter on the story
#1121 adds default tile layer and allows user to pass a tile object to map