Skip to content

[MOL-20562][NL] Support custom HTML markers#588

Closed
namlh023 wants to merge 5 commits into
mainfrom
MOL-20562
Closed

[MOL-20562][NL] Support custom HTML markers#588
namlh023 wants to merge 5 commits into
mainfrom
MOL-20562

Conversation

@namlh023
Copy link
Copy Markdown
Contributor

@namlh023 namlh023 commented Apr 22, 2026

Changes

Custom HTML markers can be rendered by passing a markerHtml property for each marker. This HTML string is used to display a custom marker, enabling dynamic rendering based on pin data—for example, showing different icons or badges for various location types

  • delete branch

Changelog entry

  • Support custom HTML markers via markerHtml for dynamic marker rendering
  • Add a new event: click-selectable-pin

Additional information

@namlh023 namlh023 marked this pull request as ready for review April 22, 2026 08:39
@namlh023
Copy link
Copy Markdown
Contributor Author

Support custom HTML markers via markerHtml instead of getMarkerHtml

@namlh023 namlh023 marked this pull request as draft April 29, 2026 07:39
Comment thread src/stories/3-fields/location-field/location-field.stories.tsx
@namlh023 namlh023 marked this pull request as ready for review May 4, 2026 12:08
icon: L.divIcon({
html,
className: className || "",
iconSize: [1, 1],
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is an abnormally small iconSize and might cause issues with click hitboxes. Can refer to the markerFrom function to reference how it manages iconSize. Same for iconAnchor.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove iconSize and let the consumer control the size of the custom marker. Set iconAnchor to (0, 0) by default. If we need to control the anchor position in the future, we can enhance it by adding width and height props as options.

mockReverseGeoCodeResponse,
mockStaticMapDataUri,
} from "./mock-values";
import * as markerHelper from "../../../../components/fields/location-field/location-modal/location-picker/helper";
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit but could you sort the imports

@namlh023 namlh023 closed this May 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants