Marker

The marker component is a child of the overlay layer. It provides a div with the top left corner at the provided coordinate, and takes a render function for a component.

Properties

• coordinate: The latitude and longitude of the top left corner,
• render: The render function. The props of the render function contain the screen coordinate of the top left of the div.

JS

import { Map, Marker, OverlayLayer, SVGPin } from '@jetblack/map'

export default function App() {
  const GREENWICH_OBSERVATORY = {
    latitude: 51.47684676353231,
    longitude: -0.0005261695762532147,
  }

  const BUCKINGHAM_PALACE = {
    latitude: 51.501200111998415,
    longitude: -0.14182556179982908,
  }

  return (
    <Map
      width='600px'
      height='400px'
      center={BUCKINGHAM_PALACE}
      zoom={11}
    >
      <OverlayLayer>
        <Marker
          coordinate={GREENWICH_OBSERVATORY}
          render={point => <SVGPin point={point} />}
        />
        <Marker
          coordinate={BUCKINGHAM_PALACE}
          render={point => <SVGPin point={point} size={1.25} />}
        />
      </OverlayLayer>
    </Map>
  )
}

TS

import { Coordinate, Map, Marker, OverlayLayer, SVGPin } from '@jetblack/map'

export default function App() {
  const GREENWICH_OBSERVATORY: Coordinate = {
    latitude: 51.47684676353231,
    longitude: -0.0005261695762532147,
  }

  const BUCKINGHAM_PALACE: Coordinate = {
    latitude: 51.501200111998415,
    longitude: -0.14182556179982908,
  }

  return (
    <Map
      width='600px'
      height='400px'
      center={BUCKINGHAM_PALACE}
      zoom={11}
    >
      <OverlayLayer>
        <Marker
          coordinate={GREENWICH_OBSERVATORY}
          render={point => <SVGPin point={point} />}
        />
        <Marker
          coordinate={BUCKINGHAM_PALACE}
          render={point => <SVGPin point={point} size={1.25} />}
        />
      </OverlayLayer>
    </Map>
  )
}