feat(dotted-map) : Add marker overlay support to DottedMap#862
feat(dotted-map) : Add marker overlay support to DottedMap#862Yeom-JinHo wants to merge 13 commits intomagicuidesign:mainfrom
Conversation
|
@Yeom-JinHo is attempting to deploy a commit to the product-studio Team on Vercel. A member of the Team first needs to authorize it. |
|
@dillionverma While integrating it, I realized that having an overlay option would be really helpful for cases like displaying countries (e.g., flags/labels) on top of markers, so I added this feature. |
Yeom-JinHo
force-pushed
the
feature/dotted-map-overlay
branch
2 times, most recently
from
02d7645 to
b228ef5
Compare
dillionverma
left a comment
dillionverma
left a comment
There was a problem hiding this comment.
awesome changes
just added a few small things I think would be important to address
|
|
||
| type MyMarker = Marker & { | ||
| overlay: { | ||
| countryCode: string // "kr", "us" |
There was a problem hiding this comment.
there exists an exhaustive and standardized list of country codes
maybes theres some enum we can create or lightweight npm package we can use to get type inference for them
https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes
There was a problem hiding this comment.
@dillionverma
Good suggestion. Used countries-list for ISO 3166 country code typing.
| markers={markers} | ||
| renderMarkerOverlay={({ marker, x, y, r, index }) => { | ||
| const { countryCode, label } = marker.overlay | ||
| const href = `https://flagcdn.com/w40/${countryCode.toLowerCase()}.png` // FlagCDN [oai_citation:7‡Flagpedia](https://flagpedia.net/download/api) |
There was a problem hiding this comment.
i checked the visual demo and it looks like the country flags are a bit blurry
There was a problem hiding this comment.
the flag images now use higher-quality WebP assets for better clarity
|
|
||
| type PulseMarker = Marker & { | ||
| overlay?: { | ||
| pulse?: boolean |
There was a problem hiding this comment.
let's just bring this to the root component maybe?
might be good to generalize and add an optional pulse prop / overlay prop so anyone can easily do this
we want to make the simplest DX possible
There was a problem hiding this comment.
@dillionverma
Great suggestion — addressed in feat(dotted-map): add root pulse prop with per-marker pulse override: pulse is now available on the root DottedMap API for simpler DX.`
Yeom-JinHo
force-pushed
the
feature/dotted-map-overlay
branch
from
71c52b9 to
378a958
Compare
2 participants
Description
This PR adds an optional overlay rendering API to
DottedMapso consumers can render custom marker overlays (e.g., image/label badges) on top of the existing marker circles while keeping the current behavior as-is.Changes
DottedMapProps/DottedMapto supportmarkers?: M[]withM extends Markerand a default type parameter (M = Marker).renderMarkerOverlay?: (args) => ReactNodeto render custom SVG overlay content using projected coordinates (x,y) and radius (r).MapMarker<M> = M & { x: number; y: number }for projected markers returned fromaddMarkers.Motivation
Breaking Changes
renderMarkerOverlayis optional.Screenshots