Interactive Markers

Use these MarkerConfig options when a marker is something the user works with rather than only looks at: a point they place by dragging, a marker that explains itself in a popup, or a position that belongs to no single floor. They all stay inside the SDK’s marker handling, so floor changes, automatic label layout and removeAllMarkers keep working as they do for any other marker.

Setup

import { initializeSDK, type LatLng, type MapVXMap } from "@mapvx/web-js"
 
const sdk = initializeSDK("<YOUR_API_KEY>")
const map: MapVXMap = sdk.createMap(document.getElementById("map") as HTMLElement, {
  center: { lat: -33.4177, lng: -70.6066 },
  zoom: 19,
})

Draggable markers

Set draggable: true and listen for the drop. The marker’s own coordinate follows it while it moves, and label collision avoidance re-runs so the labels around it get out of the way.

const pinId = map.addMarker({
  coordinate: { lat: -33.4177, lng: -70.6066 },
  floorId: "level-1",
  text: "Drag me",
  draggable: true,
  onDragEnd: (position: LatLng) => {
    console.log("Dropped at", position.lat, position.lng)
  },
})
 
// Lock it in place later
map.updateMarker({ id: pinId, coordinate: { lat: -33.4177, lng: -70.6066 }, draggable: false })

onDragStart and onDrag receive the position too, for live feedback while the marker moves.

Popups

Pass popup to open a small bubble when the marker is clicked (a second click, or a click elsewhere on the map, closes it). A string is shown as plain text — it is never parsed as HTML, so data from users or an API can go in as is.

map.addMarker({
  coordinate: { lat: -33.4179, lng: -70.6064 },
  floorId: "level-1",
  popup: "Meeting point: north entrance",
})

For rich content pass an element, or a MarkerPopupConfig for options:

const content = document.createElement("div")
content.textContent = "Opens at 10:00"
 
const id = map.addMarker({
  coordinate: { lat: -33.4181, lng: -70.6062 },
  floorId: "level-2",
  popup: { content, closeButton: true, maxWidth: "280px", open: true },
})
 
map.closeMarkerPopup(id)
map.openMarkerPopup(id) // returns false while the marker's floor is not displayed

A popup closes with its marker when the marker’s floor is hidden. With open: true it opens again whenever the marker is shown, and a click elsewhere on the map leaves it open. Popups carry the mapvx-popup class, so they can be themed:

.mapvx-popup .maplibregl-popup-content {
  background: #102a43;
  color: #fff;
}

Markers on every floor

A marker with a floorId is shown only while that floor is displayed. Set allFloors: true for a position that belongs to no single floor — a raw GPS fix, an entrance shared by all levels, or a point being edited while the user browses floors:

map.addMarker({
  id: "gps-fix",
  coordinate: { lat: -33.4175, lng: -70.6068 },
  allFloors: true,
  color: "#e53935",
})

floorId and allFloors can both be changed with updateMarker; the marker is shown or hidden for the displayed floor right away. A marker you took off the map with hideMarker stays hidden through all of this — only showMarker brings it back.

Colored default icon

Without icon or element the SDK draws a round dot. color recolors it, in any CSS color format:

map.addMarker({ coordinate: { lat: -33.4176, lng: -70.6067 }, color: "#2e7d32" })