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');

• Add additional attributes to the map.

// set the center the zoom level for the map on load
// this is also the default for the home button
const additionalAttributes = {
  'center': "-84.48323542024565, 42.7308616988147",
  'zoom': "18"
};
arcGisMiddleware.setAdditionalAttributes(additionalAttributes);

• Add custom constraints to the map.
  • Currently geometry, minScale, and maxScale are allowed.

  const constraints = { // sets the constriants to MSU, East Lansing, MI
    geometry: {
      type: "extent",
      xmin: -84.51,
      ymin: 42.67,
      xmax: -84.46,
      ymax: 42.74
    },
    minScale: 5000,
    maxScale: 0
  };
  arcGisMiddleware.setConstraints(constraints);

• Add Legend to the map (optional)
  • legendHeadingLevel: Heading level for the legend section
  • legendHeadingText: Text for the legend heading
  • headingLevel: Heading level for items in the legend section

 arcGisMiddleware.setLegend({
    legendHeadingLevel: 2,
    legendHeadingText: "Legend",
    headingLevel: 3
  });

• Add custom css to the map (optional)
  • Example: have the legend and map next to each other

  arcGisMiddleware.setCustomStyles(`
    #map-view-container {
      display: flex;
      flex-direction: row-reverse;
    }
    #map-container {
      width:66%;
      padding-right: 2rem;
    }
    #legend-container {
      width: 30%;
    }
    .esri-widget--button {
      display: none;
    }
  `);

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