Summary

This guide provides step-by-step instructions on how to create, remove, and customise markers in your MazeMap JavaScript API project. It is intended to supplement the official MazeMap JS API documentation.

1 Summary
2 Skill Level
3 Prerequisites
4 Creating Markers
- 4.1 Adding a Marker
5 Removing Markers
- 5.1 Removing a Marker
- 5.2 Removing Multiple Markers
6 Customizing Markers with Mapbox JS API
- 6.1 Example: Mouse Over Popup
- 6.2 Example: Mouse Over Color Change
- 6.3 Conclusion

This example is intended to supplement the official MazeMap JS API documentation. For comprehensive details and further guidance, please refer to the MazeMap JS API documentation available at MazeMap JS API Docs.

Skill Level

Intermediate / JavaScript (JS) Programming

Basic to intermediate understanding of JavaScript and web development concepts.
Familiarity with handling events and manipulating objects in JavaScript.

Prerequisites

Before you begin, ensure the following:

Confirm that all relevant scripts are included in your HTML or JavaScript files.
MazeMap API and map is fully loaded into your project by using the Map load function.
You have a variable referencing the loaded map. This variable is typically initialised when you create the map instance.

Creating Markers

Adding a Marker

To add a marker, you need the location LngLat coordinates. If adding an 'indoor' marker, you also need to know the indoor floor 'z level'. In this example, we use the map center as our marker coordinates.

var lngLat = map.getCenter(); 

var marker = new Mazemap.MazeMarker({ 
  zLevel: 1 // The floor zLevel coordinate 
}) 

.setLngLat(lngLat) // Set the LngLat coordinates 
.addTo(map); // Add to the map

Removing Markers

Removing a Marker

To remove a marker, simply use the remove() function.

marker.remove();

Removing Multiple Markers

If you have added multiple markers and want to clear all of them on your map, you can loop over all markers and delete them one by one.

if (currentMarkers !== null) { 
  for (var i = currentMarkers.length - 1; i >= 0; i--) { 
    currentMarkers[i].remove(); 
  } 
}

Here, currentMarkers is a global variable containing all markers.

Customizing Markers with Mapbox JS API

For advanced marker customisation, you can reference the Mapbox JS API documentation.

Customise marker styles, colors, and behaviour using Mapbox's extensive styling options.

Example: Mouse Over Popup

Add a popup that appears when hovering over a marker.

Example: Mouse Over Color Change

Change the marker color when hovering over it.

Conclusion

Handling markers in your MazeMap using the JavaScript API allows for greater control over map customisation and can enhance user interaction. Follow this guide to effectively manage markers in your MazeMap applications.