npm - autnam - Versions diffs - 1.0.0 - Mend

autnam 1.0.0

Files changed (490) hide show

package/demos/browser-es-modules/README.md ADDED Viewed

@@ -0,0 +1,7 @@
+# ArcGIS REST JS + Native Browser Modules
+1. Run `npm run build` in the root directory
+1. Run `npm start` to spin up the development server.
+1. Visit [http://localhost:8080](http://localhost:8080).
+**Note:** The server starts with a special configuration to serve URLs starting with `@esri/arcgis-rest-*` from their respective packages. In your application you will need to change these URLs to point to their respective locations.

package/demos/browser-es-modules/index.html ADDED Viewed

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>ArcGIS REST JS Browser w/ Modules</title>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
+    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+</head>
+<body>
+  <!-- Load the ES Modules Polyfill so we can use importmap in FF and Safari -->
+  <script async src="https://unpkg.com/es-module-shims@0.13.1/dist/es-module-shims.js"></script>
+  <!-- Map package imports to URLS starting with @esri/... which will get served from the local build of the modules -->
+  <script type="importmap">
+  {
+    "imports": {
+      "@esri/arcgis-rest-request": "/@esri/arcgis-rest-request/dist/bundled/request.esm.js",
+      "@esri/arcgis-rest-portal": "/@esri/arcgis-rest-portal/dist/bundled/portal.esm.js"
+    }
+  }
+  </script>
+  <script type="module">
+    import { searchItems } from "@esri/arcgis-rest-portal";
+    let element = document.createElement("pre");
+    document.body.appendChild(element);
+    searchItems("water").then((response) => {
+      element.textContent = JSON.stringify(response, null, 2); // false
+    });
+  </script>
+</body>
+</html>

package/demos/browser-es-modules/package.json ADDED Viewed

@@ -0,0 +1,15 @@
+{
+  "private": true,
+  "name": "@esri/arcgis-rest-demo-browser-es-modules",
+  "version": "3.3.0",
+  "description": "Vanilla JavaScript demo of @esri/arcgis-rest-* packages",
+  "license": "Apache-2.0",
+  "scripts": {
+    "start": "node ../../scripts/run-demo-server.js"
+  },
+  "dependencies": {
+    "@esri/arcgis-rest-portal": "^3.3.0",
+    "@esri/arcgis-rest-request": "^3.3.0"
+  },
+  "author": ""
+}

package/demos/deno/README.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ `deno run --allow-net --import-map ./import_map.json index.js`

package/demos/deno/import_map.json ADDED Viewed

@@ -0,0 +1,8 @@
+  {
+    "imports": {
+      "@esri/arcgis-rest-form-data": "../../packages/arcgis-rest-form-data/browser-ponyfill.mjs",
+      "@esri/arcgis-rest-fetch": "../../packages/arcgis-rest-fetch/browser-ponyfill.mjs",
+      "@esri/arcgis-rest-request": "../../packages/arcgis-rest-request/dist/esm/index.js",
+      "@esri/arcgis-rest-portal": "../../packages/arcgis-rest-portal/dist/esm/index.js"
+    }
+  }

package/demos/deno/index.js ADDED Viewed

@@ -0,0 +1,5 @@
+import { searchItems } from "@esri/arcgis-rest-portal";
+searchItems("water").then((response) => {
+  console.log(response);
+});

package/demos/express/README.md ADDED Viewed

@@ -0,0 +1,16 @@
+# ArcGIS REST JS Express Demo
+This demo explains how to trigger OAuth 2.0 via custom server-side code
+## Setup
+1. Make sure you run `npm run build` in the root folder to setup the dependencies
+2. Create a new application on https://developers.arcgis.com
+3. Add `http://localhost:3000/authenticate` as a redirect uri for your application.
+4. Copy the `config.json.template` file, rename it to `config.json`
+5. Copy your application's client id into your new `config.json` file.
+## Running the demo
+6. `npm start`
+7. Visit http://localhost:3000/authorize to start the OAuth 2.0 process.

package/demos/express/config.json.template ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "clientId": "QVQNb3XfDzoboWS0" // change me
+}

package/demos/express/package.json ADDED Viewed

