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 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
    • Cesium
  • 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

MultiPolygon


How to create multipolygon feature and add it to the map

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>

    <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: () => {
      const layerManager = core.getLayerManager();

      const multipolygonGeometry = new Vexcel.Geometry.MultiPolygon([
        [
          [
            new Vexcel.Geometry.Location(35.585851593232356, -116.136474609375),
            new Vexcel.Geometry.Location(35.15584570226544, -117.39990234375),
            new Vexcel.Geometry.Location(35.02999636902566, -115.631103515625),
            new Vexcel.Geometry.Location(35.585851593232356, -116.136474609375),
          ],
          [
            new Vexcel.Geometry.Location(35.737595151747826, -115.224609375),
            new Vexcel.Geometry.Location(35.08395557927643, -114.686279296875),
            new Vexcel.Geometry.Location(35.746512259918504, -113.97216796875),
            new Vexcel.Geometry.Location(35.737595151747826, -115.224609375),
          ],
        ],
      ]);

      const multipolygon = new Vexcel.Feature(multipolygonGeometry);

      const vectorLayer = new Vexcel.Layers.VectorLayer({
        visible: true,
        features: [multipolygon],
      });

      layerManager.addLayer(vectorLayer);
    },
  },
});



    

Documentation generated by Vexcel Imaging