diff --git a/README.md b/README.md index 677372e..0ee2c92 100644 --- a/README.md +++ b/README.md @@ -1 +1,48 @@ # ArcGIS REST JS Samples + +This repository contains a variety of samples of different ways to use [ArcGIS REST JS](https://github.com/Esri/arcgis-rest-js). Please see the [samples folder](samples/) for the entire list. Each sample has a README file to explain how to run the sample. + +## Local ArcGIS REST JS + +If you'd like to use a local version of ArcGIS REST JS while running one of the samples, follow these steps. + +### Local ArcGIS REST JS (NPM) + +For samples that use NPM to install ArcGIS REST JS as a dependency, follow these steps. + +1. In the ArcGIS REST JS repo run any relevant build commands for the packages with which you are working. +1. In the terminal, `cd` onto the package you want to link. E.g. `cd packages/arcgis-rest-request`. +1. Run `npm link`. +1. In this repo, `cd` into the demo you want to run and run the `npm link` command for the package you want to link. `npm link @esri/arcgis-rest-request` + +Remember that you must run `npm run build` in the ArcGIS REST JS repository after making changes to see those changes when running the sample. + +To remove the link and use the package from NPM instead of the local one, run `npm install` in the sample folder again. + +### Local ArcGIS REST JS (Browser) + +For samples that use a ` + ``` + + ... to this: + + ```html + + ``` + +## Sample Repository Maintenance + +In order to not need to constantly update the packages, we are not including `package-lock.json` files within samples the use NPM to install dependencies. See [.gitignore](.gitignore). diff --git a/samples/attachments-browser/README.md b/samples/attachments-browser/README.md index 1670b1f..33f8f21 100644 --- a/samples/attachments-browser/README.md +++ b/samples/attachments-browser/README.md @@ -1,7 +1,15 @@ -# Running this demo +# Attachments Browser -1. Make sure you run `npm run build` in the root folder to setup the dependencies -1. `npm start` -1. Visit http://localhost:8080 +## Running this sample -**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. +For this sample, you do not need to install any dependencies - it uses ArcGIS REST JS from the Unpkg CDN. To run this sample, you just need to host the `index.html` file. There are a variety of ways to do that; one simple way is to use the [serve](https://www.npmjs.com/package/serve) package: + +```bash +npx serve +``` + +### Local ArcGIS REST JS + +If you'd like to use a local version of ArcGIS REST JS, follow the [steps in the parent README](../README.md#local-arcgis-rest-js-browser), updating the script tags in these files as necessary: + +- `index.html` diff --git a/samples/attachments-browser/index.html b/samples/attachments-browser/index.html index 382b833..f71f3ba 100644 --- a/samples/attachments-browser/index.html +++ b/samples/attachments-browser/index.html @@ -1,8 +1,15 @@ -Attachments + - + Attachments + + + + + + +
@@ -15,7 +22,7 @@

Attachments

- +
@@ -53,10 +60,6 @@

Attachments

