Vexcel Map API InfoBox fixed

To learn how to show info box

Mode Controls

index.html

        
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://app.vexcelgroup.com/map/v2/public/css/styles.css" type="text/css"/>
    <style>
        .map {
           height: 800px;
           overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="map" class="map"></div>
    <div>
        <h4>Mode Controls</h4>
        <button onclick="changeMode('2D')">2d</button>
        <button onclick="changeMode('3D')">3d</button>
    </div>

    <script type="text/javascript" src="https://app.vexcelgroup.com/map/v2/public/Vexcel.js"></script>
    <script type="text/javascript" src="main.js"></script>
</body>
</html>

main.js

        
const API_KEY = "YOUR_KEY";
const core = new Vexcel.Map({
  target: "map",
  token: API_KEY,
  zoom: 19,
  center: [-97.5146484375, 35.48751102385376],
  initialConfig: {
    callback: () => {
      const infobox = new Vexcel.InfoBox.InfoBox({
        location: new Vexcel.Geometry.Location(
          35.48751102385376,
          -97.5146484375
        ),
        content: "This is a InfoBox in Oklahoma City",
      });

      core.addInfoBox(infobox);
    },
  },
});

function changeMode(mode) {
  core
    .getImageryLayer()
    .changeMode(mode)
    .then((response) => {
      console.log(response.msg);
      if (response.layer) {
        console.log(
          `Change to mode ${mode} for layer ${response.layer.getName()}`
        );
      }
    })
    .catch((error) => {
      console.log(error);
      alert(error);
    });
}