Layers

Layers class is currently an experimental component of Mappedin JS. While in this state, some features may not behave as intended and APIs may be changed. Experimental features are being tested together with early adopters to fine-tune them.

Maps are made up of multiple layers that combine show a complete map. The layers of a map will vary from map to another. They may include elements such as walls, floors, rooms, furniture, kiosks and any other group of elements that are visually represented on the map.

The Layers class provides control over which layers are visible. By default, MapView draws all layers but there are use cases where this is not desired. For example a building could be drawn without rooms or rooms drawn without furniture to show the entire open space.

Before choosing the layers to draw, an app should query to get a list of layers on the map. The Layers.getAllLayersForMap function accepts a map and returns an array of all layers of a map.

const layersOnMap = await mapView.Layers.getAllLayersForMap(venue.maps[0]);

Once the user or app has filtered the array to include the desired layers to draw, it can be passed to Layers.showLayers. showLayers accepts a string array of layer names to be drawn. Calling showLayers triggers map rendering, showing only the requested layers.

The following Codesandbox demonstrates use of the Layers class. All layers of the map are read and shown as a list of checkboxes. Unchecking a box renders the map without that layer.

Interpolating Layer Opacity

Map layers can be grouped during initial load to configure layer opacities at certain Mercator zoom levels. This enables map geometry to fade in and out as the user zooms in toward the building.

To enable zoom-based opacity, layer groups must be defined within the TMapViewOptions of the showVenue() function. layerGroups takes an array of objects, each with their associated map layers and opacity interpolations.

Opacity values are clamped between 0 and 1, while zoom levels are clamped between 0 and 22.

const mapView = await showVenue(document.getElementById('mappedin-map')!, venue, {
	layerGroups: [
		{
			// Method 1, clear & verbose
			layers: ['Polygon'],
			opacityInterpolation: [
				{
					zoomLevel: 18,
					opacity: 1,
				},
				{
					zoomLevel: 18.5,
					opacity: 0,
				},
			],
		},
		{
			// Method 2, shorthand
			layers: ['Shelves'],
			opacityInterpolation: {
				inputZoomLevel: [18.4, 18.6],
				outputOpacity: [0, 1],
			},
		},
	],
});

There are two ways to write opacity interpolations, as seen above. The first method is clear but more verbose. In this method, an array of objects with zoomLevel and the desired opacity is provided, where zoomLevel represents the Mercator zoom level at which the opacity should be achieved. Think of each object as a keyframe in the interpolation.

{
	layers: ['Polygon'],
	opacityInterpolation: [
		{
			zoomLevel: 18,
			opacity: 1,
		},
		{
			zoomLevel: 18.5,
			opacity: 0,
		},
	],
},

The second method is shorthand and useful when there are many keyframes. There are two array properties, inputZoomLevel and outputOpacity. These arrays must have the same length as each index of inputZoomLevel will match with an index of outputOpacity.

{
  layers: ['Shelves'],
    opacityInterpolation: {
      inputZoomLevel: [18.4, 18.6],
        outputOpacity: [0, 1],
    },
},

Once these values are set, they cannot be changed unless the page is reloaded and showVenue() is called again with updated layerGroups.

The following CodeSandbox demonstrates zoom based layer opacity.