Custom Tile Layer for Map Component #1122

willy1989cv · 2024-05-13T14:06:49Z

#1121 adds default tile layer and allows user to pass a tile object to map

vercel · 2024-05-13T14:06:52Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

9 Ignored Deployments

Name	Status	Preview	Updated (UTC)
portaljs-alan-turing	⬜️ Ignored (Inspect)	Visit Preview	Jun 24, 2024 8:43pm
portaljs-ckan	⬜️ Ignored (Inspect)	Visit Preview	Jun 24, 2024 8:43pm
portaljs-ckan-ssg	⬜️ Ignored (Inspect)	Visit Preview	Jun 24, 2024 8:43pm
portaljs-fivethirtyeight	⬜️ Ignored (Inspect)	Visit Preview	Jun 24, 2024 8:43pm
portaljs-git-example	⬜️ Ignored (Inspect)	Visit Preview	Jun 24, 2024 8:43pm
portaljs-learn	⬜️ Ignored (Inspect)	Visit Preview	Jun 24, 2024 8:43pm
portaljs-openspending	⬜️ Ignored (Inspect)	Visit Preview	Jun 24, 2024 8:43pm
portaljs-storybook	⬜️ Ignored (Inspect)	Visit Preview	Jun 24, 2024 8:43pm
site-portaljs	⬜️ Ignored (Inspect)	Visit Preview	Jun 24, 2024 8:43pm

changeset-bot · 2024-05-13T14:06:53Z

🦋 Changeset detected

Latest commit: 8e34967

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@portaljs/components	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

demenech · 2024-05-13T14:12:37Z

packages/components/src/components/Map.tsx

