open-index/open-npm huggingface dataset:
npm package: @msul-webux/gis-middleware
Description: Middleware to interact with ArcGIS for generating a map DOM element.
Author: Michigan State University Libraries
Latest version: 0.1.1

### GIS Middleware

## Installation

```bash
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`

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

* Import the middleware in your HTML file.

```javascript

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

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

* Set the building id.

```javascript
arcGisMiddleware.setBuildingById('YOUR_BUILDING_ID');
```

* Set the floor id.

```javascript
arcGisMiddleware.setFloorById('YOUR_FLOOR_ID');
```

* Generate the HTML that displays the map.

```javascript
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`

```javascript
// 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

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

 A full working example

 ```HTML
  <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>

 ```