Summary

This supplemental guide will provide step-by-step instructions on how to remove specific layers from your MazeMap JavaScript API Map project. This can be particularly useful for customising the appearance of your maps or simplifying the display by hiding un-needed elements.

This support document 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.

1 Summary
2 Skill Level
3 Prerequisites
4 Layers to Remove
5 Step-by-Step Guide to Remove Specific Layers
6 Troubleshooting
7 Conclusion
8 Basic full code example.

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, please 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.
map.on('load', function(){ // Code goes here }
You have a variable referencing the loaded map. This variable is typically initialised when you create the map instance.

Layers to Remove

Below is a list of layers that you can remove from your MazeMap, along with a description of what each layer represents and what is removed from the map when the layer is removed:

“mm-campus-label”: Removes the campus labels for all campuses rendered. These labels typically include the name or designation of the campus area.
mm-campus-dot: Removes the orange dot that marks the campus location. This is usually a central point of the campus.
“mm-building-label”: Removes all building labels for all buildings displayed. This includes names or numbers associated with individual buildings.
“mm-poi-label”: Removes POI (Point of Interest) labels. These labels are used to mark locations such as rooms, libraries, administrative offices, etc.

Step-by-Step Guide to Remove Specific Layers

Step 1: Initialise Your Map

Ensure your map is initialised and assigned to a variable. This is crucial as you'll use this variable to interact with the map layers.

For the example the variable for the loaded map is named “map”.

var map = new MazeMap.Map({
  container: 'map', // container id 
  campusId: 12345, // your campus ID 
  center: { lat: 12.123, lng: 12.123 }, // coordinates of the map's initial center 
  zoom: 16 // initial zoom level 
});

Step 2: Confirm Map Load and Remove Layers

You'll need to wait until the map is fully loaded before attempting to modify layers. You can do this by listening to the 'load' event on your map instance.

map.on('load', function() {
    // List the layer IDs you need to remove
    var layersToRemove = [
        'mm-campus-label',
        'mm-building-label',
        'mm-poi-label',
        'mm-campus-dot'
    ];

    // Loop through the layers and remove each
    layersToRemove.forEach(function(layerId) {
        if (map.getLayer(layerId)) {
            map.removeLayer(layerId);
            console.log('Removed layer:', layerId);
        } else {
            console.error('Layer not found:', layerId);
        }
    });
});

Step 3: Verify Layer Removal

After executing your code, verify in the MazeMap interface that the layers have been successfully removed. You can check this visually or by querying the map to confirm that the layers no longer exist.

Troubleshooting

Layer not found errors: Ensure that the layer IDs are correctly spelled and that they correspond to the current layers in your map style.
Script errors: Make sure all scripts are loaded properly and that there are no JavaScript errors in your console.
Map does not load: Confirm that your MazeMap API key is valid and that you have internet access.

Conclusion

Removing layers from your MazeMap using the JavaScript API allows for greater control over map customisation and can help in creating a more focused user experience. Follow this guide to manage layers effectively in your MazeMap applications.

Basic full code example.

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.

Initialisation: The map is created with the MazeMap.Map constructor. The container, campusId, center, and zoom are parameters that should be adjusted to suit your specific use case.
Event Listener: The map.on('load', ...) listener ensures that the map operations only begin once it is fully loaded, which is crucial for operations dependent on the map's elements.
Layer Removal: layersToRemove contains the IDs of the layers you intend to remove. The forEach loop iterates over each ID, checks if it exists, and removes it if found.

MazeMap Customer Self Help

How to Remove MazeMap Layers for JS API Maps