logo
Documentation
Tutorials
Getting Started Initialization Layers Third party Controls Geometries Vector styles Measures InfoBox Utils
Releases

Tutorials

  • Getting Started
    • Setup
  • Initialization
    • Init with token
    • Init with username/password
    • Init with constrained zoom levels
    • Init empty map
    • Init instance
    • Init in 3D mode
    • Init map with a restricted extent
  • Layers
    • XYZ Tile
    • WMS Tile
    • WMTS Tile
    • Bing Layer
    • Vector Layer
    • Vector Tiles
    • WFS Layer
    • ArcGIS Feature
    • Group Layer
  • Third party
    • Bing
    • Google
    • Google side by side
  • Controls
    • Basics
    • Map modes
    • Map orientations
    • Layer control
    • Zoom control
    • Map Bar Control
    • Map Button
    • Map Toggle
    • Vexcel aois
    • Vexcel find aois
    • Vexcel Infrared
    • Brightness and Contrast Control
  • Geometries
    • Point
    • Line
    • Polygon
    • MultiPolygon
    • WKT reader
    • GeoJSON reader
    • Feature click
    • Feature hover
  • Vector styles
    • Polygon styles
    • Point styles
    • Point shapes styles
    • Text styles
    • Feature styles
  • Measures
    • 2D mode
    • 3D mode
    • Change units
    • Edit
    • Tooltips
    • Custom Tooltips
  • InfoBox
    • InfoBox fixed
    • InfoBox on click
    • InfoBox feature
  • Utils
    • Transform

Tutorial

Tooltips


To learn how to use measurement tools in 3d Mode. To take 3d measurements your need to be in a 3d mode in ultra layer, and alo you need to have access to this feature. The 3d measures are allowed only in zoom levels bigger than 19

Mode Controls

Orientation Controls

Tooltips

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">
            <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>Tooltips</h4>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" checked id="tooltip-visibility">
                <label class="form-check-label" for="tooltip-visibility">
                    Visible
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" checked id="tooltip-length-visibility">
                <label class="form-check-label" for="tooltip-length-visibility">
                    Length
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" checked id="tooltip-area-visibility">
                <label class="form-check-label" for="tooltip-area-visibility">
                    Area
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" checked id="tooltip-slope-visibility">
                <label class="form-check-label" for="tooltip-slope-visibility">
                    Slope
                </label>
            </div>
        </div>
        <div class="col-md-3">
            <h4>Measurement tools</h4>
            <button  id="point">Point</button>
            <button  id="line">Line</button>
            <button  id="polygon">Polygon</button>
            <button  id="rectangle">Rectangle</button>
            <button  id="circle">Circle</button>
        </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);
    },
  },
});
document.getElementById("tooltip-visibility").onchange = function () {
  if (this.checked) {
    core.getMeasurementManager().enableTooltips();
  } else {
    core.getMeasurementManager().disableTooltips();
  }
};
document.getElementById("tooltip-length-visibility").onchange = function () {
    if (this.checked) {
        core.getMeasurementManager().enableLengthTooltips();
    } else {
        core.getMeasurementManager().disableLengthTooltips();
    }
};
document.getElementById("tooltip-area-visibility").onchange = function () {
    if (this.checked) {
        core.getMeasurementManager().enableAreaTooltips();
    } else {
        core.getMeasurementManager().disableAreaTooltips();
    }
};
document.getElementById("tooltip-slope-visibility").onchange = function () {
    if (this.checked) {
        core.getMeasurementManager().enableSlopeTooltips();
    } else {
        core.getMeasurementManager().disableSlopeTooltips();
    }
};
// 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()
    )}`
  );
});
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("line").addEventListener("click", () => {
  core.getMeasurementManager().activate(Vexcel.Constants.MeasurementTools.LINE);
});
document.getElementById("polygon").addEventListener("click", () => {
  core
    .getMeasurementManager()
    .activate(Vexcel.Constants.MeasurementTools.POLYGON);
});
document.getElementById("rectangle").addEventListener("click", () => {
  core
    .getMeasurementManager()
    .activate(Vexcel.Constants.MeasurementTools.RECTANGLE);
});
document.getElementById("circle").addEventListener("click", () => {
  core
    .getMeasurementManager()
    .activate(Vexcel.Constants.MeasurementTools.CIRCLE);
});



    

Documentation generated by Vexcel Imaging