Mappedin MapLibre Overlay

Mappedin Web SDK 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 utilze 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
// https://developer.mappedin.com/v6/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;
  }
});

Mappedin MapLibre Overlay

Example

Sign up for developer updates

For more information