Removing outdoor map labelling

Mappedin SDK for React Native
1

Hi there,

I am wondering how I can remove the names from the outdoor map’s layer?

I have been accessing the map layers to remove roads and pathways from our sdk. However, I am wondering how I can remove the names attached to these roads?

This is what I have been doing to remove the layers and styles:

const maplibreMap = mapView.Outdoor.map;
maplibreMap.setLayoutProperty(“road_secondary_tertiary”, “visibility”, “none”);

Thank you for your help!

image
image1432×499 102 KB

2

Here’s some example code that’ll remove those labels and others should you want to.

/**
 * Returns all symbol layer IDs from the outdoor map style, optionally
 * filtered by patterns that appear in the layer ID or source-layer.
 */
function getSymbolLayerIds(patterns?: string[]): string[] {
	const style = outdoorMap!.getStyle();
	const layers = style?.layers || [];
	const ids: string[] = [];

	for (const layer of layers) {
		if (layer.type !== 'symbol') continue;

		if (!patterns) {
			ids.push(layer.id);
			continue;
		}

		const srcLayer = (layer as any)['source-layer'] || '';
		for (const p of patterns) {
			if (layer.id.includes(p) || srcLayer.includes(p)) {
				ids.push(layer.id);
				break;
			}
		}
	}

	return ids;
}

/**
 * Sets visibility on a list of layers.
 */
function setLayersVisibility(layerIds: string[], visible: boolean) {
	for (const id of layerIds) {
		try {
			outdoorMap!.setLayoutProperty(id, 'visibility', visible ? 'visible' : 'none');
		} catch {
			// Layer may not exist in the current style
		}
	}
}

// Hide Road Labels Only
const roadSymbolIds = getSymbolLayerIds(['highway', 'road', 'transportation_name']);
setLayersVisibility(roadSymbolIds, false);

// Or Hide All Outdoor Labels
const allSymbolIds = getSymbolLayerIds();
setLayersVisibility(allSymbolIds, false);
3

Thank you Mark! That worked

4

Excellent, glad to hear it! :grinning_face: