Skip to main content

Overlay

Anchor random react components to the map

Example​

Pigeon | © OpenStreetMap contributors

Code​

import { Map, Overlay } from 'pigeon-maps'

export function MyMap() {
  return (
    <Map height={300} defaultCenter={[50.879, 4.6997]} defaultZoom={11}>  
      <Overlay anchor={[50.879, 4.6997]} offset={[120, 79]}>
        <img src='/img/pigeon.jpg' width={240} height={158} alt='' />
      </Overlay>
    </Map>
  )
}

Options​

anchor​

At which coordinates [lat, lng] to anchor the overlay with the map.

offset​

Offset in pixels [x, y] relative to the anchor.

Attribution​

Pigeon image by Robert Claypool