Skip to main content

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)} 
      />
      <Marker 
        width={50}
        anchor={[50.879, 4.6997]} 
        color={color} 
        onClick={() => setHue(hue + 20)} 
      >
          <CustomIcon />
      </Marker>
    </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

children​

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