Popup

Popup Component

Props

Name	Type	Description
options	object	Popup Parameters
lngLat*	LngLatLike	Popup Location (required if trackPointer is false)
trackPointer	boolean	Track Popup to mouse cursor
children	HTML Element | String	Popup Content
onOpen	function	Called when popup opens
onClose	function	Called when popup closes

*required

Example

import { Component, createSignal } from "solid-js";
import MapGL, { Viewport, Popup } 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)}
    >
      <Popup lngLat={[0, 52]} options={{ closeButton: false }}>
        Hi there! 👋
      </Popup>
    </MapGL>
  );
};