- - - - - - - - - - - - \ No newline at end of file + + + ArcGIS REST JS Browser w/ Modules + + + + + + + + + + + + + diff --git a/samples/browser-es-modules/package.json b/samples/browser-es-modules/package.json deleted file mode 100644 index b25e79f..0000000 --- a/samples/browser-es-modules/package.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "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": "^4.0.0", - "@esri/arcgis-rest-request": "^4.0.0" - }, - "author": "" -} diff --git a/samples/deno/README.md b/samples/deno/README.md index 9772c97..9a0b00b 100644 --- a/samples/deno/README.md +++ b/samples/deno/README.md @@ -1,9 +1,33 @@ # ArcGIS REST JS + Deno -ArcGIS REST JS is fully compatible with Deno. You can import the packages from the [esm.run CDN](https://www.jsdelivr.com/esm) for the easiest use. This demo shows importing from a local install with an import map. +## Running this sample -You can run this demo with: +ArcGIS REST JS is fully compatible with Deno. You can run this demo with: ``` -deno run --allow-net --import-map ./import_map.json index.js +deno run --allow-net --allow-import --import-map ./import_map.json index.js +``` + +### Local ArcGIS REST JS + +If you'd like to use a local version of ArcGIS REST JS, follow these steps. + +1. In the ArcGIS REST JS directory, run these commands. This will run a local server hosting ArcGIS REST JS. + +```bash +npm install +npm run build +node .\scripts\run-demo-server.js +``` + +2. In this sample's directory, update `import_map.json` with relative paths to the files on your computer. For example replace this: + +```json +"https://esm.run/@esri/arcgis-rest-form-data/browser-ponyfill.mjs" +``` + +... with this: + +```json +"../../path/to/arcgis-rest-js/packages/arcgis-rest-form-data/browser-ponyfill.mjs" ``` diff --git a/samples/deno/import_map.json b/samples/deno/import_map.json index f667e41..96d8dd1 100644 --- a/samples/deno/import_map.json +++ b/samples/deno/import_map.json @@ -1,8 +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" - } - } \ No newline at end of file +{ + "imports": { + "@esri/arcgis-rest-form-data": "https://esm.run/@esri/arcgis-rest-form-data/browser-ponyfill.mjs", + "@esri/arcgis-rest-fetch": "https://esm.run/@esri/arcgis-rest-fetch/browser-ponyfill.mjs", + "@esri/arcgis-rest-request": "https://esm.run/@esri/arcgis-rest-request/dist/esm/index.js", + "@esri/arcgis-rest-portal": "https://esm.run/@esri/arcgis-rest-portal/dist/esm/index.js" + } +} diff --git a/samples/dev-credentials-client/README.md b/samples/dev-credentials-client/README.md index c45e335..65ae8b9 100644 --- a/samples/dev-credentials-client/README.md +++ b/samples/dev-credentials-client/README.md @@ -2,33 +2,25 @@ This page will show API key and OAuth 2.0 app CRUD demo with help of `arcgis-rest-developer-credentials` package. First step requires a user to log in -via [Authenticate with an ArcGIS identity](https://developers.arcgis.com/arcgis-rest-js/authentication/tutorials/authenticate-with-an-arcgis-identity-rest-js-browser/). +via [Authenticate with an ArcGIS identity](https://developers.arcgis.com/arcgis-rest-js/authentication/tutorials/sign-in-with-user-authentication-browser/). Then you can use the form to create an API key or switch to the OAuth 2.0 form to create an OAuth 2.0 app. Once you've created an API key or OAuth 2.0 app, you can click on the item in the table below the form to edit it. -## Running this demo +## Running this sample -1. Run `npm run build` in the repository's root directory. -2. Go into `demos/dev-credentials-client` and run `npm start` to spin up the development server. -3. Visit [http://localhost:8080](http://localhost:8080). +First run `npm install` to install the dependencies. + +### Local ArcGIS REST JS + +If you'd like to use a local version of ArcGIS REST JS, follow the [steps in the parent README](../README.md#local-arcgis-rest-js-npm), referencing these packages that this sample uses as necessary: + +- `arcgis-rest-request` +- `arcgis-rest-developer-credentials` ## Additional tools used - - - - - - - - - - - - - - - - - -
DescriptionTool
Enhanced Multi-SelectSelect2
TablejQuery Data Table
OthersjQuery 3, Bootstrap 5
\ No newline at end of file +| Description | Tool | +| --------------------- | ------------------------------------------- | +| Enhanced Multi-Select | [Select2](https://select2.org) | +| Table | [jQuery Data Table](https://datatables.net) | +| Others | jQuery 3, Bootstrap 5 | diff --git a/samples/express-oauth-advanced/README.md b/samples/express-oauth-advanced/README.md index 1c7a161..1fdc6ee 100644 --- a/samples/express-oauth-advanced/README.md +++ b/samples/express-oauth-advanced/README.md @@ -21,22 +21,28 @@ Using long lived sessions on the server also means that the server can perform b These instructions are for setting up the demo using credentials setup by the ArcGIS REST JS team. -1. Make sure you run `npm run build` in the root folder to setup the dependencies +1. In this sample's directory, run `npm install` to install the dependencies. 1. Copy `.env.template` to `.env` 1. Run `npm run start` -1. Visit http://localhost:3000 to start. +1. Visit to start. ## Setup with your own credentials These instructions are for setting up the demo using credentials setup by the ArcGIS REST JS team. -1. Make sure you run `npm run build` in the root folder to setup the dependencies +1. In this sample's directory, run `npm install` to install the dependencies. 1. Copy `.env.template` to `.env` 1. [Register an app](https://developers.arcgis.com/documentation/mapping-apis-and-services/security/tutorials/register-your-application/) and copy the Client ID into `.env` in the `CLIENT_ID` property. 1. [Add redirect URIs](https://developers.arcgis.com/documentation/mapping-apis-and-services/security/tutorials/add-redirect-uri/) for `http://localhost:3000/authenticate` to your registered application. -1. Replace the `ENCRYPTION_KEY` and `SESSION_SECRET` values with new values. You can use a website like https://randomkeygen.com/ to generate new strong keys. +1. Replace the `ENCRYPTION_KEY` and `SESSION_SECRET` values with new values. You can use a website like to generate new strong keys. 1. Run `npm run start` -1. Visit http://localhost:3000 to start. +1. Visit to start. + +## Local ArcGIS REST JS + +If you'd like to use a local version of ArcGIS REST JS, follow the [steps in the parent README](../README.md#local-arcgis-rest-js-npm), referencing these packages that this sample uses as necessary: + +- `arcgis-rest-request` ## How it works diff --git a/samples/express/README.md b/samples/express/README.md index 2c484d7..b7745b7 100644 --- a/samples/express/README.md +++ b/samples/express/README.md @@ -1,16 +1,20 @@ # ArcGIS REST JS Express Demo -This demo explains how to trigger OAuth 2.0 via custom server-side code +This sample shows how to trigger OAuth 2.0 via custom server-side code. -## Setup +## Running this sample -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 +1. In this sample's directory, run `npm install` to install the dependencies. +2. Create a new application on (New Item > Developer Credentials > OAuth 2.0 credentials). 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. +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. +6. In the terminal, run `npm start`. +7. Visit to start the OAuth 2.0 process. -## Running the demo +### Local ArcGIS REST JS -6. `npm start` -7. Visit http://localhost:3000/authorize to start the OAuth 2.0 process. +If you'd like to use a local version of ArcGIS REST JS, follow the [steps in the parent README](../README.md#local-arcgis-rest-js-npm), referencing these packages that this sample uses as necessary: + +- `arcgis-rest-request` +- `arcgis-rest-developer-credentials` diff --git a/samples/feature-service-browser/README.md b/samples/feature-service-browser/README.md index 1f28ddb..a018831 100644 --- a/samples/feature-service-browser/README.md +++ b/samples/feature-service-browser/README.md @@ -1,8 +1,20 @@ -# Running this demo +# Feature Service (Browser) -1. Make sure you run `npm run build` in the root folder to setup the dependencies -1. `npm start` -1. Visit http://localhost:8080 +## Running this sample + +For this sample, you do not need to install any dependencies - it uses ArcGIS REST JS from the Unpkg CDN. To run this sample, you just need to host the `index.html` file. There are a variety of ways to do that; one simple way is to use the [serve](https://www.npmjs.com/package/serve) package: + +```bash +npx serve +``` + +Then: + +1. Visit 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. +### Local ArcGIS REST JS + +If you'd like to use a local version of ArcGIS REST JS, follow the [steps in the parent README](../README.md#local-arcgis-rest-js-browser), updating the script tags in these files as necessary: + +- `index.html` diff --git a/samples/feature-service-browser/index.html b/samples/feature-service-browser/index.html index a1d7cf8..95e884b 100644 --- a/samples/feature-service-browser/index.html +++ b/samples/feature-service-browser/index.html @@ -2,6 +2,10 @@ + + + + @@ -49,16 +53,14 @@

query features!

-

Try 'elm' or 'oak' for Type. Try 'fair' or 'good' for Condition.

+

Try 'elm' or 'oak' for Type. Try 'fair' or 'good' for Condition.

- - - + + + + + @@ -24,15 +29,15 @@

get to geocodin!

- +

- +

- +

@@ -42,10 +47,6 @@

get to geocodin!

- - - - @@ -23,10 +14,19 @@

Results

+ + + +
+

Messages

+
+

Results

+
+
+ diff --git a/samples/jsapi-integration/config.js b/samples/jsapi-integration/config.js deleted file mode 100644 index 6cea071..0000000 --- a/samples/jsapi-integration/config.js +++ /dev/null @@ -1,9 +0,0 @@ -/* -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' -*/ -const config = { - clientId: "3CiiHWyTNMIRNyF1", - redirectUri: "http://localhost:8080/authenticate.html" -}; diff --git a/samples/jsapi-integration/config.template.js b/samples/jsapi-integration/config.template.js new file mode 100644 index 0000000..010dfd1 --- /dev/null +++ b/samples/jsapi-integration/config.template.js @@ -0,0 +1,4 @@ +const config = { + clientId: "", + redirectUri: "http://localhost:3000/authenticate" +}; \ No newline at end of file diff --git a/samples/jsapi-integration/index.html b/samples/jsapi-integration/index.html index ea2f780..2dc93c5 100644 --- a/samples/jsapi-integration/index.html +++ b/samples/jsapi-integration/index.html @@ -18,8 +18,8 @@ - - + +