@@ -0,0 +1,15 @@
+{
+  "private": true,
+  "name": "@esri/arcgis-rest-demo-express",
+  "version": "3.3.0",
+  "description": "Demo of @esri/arcgis-rest-* packages in an Express server",
+  "license": "Apache-2.0",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "dependencies": {
+    "@esri/arcgis-rest-request": "^3.3.0",
+    "express": "^4.16.3"
+  },
+  "author": ""
+}

package/demos/express/server.js ADDED Viewed

@@ -0,0 +1,37 @@
+const express = require("express");
+const app = express();
+const { UserSession } = require("@esri/arcgis-rest-request");
+const { clientId } = require("./config.json");
+const credentials = {
+  clientId,
+  redirectUri: "http://localhost:3000/authenticate"
+};
+app.get("/authorize", function (req, res) {
+  // send the user to the authorization screen
+  UserSession.authorize(credentials, res);
+});
+// the after authorizing the user is redirected to /authenticate
+app.get("/authenticate", function (req, res) {
+  if (credentials) {
+    // the user will be redirected with an authorization code we will need to exchange for tokens.
+    // After exchanging we will have a UserSession we can use in REST JS.
+    UserSession.exchangeAuthorizationCode(credentials, req.query.code)
+      .then((session) => {
+        // get the users info
+        return session.getUser();
+      })
+      .then((user) => {
+        // send the info to the browser
+        res.send(`<pre>${JSON.stringify(user, null, 2)}</pre>`);
+      });
+  } else {
+    res.send("please visit http://localhost:3000/authorize");
+  }
+});
+app.listen(3000, function () {
+  console.log("visit http://localhost:3000/authorize to test the application!");
+});

package/demos/feature-service-browser/README.md ADDED Viewed

@@ -0,0 +1,8 @@
+# Running this demo
+1. Make sure you run `npm run build` in the root folder to setup the dependencies
+1. `npm start`
+1. Visit http://localhost:8080
+1. Enter a search term and click "Search" to see results
+**Note:** The server starts with a special configuration to serve URLs starting with `@esri/arcgis-rest-*` from their respective packages. In your application you will need to change these URLs to point to their respective locations.

package/demos/feature-service-browser/index.html ADDED Viewed

