You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
feat: Added new warnings for common misconfigurations, and options to turn them off.
feat: Added new props to control propagation of pan/click events..
feat: Improved component API to properly delimit and contain options from this library from other props. Added typings to catch common misconfig.
fix: Removed throwing error when target portal DOM element can not be found, to fix common SSR scenarios.
fix: Corrected vertical positioning in `fit-content` mode.
fix: Changes to the `divIcon` opts (now via `rootDivOpts`) no longer cause component to lose state.
BREAKING CHANGE: Structure of `componentIconOpts` has changed signifcantly. See docs.
📍 Use a React component as <ahref="https://react-leaflet.js.org/">React Leaflet</a> markers.<br/>
6
+
🔄 Familiar swap-in API that feels like React Leaflet.<br/>
7
+
✨ Can use state, context etc. It's a full component. No BS.<br/>
8
+
💪 It's strongly typed.
2
9
3
-
A tiny wrapper for [react-leaflet](https://react-leaflet.js.org/)'s `<Marker />` component that allows you to use a React component as a marker, with working state, handlers, and access to parent contexts.
10
+
</p>
11
+
<br/>
4
12
5
-
The approach this library uses differs from other approaches that use `renderToString` in that it instead uses React's [Portal](https://react.dev/reference/react-dom/createPortal) functionality to achieve the effect. That means the component is not static, but a full first-class component that can have its own state, event handlers & lifecycle.
13
+
# What is it
6
14
7
-
This library is typed via TypeScript.
15
+
A tiny wrapper for [react-leaflet](https://react-leaflet.js.org/)'s `<Marker />` component that allows you to use a React component as a marker, with **working state, handlers, and access to parent contexts**.
8
16
9
-
# Docs
17
+
The approach this library uses differs from other approaches that use `renderToString` in that it instead uses React's [Portal](https://react.dev/reference/react-dom/createPortal) functionality to achieve the effect. That means the component is not static, but a full first-class component that can have its own state, event handlers & lifecycle.
10
18
11
-
## Installation
19
+
I struggled to find something that worked in this way I could drop something in from a design system in there and have all the context available such that it works, and all the interactions working as they should.
Instead of importing `Marker` from `react-leaflet`, instead import `Marker` from `react-leaflet-component-marker`.
47
+
Instead of importing `Marker` from `react-leaflet`, instead import `Marker` from `@adamscybot/react-leaflet-component-marker`.
38
48
39
49
The `icon` prop is extended to allow for a JSX element of your choosing. All other props are identical to the `react-leaflet`[Marker](https://react-leaflet.js.org/docs/api-components/#marker) API.
40
50
41
51
The `icon` prop can also accept all of the original types of icons that the underlying `react-leaflet` Marker accepts. Though there is no gain in using this library for this case, it may help if you want to just use this library in place of Marker universally.
42
52
43
-
#### Basic Example
53
+
### Example
44
54
45
55
```javascript
46
56
importReactfrom'react'
@@ -72,18 +82,48 @@ const App = () => {
72
82
}
73
83
```
74
84
75
-
### Advanced Sizing and Positioning
85
+
## Advanced Usage
86
+
87
+
The `componentIconOpts` prop can be passed, which is an object with additional options for more advanced use cases. Note, in the case where you are not passing a component to `icon`, these settings will be ignored.
88
+
89
+
Below is a list of properties this object can be provided.
90
+
91
+
### `layoutMode`
92
+
93
+
The `layoutMode` controls how the bounding box of the React component marker behaves. It accepts two options:
94
+
95
+
-`fit-content`_(default)_. In this mode, the React component itself defines the dimensions of the marker. The component can shrink and expand at will. Logic internally to this library centers the component on its coordinates to match Leaflets default positioning; however, Leaflet itself is effectively no longer in control of this.
96
+
-`fit-parent`. In this mode, the dimensions of the React component marker are bound by the `iconSize` passed to `componentIconOpts.rootDivOpts`. Leaflet is therefore in control of the dimensions and positioning. Component markers should use elements with 100% width & height to fill the available size if needed.
97
+
98
+
## `rootDivOpts`
99
+
100
+
> [!NOTE]
101
+
> Some options are not supported since they do not apply or make sense in the case of a React component marker. The unsupported options are `html`, `bgPos`, `shadowUrl`, `shadowSize`, `shadowAnchor`, `shadowRetinaUrl`, `iconUrl` and `iconRetinaUrl`.
102
+
103
+
An object containing properties from the supported subset of the underlying Leaflet [`divIcon`](https://leafletjs.com/reference.html#divicon) options, which this library uses as a containing wrapper.
104
+
105
+
If using `fit-parent`, you must set `iconSize` here.
106
+
107
+
## `disableScrollPropagation`
108
+
109
+
`false` by default.
110
+
111
+
If set to `true`, panning/scrolling the map will not be possible "through" the component marker.
112
+
113
+
## `disableClickPropagation`
114
+
115
+
`false` by default.
76
116
77
-
Note, that it is often possible to achieve the desired effect by use of margins/padding on the React icon component itself. However, in some cases, adjustments may be needed to get pixel perfect like popup positioning
117
+
If set to `true`, clicking on the component marker will not be captured by the underlying map.
78
118
79
-
`iconComponentOpts` can be passed which provides a subset of the [options](https://leafletjs.com/reference.html#icon) that can be passed to an underlying leaflet icon, which is used by this library as an intermediary wrapper. It should be considered an escape hatch.
119
+
## `unusedOptsWarning`
80
120
81
-
`iconComponentLayout` can be passed to control the alignment and size of the React component. It defaults to `fit-content`, meaning the React Component decides its own size and is not constrained by `iconSize` (which defaults to `[0,0]`). The library automatically handles the alignment of the component such that it is centred horizontally with the marker coordinates, regardless of the component's size (which can even change dynamically). Note the anchor options that can be passed to `iconComponentOpts` remain functional with `fit-content`.
121
+
`true`by default.
82
122
83
-
If more granular control is needed, `iconComponentLayout` can be set `fit-parent` which defers all sizing and positioning to leaflets configuration options, that can be provided via the aforementioned `iconComponentOpts`. This means you will likely need to pass an `iconSize` to `iconComponentOpts`. In this mode, the React icon component should also have a root element that has a width and height of 100%, and it should prevent overflowing. The downside to this approach is the component size is inherently static. The upside is Leaflet knows about the icon size, and so the default anchor coordinates for other elements like popups, will be likely closer to the default expectations.
123
+
Can be set to `false` in order to not warn in console about cases where `componentIconOpts` was set but `icon` was not a React component.
84
124
85
-
### Gotchas
125
+
##`unusedOptsWarning`
86
126
87
-
Currently, if any options in `iconComponentOpts` have a material change (new `iconSize` or changed anchors), the React Component will completely remount and lose any state it had. This will be fixed in a future release.
127
+
`true` by default.
88
128
89
-
Hot reloading causes markers to disappear. This will be fixed in a future release.
129
+
Can be set to `false` in order to not warn in console about cases where the `layoutMode` was `fit-parent` but their was no `iconSize` defined in the `rootDivOpts`.
0 commit comments