Return to Resources

Showcase Your Cruise Ship with Indoor Maps

Oct 25, 2022

2 min read

By: Jere Suikkila

In just a few minutes you can create a venue flyover animation with Mappedin SDK. This beautiful cruise ship demo can be done in under 80 lines of code.

mapView.on(E_SDK_EVENT.CLICK, (payload) => {
  console.log(payload.position);
})

Starting with the Mappedin basic map display, we change the map to “mappedin-demo-cruise”. We will need to find two points for our camera to animate from and to. E_SDK_EVENT.CLICK -event handler will give us the geocoordinates of our click. Let’s console.log out two interesting points on the map that works for all the levels and hardcode those into the demo.

mapView.on(E_SDK_EVENT.CLICK, (payload) => {
  console.log(payload.position);
})

Now we’re ready to implement our camera animation function with the hardcoded camera start and end positions. The last line will wait 2000 milliseconds at the end of each animation.

async function animateAroundLevel() {
  mapView.Camera.set({
    position: mapView.currentMap.createCoordinate(
      43.95529931162276,
      -78.1598632890289
    ),
    tilt: Math.PI - Math.PI / 2,
    rotation: Math.PI / 2,
    zoom: 500
  });

  await mapView.Camera.animate({
    positionOptions: {
      position: mapView.currentMap.createCoordinate(
        43.95512977283455,
        -78.16355845938045
      ),
      tilt: Math.PI - Math.PI / 2,
      rotation: -Math.PI / 2,
      zoom: 200
    },
    animationOptions: {
      duration: 10000
    }
  });

  await new Promise((x) => setTimeout(x, 2000));
}

The main loop of the demo will go in the init() -function and loops through the venue.maps array of levels in the venue.

for (let i = 0; i < venue.maps.length; i++) {
  await mapView.setMap(venue.maps[i]);
  await animateAroundLevel();
}

While the demo already looks great, we can add more detail to it by showing the names of the current and adjacent levels during the animation. Add the following styles and HTML elements to the index.html -file. The <div> goes under the map element.

<!-- In the head of the HTML -->

<style>      
#overlay {
        position: fixed;
        bottom: 2rem;
        left: 2rem;
        font-family: Arial;
        font-weight: bolder;
      }
      #level {
        font-size: 4rem;
      }
      #above,
      #below {
        font-size: 1rem;
        color: #6e6e6e;
      }
</style>

<!-- In the body of the HTML -->

<div id="overlay">
  <div id="above"></div>
  <div id="level"></div>
  <div id="below"></div>
</div>

With the HTML set up, let’s select the elements in our init() -function and then edit their content in our main loop. The content edits should happen after setting the new map but before the animation starts.

const levelNameText = document.getElementById("level") as HTMLElement;
const aboveNameText = document.getElementById("above") as HTMLElement;
const belowNameText = document.getElementById("below") as HTMLElement;

// ...

aboveNameText.textContent = venue.maps[i + 1]
  ? `↑ ${venue.maps[i + 1].name}`
  : "";
levelNameText.textContent = mapView.currentMap.name;
belowNameText.textContent = venue.maps[i - 1]
  ? `↓ ${venue.maps[i - 1].name}`
  : "";

Next time, we’ll extend this demo to create a flyover generator with a simple UI to setup the flyover attributes without console-logging coordinates. What will you build with it?

Showcase Your Cruise Ship with Indoor Maps

You may also like