GIS Middleware

Installation

npm install @msul-webux/gis-middleware

Usage

• Verify that @arcgis/core/assets are copied to gis-assets directory where the package is installed

• Import the esri theme from gis-assets

 <link rel="stylesheet" href="/gis-assets/esri/themes/light/main.css">

• Import the middleware in your HTML file.

<script src="/path/to/arcgis-middleware.iife.js"></script>

• Create an instance of the ArcGisMiddleware class. The ArcGisMiddleware class expects ArcGIS portal url and unique id for the webmap as parameters.

const arcGisMiddleware = new ArcGisMiddleware(
        'YOUR_GIS_PORTAL_URL',
        'YOUR_MAP_ID'
);

• Set the building id.

arcGisMiddleware.setBuildingById('YOUR_BUILDING_ID');

• Set the floor id.

arcGisMiddleware.setFloorById('YOUR_FLOOR_ID');

• Generate the HTML that displays the map.

const result = arcGisMiddleware.generate().element;

The generated HTML returns a result object. The result object contains element key and an errors key. The element inside the result is either a DOM element representing the map or null. The errors key is a list of errors, if any, or empty.

This is added to the DOM element arcgis-result

// Access the HTML using
const element = result.element

// Access the errors using
const errors = result.errors

// Create a DOM element "arcgis-result"
// Append that DOM element to the page, for example, a div with the id of arcgis-result
document.getElementById('arcgis-result').appendChild(element);

Create a DOM element using

 <div id="arcgis-result"></div>

A full working example

 <link rel="stylesheet" href="/gis-assets/esri/themes/light/main.css">
 <style>
   /* MUST HAVE: Give the map a container height */
   arcgis-map {
     height: 600px;
     width: 100%;
     display: block;
   }
 </style>
 <script src="/path/to/arcgis-middleware.iife.js"></script>

 <script>
   document.addEventListener('DOMContentLoaded', () => {
     const arcGisMiddleware = new ArcGisMiddleware(
       'https://your.gis.instance.url/portal',
       'YOUR_MAP_ID'
     );

     arcGisMiddleware.setBuildingById('YOUR_BUILDING_ID');
     arcGisMiddleware.setFloorById('YOUR_FLOOR_ID');
     document.getElementById('arcgis-result').appendChild(arcGisMiddleware.generate().element);
   });
 </script>

 <div>
   <h1>Page Title</h1>
 </div>
 <div id="arcgis-result"></div>