Your complete platform for indoor mapping

import { getMapData, show3dMap } from "@mappedin/mappedin-js";
import "@mappedin/mappedin-js/lib/index.css";
import {  getMap } from "./util";
import "./styles.css"

const MAP_ID = "65c12d9b30b94e3fabd5bb91";

async function init() {
  const mapData = await getMap(MAP_ID);

  //Display the default map in the mappedin-map div.
  const mapView = await show3dMap(
    document.getElementById("mappedin-map") as HTMLDivElement,
    mapData
  );

  Array.from(el.children).forEach((element) => {
    element.addEventListener("click", () => {
      const transform: {
        pitch?: number;
        bearing?: number;
        zoomLevel?: number;
      } = {};
      switch (element.getAttribute("id")) {
        case "pitch-up":
          transform.pitch = mapView.Camera.pitch + 10;
          break;
        case "pitch-down":
          transform.pitch = mapView.Camera.pitch - 10;
          break;
        case "bearing-left":
          transform.bearing = (mapView.Camera.bearing - 45) % 360;
          break;
        case "bearing-right":
          transform.bearing = (mapView.Camera.bearing + 45) % 360;
          break;
        case "zoom-in":
          transform.zoomLevel = mapView.Camera.zoomLevel + 0.5;
          break;
        case "zoom-out":
          transform.zoomLevel = mapView.Camera.zoomLevel - 0.5;
          break;
      }
      mapView.Camera.animateTo(transform);
    });
  });
}

const html = `
  <button id="pitch-up">Pitch Up</button>
  <button id="pitch-down">Pitch Down</button>
  <button id="bearing-left">Bearing Left</button>
  <button id="bearing-right">Bearing Right</button>
  <button id="zoom-in">Zoom In</button>
  <button id="zoom-out">Zoom Out</button>
`;

const el = document.createElement("div");
Object.assign(el.style, {
  position: "fixed",
  top: "0",
  left: "0",
  zIndex: "1000",
});
el.innerHTML = html;
document.body.appendChild(el);

init();

import { getMapData, show3dMap } from "@mappedin/mappedin-js";
import "@mappedin/mappedin-js/lib/index.css";
import {  getMap } from "./util";
import "./styles.css"

const MAP_ID = "64ef49e662fd90fe020bee61";

async function init() {
  const mapData = await getMap(MAP_ID);

  //Display the default map in the mappedin-map div.
  const mapView = await show3dMap(
    document.getElementById("mappedin-map") as HTMLDivElement,
    mapData
  );

  // Get a departure and arrival space.
  const depart = mapData
    .getByType("space")
    .find((space) => space.name === "Focus 103")!;
  const arrive = mapData
    .getByType("space")
    .find((space) => space.name === "Office 210")!;

  // Get directions between the two spaces.
  const directions = mapView.getDirections(depart, arrive)!;

  // Draw the directions on the map.
  mapView.Navigation.draw(directions);
}

init();

import { MapView, getMapData, show3dMap } from "@mappedin/mappedin-js";
import "@mappedin/mappedin-js/lib/index.css";
import { mapStyles, addStyles, getMap } from "./util";
import "./styles.css";

const MAP_ID = "66686f1af06f04000b18b8fa";

async function init() {
  const mapData = await getMap(MAP_ID);

  const mapView = await show3dMap(
    document.getElementById("mappedin-map") as HTMLDivElement,
    mapData
  );

  const styleSelector = document.getElementById(
    "style-selector"
  ) as HTMLSelectElement;

  const changeIndoorStyle = document.getElementById(
    "indoor-style-checkbox"
  ) as HTMLInputElement;

  addStyles(styleSelector);

  // Act on the style-selector change the outdoor style.
  styleSelector.addEventListener("change", async (e) => {
    const styleIndex = Number((e.target as HTMLSelectElement)?.value);
    if (changeIndoorStyle.checked) {
      //Indoor styles are tied to the Map View, which requires
      //reloading the MapView and picking a new View and
      //outdoor style.
      const options = {
        key: "mik_yeBk0Vf0nNJtpesfu560e07e5",
        secret: "mis_2g9ST8ZcSFb5R9fPnsvYhrX3RyRwPtDGbMGweCYKEq385431022",
        mapId: MAP_ID,
        viewId: mapStyles[styleIndex].indoorViewId,
      };

      const mapData = await getMapData(options);
      //Destroy the existing MapView.
      mapView.destroy();

      mapView = await show3dMap(
        document.getElementById("mappedin-map") as HTMLDivElement,
        mapData,
        {
          outdoorView: {
            style: mapStyles[styleIndex].url,
          },
        }
      );
    } else {
      //Change only the outdoor style. The outdoor style
      //can be changed without reloading the map.
      mapView.Outdoor.setStyle(mapStyles[styleIndex].url);
    }
  });
}

init();