Marker

[ioterateam]

How to change icon marker? and how to show tooltip if marker onClick?

[mariusandra]

Hi, the point is that you make your own. Here's an example for putting any DIV on a map... and for making a specialised marker div:

const DivMarker = ({ left, top, style, children }) => (
  <div style={{
    position: 'absolute',
    left: left,
    top: top,
    ...(style || {})
  }}>{children}</div>
)

const YellowMarker = ({ left, top, style, children }) => (
  <div style={{
    position: 'absolute',
    left: left - 15,
    top: top - 30,
    width: 30,
    height: 30,
    borderBottomLeftRadius: '100%',
    borderBottomRightRadius: '100%',
    background: 'yellow',
    ...(style || {})
  }}>{children}</div>
)

render(
  <Map ...>
    <DivMarker
      anchor={[50.879, 4.6997]}
      offset={[15, 30]}
      style={{
        width: 30,
        height: 30,
        background: 'red',
        borderBottomLeftRadius: '100%',
        borderBottomRightRadius: '100%'
      }}>
      o
    </DivMarker>

    <YellowMarker anchor={[50.874, 4.6947]}>
      o
    </YellowMarker>
  </Map>
)

As for tooltips and info windows - you render them like you would render markers, just point the other way.

[alicerocheman]

Hello @mariusandra

Thank you for the examples, however I'm working with Typescript and I get an error when I use your example:

<DivMarker anchor={center}>Hello World!</DivMarker>

error: Property 'anchor' does not exist on type 'IntrinsicAttributes & { left: any; top: any; style: any; children: any; }'

I thought to use the MarkerProps interface but it's not exported and it doesn't have the top, left etc. props anyway. :/

Any idea how to type the DivMarker?