Marker

Marker Component

Props

Prop	Type	Description
options	object	Marker Parameters
popup	object	Popup Parameters
lngLat*	LngLatLike	Marker Location
showPopup	boolean	Is Popup showing
children	HTML Element | String	Popup Content
onOpen	function	Called when Popup opens
onClose	function	Called when Popup closes
onDragStart	function	Called when Marker drag starts
onDragEnd	function	Called when Marker finshed dragging
onDrag	function	LngLatLike position when Marker is dragged

*required

Example

import { Component, createSignal } from "solid-js";
import MapGL, { Viewport, Marker } from "solid-map-gl";
import 'mapbox-gl/dist/mapbox-gl.css';

const App: Component = () => {
  const [viewport, setViewport] = createSignal({
    center: [0, 52],
    zoom: 6,
  } as Viewport);

  return (
    <MapGL
      options={{ style: 'mb:dark' }}
      viewport={viewport()}
      onViewportChange={(evt: Viewport) => setViewport(evt)}
    >
      <Marker lngLat={[0, 52]} options={{ color: '#F00' }}>
        Hi there! 👋
      </Marker>
    </MapGL>
  );
};