ArcGIS Feature Server without ArcGIS Server using Koop JS

Introduction

KoopsJS is a nice project on Node JS which provides a option to consume ArcGIS Rest Services with having a ArcGIS Enterprise license or subscription. With this solution we can setup a Web Map application using a Geojson or similar data as source without keeping it in the front end. Apart from that the Feature Server will provide the ability to update the Geojson at the source as well.

There are two ways to serve the Koops service from your machine:

  1. Using a KoopsJS installer as recommended by KoopsJS Getting Started documentation
  2. Completely as a node js application using npm package

I am recommending the second methods as it looks scalable and easy to maintain. We are now going to use second method in our below setup guide.

Prerequisites

  1. Node JS Installed
  2. GeoJSON files Samples here.
  3. ArcGIS JavaScript SDK (basic understanding)

Assuming that you already have the above prerequisites, let’s install the Koop JS libraries

Installing KoopJS libraries

  1. From your terminal, Create a new directory called “KoopsJS_Intro” and step into it.
  2. Koops JS has multiple libraries depends on the source you’re using, as we are going to use GeoJSON as the source we need to install the following libraries:npm install --save @koopjs/koop-core @koopjs/provider-file-geojson

Creating the Node Script

  1. Create a folder named “data” and paste your GeoJSON files inside
  2. Create a new file named “index.js” and insert the below line of codes, feel free to alternate the line of codes as per your requirementconst Koop = require("@koopjs/koop-core") // new koop instance const koop = new Koop() // register geojson data provider const provider = require("@koopjs/provider-file-geojson") koop.register(provider) // start the app koop.server.listen(8080, () => console.log("Koop listening on port 8080!"))```
  3. Run the script from your terminalnode index.js

You should get a output like below and the service will be available through port 8080:

Script Output
Script Output

Consuming the services in your application

  1. The new services can be checked by accessing the info page, a seperate Feature Service have been created for all the GeoJSON placed in data folder:
Info Output
Info Output
  1. Create a test.html with below code to consume the service using ArcGIS JavaScript API:
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Intro to Koop JS Feature Service using GeoJSON</title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.28/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <script>
      require(["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer"], (Map, MapView, FeatureLayer) => {
        const map = new Map({
          basemap: "dark-gray"
        });

        const view = new MapView({
          container: "viewDiv",
            map: map,
	    zoom: 2,
        });

        
         //Add KoopJS feature layer
        const featureLayer = new FeatureLayer({
            url: "http://localhost:8080/file-geojson/rest/services/populated_places/FeatureServer"
        });

        map.add(featureLayer);
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>
  1. Save and open the file from your browser, you should be able to access the File Service created through the ArcGIS Javascript SDK as shown belowFinal OutputFinal Output

Benefits

  1. Feature Service out of GeoJSON layer
  2. Test out your application locally, without connection to your ArcGIS Enterprise server
  3. Scalable Open Source Solution

References

  1. Repository of the Code in GitHub.
  2. Koops JS Getting Started
  3. ArcGIS JavaScript SDK Documentation

Leave a Reply

Related Posts