description |
---|
Marker Component |
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
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>
);
};