Vexcel Map API InfoBox feature

To learn how to show info box to show features properties

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/v1/public/css/styles.css" type="text/css"/>
    <style>
        .map {
           height: 800px;
           overflow: hidden;
        }
        .feature-container {
           max-width: 300px;
        }
    </style>
</head>
<body>
    <div id="map" class="map"></div>

    <script type="text/javascript" src="https://app.vexcelgroup.com/map/v1/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,
  init: {
    callback: () => {
      const point = new Vexcel.Feature(
        new Vexcel.Geometry.Point(
          new Vexcel.Geometry.Location(33.34902669028525, -86.09930716682985)
        )
      );

      const line = new Vexcel.Feature(
        new Vexcel.Geometry.Line([
          new Vexcel.Geometry.Location(30.770159115784214, -86.6162109375),
          new Vexcel.Geometry.Location(31.914867503276223, -88.57177734375),
          new Vexcel.Geometry.Location(33.50475906922609, -87.2094726562),
        ])
      );

      const polygon = new Vexcel.Feature(
        new Vexcel.Geometry.Polygon([
          [
            new Vexcel.Geometry.Location(32.36140331527543, -84.44091796875),
            new Vexcel.Geometry.Location(32.36140331527543, -82.529296875),
            new Vexcel.Geometry.Location(33.87041555094183, -82.529296875),
            new Vexcel.Geometry.Location(33.87041555094183, -84.44091796875),
            new Vexcel.Geometry.Location(32.36140331527543, -84.44091796875),
          ],
        ])
      );
      const properties = {
        title: 'Title',
        address:  'address'
      }

      point.setProperties(properties);
      polygon.setProperties(properties);
      line.setProperties(properties);

      const geoJSONvectorLayer = new Vexcel.Layers.VectorLayer({
        features: [point, line, polygon],
      });

      core.getLayerManager().addLayer(geoJSONvectorLayer);
    },
  },
});

core.addListener(Vexcel.Events.MapEvents.FEATURES_CLICK, (e) => {
  if (e.features && e.features.length) {
    e.features.map((feat) => {
      const properties = feat.getProperties();
      let content = `<div class="feature-container"><ul>`;
      if (properties.title) {
        content += `<li><strong>${properties.title}</strong></li>`;
      }
      if (properties.address) {
        content += `<li>Address: ${properties.address}</li>`;
      }

      content += `</ul></div>`;
      let location = e.location;
      if (
        feat.getGeometry().getType() === "Polygon" ||
        feat.getGeometry().getType() === "LineString"
      ) {
        location = feat.getGeometry().getCenterLocation();
      } else if (feat.getGeometry().getType() === "Point") {
        location = feat.getGeometry().getLocation();
      }

      const infobox = new Vexcel.InfoBox.InfoBox({
        location,
        content,
      });

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