Marker

Click the marker to change its color.

Example

Pigeon | © OpenStreetMap contributors

Code

import React, { useState } from "react"

import { Map, Marker } from "pigeon-maps"

export function MyMap() {

const [hue, setHue] = useState(0)

const color = `hsl(${hue % 360}deg 39% 70%)`

return (

<Map height={300} defaultCenter={[50.879, 4.6997]} defaultZoom={11}>

<Marker

width={50}

anchor={[50.879, 4.6997]}

color={color}

onClick={() => setHue(hue + 20)}

/>

</Map>

)

}

Options

anchor

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

width and height

Size of the marker. Any of the two can be omitted.

payload

Random payload that will be returned on events.

hover

Should we show the "hover" state of the marker? Default: undefined

Events

onClick

({ event: HTMLMouseEvent, anchor: Point, payload: any }) => void

onContextMenu

({ event: HTMLMouseEvent, anchor: Point, payload: any }) => void

onMouseOver

({ event: HTMLMouseEvent, anchor: Point, payload: any }) => void

onMouseOut

({ event: HTMLMouseEvent, anchor: Point, payload: any }) => void