@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+</head>
+<body>
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-md-12">
+      <div class="jumbotron" >
+        <h1>query features!</h1>
+        <form id="queryForm" class="form-inline">
+          <div class="form-group">
+            <label for="resultRecordCount">Show up to</label>
+            <select id="resultRecordCount" class="form-control">
+              <option>5</option>
+              <option selected>10</option>
+              <option>25</option>
+              <option>50</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label for="queryField">records where</label>
+            <select id="queryField" class="form-control">
+              <option value="Cmn_Name">Type</option>
+              <option value="Condition">Condition</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label for="queryTerm">contains</label>
+            <input type="text" class="form-control" id="queryTerm" style="width: 200px" tabindex="0">
+          </div>
+          <button type="submit" class="btn btn-default">Go</button>
+        </form>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-12">
+      <table id="featureTable" class="table table-striped" style="display: none">
+        <thead>
+          <tr>
+            <th>Tree ID</th>
+            <th>Type</th>
+            <th>Condition</th>
+          </tr>
+        </thead>
+        <tbody id="tableBody">
+        </tbody>
+      </table>
+      <p id="suggestedTermsMessage">Try 'elm' or 'oak' for <strong>Type</strong>. Try 'fair' or 'good' for <strong>Condition</strong>.</p id="suggestedTermsMessage">
+      <p id="recordCountMessage"></p>
+      <p id="additionalRowsMessage" style="display: none" class="alert alert-warning">There are additional rows that meet your query criteria.</p>
+    </div>
+  </div>
+</div>
+<!-- load arcgis rest libraries -->
+<script src="@esri/arcgis-rest-request/dist/bundled/request.umd.js"></script>
+<script src="@esri/arcgis-rest-feature-service/dist/bundled/feature-layer.umd.js"></script>
+<script>
+  // respond when a user fills out the query form and
+  // either hits enter or clicks on the button
+  var queryForm = document.getElementById('queryForm');
+  queryForm.addEventListener('submit', function (e) {
+    // don't submit the form and reload the page (the default behavior)
+    e.preventDefault();
+    // get query params from form fields
+    var queryField = e.target.queryField.value;
+    var queryTerm = e.target.queryTerm.value;
+    var resultRecordCount = e.target.resultRecordCount.value;
+    // execute the query
+    queryTrees(queryField, queryTerm, resultRecordCount)
+    .then(function(response) {
+      // display the features in a table
+      refreshTable(response);
+    });
+  });
+  // perform query against the feature service and
+  // return a promise that will resolve with the response
+  function queryTrees(queryField, queryTerm, resultRecordCount) {
+    return arcgisRest.queryFeatures({
+      url: 'https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0',
+      // see: https://developers.arcgis.com/rest/services-reference/query-feature-service-layer-.htm
+      // for all possible query parameters
+      params: {
+        // NOTE: returnGeometry is set to false by default
+        where: queryField + ' LIKE \'%' + queryTerm + '%\'',
+        outFields: ['FID','Tree_ID','Cmn_Name','Condition'],
+        // limit to number of records that will show on the page
+        resultRecordCount: resultRecordCount
+      }
+    });
+  }
+  function refreshTable(response) {
+    var features = response.features;
+    // clear table
+    var tableBody = document.getElementById('tableBody');
+    tableBody.innerHTML = '';
+    // show returned features (if any)
+    var recordCount = features.length;
+    var featureTableDisplay = recordCount > 0 ? 'table' : 'none';
+    document.getElementById('featureTable').style.display = featureTableDisplay;
+    var rows = features.map(function (feature) {
+      return '<tr><td>' + feature.attributes.Tree_ID + '<td>' + feature.attributes.Cmn_Name + '</td><td>' + feature.attributes.Condition + '</td></tr>';
+    });
+    tableBody.innerHTML = rows.join('');
+    // show number of returned features
+    document.getElementById('recordCountMessage').innerHTML = recordCount + ' record(s) returned.';
+    // show/hide additional messages
+    var suggestedTermsMessageDisplay = recordCount > 0 ? 'none' : 'block';
+    var additionalRowsMessageDisplay = response.exceededTransferLimit ? 'block' : 'none';
+    document.getElementById('suggestedTermsMessage').style.display = suggestedTermsMessageDisplay;
+    document.getElementById('additionalRowsMessage').style.display = additionalRowsMessageDisplay;
+  }
+</script>
+</body>
+</html>

package/demos/feature-service-browser/package.json ADDED Viewed

@@ -0,0 +1,15 @@
+{
+  "private": true,
+  "name": "feature-service-browser",
+  "version": "3.3.0",
+  "description": "Vanilla JavaScript demo of @esri/arcgis-rest-feature-service",
+  "license": "Apache-2.0",
+  "scripts": {
+    "start": "node ../../scripts/run-demo-server.js"
+  },
+  "dependencies": {
+    "@esri/arcgis-rest-feature-service": "^3.3.0",
+    "@esri/arcgis-rest-request": "^3.3.0"
+  },
+  "author": ""
+}

package/demos/geocoder-browser/README.md ADDED Viewed

@@ -0,0 +1,12 @@
+# Running this demo
+1. Make sure you run `npm run bootstrap` in the root folder to setup the dependencies
+2. Register a new app on https://developers.arcgis.com
+3. Add a redirect URL of `http://localhost:8080/post-sign-in.html` to your app.
+4. Copy the `config.js.template` file, rename it to `config.js`
+5. Copy your apps client id into your new `config.js` file.
+6. `npm start`
+7. Visit http://localhost:8080 and click "Sign In" to start the OAuth 2.0 process.
+8. Start clicking buttons to send off authenticated geocoding requests.
+**Note:** The server starts with a special configuration to serve URLs starting with `@esri/arcgis-rest-*` from their respective packages. In your application you will need to change these URLs to point to their respective locations.

