Marker Plus Plus
MPP is a supercharged marker for React Leaflet.
-
onClick
: function to be executed on click. -
latlon
: marker position -
imageData
: dict:-
iconSize
: icon size on the map -
anchor
: icon anchor relative to iconSize -
imageSize
: rendered image size, aka: resolution -
shadow
: if shadow must be rendered -
images
: list(dict) configuration of each one of the image that compose the icon.-
url
: svg url color
-
dx
: X axis position -
dy
: Y axis position -
dw
: width -
dh
: height
-
-
-
circles_data
: list(dict) configuration of each one of the circles that compose the icon.fillColor
borderColor
borderWidth
radius
<MarkerPP
onClick={() => console.log('click')}
latlon={[39.479391, -0.341045]}
imageData={{
iconSize: [100, 50],
anchor: [50, 35],
imageSize: [200, 100],
shadow: true,
images: [
{
url: 'https://raw.githubusercontent.com/FortAwesome/Font-Awesome/6.x/svgs/regular/address-card.svg',
color: '#ff0000',
dx: 0,
dy: 0,
dw: 80,
dh: 80,
},
{
url: 'https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/other_houses/wght100fill1/48px.svg',
color: '#fff',
dx: 0,
dy: -10,
dw: 40,
dh: 40,
},
],
}}
circlesData={[{ fillColor: '#00ff0055', borderColor: 'green', borderWidth: 1, radius: 100 }]}
>
<Popup>Hello world</Popup>
</MarkerPP>
Thanks to Igor Gaponov for this awesome guide: How to Create and Publish React TypeScript npm Package With Demo and Automated Build