@@ -14,6 +14,11 @@ import 'leaflet/dist/leaflet.css';
 import * as L from 'leaflet';

 export type MapProps = {
+  tile?: {


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

added

tileLayerName: TileLayerPreset (MapBox, OpenStreetMap, Esri, custom, .... ) tileLayerOptions: L.TileLayerOptions

cc @demenech

demenech · 2024-05-13T14:12:51Z

packages/components/src/components/Map.tsx

+  tile?: {
+    attribution?: string;
+    url: string;
+    data?: any;


Is this prop used anywhere?

now this is all defined in TileLayerPresets object
cc @demenech

demenech · 2024-05-13T14:13:24Z

packages/components/src/components/Map.tsx

-        attribution='&copy; <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} />


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

implemented this approach in latest commit
cc @demenech

demenech · 2024-05-13T14:13:44Z

packages/components/stories/Map.stories.ts

@@ -43,6 +43,13 @@ type Story = StoryObj<MapProps>;
 export const GeoJSONPolygons: Story = {
  name: 'GeoJSON polygons map',
  args: {
+    tile : {


We should document this new parameter on the story

will do it next @demenech

anuveyatsu · 2024-05-31T09:57:17Z

Hey @willy1989cv let me know if you were able to address feedback from @demenech

willy1989cv · 2024-05-31T12:17:27Z

Hey @willy1989cv let me know if you were able to address feedback from @demenech

@anuveyatsu @demenech At the moment I've implemented the more flexible approach, giving the user the possibility to configure the tile layer using component properties or .env variables.

https://hackmd.io/gqYVE-yhQu-iNnuu_m00Eg

rufuspollock · 2024-06-18T13:22:05Z

@willy1989cv is this now good for a re-review?

willy1989cv · 2024-06-18T18:45:46Z

@willy1989cv is this now good for a re-review?

Hi @rufuspollock. Working on the adjustments as suggested by @demenech.

willy1989cv · 2024-06-18T23:44:26Z

@demenech please review latest changes.
here's a small doc on how it works: https://hackmd.io/@1kPvEKNGQAa77DV7pjEh5Q/Sk0geNvEA

demenech

Hey @willy1989cv

Very small change request, otherwise looks fine to me.

I'd like to suggest two other things:

There should be a way to add markdown documents to Storybook stories, perhaps we could embed your documentation in the stories somehow?
Just confirm this was tested on an external project after the project being built to ensure it works properly e.g. with the env vars

demenech · 2024-06-19T00:06:42Z

packages/components/src/components/Map.tsx

+    if (providers[providerName].url?.includes('{variant}') && !variantName)
+      variantName = Object.keys(providers[providerName].variants)[0];
+
+    console.log(variantName);


willy1989cv · 2024-06-20T11:38:48Z

@demenech working fine on my localhost @portaljs instance.

configured through properties:

# My Dataset

Built with PortalJS

## Map

<Map
    tileLayerName="MapBox"
    tileLayerOptions={{
        accessToken : "xxx"
    }}
/>

or via .env

NEXT_PUBLIC_MAP_TILE_LAYER_NAME=MapBox
NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_accessToken=xxx

preview:

cc: @anuveyatsu

demenech · 2024-06-20T18:09:03Z

hey @willy1989cv
that's great
let's add a changeset and merge

Implements Custom Tile Layer

a6047a9

#1121 adds default tile layer and allows user to pass a tile object to map

demenech requested changes May 13, 2024

View reviewed changes

include configs on .env vars or pass through props

d1a5138

Update Map.tsx

31406d4

vercel bot deployed to Preview – portaljs-storybook May 31, 2024 11:32 View deployment

Add TileLayer Presets configuration

134f729

vercel bot had a problem deploying to Preview – portaljs-storybook June 18, 2024 23:02 Failure

attr replace fix

32f2902

vercel bot deployed to Preview – portaljs-storybook June 18, 2024 23:08 View deployment

add mapbox as default basemap

97e43fd

vercel bot deployed to Preview – portaljs-storybook June 18, 2024 23:40 View deployment

demenech requested changes Jun 19, 2024

View reviewed changes

Code cleanup

93ae498

vercel bot deployed to Preview – portaljs-storybook June 19, 2024 11:14 View deployment

version: add changeset

8e34967

demenech merged commit 64103d6 into main Jun 24, 2024
10 checks passed

github-actions bot mentioned this pull request Jun 24, 2024

Version Packages #1202

Merged

demenech deleted the feature/custom-tile-layer branch June 24, 2024 20:57

willy1989cv mentioned this pull request Jul 1, 2024

Tile layer for Map component #1121

Closed

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Custom Tile Layer for Map Component #1122

Custom Tile Layer for Map Component #1122

willy1989cv commented May 13, 2024

vercel bot commented May 13, 2024 •

edited

Loading

changeset-bot bot commented May 13, 2024 •

edited

Loading

demenech May 13, 2024 •

edited

Loading

willy1989cv Jun 18, 2024

demenech May 13, 2024

willy1989cv Jun 18, 2024 •

edited

Loading

demenech May 13, 2024

willy1989cv Jun 18, 2024

demenech May 13, 2024

willy1989cv Jun 18, 2024

anuveyatsu commented May 31, 2024

willy1989cv commented May 31, 2024

rufuspollock commented Jun 18, 2024

willy1989cv commented Jun 18, 2024

willy1989cv commented Jun 18, 2024

demenech left a comment

demenech Jun 19, 2024

willy1989cv Jun 20, 2024

willy1989cv commented Jun 20, 2024 •

edited

Loading

demenech commented Jun 20, 2024

Custom Tile Layer for Map Component #1122

Custom Tile Layer for Map Component #1122

Conversation

willy1989cv commented May 13, 2024

vercel bot commented May 13, 2024 • edited Loading

changeset-bot bot commented May 13, 2024 • edited Loading

🦋 Changeset detected

demenech May 13, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

willy1989cv Jun 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anuveyatsu commented May 31, 2024

willy1989cv commented May 31, 2024

rufuspollock commented Jun 18, 2024

willy1989cv commented Jun 18, 2024

willy1989cv commented Jun 18, 2024

demenech left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

willy1989cv commented Jun 20, 2024 • edited Loading

demenech commented Jun 20, 2024

vercel bot commented May 13, 2024 •

edited

Loading

changeset-bot bot commented May 13, 2024 •

edited

Loading

demenech May 13, 2024 •

edited

Loading

willy1989cv Jun 18, 2024 •

edited

Loading

willy1989cv commented Jun 20, 2024 •

edited

Loading