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

GeoJSON reader


How to read a geojson object 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>
    <div id="map" class="map"></div>

    <script type="text/javascript" src="https://app.vexcelgroup.com/map/v1/public/Vexcel.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 geojsonReader = new Vexcel.Geometry.Reader.GeoJSON();

      const geojsonObject = {
        type: "Feature",
        geometry: {
          type: "MultiPolygon",
          coordinates: [
            [
              [
                [-84.60516654182985, 32.35226631308284],
                [-82.95721732307985, 32.259409074686886],
                [-83.85809622932985, 31.024839696908263],
                [-84.60516654182985, 32.35226631308284],
              ],
            ],
            [
              [
                [-83.22088919807985, 30.68531002230933],
                [-82.38592826057985, 32.017535629504685],
                [-81.68280326057985, 30.552946697977536],
                [-83.22088919807985, 30.68531002230933],
              ],
            ],
          ],
        },
        properties: null,
      };

      const features = geojsonReader.readFeatures(geojsonObject);

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

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


    

Documentation generated by Vexcel Imaging