Your complete platform for indoor mapping

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

async function init() {
  // See Trial API key Terms and Conditions
  // https://developer.mappedin.com/v6/demo-keys-and-maps/
  const mapData = await getMapData({
    key: "mik_yeBk0Vf0nNJtpesfu560e07e5",
    secret: "mis_2g9ST8ZcSFb5R9fPnsvYhrX3RyRwPtDGbMGweCYKEq385431022",
    mapId: "65c12d9b30b94e3fabd5bb91",
  });

  //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 "./styles.css"

async function init() {
  // See Trial API key Terms and Conditions
  // https://developer.mappedin.com/v6/demo-keys-and-maps/
  const mapData = await getMapData({
    key: "mik_yeBk0Vf0nNJtpesfu560e07e5",
    secret: "mis_2g9ST8ZcSFb5R9fPnsvYhrX3RyRwPtDGbMGweCYKEq385431022",
    mapId: "64ef49e662fd90fe020bee61",
  });

  //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 { getMapData, MapView, show3dMap } from "@mappedin/mappedin-js";
import "@mappedin/mappedin-js/lib/index.css";
import "./styles.css";

// See Trial API key Terms and Conditions
// https://developer.mappedin.com/v6/demo-keys-and-maps/
const KEY = "mik_yeBk0Vf0nNJtpesfu560e07e5";
const SECRET =
  "mis_2g9ST8ZcSFb5R9fPnsvYhrX3RyRwPtDGbMGweCYKEq385431022";
const MAP_ID = "66686f1af06f04000b18b8fa";

let mapView: MapView;

// Map Style names and URLs
const mapStyles = [
  {
    name: "Default",
    url: "https://tiles-cdn.mappedin.com/styles/mappedin/style.json",
    indoorViewId: "initial",
  },
  {
    name: "Honeycrisp",
    url: "https://tiles-cdn.mappedin.com/styles/honeycrisp/style.json",
    indoorViewId: "OQMo",
  },
  {
    name: "Fresh Mint",
    url: "https://tiles-cdn.mappedin.com/styles/freshmint/style.json",
    indoorViewId: "mvpo",
  },
  {
    name: "Night Blue",
    url: "https://tiles-cdn.mappedin.com/styles/midnightblue/style.json",
    indoorViewId: "jFiu",
  },
  {
    name: "Starlight",
    url: "https://tiles-cdn.mappedin.com/styles/starlight/style.json ",
    indoorViewId: "-x99",
  },
];

async function init() {
  const options = {
    key: KEY,
    secret: SECRET,
    mapId: MAP_ID,
  };

  const mapData = await getMapData(options);
  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;

  mapStyles.forEach((mapView, index) => {
    const option = document.createElement("option");
    option.text = mapView.name;
    option.value = index.toString();
    styleSelector.appendChild(option);
  });

  // 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: KEY,
        secret: SECRET,
        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();