logo
API 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 with multiple maps
    • Init in 3D mode
    • Init with image 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
    • Cesium
  • Controls
    • Basics
    • Map modes
    • Map orientations
    • Layer control
    • Zoom control
    • Map Bar Control
    • Map Button
    • Map Toggle
    • Vexcel image metadata
    • Vexcel find collection
    • Vexcel show collection
    • 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

Map Bar Control


Add inline control bar to group 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;
        }
        .ol-button {
            right:  0.5em;
            top: 0.5em;
        }
        .ol-button.ol-active button {
            background: rgba(60, 136, 0, 0.7);
        }
    </style>
</head>
<body>
    <div id="map" class="map"></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,
  initialConfig: {
    overlays: {
    visible: [],
    },
    imageryLayers: {
    visible: [],
    },
    callback: () => {
      const hello = new Vexcel.Control.Button({
        html: '<i class="fa fa-exclamation"></i>',
        title: "Hello world!",
        handleClick: () => {
          alert("hello World!");
        },
      });
      const location = new Vexcel.Control.Button({
        html: '<i class="fa fa-location-arrow"></i>',
        title: "Map location",
        handleClick: () => {
          alert(`Center: ${core.getLocation().toString()}`);
        },
      });
      const mainbar = new Vexcel.Control.Bar();
      core.addControl(mainbar);
      mainbar.setPosition("top-right");
      mainbar.addControl(hello);
      mainbar.addControl(location);

      const group = new Vexcel.Control.Bar({ toggleOne: true, group: true });
      core.addControl(group);
      group.setPosition("bottom-right");

      // Add selection tool (a toggle control with a select interaction)
      const north = new Vexcel.Control.Toggle({
        html: "N",
        title: "North",
        active: true,
        onToggle(active) {
          if (active) {
            core
              .getImageryLayer()
              .changeOrientation(Vexcel.Constants.MapOrientation.S)
              .then((response) => {
                console.log(response.msg);
              })
              .catch((error) => {
                console.log(error);
                alert(error);
              });
          }
        },
      });
      const south = new Vexcel.Control.Toggle({
        html: "S",
        title: "South",
        onToggle(active) {
          if (active) {
            core
              .getImageryLayer()
              .changeOrientation(Vexcel.Constants.MapOrientation.S)
              .then((response) => {
                console.log(response.msg);
              })
              .catch((error) => {
                console.log(error);
                alert(error);
              });
          }
        },
      });
      const east = new Vexcel.Control.Toggle({
        html: "E",
        title: "East",
        onToggle(active) {
          if (active) {
            core
              .getImageryLayer()
              .changeOrientation(Vexcel.Constants.MapOrientation.S)
              .then((response) => {
                console.log(response.msg);
              })
              .catch((error) => {
                console.log(error);
                alert(error);
              });
          }
        },
      });
      const west = new Vexcel.Control.Toggle({
        html: "W",
        title: "West",
        onToggle(active) {
          if (active) {
            core
              .getImageryLayer()
              .changeOrientation(Vexcel.Constants.MapOrientation.S)
              .then((response) => {
                console.log(response.msg);
              })
              .catch((error) => {
                console.log(error);
                alert(error);
              });
          }
        },
      });

      group.addControl(north);
      group.addControl(south);
      group.addControl(east);
      group.addControl(west);
    },
  },
});

      
    

Documentation generated by Vexcel Imaging