Add a marker

This example is centered in building and showing a basic marker on a MapVXMap that already exists.

Setting up a map

After you follow the instructions to create a map. You should have a MapVXMap reference:

import { MapVXSDK, MapConfig } from "@mapvx/web-js";
const map: MapVXMap = sdk.createMap(mapContainer, mapConfig);

Adding marker configurations

To create a marker on the map, first we will use the MarkerConfig model to determine the customization of the marker. In the following example, we want to create a MarkerConfig object in order to create a new marker for the map. To build it, you need at least the coordinate argument:

• coordinate: This specify where the marker would be placed in the map based on a LatLng object.

Here’s an example on how can you use the different available arguments to build a useful marker:

const latLng: LatLng = {
  lat: -33.418835,
  lng: -70.642388,
}
 
const marker: MarkerConfig = {
  coordinate: latLng,
  text: "City Center Doha Mall", // Text to placed on marker
  icon: "",
  textPosition: TextPosition.bottom, // Position where text is placed
  iconColor: "red",
  borderColor: "blue",
}

Adding the marker to the map

The addMarker function of the MapVXMap returns the ID of the integrated marker. This ID allows us to interact with the marker, such as removing it or updating its properties, without affecting the map itself.

By keeping track of the marker IDs, we can manage the markers added to the map and perform actions on them as needed. Here’s how can you use this method:

const markerId = map.addMarker(marker) ?? ""

If everything goes correctly you should have a view like this one

Removing the marker

If you need to remove the marker from the map, just call the removeMarker function referencing the map where you created the marker, passing as parameter the marker identifier.

map?.removeMarker(markerId)

Updating a marker

Use updateMarker on MapVXMap to replace the configuration of an existing marker. The MarkerConfig you pass must include the id of the marker you want to update. The method returns the marker ID.

const updatedMarker: MarkerConfig = {
  id: markerId,
  coordinate: { lat: -33.418835, lng: -70.642388 },
  text: "Updated label",
  iconColor: "green",
  borderColor: "darkgreen",
}
 
const id = map.updateMarker(updatedMarker)

Updating a marker’s position

When you only need to move a marker without changing any other property, use updateMarkerPosition. This is more efficient than rebuilding the full configuration.

const newPosition: LatLng = { lat: -33.4195, lng: -70.6431 }
map.updateMarkerPosition(markerId, newPosition)

Hiding and showing a marker

You can temporarily hide a marker without removing it from the map. This is useful when a marker should be invisible in certain states but you still need to reference it later.

// Hide the marker
map.hideMarker(markerId)
 
// Show the marker again when needed
map.showMarker(markerId)

The marker ID remains valid after hiding, so you can pass it to showMarker at any point to make it visible again.

Removing all markers

To clear every marker currently displayed on the map in a single call, use removeAllMarkers.

map.removeAllMarkers()

This removes all markers at once and is equivalent to calling removeMarker for each ID individually. Use this when navigating away from a view or resetting the map state.