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