Vexcel Map API Custom Tooltips

You can use the CHANGE_MEASURE event and create a point feature in order to show a custom tooltip.

3d Status

Off

Mode Controls

Orientation Controls

Measurement tools

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;
        }
    </style>
</head>
<body>

    <div id="map" class="map"></div>

    <div class="col-md-3">
        <div class="col-md-3">
            <h4>Availability status</h4>
            <div class="wrapper">
                <span id="status-3d" class="badge">Off</span>
            </div>
        </div>
        <div class="col-md-3">
            <h4>Mode Controls</h4>
            <button onclick="changeMode('2D')">2d</button>
            <button onclick="changeMode('3D')">3d</button>
        </div>
        <div class="col-md-3">
            <h4>Orientation Controls</h4>
            <button onclick="changeOrientation('V')">Vertical</button>
            <button onclick="changeOrientation('N')">North</button>
            <button onclick="changeOrientation('S')">South</button>
            <button onclick="changeOrientation('E')">East</button>
            <button onclick="changeOrientation('W')">West</button>
        </div>
        <div class="col-md-3">
            <h4>Measurement tools</h4>
            <button  id="point">Point</button>
            <button  id="relativeHeight">Relative Height</button>
        </div>
    </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: {
    layers: false,
    callback: () => {
      core
        .getLayerManager()
        .getVexcelLayer(Vexcel.Constants.BuiltInLayers.BLUESKY)
        .setVisible(true);
    },
  },
});

// event to receive the measure after it's created
core.addEventListener(Vexcel.Events.MapEvents.START_MEASURE, (evt) => {
  console.log(
    `MeasurementInfo Start: ${JSON.stringify(evt.measure.toGeoJSON())}`
  );
});
// event to receive the measure after it's finished
core.addEventListener(Vexcel.Events.MapEvents.FINISH_MEASURE, (evt) => {
  console.log(
    `MeasurementInfo Finish: ${JSON.stringify(evt.measure.toGeoJSON())}`
  );
});
// event to receive the measure after change
core.addEventListener(Vexcel.Events.MapEvents.CHANGE_MEASURE, (evt) => {
  console.log(
    `MeasurementInfo Change: ${JSON.stringify(
      evt.measure.getMeasurementInfo()
    )}`
  );
  // Point created to show a custom tooltip with the location from the feature
  const point = new Vexcel.Geometry.Point(
    new Vexcel.Geometry.Location(
      evt.measure.getMeasurementInfo().location.value[1],
      evt.measure.getMeasurementInfo().location.value[0]
    )
  );
  const pointFeature = new Vexcel.Feature(point);

  // In this case we have the Point and the Relative Height Tool. If relative elevation has a value, we paint it. Otherwise we paint the elevation.
  const pointText = evt.measure.getMeasurementInfo().relativeElevation
    ? `Relative Elevation ${
        evt.measure.getMeasurementInfo().relativeElevation.valuePretty
      }${evt.measure.getMeasurementInfo().relativeElevation.unit}`
    : `Elevation ${evt.measure.getMeasurementInfo().elevation.valuePretty}${
        evt.measure.getMeasurementInfo().elevation.unit
      }`;

  // Make use of the Style to show the custom text.
  pointFeature.setStyle(
    new Vexcel.Style.Style({
      text: new Vexcel.Style.Text({
        text: pointText,
        fill: new Vexcel.Style.Fill({
          color: "white",
        }),
        offsetY: 25,
        scale: 2,
        stroke: new Vexcel.Style.Stroke({
          color: "black",
        }),
      }),
    })
  );

  // A new layer is created in order to show the text
  const vectorLayer = new Vexcel.Layers.VectorLayer({
    visible: true,
    features: [pointFeature],
  });
  core.getLayerManager().addLayer(vectorLayer);
});
// event triggered after 3d status change
core.addEventListener(Vexcel.Events.MapEvents.STATUS_3D_MEASURES, (evt) => {
  console.log(
    `3D Measure availability status:${evt.status} inside:${evt.inside}`
  );

  if (evt.status === Vexcel.Constants.Status3D.STOP) {
    document.getElementById("status-3d").className = "badge";
    document.getElementById("status-3d").textContent = "NO DATA";
  }

  if (evt.status === Vexcel.Constants.Status3D.DOWNLOADING) {
    document.getElementById("status-3d").className = "badge download";
    document.getElementById("status-3d").textContent = "DOWNLOAD";
  }

  if (evt.status === Vexcel.Constants.Status3D.FINISHED && evt.inside) {
    document.getElementById("status-3d").className = "badge available";
    document.getElementById("status-3d").textContent = "AVAILABLE";
  }

  if (evt.status === Vexcel.Constants.Status3D.FINISHED && !evt.inside) {
    document.getElementById("status-3d").className = "badge";
    document.getElementById("status-3d").textContent = "NO DATA";
  }
});
function changeMode(mode) {
  core
    .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);
    });
}

function changeOrientation(orientation) {
  core
    .changeOrientation(orientation)
    .then((response) => {
      console.log(response.msg);
    })
    .catch((error) => {
      console.log(error);
      alert(error);
    });
}
document.getElementById("point").addEventListener("click", () => {
  core
    .getMeasurementManager()
    .activate(Vexcel.Constants.MeasurementTools.POINT);
});
document.getElementById("relativeHeight").addEventListener("click", () => {
  core
    .getMeasurementManager()
    .activate(Vexcel.Constants.MeasurementTools.RELATIVE_HEIGHT);
});