@asicupv/markerpp
v1.0.2
Published
MPP is a supercharged marker for Leaflet (although it may be used with other frameworks).
Downloads
6
Readme
Marker Plus Plus
MPP is a supercharged marker for React Leaflet.
onClick
: function to be executed on click.latlon
: marker positionimageData
: dict:iconSize
: icon size on the mapanchor
: icon anchor relative to iconSizeimageSize
: rendered image size, aka: resolutionshadow
: if shadow must be renderedimages
: list(dict) configuration of each one of the image that compose the icon.url
: svg urlcolor
dx
: X axis positiondy
: Y axis positiondw
: widthdh
: 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