Mappedin MapLibre Overlay

Mappedin JS version 6 is currently in a beta state while Mappedin perfects new features and APIs. Open the v6 release notes to view the latest changes.

Using Mappedin JS with your own map requires a Pro license. Try a demo map for free or refer to the Pricing page for more information.

Mappedin JS makes use of MapLibre to render the outdoor portion of the map. The SDK exposes this layer through MapView.OutoorMap and can be used to add additional layers as described in the Outdoor Map Guide.

It is also possible to utilize the opposite architecture, by adding a MapView to a MapLibre Map. This is accomplished by using the MappedinMapLibreOverlay class. It allows a developer to easily add a Mappedin indoor map to an existing MapLibre based app.

Example

The following example demonstrates the use of MappedinMapLibreOverlay. A MapLibre Map is created, using the indoor map's center point as it's initial position. Once the MapLibre map is loaded, a MappedinMapLibreOverlay is added using the MapLibre addControl method.

When the map is clicked, the current MappedinMapLibreOverlay is removed and a new one added to show an indoor map of a different building. The map is then moved to the center point of the new indoor map.

// See Trial API key Terms and Conditions
// /docs/demo-keys-and-maps
const KEY = 'mik_yeBk0Vf0nNJtpesfu560e07e5';
const SECRET = 'mis_2g9ST8ZcSFb5R9fPnsvYhrX3RyRwPtDGbMGweCYKEq385431022';

// Get MapData for 2 maps.
const maps = await Promise.all([
	await getMapData({
		key: KEY,
		secret: SECRET,
		mapId: '660c0c3aae0596d87766f2da',
	}),
	await getMapData({
		key: KEY,
		secret: SECRET,
		mapId: '660c0c6e7c0c4fe5b4cc484c',
	}),
]);

let currentOverlay: MappedinMapLibreOverlay;

// Instantiate a MapLibreMap and center it on the first indoor map's center point.
// Use Mappedin's default outdoor style.
const map = new MapLibreMap({
	container: 'mappedin-map',
	style: 'https://tiles-cdn.mappedin.com/styles/mappedin/style.json',
	center: [maps[0].mapCenter.longitude, maps[0].mapCenter.latitude],
	zoom: 18,
	transformRequest: (url: string) => {
		return {
			url: url,
			headers: {
				'x-mappedin-tiles-key': maps[0].outdoorViewToken,
			},
		};
	},
});

// Once the MapLibreMap is loaded, add a MappedinMapLibreOverlay to display
// the indoor map.
map.on('load', () => {
	currentOverlay = createMapLibreOverlay(maps[0]);
	map.addControl(currentOverlay);
	currentOverlay.on('loaded', async ({ mapView }: { mapView: MapView }) => {
		mapView.auto();
		map.flyTo({
			center: [maps[0].mapCenter.longitude, maps[0].mapCenter.latitude],
			curve: 1.42,
		});
	});
});

let i = 1;

// When the map is clicked, fly to the other indoor map's center point
// and display it.
map.on('click', async () => {
	const mapData = maps[i];

	// Remove the existing MappedinMapLibreOverlay.
	if (currentOverlay) {
		map.removeControl(currentOverlay);
	}

	currentOverlay = createMapLibreOverlay(mapData);

	// Add the other indoor map.
	map.addControl(currentOverlay);
	currentOverlay.on('loaded', async ({ mapView }: { mapView: MapView }) => {
		mapView.auto();
		map.flyTo({
			center: [mapData.mapCenter.longitude, mapData.mapCenter.latitude],
			curve: 1.42,
		});
	});

	i++;
	if (i >= maps.length) {
		i = 0;
	}
});