Lines and Polygons

Use polylines and polygons to draw your own geometry on a MapVXMap: a walked path, the link between two points, a geofence, a zone of a floor. They work like circles: the SDK keeps them on the right floor, above the indoor floor plates, and redraws them after every style or floor change — none of which a layer added to MapVXMap.map directly would get.

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,
})

Draw a polyline

A polyline needs at least two positions. Styling is optional:

const path: LatLng[] = [
  { lat: -33.4177, lng: -70.6066 },
  { lat: -33.4179, lng: -70.6063 },
  { lat: -33.4181, lng: -70.6061 },
]
 
const pathId = map.addPolyline({
  id: "walked-path",
  coordinates: path,
  floorId: "level-1",
  color: "#f0883e",
  width: 4,
})
 
// A dashed line, e.g. from an estimate to its ground truth
map.addPolyline({
  coordinates: [path[0], path[2]],
  floorId: "level-1",
  dashed: true,
})

Draw a polygon

A polygon needs at least three positions. The ring is closed for you, and holes cuts areas out of it:

const zoneId = map.addPolygon({
  id: "promo-zone",
  coordinates: [
    { lat: -33.4175, lng: -70.6068 },
    { lat: -33.4175, lng: -70.6062 },
    { lat: -33.418, lng: -70.6062 },
    { lat: -33.418, lng: -70.6068 },
  ],
  floorId: "level-1",
  fillColor: "#2e7d32",
  fillOpacity: 0.2,
  strokeColor: "#2e7d32",
})

Without styling, polygons use the same MapVX blue as circles, so a polygon geofence and a circle geofence look alike.

Floors

A shape with a floorId is shown only while that floor is displayed; a shape without one is shown while no floor is displayed, and in outdoor contexts. Markers, circles and shapes all answer this through one predicate, so it is literally the same rule for all three. Set allFloors: true for geometry that belongs to no single floor:

map.addPolyline({ coordinates: path, allFloors: true, color: "#e53935" })

Update, hide and remove

updatePolyline / updatePolygon replace a shape by id and keep it hidden if it was.

They replace the whole configuration, so anything you leave out goes back to its default — pass the styling and the floorId again, or the line reverts to the brand colour and, with no floor, stops being drawn on the one it belonged to:

map.updatePolyline({
  id: pathId,
  coordinates: [...path, { lat: -33.4183, lng: -70.6059 }],
  floorId: "level-1",
  color: "#f0883e",
  width: 4,
})
 
map.hideShape(zoneId) // stays hidden across floor changes
map.showShape(zoneId)
 
map.removeShape(pathId)
map.removeAllShapes()

getShape(id) and getShapes() return copies of what is on the map, with the defaults applied.

Layer order

renderOrder places shapes like circles: "aboveBasemap" (default) above the floor plates and below their labels, "belowLabels" under the first label layer, "top" above everything. Within one placement, circles are drawn below polygons, and polygons below lines.

Validate input

To check data from users or an API before drawing it, use the type guards:

import { isValidPolygonConfig } from "@mapvx/web-js"
 
if (isValidPolygonConfig(input)) map.addPolygon(input)