@asicupv/markerpp

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