package/demos/geocoder-browser/authenticate.html ADDED Viewed

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>ArcGIS Rest JS OAuth redirect</title>
+  </head>
+  <body>
+    <script src="@esri/arcgis-rest-request/dist/bundled/request.umd.js"></script>
+    <script>
+      /* in a production app, clientId could be hardcoded. here we're using a regex to extract it from the state parameter in the OAuth2 server response to make the demo more interchangeable.
+      this relies on the fact that the ClientId is associated with the state parameter internally when another value isn't supplied manually.
+      */
+      const match = window.location.href.match(
+        /&state=([^&]+)/
+      );
+      const clientId = match[1];
+      let session;
+      function processAuthentication() {
+        window.location.href = './';
+        session = arcgisRest.UserSession.completeOAuth2({
+          clientId: clientId,
+        });
+        localStorage.setItem('__ARCGIS_REST_USER_SESSION__', session.serialize());
+      }
+      processAuthentication();
+    </script>
+  </body>
+</html>

package/demos/geocoder-browser/config.js.template ADDED Viewed

	@@ -0,0 +1 @@
1	+ var ClientId = "CLIENT_ID";

package/demos/geocoder-browser/index.html ADDED Viewed

@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+</head>
+<body>
+<div class="container-fluid">
+    <div class="jumbotron" >
+        <h1>get to geocodin!</h1>
+        <p>type things, click buttons and snoop in the <a href='https://developer.chrome.com/devtools'>developer console</a>.</p>
+    </div>
+    <div class="col-md-4">
+    </div>
+    <div class="col-md-4">
+        <p>
+            <a href="" class="btn btn-default" id="sign-in" role="button">Sign In</a><br>
+        </p>
+        <p>
+            <button class="btn btn-default" id="metadata" role="button">get service info</button>
+        </p>
+        <p>
+            <input id="geocodeInput" value="123 main st"></input>
+            <button class="btn btn-default" id="geocode" role="button">geocode an address</button>
+        <p>
+            <input id="suggestInput" value="World Tr"></input>
+            <button class="btn btn-default" id="suggest" role="button">get address suggestion</button>
+        </p>
+        <p>
+            <input id="reverseInput" value="{x:-118,y:34}"></input>
+            <button class="btn btn-default" id="reverse" role="button">determine address</button>
+        </p>
+        <p>
+            <button class="btn btn-default" id="bulk" role="button">geocode many addresses</button>
+        </p>
+    </div>
+</div>
+<script src="config.js"></script>
+<script src="@esri/arcgis-rest-request/dist/bundled/request.umd.js"></script>
+<script src="@esri/arcgis-rest-geocoding/dist/bundled/geocoding.umd.js"></script>
+<script>
+var auth;
+// add back later for bulk geocoding
+var authBtn = document.getElementById('sign-in');
+authBtn.addEventListener('click', function (e) {
+  arcgisRest.UserSession.beginOAuth2({
+    clientId: ClientId,
+    redirectUri: "http://localhost:8080/authenticate.html",
+    popup: true,
+    portal: "https://www.arcgis.com/sharing/rest"
+  }).then((session) => {
+    auth = session;
+    console.log(session);
+    document.getElementById('sign-in').innerHTML = 'you are signed in';
+  }).catch(error => {
+    console.log(error);
+  });
+  e.preventDefault();
+});
+var geocodeBtn = document.getElementById('geocode');
+geocodeBtn.addEventListener('click', function (e) {
+    arcgisRest.geocode({
+        address: document.getElementById("geocodeInput").value,
+        authentication: auth
+    })
+    .then((response) => {
+        console.log("geocode", response);
+    });
+});
+var suggestBtn = document.getElementById('suggest');
+suggestBtn.addEventListener('click', function (e) {
+    console.log(document.getElementById("suggestInput").value);
+    arcgisRest.suggest(document.getElementById("suggestInput").value, {
+        authentication: auth
+    })
+    .then((response) => {
+        console.log("suggest", response);
+    });
+});
+var reverseBtn = document.getElementById('reverse');
+reverseBtn.addEventListener('click', function (e) {
+  // need to parse
+  arcgisRest.reverseGeocode(document.getElementById("reverseInput").value.split(','), {
+        authentication: auth
+    })
+    .then((response) => {
+        console.log("reverseGeocode", response);
+    });
+});
+var metadataBtn = document.getElementById('metadata');
+metadataBtn.addEventListener('click', function (e) {
+    arcgisRest.getGeocodeService({
+        authentication: auth
+    })
+    .then((response) => {
+        console.log("metadata", response);
+    });
+});
+var bulkBtn = document.getElementById('bulk');
+bulkBtn.addEventListener('click', function (e) {
+    var addresses = [{
+      "OBJECTID": 1,
+      "SingleLine": "380 New York St. Redlands 92373"
+    },
+    {
+      "OBJECTID": 2,
+      "SingleLine": "1 World Way Los Angeles 90045"
+    }];
+    arcgisRest.bulkGeocode({ authentication: auth, addresses })
+    .then((response) => {
+        console.log("bulkGeocode", response);
+    })
+    .catch((err) => {
+        console.warn(err);
+    });
+});
+</script>
+</body>
+</html>

package/demos/geocoder-browser/package.json ADDED Viewed

@@ -0,0 +1,15 @@
+{
+  "private": true,
+  "name": "@esri/arcgis-rest-geocoder-vanilla",
+  "version": "3.3.0",
+  "description": "Vanilla JavaScript demo of @esri/arcgis-rest-geocoder",
+  "license": "Apache-2.0",
+  "scripts": {
+    "start": "node ../../scripts/run-demo-server.js"
+  },
+  "dependencies": {
+    "@esri/arcgis-rest-geocoding": "^3.3.0",
+    "@esri/arcgis-rest-request": "^3.3.0"
+  },
+  "author": ""
+}

package/demos/jsapi-integration/README.md ADDED Viewed

@@ -0,0 +1,26 @@
+# Passing authentication to the JSAPI
+This demo shows how to use `arcgis-rest-js` with the ArcGIS API for JavaScript. A typical use case would be when you need to query items or feature data _before_ you are ready to display a map or scene view. In this scenario, you should load the light-weight `arcgis-rest-js` libraries first and use them to perform your queries and/or authenticate with the ArcGIS platform. Then when you are ready to show a map or scene view, you would lazy-load the ArcGIS API for JavaScript with something like [esri-loader](https://github.com/Esri/esri-loader) and use it to create the map.
+## Running this demo
+1. Run `npm run build` in the repository's root directory.
+1. Run `npm start` to spin up the development server.
+1. Visit [http://localhost:8080](http://localhost:8080).
+```js
+// from rest-js
+const session = new UserSession(/* */);
+// ensure that our session has a token
+session.getToken("https://www.arcgis.com/sharing/rest").then(() => {
+  esriId.registerToken(session.toCredential()); // JSAPI Identity Manager
+});
+// from jsapi
+esriId.getCredential("https://www.arcgis.com/sharing/rest").then((cred) => {
+  const session = UserSession.fromCredential(cred);
+});
+```
+**Note:** The server starts with a special configuration to serve URLs starting with `@esri/arcgis-rest-*` from their respective packages. In your application you will need to change these URLs to point to their respective locations.

package/demos/jsapi-integration/authenticate.html ADDED Viewed

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>ArcGIS Rest JS OAuth redirect</title>
+  </head>
+  <body>
+    <script src="@esri/arcgis-rest-request/dist/bundled/request.umd.js"></script>
+    <script>
+      /* in a production app, clientId could be hardcoded. here we're using a regex to extract it from the state parameter in the OAuth2 server response to make the demo more interchangeable.
+      this relies on the fact that the ClientId is associated with the state parameter internally when another value isn't supplied manually.
+      */
+      const match = window.location.href.match(
+        /&state=([^&]+)/
+      );
+      const clientId = match[1];
+      let session;
+      function processAuthentication() {
+        window.location.href = './';
+        session = arcgisRest.UserSession.completeOAuth2({
+          clientId: clientId,
+        });
+        localStorage.setItem('__ARCGIS_REST_USER_SESSION__', session.serialize());
+      }
+      processAuthentication();
+    </script>
+  </body>
+</html>

package/demos/jsapi-integration/config.js ADDED Viewed

@@ -0,0 +1,6 @@
+/*
+You can generate your own clientid by creating an application on the ArcGIS for Developers site. Be sure to add http://localhost:8080/ as a redirect uri for your application
+once you have a clientid of your own, copy/paste it here and rename this file 'config.js'
+*/
+let clientId = "S19JZF92TRf2HZit";