├── packages ├── coding-components │ ├── templates │ │ ├── react │ │ │ ├── public │ │ │ │ └── .gitkeep │ │ │ ├── src │ │ │ │ ├── index.css │ │ │ │ ├── components │ │ │ │ │ ├── ArcadeEditor.css │ │ │ │ │ └── ArcadeEditor.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── functions │ │ │ │ │ └── load-data.ts │ │ │ ├── index.html │ │ │ ├── .gitignore │ │ │ ├── tsconfig.json │ │ │ ├── vite.config.js │ │ │ ├── package.json │ │ │ └── README.md │ │ ├── vite │ │ │ ├── public │ │ │ │ └── .gitkeep │ │ │ ├── .gitignore │ │ │ ├── package.json │ │ │ ├── index.html │ │ │ ├── style.css │ │ │ ├── vite.config.js │ │ │ ├── README.md │ │ │ ├── load-data.js │ │ │ └── main.js │ │ ├── angular │ │ │ ├── README.md │ │ │ ├── src │ │ │ │ ├── zone-flags.ts │ │ │ │ ├── favicon.ico │ │ │ │ ├── styles.css │ │ │ │ ├── app │ │ │ │ │ ├── app.component.css │ │ │ │ │ ├── app.component.html │ │ │ │ │ ├── app.module.ts │ │ │ │ │ ├── app.component.spec.ts │ │ │ │ │ └── app.component.ts │ │ │ │ ├── index.html │ │ │ │ ├── main.ts │ │ │ │ └── functions │ │ │ │ │ └── load-data.service.ts │ │ │ ├── tsconfig.app.json │ │ │ ├── tsconfig.spec.json │ │ │ ├── .gitignore │ │ │ ├── tsconfig.json │ │ │ ├── package.json │ │ │ └── angular.json │ │ ├── webpack │ │ │ ├── .gitignore │ │ │ ├── src │ │ │ │ ├── icons │ │ │ │ │ └── favicon.png │ │ │ │ ├── index.css │ │ │ │ ├── load-data.js │ │ │ │ └── index.js │ │ │ ├── public │ │ │ │ └── index.html │ │ │ ├── readme.md │ │ │ ├── package.json │ │ │ └── webpack.config.js │ │ ├── vue │ │ │ ├── .vscode │ │ │ │ └── extensions.json │ │ │ ├── public │ │ │ │ └── favicon.ico │ │ │ ├── jsconfig.json │ │ │ ├── src │ │ │ │ ├── App.vue │ │ │ │ ├── assets │ │ │ │ │ └── main.css │ │ │ │ ├── main.js │ │ │ │ ├── utils │ │ │ │ │ └── load-data.js │ │ │ │ └── components │ │ │ │ │ └── ArcadeEditor.vue │ │ │ ├── index.html │ │ │ ├── .gitignore │ │ │ ├── package.json │ │ │ ├── README.md │ │ │ └── vite.config.js │ │ └── amd-script-tag │ │ │ ├── README.md │ │ │ └── index.html │ └── README.MD ├── map-components │ ├── templates │ │ ├── react │ │ │ ├── public │ │ │ │ └── .gitkeep │ │ │ ├── src │ │ │ │ ├── index.css │ │ │ │ └── index.tsx │ │ │ ├── index.html │ │ │ ├── .gitignore │ │ │ ├── vite.config.js │ │ │ ├── package.json │ │ │ └── README.md │ │ ├── angular │ │ │ ├── src │ │ │ │ ├── app │ │ │ │ │ ├── app.component.css │ │ │ │ │ ├── app.component.html │ │ │ │ │ ├── app.module.ts │ │ │ │ │ ├── app.component.ts │ │ │ │ │ └── app.component.spec.ts │ │ │ │ ├── zone-flags.ts │ │ │ │ ├── favicon.ico │ │ │ │ ├── styles.css │ │ │ │ ├── index.html │ │ │ │ └── main.ts │ │ │ ├── README.md │ │ │ ├── tsconfig.app.json │ │ │ ├── tsconfig.spec.json │ │ │ ├── .gitignore │ │ │ ├── tsconfig.json │ │ │ ├── package.json │ │ │ └── angular.json │ │ ├── amd-script-tag │ │ │ ├── README.md │ │ │ └── index.html │ │ ├── webpack │ │ │ ├── .gitignore │ │ │ ├── src │ │ │ │ ├── index.css │ │ │ │ └── index.js │ │ │ ├── public │ │ │ │ └── index.html │ │ │ ├── README.md │ │ │ ├── package.json │ │ │ └── webpack.config.js │ │ ├── vue │ │ │ ├── .vscode │ │ │ │ └── extensions.json │ │ │ ├── public │ │ │ │ └── favicon.ico │ │ │ ├── src │ │ │ │ ├── main.js │ │ │ │ ├── App.vue │ │ │ │ ├── components │ │ │ │ │ └── Map.vue │ │ │ │ └── assets │ │ │ │ │ └── main.css │ │ │ ├── jsconfig.json │ │ │ ├── index.html │ │ │ ├── .gitignore │ │ │ ├── package.json │ │ │ ├── vite.config.js │ │ │ └── README.md │ │ └── vite │ │ │ ├── styles.css │ │ │ ├── .gitignore │ │ │ ├── main.js │ │ │ ├── package.json │ │ │ ├── index.html │ │ │ ├── vite.config.js │ │ │ └── README.md │ ├── tutorials │ │ ├── create-a-web-app-using-components-initial │ │ │ ├── style.css │ │ │ ├── package.json │ │ │ ├── .gitignore │ │ │ ├── index.html │ │ │ └── main.js │ │ └── create-a-web-app-using-components-solution │ │ │ ├── README.md │ │ │ ├── style.css │ │ │ ├── .gitignore │ │ │ ├── package.json │ │ │ ├── index.html │ │ │ └── main.js │ └── README.MD └── charts-components │ ├── templates │ ├── amd-script-tag │ │ ├── README.md │ │ └── index.html │ ├── angular │ │ ├── README.md │ │ ├── src │ │ │ ├── app │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.module.ts │ │ │ │ ├── app.component.spec.ts │ │ │ │ └── app.component.ts │ │ │ ├── styles.css │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ └── functions │ │ │ │ └── create-feature-layer.service.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.spec.json │ │ ├── .gitignore │ │ ├── tsconfig.json │ │ ├── package.json │ │ └── angular.json │ ├── vite │ │ ├── style.css │ │ ├── .gitignore │ │ ├── index.html │ │ ├── package.json │ │ ├── vite.config.js │ │ ├── create-feature-layer.js │ │ ├── README.md │ │ └── main.js │ ├── webpack │ │ ├── .gitignore │ │ ├── src │ │ │ ├── index.css │ │ │ ├── create-feature-layer.js │ │ │ └── index.js │ │ ├── public │ │ │ └── index.html │ │ ├── README.md │ │ ├── package.json │ │ └── webpack.config.js │ ├── vue │ │ ├── src │ │ │ ├── assets │ │ │ │ └── main.css │ │ │ ├── App.vue │ │ │ ├── utils │ │ │ │ └── create-feature-layer.js │ │ │ ├── main.js │ │ │ └── components │ │ │ │ └── Scatterplot.vue │ │ ├── index.html │ │ ├── .gitignore │ │ ├── package.json │ │ ├── vite.config.js │ │ └── README.md │ └── react │ │ ├── src │ │ ├── components │ │ │ ├── Charts.css │ │ │ └── Scatterplot.tsx │ │ ├── functions │ │ │ └── create-feature-layer.ts │ │ └── index.tsx │ │ ├── index.html │ │ ├── .gitignore │ │ ├── tsconfig.json │ │ ├── vite.config.js │ │ ├── package.json │ │ └── README.md │ ├── tutorials │ ├── charts-components-with-map-components-initial │ │ ├── main.js │ │ ├── style.css │ │ ├── .gitignore │ │ ├── package.json │ │ └── index.html │ └── charts-components-with-map-components-solution │ │ ├── .gitignore │ │ ├── README.md │ │ ├── style.css │ │ ├── package.json │ │ ├── index.html │ │ └── main.js │ └── README.MD ├── .husky └── commit-msg ├── .gitattributes ├── .editorconfig ├── .yarnrc.yml ├── .gitignore ├── package.json ├── commitlint.config.js ├── LICENSE.md ├── .prettierrc.js ├── README.md └── .syncpackrc.js /packages/coding-components/templates/react/public/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/coding-components/templates/vite/public/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/map-components/templates/react/public/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/map-components/templates/angular/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/map-components/templates/amd-script-tag/README.md: -------------------------------------------------------------------------------- 1 | # Map components AMD template -------------------------------------------------------------------------------- /packages/map-components/tutorials/create-a-web-app-using-components-initial/style.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/charts-components/templates/amd-script-tag/README.md: -------------------------------------------------------------------------------- 1 | # Charts components AMD template -------------------------------------------------------------------------------- /packages/charts-components/templates/angular/README.md: -------------------------------------------------------------------------------- 1 | # Charts components Angular template -------------------------------------------------------------------------------- /packages/charts-components/tutorials/charts-components-with-map-components-initial/main.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/charts-components/tutorials/charts-components-with-map-components-initial/style.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/coding-components/templates/angular/README.md: -------------------------------------------------------------------------------- 1 | # Coding components Angular template -------------------------------------------------------------------------------- /packages/map-components/templates/angular/README.md: -------------------------------------------------------------------------------- 1 | # Map components Angular template 2 | -------------------------------------------------------------------------------- /packages/charts-components/templates/vite/style.css: -------------------------------------------------------------------------------- 1 | .chart-container { 2 | height: 800px; 3 | } 4 | -------------------------------------------------------------------------------- /packages/map-components/templates/webpack/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .DS_store 4 | .DS_Store -------------------------------------------------------------------------------- /packages/charts-components/templates/webpack/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .DS_store 4 | .DS_Store -------------------------------------------------------------------------------- /packages/charts-components/templates/webpack/src/index.css: -------------------------------------------------------------------------------- 1 | .chart-container { 2 | height: 800px; 3 | } 4 | -------------------------------------------------------------------------------- /packages/charts-components/tutorials/charts-components-with-map-components-initial/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /packages/charts-components/tutorials/charts-components-with-map-components-solution/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /packages/coding-components/templates/webpack/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .DS_store 4 | .DS_Store -------------------------------------------------------------------------------- /packages/charts-components/templates/vue/src/assets/main.css: -------------------------------------------------------------------------------- 1 | .chart-container { 2 | height: 800px; 3 | } 4 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | yarn commitlint --edit ${1} 5 | -------------------------------------------------------------------------------- /packages/charts-components/templates/angular/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .chart-component { 2 | height: 800px; 3 | } 4 | -------------------------------------------------------------------------------- /packages/coding-components/templates/angular/src/zone-flags.ts: -------------------------------------------------------------------------------- 1 | (window as any).__zone_symbol__UNPATCHED_EVENTS = ['click']; 2 | -------------------------------------------------------------------------------- /packages/map-components/templates/angular/src/zone-flags.ts: -------------------------------------------------------------------------------- 1 | (window as any).__zone_symbol__UNPATCHED_EVENTS = ['click']; 2 | -------------------------------------------------------------------------------- /packages/map-components/tutorials/create-a-web-app-using-components-solution/README.md: -------------------------------------------------------------------------------- 1 | # Create a web app using components (solution) 2 | -------------------------------------------------------------------------------- /packages/charts-components/templates/angular/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /packages/coding-components/templates/react/src/index.css: -------------------------------------------------------------------------------- 1 | @import 'https://js.arcgis.com/4.30/@arcgis/core/assets/esri/themes/light/main.css'; -------------------------------------------------------------------------------- /packages/charts-components/tutorials/charts-components-with-map-components-solution/README.md: -------------------------------------------------------------------------------- 1 | # Charts components with Map components (solution) 2 | -------------------------------------------------------------------------------- /packages/map-components/templates/vue/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /packages/coding-components/templates/vue/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /packages/charts-components/templates/angular/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | /.yarn/** linguist-vendored 2 | /.yarn/releases/* binary 3 | /.yarn/plugins/**/* binary 4 | /.pnp.* binary linguist-generated 5 | -------------------------------------------------------------------------------- /packages/charts-components/templates/react/src/components/Charts.css: -------------------------------------------------------------------------------- 1 | @import '@arcgis/core/assets/esri/themes/dark/main.css'; 2 | 3 | .chart-component { 4 | height: 800px; 5 | } 6 | -------------------------------------------------------------------------------- /packages/map-components/templates/vue/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Esri/arcgis-maps-sdk-javascript-samples-beta/HEAD/packages/map-components/templates/vue/public/favicon.ico -------------------------------------------------------------------------------- /packages/map-components/templates/vue/src/main.js: -------------------------------------------------------------------------------- 1 | import './assets/main.css' 2 | 3 | import { createApp } from 'vue' 4 | import App from './App.vue' 5 | 6 | createApp(App).mount('#app') 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | insert_final_newline = true 6 | 7 | [*.{js,json,yml}] 8 | charset = utf-8 9 | indent_style = space 10 | indent_size = 2 11 | -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | compressionLevel: mixed 2 | 3 | enableGlobalCache: false 4 | 5 | enableTelemetry: false 6 | 7 | nodeLinker: node-modules 8 | 9 | yarnPath: .yarn/releases/yarn-4.0.2.cjs 10 | -------------------------------------------------------------------------------- /packages/coding-components/templates/vue/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Esri/arcgis-maps-sdk-javascript-samples-beta/HEAD/packages/coding-components/templates/vue/public/favicon.ico -------------------------------------------------------------------------------- /packages/map-components/templates/angular/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Esri/arcgis-maps-sdk-javascript-samples-beta/HEAD/packages/map-components/templates/angular/src/favicon.ico -------------------------------------------------------------------------------- /packages/charts-components/templates/angular/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Esri/arcgis-maps-sdk-javascript-samples-beta/HEAD/packages/charts-components/templates/angular/src/favicon.ico -------------------------------------------------------------------------------- /packages/charts-components/templates/vue/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | -------------------------------------------------------------------------------- /packages/coding-components/templates/angular/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Esri/arcgis-maps-sdk-javascript-samples-beta/HEAD/packages/coding-components/templates/angular/src/favicon.ico -------------------------------------------------------------------------------- /packages/coding-components/templates/vue/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "paths": { 4 | "@/*": ["./src/*"] 5 | } 6 | }, 7 | "exclude": ["node_modules", "dist"] 8 | } 9 | -------------------------------------------------------------------------------- /packages/map-components/templates/vue/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "paths": { 4 | "@/*": ["./src/*"] 5 | } 6 | }, 7 | "exclude": ["node_modules", "dist"] 8 | } 9 | -------------------------------------------------------------------------------- /packages/coding-components/templates/vue/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | -------------------------------------------------------------------------------- /packages/coding-components/templates/webpack/src/icons/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Esri/arcgis-maps-sdk-javascript-samples-beta/HEAD/packages/coding-components/templates/webpack/src/icons/favicon.png -------------------------------------------------------------------------------- /packages/map-components/templates/angular/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | body, 3 | html { 4 | padding: 0; 5 | margin: 0; 6 | width: 100%; 7 | height: 100%; 8 | } 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | 3 | # Yarn 4 | .pnp.* 5 | .yarn/* 6 | !.yarn/patches 7 | !.yarn/plugins 8 | !.yarn/releases 9 | !.yarn/sdks 10 | !.yarn/versions 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | .pnpm-debug.log* 15 | 16 | .DS_Store -------------------------------------------------------------------------------- /packages/map-components/templates/react/src/index.css: -------------------------------------------------------------------------------- 1 | @import 'https://js.arcgis.com/4.30/@arcgis/core/assets/esri/themes/dark/main.css'; 2 | 3 | #root, 4 | html, 5 | body, 6 | arcgis-map { 7 | height: 100vh; 8 | width: 100vw; 9 | margin: 0; 10 | padding: 0; 11 | } -------------------------------------------------------------------------------- /packages/map-components/templates/vite/styles.css: -------------------------------------------------------------------------------- 1 | @import 'https://js.arcgis.com/4.30/@arcgis/core/assets/esri/themes/dark/main.css'; 2 | 3 | html, 4 | body { 5 | background-color: var(--calcite-ui-foreground-2); 6 | padding: 0; 7 | margin: 0; 8 | width: 100vw; 9 | height: 100vh; 10 | } -------------------------------------------------------------------------------- /packages/charts-components/README.MD: -------------------------------------------------------------------------------- 1 | # Charts components (beta) 2 | 3 | > **Disclaimer:** Components are in beta. Please do not contact Esri Technical Support for assistance. 4 | 5 | These templates and samples are for [@arcgis/charts-components](https://www.npmjs.com/package/@arcgis/charts-components) 6 | -------------------------------------------------------------------------------- /packages/map-components/templates/webpack/src/index.css: -------------------------------------------------------------------------------- 1 | @import 'https://js.arcgis.com/4.30/@arcgis/core/assets/esri/themes/dark/main.css'; 2 | 3 | html, 4 | body { 5 | background-color: var(--calcite-ui-foreground-2); 6 | padding: 0; 7 | margin: 0; 8 | width: 100vw; 9 | height: 100vh; 10 | } -------------------------------------------------------------------------------- /packages/map-components/templates/angular/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": ["src/zone-flags.ts", "src/main.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/coding-components/templates/angular/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": ["src/zone-flags.ts", "src/main.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/map-components/templates/vue/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /packages/map-components/tutorials/create-a-web-app-using-components-solution/style.css: -------------------------------------------------------------------------------- 1 | /* import the `@arcgis/core` light theme */ 2 | @import "https://js.arcgis.com/4.30/@arcgis/core/assets/esri/themes/light/main.css"; 3 | 4 | html, 5 | body, 6 | arcgis-map { 7 | height: 100%; 8 | width: 100%; 9 | margin: 0; 10 | padding: 0; 11 | } 12 | -------------------------------------------------------------------------------- /packages/charts-components/templates/angular/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": ["src/main.ts"], 9 | "include": ["src/**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /packages/coding-components/templates/amd-script-tag/README.md: -------------------------------------------------------------------------------- 1 | # Coding components AMD template 2 | 3 | Since the ArcGIS Maps SDK for JavaScript and Calcite Components are dependencies of Coding Components they have to be loaded first. Coding Components will detect that it is used under AMD and will require its Maps SDK dependencies through AMD loading. 4 | -------------------------------------------------------------------------------- /packages/map-components/README.MD: -------------------------------------------------------------------------------- 1 | > ⚠️ ArcGIS Maps SDK for JavaScript components are no longer in beta. This repository has been archived. Please visit https://github.com/Esri/jsapi-resources for the latest samples. 2 | 3 | # Map components 4 | 5 | These templates and samples are for [@arcgis/map-components](https://www.npmjs.com/package/@arcgis/map-components) 6 | 7 | -------------------------------------------------------------------------------- /packages/coding-components/README.MD: -------------------------------------------------------------------------------- 1 | > ⚠️ ArcGIS Maps SDK for JavaScript components are no longer in beta. This repository has been archived. Please visit https://github.com/Esri/jsapi-resources for the latest samples. 2 | 3 | # Coding components 4 | 5 | These templates and samples are for [@arcgis/coding-components](https://www.npmjs.com/package/@arcgis/coding-components) 6 | -------------------------------------------------------------------------------- /packages/map-components/tutorials/create-a-web-app-using-components-initial/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "create-a-web-app-using-components-initial", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "devDependencies": { 11 | "vite": "^5.1.3" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/charts-components/templates/angular/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Charts components Angular template 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /packages/coding-components/templates/angular/src/styles.css: -------------------------------------------------------------------------------- 1 | @import "https://js.arcgis.com/coding-components/4.30/arcgis-coding-components.css"; 2 | @import "https://js.arcgis.com/calcite-components/2.8.0/calcite.css"; 3 | @import "https://js.arcgis.com/4.30/@arcgis/core/assets/esri/themes/light/main.css"; 4 | 5 | html, 6 | body { 7 | background-color: var(--calcite-ui-foreground-2); 8 | } 9 | -------------------------------------------------------------------------------- /packages/charts-components/templates/angular/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "include": [ 11 | "src/**/*.spec.ts", 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /packages/coding-components/templates/angular/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "include": [ 11 | "src/**/*.spec.ts", 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /packages/map-components/templates/angular/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "include": [ 11 | "src/**/*.spec.ts", 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /packages/charts-components/templates/vue/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Charts components Vue template 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /packages/charts-components/templates/vite/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? -------------------------------------------------------------------------------- /packages/coding-components/templates/vite/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /packages/map-components/templates/vue/src/components/Map.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /packages/charts-components/templates/react/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Charts components React template 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /packages/coding-components/templates/angular/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .editor-wrapper { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | height: 70vh; 6 | min-height: 400px; 7 | width: 100%; 8 | box-sizing: border-box; 9 | padding: 1rem; 10 | } 11 | 12 | arcgis-arcade-editor { 13 | width: 100%; 14 | max-width: 100%; 15 | box-sizing: border-box; 16 | } -------------------------------------------------------------------------------- /packages/map-components/templates/vite/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | public/assets 15 | 16 | # Editor directories and files 17 | .vscode/* 18 | !.vscode/extensions.json 19 | .idea 20 | .DS_Store 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | -------------------------------------------------------------------------------- /packages/map-components/templates/vue/src/assets/main.css: -------------------------------------------------------------------------------- 1 | @import 'https://js.arcgis.com/4.30/@arcgis/core/assets/esri/themes/dark/main.css'; 2 | 3 | html, 4 | main, 5 | body, 6 | arcgis-map { 7 | background-color: var(--calcite-ui-foreground-2); 8 | padding: 0; 9 | margin: 0; 10 | width: 100vw; 11 | height: 100vh; 12 | } 13 | 14 | #app { 15 | padding: 0; 16 | margin: 0; 17 | width: 100vw; 18 | height: 100vh; 19 | } -------------------------------------------------------------------------------- /packages/charts-components/tutorials/charts-components-with-map-components-initial/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "charts-components-with-map-components-initial", 3 | "private": true, 4 | "scripts": { 5 | "dev": "vite", 6 | "build": "vite build", 7 | "preview": "vite preview" 8 | }, 9 | "dependencies": { 10 | "@arcgis/core": "~4.30.8" 11 | }, 12 | "devDependencies": { 13 | "vite": "^5.1.3" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/map-components/templates/vue/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Map components Vue template 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/coding-components/templates/angular/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Coding components Angular template 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /packages/coding-components/templates/vue/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Coding components Vue template 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/charts-components/tutorials/charts-components-with-map-components-initial/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | ArcGIS Maps SDK for JavaScript Tutorials: Use Charts Components with Map Components 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/map-components/templates/vite/main.js: -------------------------------------------------------------------------------- 1 | import "./styles.css"; 2 | // Lazy loading ESM 3 | import { defineCustomElements } from "@arcgis/map-components/dist/loader"; 4 | defineCustomElements(window, { resourcesUrl: "https://js.arcgis.com/map-components/4.30/assets" }); 5 | 6 | const mapElement = document.querySelector('arcgis-map'); 7 | mapElement.addEventListener('arcgisViewReadyChange', event => { 8 | console.log('MapView ready', event); 9 | }); -------------------------------------------------------------------------------- /packages/map-components/tutorials/create-a-web-app-using-components-initial/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | package-lock.json 12 | dist 13 | dist-ssr 14 | *.local 15 | 16 | # Editor directories and files 17 | .vscode/* 18 | !.vscode/extensions.json 19 | .idea 20 | .DS_Store 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | -------------------------------------------------------------------------------- /packages/charts-components/tutorials/charts-components-with-map-components-solution/style.css: -------------------------------------------------------------------------------- 1 | /* import the `@arcgis/core` light theme */ 2 | @import "https://js.arcgis.com/4.30/@arcgis/core/assets/esri/themes/light/main.css"; 3 | 4 | html, 5 | body { 6 | padding: 0; 7 | margin: 0; 8 | height: 100%; 9 | width: 100%; 10 | } 11 | 12 | #scatterplot { 13 | position: absolute; 14 | bottom: 100px; 15 | left: 30px; 16 | height: 40%; 17 | width: 50%; 18 | } 19 | -------------------------------------------------------------------------------- /packages/map-components/templates/react/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Map components React template 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/map-components/tutorials/create-a-web-app-using-components-solution/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | package-lock.json 12 | dist 13 | dist-ssr 14 | *.local 15 | 16 | # Editor directories and files 17 | .vscode/* 18 | !.vscode/extensions.json 19 | .idea 20 | .DS_Store 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | -------------------------------------------------------------------------------- /packages/coding-components/templates/react/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Coding components React template 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/charts-components/templates/react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | /public/assets/ 8 | 9 | # testing 10 | /coverage 11 | 12 | # production 13 | /build 14 | /dist 15 | 16 | # misc 17 | .DS_Store 18 | .env.local 19 | .env.development.local 20 | .env.test.local 21 | .env.production.local 22 | 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* -------------------------------------------------------------------------------- /packages/map-components/templates/react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | /public/assets/ 8 | 9 | # testing 10 | /coverage 11 | 12 | # production 13 | /build 14 | /dist 15 | 16 | # misc 17 | .DS_Store 18 | .env.local 19 | .env.development.local 20 | .env.test.local 21 | .env.production.local 22 | 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | -------------------------------------------------------------------------------- /packages/charts-components/templates/vite/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Charts components Vite template 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /packages/coding-components/templates/react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | /public/assets/ 8 | 9 | # testing 10 | /coverage 11 | 12 | # production 13 | /build 14 | /dist 15 | 16 | # misc 17 | .DS_Store 18 | .env.local 19 | .env.development.local 20 | .env.test.local 21 | .env.production.local 22 | 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | -------------------------------------------------------------------------------- /packages/map-components/templates/vite/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "map-components-vite-template", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "@arcgis/core": "~4.30.8", 12 | "@arcgis/map-components": "~4.30.5", 13 | "@esri/calcite-components": "^2.8.5" 14 | }, 15 | "devDependencies": { 16 | "vite": "^5.1.3" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/coding-components/templates/vite/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "coding-components-vite-template", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "@arcgis/coding-components": "~4.30.5", 12 | "@arcgis/core": "~4.30.8", 13 | "@esri/calcite-components": "^2.8.5" 14 | }, 15 | "devDependencies": { 16 | "vite": "^5.1.3" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/charts-components/templates/vue/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | .DS_Store 12 | dist 13 | dist-ssr 14 | coverage 15 | *.local 16 | 17 | /cypress/videos/ 18 | /cypress/screenshots/ 19 | 20 | # Editor directories and files 21 | .vscode/* 22 | !.vscode/extensions.json 23 | .idea 24 | *.suo 25 | *.ntvs* 26 | *.njsproj 27 | *.sln 28 | *.sw? 29 | 30 | *.tsbuildinfo 31 | -------------------------------------------------------------------------------- /packages/coding-components/templates/vue/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | .DS_Store 12 | dist 13 | dist-ssr 14 | coverage 15 | *.local 16 | 17 | /cypress/videos/ 18 | /cypress/screenshots/ 19 | 20 | # Editor directories and files 21 | .vscode/* 22 | !.vscode/extensions.json 23 | .idea 24 | *.suo 25 | *.ntvs* 26 | *.njsproj 27 | *.sln 28 | *.sw? 29 | 30 | *.tsbuildinfo 31 | -------------------------------------------------------------------------------- /packages/map-components/templates/vue/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | .DS_Store 12 | dist 13 | dist-ssr 14 | coverage 15 | *.local 16 | 17 | /cypress/videos/ 18 | /cypress/screenshots/ 19 | 20 | # Editor directories and files 21 | .vscode/* 22 | !.vscode/extensions.json 23 | .idea 24 | *.suo 25 | *.ntvs* 26 | *.njsproj 27 | *.sln 28 | *.sw? 29 | 30 | *.tsbuildinfo 31 | .DS_Store -------------------------------------------------------------------------------- /packages/map-components/tutorials/create-a-web-app-using-components-initial/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | ArcGIS Maps SDK for JavaScript Tutorials: Create a web app using components 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/charts-components/templates/webpack/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Charts components webpack template 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /packages/map-components/templates/angular/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Map components Angular template 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/coding-components/templates/webpack/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Coding components webpack template 9 | 10 | 11 | 12 |
13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/map-components/tutorials/create-a-web-app-using-components-solution/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "create-a-web-app-using-components-solution", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "@arcgis/core": "~4.30.8", 12 | "@arcgis/map-components": "~4.30.5", 13 | "@esri/calcite-components": "^2.8.5" 14 | }, 15 | "devDependencies": { 16 | "vite": "^5.1.3" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/map-components/templates/vue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "map-components-vue-template", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "@arcgis/core": "~4.30.8", 12 | "@arcgis/map-components": "~4.30.5", 13 | "@esri/calcite-components": "^2.8.5", 14 | "vue": "^3.4.19" 15 | }, 16 | "devDependencies": { 17 | "@vitejs/plugin-vue": "^5.0.3", 18 | "vite": "^5.1.3" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /packages/coding-components/templates/vue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "coding-components-vue-template", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "@arcgis/coding-components": "~4.30.5", 12 | "@arcgis/core": "~4.30.8", 13 | "@esri/calcite-components": "^2.8.5", 14 | "vue": "^3.4.19" 15 | }, 16 | "devDependencies": { 17 | "@vitejs/plugin-vue": "^5.0.3", 18 | "vite": "^5.1.3" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /packages/charts-components/templates/vite/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "charts-components-vite-template", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "@arcgis/charts-components": "~4.30.2", 12 | "@arcgis/charts-model": "~4.30.2", 13 | "@arcgis/core": "~4.30.8", 14 | "@esri/calcite-components": "^2.8.5" 15 | }, 16 | "devDependencies": { 17 | "resolve-pkg": "^2.0.0", 18 | "vite": "^5.1.3" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /packages/charts-components/tutorials/charts-components-with-map-components-solution/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "charts-components-with-map-components-solution", 3 | "private": true, 4 | "scripts": { 5 | "dev": "vite", 6 | "build": "vite build", 7 | "preview": "vite preview" 8 | }, 9 | "dependencies": { 10 | "@arcgis/charts-components": "~4.30.2", 11 | "@arcgis/core": "~4.30.8", 12 | "@arcgis/map-components": "~4.30.5", 13 | "@esri/calcite-components": "^2.8.5" 14 | }, 15 | "devDependencies": { 16 | "vite": "^5.1.3" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/coding-components/templates/vite/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Coding components Vite template 8 | 9 | 10 |
11 | 12 |
13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /packages/map-components/templates/webpack/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Map components webpack template 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "arcgis-maps-sdk-javascript-samples-beta", 3 | "description": "Code samples and templates for ArcGIS Maps SDK for JavaScript", 4 | "private": true, 5 | "workspaces": [ 6 | "packages/*", 7 | "packages/**/*" 8 | ], 9 | "license": "SEE LICENSE IN LICENSE.md", 10 | "scripts": { 11 | "postinstall": "husky install" 12 | }, 13 | "devDependencies": { 14 | "@commitlint/cli": "19.3.0", 15 | "@commitlint/config-conventional": "19.2.2", 16 | "husky": "9.0.11", 17 | "prettier": "^3.0.0", 18 | "syncpack": "^12.3.0" 19 | }, 20 | "packageManager": "yarn@4.0.2" 21 | } 22 | -------------------------------------------------------------------------------- /packages/charts-components/templates/vue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "charts-components-vue-template", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "@arcgis/charts-components": "~4.30.2", 12 | "@arcgis/charts-model": "~4.30.2", 13 | "@arcgis/core": "~4.30.8", 14 | "@esri/calcite-components": "^2.8.5", 15 | "vue": "^3.4.19" 16 | }, 17 | "devDependencies": { 18 | "@vitejs/plugin-vue": "^5.0.3", 19 | "resolve-pkg": "^2.0.0", 20 | "vite": "^5.1.3" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /packages/map-components/templates/vite/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Map components Vite template 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /packages/coding-components/templates/react/src/components/ArcadeEditor.css: -------------------------------------------------------------------------------- 1 | @import "https://js.arcgis.com/coding-components/4.30/arcgis-coding-components.css"; 2 | @import "https://js.arcgis.com/calcite-components/2.8.0/calcite.css"; 3 | 4 | html, 5 | body { 6 | background-color: var(--calcite-ui-foreground-2); 7 | } 8 | 9 | .editor-wrapper { 10 | display: flex; 11 | flex-direction: column; 12 | align-items: center; 13 | height: 70vh; 14 | min-height: 400px; 15 | width: 100%; 16 | box-sizing: border-box; 17 | padding: 1rem; 18 | } 19 | 20 | arcgis-arcade-editor { 21 | width: 100%; 22 | max-width: 100%; 23 | box-sizing: border-box; 24 | } -------------------------------------------------------------------------------- /packages/map-components/templates/vue/vite.config.js: -------------------------------------------------------------------------------- 1 | import { fileURLToPath, URL } from 'node:url' 2 | 3 | import { defineConfig } from 'vite' 4 | import vue from '@vitejs/plugin-vue' 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig({ 8 | plugins: [ 9 | vue({ 10 | template: { 11 | compilerOptions: { 12 | isCustomElement: (tag) => 13 | tag.startsWith('arcgis-') || tag.startsWith('calcite-'), 14 | }, 15 | }, 16 | }), 17 | ], 18 | server: { 19 | open: true, 20 | }, 21 | resolve: { 22 | alias: { 23 | '@': fileURLToPath(new URL('./src', import.meta.url)) 24 | } 25 | } 26 | }) 27 | -------------------------------------------------------------------------------- /packages/charts-components/tutorials/charts-components-with-map-components-solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | ArcGIS Maps SDK for JavaScript Tutorials: Use Charts components with Map components 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/coding-components/templates/vite/style.css: -------------------------------------------------------------------------------- 1 | @import "https://js.arcgis.com/coding-components/4.30/arcgis-coding-components.css"; 2 | @import "https://js.arcgis.com/calcite-components/2.8.0/calcite.css"; 3 | @import "https://js.arcgis.com/4.30/@arcgis/core/assets/esri/themes/light/main.css"; 4 | 5 | html, 6 | body { 7 | background-color: var(--calcite-ui-foreground-2); 8 | } 9 | 10 | .editor-wrapper { 11 | display: flex; 12 | flex-direction: column; 13 | align-items: center; 14 | height: 70vh; 15 | min-height: 400px; 16 | width: 100%; 17 | box-sizing: border-box; 18 | padding: 1rem; 19 | } 20 | 21 | arcgis-arcade-editor { 22 | width: 100%; 23 | max-width: 100%; 24 | box-sizing: border-box; 25 | } -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | module.exports = { extends: ['@commitlint/config-conventional'] }; 17 | -------------------------------------------------------------------------------- /packages/coding-components/templates/webpack/src/index.css: -------------------------------------------------------------------------------- 1 | @import "https://js.arcgis.com/coding-components/4.30/arcgis-coding-components.css"; 2 | @import "https://js.arcgis.com/calcite-components/2.8.0/calcite.css"; 3 | @import "https://js.arcgis.com/4.30/@arcgis/core/assets/esri/themes/light/main.css"; 4 | 5 | html, 6 | body { 7 | background-color: var(--calcite-ui-foreground-2); 8 | } 9 | 10 | .editor-wrapper { 11 | display: flex; 12 | flex-direction: column; 13 | align-items: center; 14 | height: 70vh; 15 | min-height: 400px; 16 | width: 100%; 17 | box-sizing: border-box; 18 | padding: 1rem; 19 | } 20 | 21 | arcgis-arcade-editor { 22 | width: 100%; 23 | max-width: 100%; 24 | box-sizing: border-box; 25 | } -------------------------------------------------------------------------------- /packages/charts-components/templates/react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "allowSyntheticDefaultImports": true, 5 | "baseUrl": "src", 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "isolatedModules": true, 9 | "jsx": "react-jsx", 10 | "lib": ["dom", "dom.iterable", "esnext"], 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "noEmit": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "resolveJsonModule": true, 16 | "skipLibCheck": true, 17 | "strictNullChecks": false, 18 | "strict": true, 19 | "target": "es5", 20 | "useUnknownInCatchVariables": false 21 | }, 22 | "include": ["src"] 23 | } 24 | -------------------------------------------------------------------------------- /packages/coding-components/templates/react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "allowSyntheticDefaultImports": true, 5 | "baseUrl": "src", 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "isolatedModules": true, 9 | "jsx": "react-jsx", 10 | "lib": ["dom", "dom.iterable", "esnext"], 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "noEmit": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "resolveJsonModule": true, 16 | "skipLibCheck": true, 17 | "strictNullChecks": false, 18 | "strict": true, 19 | "target": "es5", 20 | "useUnknownInCatchVariables": false 21 | }, 22 | "include": ["src"] 23 | } 24 | -------------------------------------------------------------------------------- /packages/map-components/tutorials/create-a-web-app-using-components-initial/main.js: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import "./style.css"; 17 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # Licensing 2 | 3 | COPYRIGHT © 2023 Esri 4 | 5 | All rights reserved under the copyright laws of the United States and applicable international laws, treaties, and conventions. 6 | 7 | This material is licensed for use under the Esri Master License Agreement (MLA), and is bound by the terms of that agreement. You may redistribute and use this code without modification, provided you adhere to the terms of the MLA and include this copyright notice. 8 | 9 | See use restrictions at http://www.esri.com/legal/pdfs/mla_e204_e300/english 10 | 11 | For additional information, contact: Environmental Systems Research Institute, Inc. Attn: Contracts and Legal Services Department 380 New York Street Redlands, California, USA 92373 USA 12 | 13 | email: contracts@esri.com -------------------------------------------------------------------------------- /packages/map-components/templates/angular/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /packages/map-components/templates/webpack/README.md: -------------------------------------------------------------------------------- 1 | # Map components Webpack template 2 | 3 | This repository showcases how to integrate the map components using webpack. 4 | 5 | ## Project setup 6 | 7 | Instructions for setup after you save this directory to your machine. 8 | 9 | ### Install dependencies 10 | 11 | #### npm 12 | 13 | ``` 14 | npm install 15 | ``` 16 | 17 | #### yarn 18 | 19 | ``` 20 | yarn install 21 | ``` 22 | 23 | ### Start the development server 24 | 25 | #### npm 26 | 27 | ``` 28 | npm run start 29 | ``` 30 | 31 | #### yarn 32 | 33 | ``` 34 | yarn start 35 | ``` 36 | 37 | ### Generate the production-ready compiled code 38 | 39 | #### npm 40 | 41 | ``` 42 | npm run build 43 | ``` 44 | 45 | #### yarn 46 | 47 | ``` 48 | yarn build 49 | ``` 50 | -------------------------------------------------------------------------------- /packages/charts-components/templates/webpack/README.md: -------------------------------------------------------------------------------- 1 | # Charts components Webpack template 2 | 3 | This repository showcases how to integrate the charts components using webpack. 4 | 5 | ## Project setup 6 | 7 | Instructions for setup after you save this directory to your machine. 8 | 9 | ### Install dependencies 10 | 11 | #### npm 12 | 13 | ``` 14 | npm install 15 | ``` 16 | 17 | #### yarn 18 | 19 | ``` 20 | yarn install 21 | ``` 22 | 23 | ### Start the development server 24 | 25 | #### npm 26 | 27 | ``` 28 | npm run start 29 | ``` 30 | 31 | #### yarn 32 | 33 | ``` 34 | yarn start 35 | ``` 36 | 37 | ### Generate the production-ready compiled code 38 | 39 | #### npm 40 | 41 | ``` 42 | npm run build 43 | ``` 44 | 45 | #### yarn 46 | 47 | ``` 48 | yarn build 49 | ``` 50 | -------------------------------------------------------------------------------- /packages/coding-components/templates/webpack/readme.md: -------------------------------------------------------------------------------- 1 | # Coding components Webpack template 2 | 3 | This repository showcases how to integrate the coding components using webpack. 4 | 5 | ## Project setup 6 | 7 | Instructions for setup after you save this directory to your machine. 8 | 9 | ### Install dependencies 10 | 11 | #### npm 12 | 13 | ``` 14 | npm install 15 | ``` 16 | 17 | #### yarn 18 | 19 | ``` 20 | yarn install 21 | ``` 22 | 23 | ### Start the development server 24 | 25 | #### npm 26 | 27 | ``` 28 | npm run start 29 | ``` 30 | 31 | #### yarn 32 | 33 | ``` 34 | yarn start 35 | ``` 36 | 37 | ### Generate the production-ready compiled code 38 | 39 | #### npm 40 | 41 | ``` 42 | npm run build 43 | ``` 44 | 45 | #### yarn 46 | 47 | ``` 48 | yarn build 49 | ``` 50 | -------------------------------------------------------------------------------- /packages/coding-components/templates/webpack/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "coding-components-webpack-template", 3 | "private": true, 4 | "scripts": { 5 | "build": "webpack --mode production", 6 | "start": "webpack serve --mode development" 7 | }, 8 | "dependencies": { 9 | "@arcgis/coding-components": "~4.30.5", 10 | "@arcgis/core": "~4.30.8", 11 | "@esri/calcite-components": "^2.8.5" 12 | }, 13 | "devDependencies": { 14 | "css-loader": "^6.10.0", 15 | "html-webpack-plugin": "^5.6.0", 16 | "mini-css-extract-plugin": "^2.7.6", 17 | "source-map-loader": "5.0.0", 18 | "style-loader": "4.0.0", 19 | "terser-webpack-plugin": "^5.3.9", 20 | "webpack": "^5.90.3", 21 | "webpack-cli": "^5.1.4", 22 | "webpack-dev-server": "^5.0.1" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/map-components/templates/angular/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | /.angular 9 | 10 | # Node 11 | /node_modules 12 | npm-debug.log 13 | yarn-error.log 14 | 15 | # IDEs and editors 16 | .idea/ 17 | .project 18 | .classpath 19 | .c9/ 20 | *.launch 21 | .settings/ 22 | *.sublime-workspace 23 | 24 | # Visual Studio Code 25 | .vscode/* 26 | !.vscode/settings.json 27 | !.vscode/tasks.json 28 | !.vscode/launch.json 29 | !.vscode/extensions.json 30 | .history/* 31 | 32 | # Miscellaneous 33 | /.angular/cache 34 | .sass-cache/ 35 | /connect.lock 36 | /coverage 37 | /libpeerconnection.log 38 | testem.log 39 | /typings 40 | 41 | # System files 42 | .DS_Store 43 | Thumbs.db 44 | -------------------------------------------------------------------------------- /packages/map-components/templates/webpack/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "map-components-webpack-template", 3 | "private": true, 4 | "scripts": { 5 | "build": "webpack --mode production", 6 | "start": "webpack-dev-server --mode development --open" 7 | }, 8 | "dependencies": { 9 | "@arcgis/core": "~4.30.8", 10 | "@arcgis/map-components": "~4.30.5", 11 | "@esri/calcite-components": "^2.8.5" 12 | }, 13 | "devDependencies": { 14 | "css-loader": "^6.10.0", 15 | "html-webpack-plugin": "^5.6.0", 16 | "mini-css-extract-plugin": "^2.7.6", 17 | "source-map-loader": "5.0.0", 18 | "style-loader": "4.0.0", 19 | "terser-webpack-plugin": "^5.3.9", 20 | "webpack": "^5.90.3", 21 | "webpack-cli": "^5.1.4", 22 | "webpack-dev-server": "^5.0.1" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/coding-components/templates/angular/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | /.angular 9 | 10 | # Node 11 | /node_modules 12 | npm-debug.log 13 | yarn-error.log 14 | 15 | # IDEs and editors 16 | .idea/ 17 | .project 18 | .classpath 19 | .c9/ 20 | *.launch 21 | .settings/ 22 | *.sublime-workspace 23 | 24 | # Visual Studio Code 25 | .vscode/* 26 | !.vscode/settings.json 27 | !.vscode/tasks.json 28 | !.vscode/launch.json 29 | !.vscode/extensions.json 30 | .history/* 31 | 32 | # Miscellaneous 33 | /.angular/cache 34 | .sass-cache/ 35 | /connect.lock 36 | /coverage 37 | /libpeerconnection.log 38 | testem.log 39 | /typings 40 | /src/assets 41 | 42 | # System files 43 | .DS_Store 44 | Thumbs.db 45 | -------------------------------------------------------------------------------- /packages/charts-components/templates/angular/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | 44 | # wrappers 45 | charts-components-angular -------------------------------------------------------------------------------- /packages/map-components/tutorials/create-a-web-app-using-components-solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | ArcGIS Maps SDK for JavaScript Tutorials: Create a web app using components 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /packages/charts-components/templates/webpack/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "charts-components-webpack-template", 3 | "private": true, 4 | "scripts": { 5 | "build": "webpack --mode production", 6 | "start": "webpack serve --mode development" 7 | }, 8 | "dependencies": { 9 | "@arcgis/charts-components": "~4.30.2", 10 | "@arcgis/charts-model": "~4.30.2", 11 | "@arcgis/core": "~4.30.8", 12 | "@esri/calcite-components": "^2.8.5" 13 | }, 14 | "devDependencies": { 15 | "css-loader": "^6.10.0", 16 | "html-webpack-plugin": "^5.6.0", 17 | "mini-css-extract-plugin": "^2.7.6", 18 | "source-map-loader": "5.0.0", 19 | "style-loader": "4.0.0", 20 | "terser-webpack-plugin": "^5.3.9", 21 | "webpack": "^5.90.3", 22 | "webpack-cli": "^5.1.4", 23 | "webpack-dev-server": "^5.0.1" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/coding-components/templates/vue/src/assets/main.css: -------------------------------------------------------------------------------- 1 | @import "https://js.arcgis.com/coding-components/4.30/arcgis-coding-components.css"; 2 | @import "https://js.arcgis.com/calcite-components/2.8.0/calcite.css"; 3 | @import "https://js.arcgis.com/4.30/@arcgis/core/assets/esri/themes/light/main.css"; 4 | 5 | html, 6 | body { 7 | background-color: var(--calcite-ui-foreground-2); 8 | } 9 | 10 | .editor-wrapper { 11 | display: flex; 12 | flex-direction: column; 13 | align-items: center; 14 | height: 70vh; 15 | min-height: 400px; 16 | width: 100%; 17 | box-sizing: border-box; 18 | padding: 1rem; 19 | } 20 | 21 | arcgis-arcade-editor { 22 | width: 100%; 23 | max-width: 100%; 24 | box-sizing: border-box; 25 | } 26 | 27 | calcite-scrim { 28 | position: absolute; 29 | top: 0; 30 | left: 0; 31 | z-index: 10; 32 | } 33 | -------------------------------------------------------------------------------- /packages/charts-components/templates/vite/vite.config.js: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import { defineConfig } from 'vite'; 17 | 18 | export default defineConfig({ 19 | plugins: [], 20 | build: { 21 | outDir: 'dist', 22 | }, 23 | server: { 24 | open: true, 25 | }, 26 | }); 27 | -------------------------------------------------------------------------------- /packages/coding-components/templates/vite/vite.config.js: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import { defineConfig } from "vite"; 17 | 18 | export default defineConfig({ 19 | plugins: [], 20 | build: { 21 | outDir: "dist", 22 | }, 23 | server: { 24 | open: true, 25 | }, 26 | }); 27 | -------------------------------------------------------------------------------- /packages/map-components/templates/vite/vite.config.js: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import { defineConfig } from "vite"; 17 | 18 | export default defineConfig({ 19 | plugins: [], 20 | server: { 21 | open: true, 22 | }, 23 | build: { 24 | outDir: "dist", 25 | }, 26 | }); 27 | -------------------------------------------------------------------------------- /packages/coding-components/templates/angular/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 13 | 14 |
15 | 16 | 17 |
18 | 19 | 20 | 21 |
22 | 23 |
24 |
25 | -------------------------------------------------------------------------------- /packages/map-components/templates/angular/src/main.ts: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 17 | import { AppModule } from './app/app.module'; 18 | 19 | platformBrowserDynamic() 20 | .bootstrapModule(AppModule) 21 | .catch((err) => console.error(err)); 22 | -------------------------------------------------------------------------------- /packages/charts-components/templates/angular/src/main.ts: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; 17 | import { AppModule } from "./app/app.module"; 18 | 19 | platformBrowserDynamic() 20 | .bootstrapModule(AppModule) 21 | .catch((err) => console.error(err)); 22 | -------------------------------------------------------------------------------- /packages/coding-components/templates/angular/src/main.ts: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; 17 | import { AppModule } from "./app/app.module"; 18 | 19 | platformBrowserDynamic() 20 | .bootstrapModule(AppModule) 21 | .catch((err) => console.error(err)); 22 | -------------------------------------------------------------------------------- /packages/charts-components/templates/react/vite.config.js: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import { defineConfig } from 'vite'; 17 | import react from '@vitejs/plugin-react'; 18 | 19 | export default defineConfig({ 20 | plugins: [react()], 21 | server: { 22 | open: true, 23 | }, 24 | build: { 25 | outDir: 'dist', 26 | }, 27 | }); 28 | -------------------------------------------------------------------------------- /packages/coding-components/templates/react/vite.config.js: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import { defineConfig } from "vite"; 17 | import react from "@vitejs/plugin-react"; 18 | 19 | export default defineConfig({ 20 | plugins: [react()], 21 | server: { 22 | open: true, 23 | }, 24 | build: { 25 | outDir: "dist", 26 | }, 27 | }); 28 | -------------------------------------------------------------------------------- /packages/map-components/templates/react/vite.config.js: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import { defineConfig } from "vite"; 17 | import react from "@vitejs/plugin-react"; 18 | 19 | export default defineConfig({ 20 | plugins: [react()], 21 | server: { 22 | open: true, 23 | }, 24 | build: { 25 | outDir: "dist", 26 | }, 27 | }); 28 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | module.exports = { 17 | arrowParens: "always", 18 | bracketSpacing: true, 19 | endOfLine: "auto", 20 | bracketSameLine: false, 21 | jsxSingleQuote: false, 22 | printWidth: 120, 23 | quoteProps: "consistent", 24 | semi: true, 25 | singleQuote: false, 26 | tabWidth: 2, 27 | trailingComma: "none", 28 | useTabs: false 29 | }; 30 | -------------------------------------------------------------------------------- /packages/charts-components/templates/vue/vite.config.js: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import { defineConfig } from 'vite'; 17 | import vue from '@vitejs/plugin-vue'; 18 | 19 | export default defineConfig({ 20 | plugins: [ 21 | vue({ 22 | template: { 23 | compilerOptions: { 24 | isCustomElement: (tag) => tag.includes('arcgis-charts'), 25 | }, 26 | }, 27 | }), 28 | ], 29 | }); 30 | -------------------------------------------------------------------------------- /packages/map-components/templates/angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "forceConsistentCasingInFileNames": true, 7 | "strict": true, 8 | "noImplicitOverride": true, 9 | "noPropertyAccessFromIndexSignature": true, 10 | "noImplicitReturns": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "sourceMap": true, 13 | "downlevelIteration": true, 14 | "experimentalDecorators": true, 15 | "moduleResolution": "node", 16 | "importHelpers": true, 17 | "target": "ES2022", 18 | "module": "ES2022", 19 | "useDefineForClassFields": false, 20 | "lib": ["ES2022", "dom"], 21 | "skipLibCheck": true 22 | }, 23 | "angularCompilerOptions": { 24 | "enableI18nLegacyMessageIdFormat": false, 25 | "strictInjectionParameters": true, 26 | "strictInputAccessModifiers": true, 27 | "strictTemplates": true, 28 | 29 | "fullTemplateTypeCheck": true, 30 | "enableIvy": false 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /packages/map-components/templates/webpack/src/index.js: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | // Lazy loading ESM 17 | import { defineCustomElements } from "@arcgis/map-components/dist/loader"; 18 | defineCustomElements(window, { resourcesUrl: "https://js.arcgis.com/map-components/4.30/assets" }); 19 | 20 | const mapElement = document.querySelector("arcgis-map"); 21 | mapElement.addEventListener("arcgisViewReadyChange", (event) => { 22 | console.log("MapView ready", event); 23 | }); 24 | -------------------------------------------------------------------------------- /packages/charts-components/templates/vite/create-feature-layer.js: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import FeatureLayer from '@arcgis/core/layers/FeatureLayer'; 17 | 18 | /** 19 | * Create a feature layer with a service URL. This will be used to create a chart later. 20 | */ 21 | export async function createFeatureLayer(url) { 22 | const featureLayer = new FeatureLayer({ 23 | url: url, 24 | }); 25 | 26 | await featureLayer.load(); 27 | 28 | return featureLayer; 29 | } 30 | -------------------------------------------------------------------------------- /packages/charts-components/templates/webpack/src/create-feature-layer.js: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import FeatureLayer from '@arcgis/core/layers/FeatureLayer'; 17 | 18 | /** 19 | * Create a feature layer with a service URL. This will be used to create a chart later. 20 | */ 21 | export async function createFeatureLayer(url) { 22 | const featureLayer = new FeatureLayer({ 23 | url: url, 24 | }); 25 | 26 | await featureLayer.load(); 27 | 28 | return featureLayer; 29 | } 30 | -------------------------------------------------------------------------------- /packages/charts-components/templates/angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "outDir": "./dist/out-tsc", 6 | "forceConsistentCasingInFileNames": true, 7 | "strict": true, 8 | "noImplicitOverride": true, 9 | "noPropertyAccessFromIndexSignature": true, 10 | "noImplicitReturns": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "skipLibCheck": true, 13 | "esModuleInterop": true, 14 | "sourceMap": true, 15 | "declaration": false, 16 | "experimentalDecorators": true, 17 | "moduleResolution": "node", 18 | "importHelpers": true, 19 | "target": "ES2022", 20 | "module": "ES2022", 21 | "useDefineForClassFields": false, 22 | "resolveJsonModule": true, 23 | "lib": ["ES2022", "dom"] 24 | }, 25 | "angularCompilerOptions": { 26 | "enableI18nLegacyMessageIdFormat": false, 27 | "strictInjectionParameters": true, 28 | "strictInputAccessModifiers": true, 29 | "strictTemplates": true 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /packages/charts-components/templates/vue/src/utils/create-feature-layer.js: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import FeatureLayer from '@arcgis/core/layers/FeatureLayer'; 17 | 18 | /** 19 | * Create a feature layer with a service URL. This will be used to create a chart later. 20 | */ 21 | export async function createFeatureLayer(url) { 22 | const featureLayer = new FeatureLayer({ 23 | url: url, 24 | }); 25 | 26 | await featureLayer.load(); 27 | 28 | return featureLayer; 29 | } 30 | -------------------------------------------------------------------------------- /packages/map-components/templates/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "map-components-react-template", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "@arcgis/core": "~4.30.8", 12 | "@arcgis/map-components-react": "~4.30.5", 13 | "@esri/calcite-components-react": "^2.8.5", 14 | "react": "^18.3.0", 15 | "react-dom": "^18.3.0" 16 | }, 17 | "devDependencies": { 18 | "@types/react": "^18.3.0", 19 | "@types/react-dom": "^18.3.0", 20 | "@vitejs/plugin-react": "^4.2.1", 21 | "typescript": "~5.4.5", 22 | "vite": "^5.1.3" 23 | }, 24 | "browserslist": { 25 | "production": [ 26 | "last 4 chrome versions", 27 | "last 4 edge versions", 28 | "last 2 firefox versions", 29 | "last 2 safari versions" 30 | ], 31 | "development": [ 32 | "last 4 chrome versions", 33 | "last 4 edge versions", 34 | "last 2 firefox versions", 35 | "last 2 safari versions" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /packages/coding-components/templates/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "coding-components-react-template", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "@arcgis/coding-components-react": "~4.30.5", 12 | "@arcgis/core": "~4.30.8", 13 | "@esri/calcite-components-react": "^2.8.5", 14 | "react": "^18.3.0", 15 | "react-dom": "^18.3.0" 16 | }, 17 | "devDependencies": { 18 | "@types/react": "^18.3.0", 19 | "@types/react-dom": "^18.3.0", 20 | "@vitejs/plugin-react": "^4.2.1", 21 | "typescript": "~5.4.5", 22 | "vite": "^5.1.3" 23 | }, 24 | "browserslist": { 25 | "production": [ 26 | "last 4 chrome versions", 27 | "last 4 edge versions", 28 | "last 2 firefox versions", 29 | "last 2 safari versions" 30 | ], 31 | "development": [ 32 | "last 4 chrome versions", 33 | "last 4 edge versions", 34 | "last 2 firefox versions", 35 | "last 2 safari versions" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /packages/charts-components/templates/react/src/functions/create-feature-layer.ts: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import FeatureLayer from "@arcgis/core/layers/FeatureLayer"; 17 | 18 | /** 19 | * Create a feature layer with a service URL. This will be used to create a chart later. 20 | */ 21 | export async function createFeatureLayer(url: string): Promise { 22 | const featureLayer = new FeatureLayer({ 23 | url: url 24 | }); 25 | 26 | await featureLayer.load(); 27 | 28 | return featureLayer; 29 | } 30 | -------------------------------------------------------------------------------- /packages/coding-components/templates/angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "allowSyntheticDefaultImports": true, // For Calcite components 7 | "forceConsistentCasingInFileNames": true, 8 | "strict": true, 9 | "noImplicitOverride": true, 10 | "noPropertyAccessFromIndexSignature": true, 11 | "noImplicitReturns": true, 12 | "noFallthroughCasesInSwitch": true, 13 | "sourceMap": true, 14 | "downlevelIteration": true, 15 | "experimentalDecorators": true, 16 | "moduleResolution": "node", 17 | "importHelpers": true, 18 | "target": "ES2022", 19 | "module": "ES2022", 20 | "useDefineForClassFields": false, 21 | "lib": ["ES2022", "dom"], 22 | "skipLibCheck": true 23 | }, 24 | "angularCompilerOptions": { 25 | "enableI18nLegacyMessageIdFormat": false, 26 | "strictInjectionParameters": true, 27 | "strictInputAccessModifiers": true, 28 | "strictTemplates": true, 29 | 30 | "fullTemplateTypeCheck": true, 31 | "enableIvy": false 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /packages/map-components/templates/angular/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import { NgModule } from '@angular/core'; 17 | import { BrowserModule } from '@angular/platform-browser'; 18 | import { ComponentLibraryModule } from '@arcgis/map-components-angular'; 19 | 20 | import { AppComponent } from './app.component'; 21 | 22 | @NgModule({ 23 | declarations: [AppComponent], 24 | imports: [BrowserModule, ComponentLibraryModule], 25 | bootstrap: [AppComponent], 26 | }) 27 | export class AppModule {} 28 | -------------------------------------------------------------------------------- /packages/charts-components/templates/angular/src/functions/create-feature-layer.service.ts: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import FeatureLayer from "@arcgis/core/layers/FeatureLayer"; 17 | 18 | /** 19 | * Create a feature layer with a service URL. This will be used to create a chart later. 20 | */ 21 | export async function createFeatureLayer(url: string): Promise { 22 | const featureLayer = new FeatureLayer({ 23 | url: url 24 | }); 25 | 26 | await featureLayer.load(); 27 | 28 | return featureLayer; 29 | } 30 | -------------------------------------------------------------------------------- /packages/charts-components/templates/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "charts-components-react-template", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "@arcgis/charts-components-react": "~4.30.2", 12 | "@arcgis/charts-model": "~4.30.2", 13 | "@arcgis/core": "~4.30.8", 14 | "@esri/calcite-components-react": "^2.8.5", 15 | "react": "^18.3.0", 16 | "react-dom": "^18.3.0" 17 | }, 18 | "devDependencies": { 19 | "@types/react": "^18.3.0", 20 | "@types/react-dom": "^18.3.0", 21 | "@vitejs/plugin-react": "^4.2.1", 22 | "typescript": "~5.4.5", 23 | "vite": "^5.1.3" 24 | }, 25 | "browserslist": { 26 | "production": [ 27 | "last 4 chrome versions", 28 | "last 4 edge versions", 29 | "last 2 firefox versions", 30 | "last 2 safari versions" 31 | ], 32 | "development": [ 33 | "last 4 chrome versions", 34 | "last 4 edge versions", 35 | "last 2 firefox versions", 36 | "last 2 safari versions" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /packages/charts-components/templates/angular/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import { NgModule } from '@angular/core'; 17 | import { BrowserModule } from '@angular/platform-browser'; 18 | import { AppComponent } from './app.component'; 19 | 20 | // Angular wrapper for charts components 21 | import { ComponentLibraryModule } from '@arcgis/charts-components-angular'; 22 | 23 | @NgModule({ 24 | declarations: [AppComponent], 25 | imports: [BrowserModule, ComponentLibraryModule], 26 | bootstrap: [AppComponent], 27 | }) 28 | export class AppModule {} 29 | -------------------------------------------------------------------------------- /packages/charts-components/templates/vue/README.md: -------------------------------------------------------------------------------- 1 | # Vue 3 + Vite 2 | 3 | This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 ` 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /packages/coding-components/templates/vue/vite.config.js: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | import { fileURLToPath, URL } from 'node:url'; 16 | import { defineConfig } from "vite"; 17 | import vue from "@vitejs/plugin-vue"; 18 | 19 | // https://vitejs.dev/config/ 20 | export default defineConfig({ 21 | plugins: [ 22 | vue({ 23 | template: { 24 | compilerOptions: { 25 | isCustomElement: (tag) => tag.startsWith('arcgis-') || tag.startsWith('calcite-') 26 | } 27 | } 28 | }), 29 | ], 30 | server: { 31 | open: true, 32 | }, 33 | resolve: { 34 | alias: { 35 | '@': fileURLToPath(new URL('./src', import.meta.url)) 36 | } 37 | } 38 | }) 39 | -------------------------------------------------------------------------------- /packages/map-components/templates/vite/README.md: -------------------------------------------------------------------------------- 1 | # Map components Vite template 2 | 3 | This project showcases how to integrate the map components using Vite. 4 | 5 | ## Get started 6 | 7 | The project was created using [`npm create vite`](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) with the [vanilla JavaScript template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-vanilla). 8 | 9 | ### Commands 10 | 11 | Instructions for setup after you save this directory to your machine. 12 | 13 | ### Install dependencies 14 | 15 | #### npm 16 | 17 | ``` 18 | npm install 19 | ``` 20 | 21 | #### yarn 22 | 23 | ``` 24 | yarn install 25 | ``` 26 | 27 | ### Dev 28 | 29 | Start local server 30 | 31 | #### npm 32 | 33 | ``` 34 | npm run dev 35 | ``` 36 | 37 | #### yarn 38 | 39 | ``` 40 | yarn dev 41 | ``` 42 | 43 | ### Build 44 | 45 | Build the project to the specified output folder (`/dist`) 46 | 47 | #### npm 48 | 49 | ``` 50 | npm run build 51 | ``` 52 | 53 | #### yarn 54 | 55 | ``` 56 | yarn build 57 | ``` 58 | 59 | ### Preview 60 | 61 | Start local server to serve the specified output folder. You must run `build` before `preview` 62 | 63 | #### npm 64 | 65 | ``` 66 | npm run preview 67 | ``` 68 | 69 | #### yarn 70 | 71 | ``` 72 | yarn preview 73 | ``` 74 | -------------------------------------------------------------------------------- /packages/coding-components/templates/angular/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import { NgModule } from "@angular/core"; 17 | import { BrowserModule } from "@angular/platform-browser"; 18 | import { AppComponent } from "./app.component"; 19 | 20 | // Angular wrapper for coding components 21 | import { ComponentLibraryModule as CodingComponentsModule } from "@arcgis/coding-components-angular"; 22 | import { CalciteComponentsModule } from "@esri/calcite-components-angular"; 23 | 24 | @NgModule({ 25 | declarations: [AppComponent], 26 | imports: [BrowserModule, CodingComponentsModule, CalciteComponentsModule], 27 | bootstrap: [AppComponent] 28 | }) 29 | export class AppModule {} 30 | -------------------------------------------------------------------------------- /packages/charts-components/templates/vite/README.md: -------------------------------------------------------------------------------- 1 | # Charts components Vite template 2 | 3 | This project showcases how to integrate the charts components using vite. 4 | 5 | ## Get started 6 | 7 | The project was created using [`yarn create vite`](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) with the [vanilla JavaScript template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-vanilla). 8 | 9 | ## Commands 10 | 11 | Instructions for setup after you save this directory to your machine. 12 | 13 | ### Install dependencies 14 | 15 | #### npm 16 | 17 | ``` 18 | npm install 19 | ``` 20 | 21 | #### yarn 22 | 23 | ``` 24 | yarn install 25 | ``` 26 | 27 | ### Dev 28 | 29 | Start local server 30 | 31 | #### npm 32 | 33 | ``` 34 | npm run dev 35 | ``` 36 | 37 | #### yarn 38 | 39 | ``` 40 | yarn dev 41 | ``` 42 | 43 | ### Build 44 | 45 | Build the project to the specified output folder (`/dist`) 46 | 47 | #### npm 48 | 49 | ``` 50 | npm run build 51 | ``` 52 | 53 | #### yarn 54 | 55 | ``` 56 | yarn build 57 | ``` 58 | 59 | ### Preview 60 | 61 | Start local server to serve the specified output folder. You must run `build` before `preview` 62 | 63 | #### npm 64 | 65 | ``` 66 | npm run preview 67 | ``` 68 | 69 | #### yarn 70 | 71 | ``` 72 | yarn preview 73 | ``` 74 | -------------------------------------------------------------------------------- /packages/coding-components/templates/vite/README.md: -------------------------------------------------------------------------------- 1 | # Coding components Vite template 2 | 3 | This project showcases how to integrate the coding components using vite. 4 | 5 | ## Get started 6 | 7 | The project was created using [`yarn create vite`](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) with the [vanilla JavaScript template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-vanilla). 8 | 9 | ## Commands 10 | 11 | Instructions for setup after you save this directory to your machine. 12 | 13 | ### Install dependencies 14 | 15 | #### npm 16 | 17 | ``` 18 | npm install 19 | ``` 20 | 21 | #### yarn 22 | 23 | ``` 24 | yarn install 25 | ``` 26 | 27 | ### Dev 28 | 29 | Start local server 30 | 31 | #### npm 32 | 33 | ``` 34 | npm run dev 35 | ``` 36 | 37 | #### yarn 38 | 39 | ``` 40 | yarn dev 41 | ``` 42 | 43 | ### Build 44 | 45 | Build the project to the specified output folder (`/dist`) 46 | 47 | #### npm 48 | 49 | ``` 50 | npm run build 51 | ``` 52 | 53 | #### yarn 54 | 55 | ``` 56 | yarn build 57 | ``` 58 | 59 | ### Preview 60 | 61 | Start local server to serve the specified output folder. You must run `build` before `preview` 62 | 63 | #### npm 64 | 65 | ``` 66 | npm run preview 67 | ``` 68 | 69 | #### yarn 70 | 71 | ``` 72 | yarn preview 73 | ``` 74 | -------------------------------------------------------------------------------- /packages/map-components/templates/vue/README.md: -------------------------------------------------------------------------------- 1 | # Map components Vue 3 + Vite template 2 | 3 | This project showcases how to integrate the map components using Vite. 4 | 5 | ## Get started 6 | 7 | The project was created using [`npm create vite`](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) with the [vanilla JavaScript template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-vanilla). 8 | 9 | ### Commands 10 | 11 | Instructions for setup after you save this directory to your machine. 12 | 13 | ### Install dependencies 14 | 15 | #### npm 16 | 17 | ``` 18 | npm install 19 | ``` 20 | 21 | #### yarn 22 | 23 | ``` 24 | yarn install 25 | ``` 26 | 27 | ### Dev 28 | 29 | Start local server 30 | 31 | #### npm 32 | 33 | ``` 34 | npm run dev 35 | ``` 36 | 37 | #### yarn 38 | 39 | ``` 40 | yarn dev 41 | ``` 42 | 43 | ### Build 44 | 45 | Build the project to the specified output folder (`/dist`) 46 | 47 | #### npm 48 | 49 | ``` 50 | npm run build 51 | ``` 52 | 53 | #### yarn 54 | 55 | ``` 56 | yarn build 57 | ``` 58 | 59 | ### Preview 60 | 61 | Start local server to serve the specified output folder. You must run `build` before `preview` 62 | 63 | #### npm 64 | 65 | ``` 66 | npm run preview 67 | ``` 68 | 69 | #### yarn 70 | 71 | ``` 72 | yarn preview 73 | ``` 74 | -------------------------------------------------------------------------------- /packages/map-components/templates/react/README.md: -------------------------------------------------------------------------------- 1 | # Map components React using Vite template 2 | 3 | This repository showcases how to use map components with [React](https://react.dev/). 4 | 5 | ## Get started 6 | 7 | The project was created using [`yarn create vite`](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) with the [React template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react). 8 | 9 | ### Commands 10 | 11 | Instructions for setup after you save this directory to your machine. 12 | 13 | ### Install dependencies 14 | 15 | #### npm 16 | 17 | ``` 18 | npm install 19 | ``` 20 | 21 | #### yarn 22 | 23 | ``` 24 | yarn install 25 | ``` 26 | 27 | ### Dev 28 | 29 | Start local server 30 | 31 | #### npm 32 | 33 | ``` 34 | npm run dev 35 | ``` 36 | 37 | #### yarn 38 | 39 | ``` 40 | yarn dev 41 | ``` 42 | 43 | ### Build 44 | 45 | Build the project to the specified output folder (`/dist`) 46 | 47 | #### npm 48 | 49 | ``` 50 | npm run build 51 | ``` 52 | 53 | #### yarn 54 | 55 | ``` 56 | yarn build 57 | ``` 58 | 59 | ### Preview 60 | 61 | Start local server to serve the specified output folder. You must run `build` before `preview` 62 | 63 | #### npm 64 | 65 | ``` 66 | npm run preview 67 | ``` 68 | 69 | #### yarn 70 | 71 | ``` 72 | yarn preview 73 | ``` 74 | -------------------------------------------------------------------------------- /packages/map-components/templates/angular/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import { Component, OnInit } from "@angular/core"; 17 | import { defineCustomElements } from "@arcgis/map-components/dist/loader"; 18 | 19 | @Component({ 20 | selector: "app-root", 21 | templateUrl: "./app.component.html", 22 | styleUrls: ["./app.component.css"] 23 | }) 24 | export class AppComponent implements OnInit { 25 | title = "map-components-angular-template"; 26 | 27 | arcgisViewReadyChange(event: any) { 28 | console.log("MapView ready", event); 29 | } 30 | 31 | ngOnInit(): void { 32 | defineCustomElements(window, { resourcesUrl: "https://js.arcgis.com/map-components/4.30/assets" }); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /packages/charts-components/templates/react/README.md: -------------------------------------------------------------------------------- 1 | # Charts components React using Vite template 2 | 3 | This repository showcases how to integrate the charts components with [React](https://react.dev/). 4 | 5 | ## Get started 6 | 7 | The project was created using [`yarn create vite`](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) with the [React template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react). 8 | 9 | ## Commands 10 | 11 | Instructions for setup after you save this directory to your machine. 12 | 13 | ### Install dependencies 14 | 15 | #### npm 16 | 17 | ``` 18 | npm install 19 | ``` 20 | 21 | #### yarn 22 | 23 | ``` 24 | yarn install 25 | ``` 26 | 27 | ### Dev 28 | 29 | Start local server 30 | 31 | #### npm 32 | 33 | ``` 34 | npm run dev 35 | ``` 36 | 37 | #### yarn 38 | 39 | ``` 40 | yarn dev 41 | ``` 42 | 43 | ### Build 44 | 45 | Build the project to the specified output folder (`/dist`) 46 | 47 | #### npm 48 | 49 | ``` 50 | npm run build 51 | ``` 52 | 53 | #### yarn 54 | 55 | ``` 56 | yarn build 57 | ``` 58 | 59 | ### Preview 60 | 61 | Start local server to serve the specified output folder. You must run `build` before `preview` 62 | 63 | #### npm 64 | 65 | ``` 66 | npm run preview 67 | ``` 68 | 69 | #### yarn 70 | 71 | ``` 72 | yarn preview 73 | ``` 74 | -------------------------------------------------------------------------------- /packages/coding-components/templates/react/README.md: -------------------------------------------------------------------------------- 1 | # Coding components React using Vite template 2 | 3 | This repository showcases how to integrate the coding components with [React](https://react.dev/). 4 | 5 | ## Get started 6 | 7 | The project was created using [`yarn create vite`](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) with the [React template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react). 8 | 9 | ## Commands 10 | 11 | Instructions for setup after you save this directory to your machine. 12 | 13 | ### Install dependencies 14 | 15 | #### npm 16 | 17 | ``` 18 | npm install 19 | ``` 20 | 21 | #### yarn 22 | 23 | ``` 24 | yarn install 25 | ``` 26 | 27 | ### Dev 28 | 29 | Start local server 30 | 31 | #### npm 32 | 33 | ``` 34 | npm run dev 35 | ``` 36 | 37 | #### yarn 38 | 39 | ``` 40 | yarn dev 41 | ``` 42 | 43 | ### Build 44 | 45 | Build the project to the specified output folder (`/dist`) 46 | 47 | #### npm 48 | 49 | ``` 50 | npm run build 51 | ``` 52 | 53 | #### yarn 54 | 55 | ``` 56 | yarn build 57 | ``` 58 | 59 | ### Preview 60 | 61 | Start local server to serve the specified output folder. You must run `build` before `preview` 62 | 63 | #### npm 64 | 65 | ``` 66 | npm run preview 67 | ``` 68 | 69 | #### yarn 70 | 71 | ``` 72 | yarn preview 73 | ``` 74 | -------------------------------------------------------------------------------- /packages/charts-components/templates/vue/src/main.js: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import "./assets/main.css"; 17 | 18 | import { createApp } from "vue"; 19 | import App from "./App.vue"; 20 | 21 | import { defineCustomElements as defineCalciteElements } from "@esri/calcite-components/dist/loader"; 22 | import { defineCustomElements as defineChartsElements } from "@arcgis/charts-components/dist/loader"; 23 | 24 | // define custom elements in the browser, and load the assets from the CDN 25 | defineCalciteElements(window, { resourcesUrl: 'https://js.arcgis.com/calcite-components/2.8.0/assets' }); 26 | defineChartsElements(window, { resourcesUrl: 'https://js.arcgis.com/charts-components/4.30/t9n' }); 27 | 28 | createApp(App).mount("#app"); 29 | -------------------------------------------------------------------------------- /packages/coding-components/templates/vue/src/main.js: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import "./assets/main.css"; // App style 17 | 18 | import { createApp } from "vue"; 19 | import App from "./App.vue"; 20 | 21 | import { defineCustomElements as defineCalciteElements } from "@esri/calcite-components/dist/loader"; 22 | import { defineCustomElements as defineCodingElements } from "@arcgis/coding-components/dist/loader"; 23 | 24 | // define custom elements in the browser, and load the assets from the CDN 25 | defineCalciteElements(window, { resourcesUrl: "https://js.arcgis.com/calcite-components/2.8.0/assets" }); 26 | defineCodingElements(window, { resourcesUrl: "https://js.arcgis.com/coding-components/4.30/assets" }); 27 | 28 | createApp(App).mount('#app'); 29 | -------------------------------------------------------------------------------- /packages/map-components/templates/angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "map-components-angular-template", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "ng": "ng", 7 | "start": "ng serve --force-esbuild", 8 | "build": "ng build", 9 | "watch": "ng build --watch --configuration development", 10 | "test": "ng test" 11 | }, 12 | "dependencies": { 13 | "@angular/animations": "^17.3.6", 14 | "@angular/common": "^17.3.6", 15 | "@angular/compiler": "^17.3.6", 16 | "@angular/core": "^17.3.6", 17 | "@angular/forms": "^17.3.6", 18 | "@angular/platform-browser": "^17.3.6", 19 | "@angular/platform-browser-dynamic": "^17.3.6", 20 | "@angular/router": "^17.3.6", 21 | "@arcgis/core": "~4.30.8", 22 | "@arcgis/map-components-angular": "~4.30.5", 23 | "@esri/calcite-components": "^2.8.5", 24 | "rxjs": "~7.8.0", 25 | "tslib": "^2.3.0", 26 | "zone.js": "~0.14.5" 27 | }, 28 | "devDependencies": { 29 | "@angular-devkit/build-angular": "^17.3.6", 30 | "@angular/cli": "^17.3.6", 31 | "@angular/compiler-cli": "^17.3.6", 32 | "@types/jasmine": "~5.1.0", 33 | "jasmine-core": "~5.1.0", 34 | "karma": "~6.4.0", 35 | "karma-chrome-launcher": "~3.2.0", 36 | "karma-coverage": "~2.2.0", 37 | "karma-jasmine": "~5.1.0", 38 | "karma-jasmine-html-reporter": "~2.1.0", 39 | "typescript": "~5.4.5" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /packages/charts-components/templates/vue/src/components/Scatterplot.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 34 | -------------------------------------------------------------------------------- /packages/charts-components/templates/angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "charts-components-angular-template", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "ng": "ng", 7 | "start": "ng serve --force-esbuild", 8 | "build": "ng build", 9 | "watch": "ng build --watch --configuration development", 10 | "test": "ng test" 11 | }, 12 | "dependencies": { 13 | "@angular/animations": "^17.3.6", 14 | "@angular/common": "^17.3.6", 15 | "@angular/compiler": "^17.3.6", 16 | "@angular/core": "^17.3.6", 17 | "@angular/forms": "^17.3.6", 18 | "@angular/platform-browser": "^17.3.6", 19 | "@angular/platform-browser-dynamic": "^17.3.6", 20 | "@angular/router": "^17.3.6", 21 | "@arcgis/charts-components-angular": "~4.30.2", 22 | "@arcgis/charts-model": "~4.30.2", 23 | "@arcgis/core": "~4.30.8", 24 | "@esri/calcite-components": "^2.8.5", 25 | "rxjs": "~7.8.0", 26 | "tslib": "^2.3.0", 27 | "zone.js": "~0.14.5" 28 | }, 29 | "devDependencies": { 30 | "@angular-devkit/build-angular": "^17.3.6", 31 | "@angular/cli": "^17.3.6", 32 | "@angular/compiler-cli": "^17.3.6", 33 | "@types/jasmine": "~5.1.0", 34 | "jasmine-core": "~5.1.0", 35 | "karma": "~6.4.0", 36 | "karma-chrome-launcher": "~3.2.0", 37 | "karma-coverage": "~2.2.0", 38 | "karma-jasmine": "~5.1.0", 39 | "karma-jasmine-html-reporter": "~2.1.0", 40 | "typescript": "~5.4.5" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /packages/coding-components/templates/angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "coding-components-angular-template", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "ng": "ng", 7 | "start": "ng serve --force-esbuild", 8 | "build": "ng build", 9 | "watch": "ng build --watch --configuration development", 10 | "test": "ng test" 11 | }, 12 | "dependencies": { 13 | "@angular/animations": "^17.3.6", 14 | "@angular/common": "^17.3.6", 15 | "@angular/compiler": "^17.3.6", 16 | "@angular/core": "^17.3.6", 17 | "@angular/forms": "^17.3.6", 18 | "@angular/platform-browser": "^17.3.6", 19 | "@angular/platform-browser-dynamic": "^17.3.6", 20 | "@angular/router": "^17.3.6", 21 | "@arcgis/coding-components-angular": "~4.30.5", 22 | "@arcgis/core": "~4.30.8", 23 | "@esri/calcite-components-angular": "^2.8.5", 24 | "rxjs": "~7.8.0", 25 | "tslib": "^2.3.0", 26 | "zone.js": "~0.14.5" 27 | }, 28 | "devDependencies": { 29 | "@angular-devkit/build-angular": "^17.3.6", 30 | "@angular/cli": "^17.3.6", 31 | "@angular/compiler-cli": "^17.3.6", 32 | "@types/jasmine": "~5.1.0", 33 | "@types/sortablejs": "^1.15.5", 34 | "jasmine-core": "~5.1.0", 35 | "karma": "~6.4.0", 36 | "karma-chrome-launcher": "~3.2.0", 37 | "karma-coverage": "~2.2.0", 38 | "karma-jasmine": "~5.1.0", 39 | "karma-jasmine-html-reporter": "~2.1.0", 40 | "typescript": "~5.4.5" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /packages/coding-components/templates/vite/load-data.js: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import WebMap from "@arcgis/core/WebMap"; 17 | 18 | /** 19 | * Simple data loader against public data. 20 | * For this template we are using the Popup profile. 21 | * For the profile definition, we need a web map and a feature layer 22 | * For the test data, we need a web map, a feature layer and a feature set. 23 | */ 24 | export async function loadData() { 25 | const webMap = new WebMap({ 26 | portalItem: { id: "93d14bfd59a84af0be99a883feba052b" }, 27 | }); 28 | await webMap.loadAll(); 29 | 30 | const featureLayer = webMap.findLayerById("17c807fd286-layer-47"); 31 | 32 | const featureSet = await featureLayer.queryFeatures({ 33 | where: "1=1", 34 | outFields: ["*"], 35 | returnGeometry: true, 36 | }); 37 | 38 | return { webMap, featureLayer, featureSet }; 39 | } -------------------------------------------------------------------------------- /packages/coding-components/templates/vue/src/utils/load-data.js: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import WebMap from "@arcgis/core/WebMap"; 17 | 18 | /** 19 | * Simple data loader against public data. 20 | * For this template we are using the Popup profile. 21 | * For the profile definition, we need a web map and a feature layer 22 | * For the test data, we need a web map, a feature layer and a feature set. 23 | */ 24 | export async function loadData() { 25 | const webMap = new WebMap({ 26 | portalItem: { id: "93d14bfd59a84af0be99a883feba052b" }, 27 | }); 28 | await webMap.loadAll(); 29 | 30 | const featureLayer = webMap.findLayerById("17c807fd286-layer-47"); 31 | 32 | const featureSet = await featureLayer.queryFeatures({ 33 | where: "1=1", 34 | outFields: ["*"], 35 | returnGeometry: true, 36 | }); 37 | 38 | return { webMap, featureLayer, featureSet }; 39 | } -------------------------------------------------------------------------------- /packages/coding-components/templates/webpack/src/load-data.js: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import WebMap from "@arcgis/core/WebMap"; 17 | 18 | /** 19 | * Simple data loader against public data. 20 | * For this template we are using the Popup profile. 21 | * For the profile definition, we need a web map and a feature layer 22 | * For the test data, we need a web map, a feature layer and a feature set. 23 | */ 24 | export async function loadData() { 25 | const webMap = new WebMap({ 26 | portalItem: { id: "93d14bfd59a84af0be99a883feba052b" }, 27 | }); 28 | await webMap.loadAll(); 29 | 30 | const featureLayer = webMap.findLayerById("17c807fd286-layer-47"); 31 | 32 | const featureSet = await featureLayer.queryFeatures({ 33 | where: "1=1", 34 | outFields: ["*"], 35 | returnGeometry: true, 36 | }); 37 | 38 | return { webMap, featureLayer, featureSet }; 39 | } 40 | -------------------------------------------------------------------------------- /packages/charts-components/templates/react/src/index.tsx: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import React from 'react'; 17 | import ReactDOM from 'react-dom/client'; 18 | import Scatterplot from './components/Scatterplot'; 19 | import { defineCustomElements as defineCalciteElements } from '@esri/calcite-components/dist/loader'; 20 | import { defineCustomElements as defineChartsElements } from '@arcgis/charts-components/dist/loader'; 21 | 22 | // define custom elements in the browser, and load the assets from the CDN 23 | defineChartsElements(window, { resourcesUrl: 'https://js.arcgis.com/charts-components/4.30/t9n' }); 24 | defineCalciteElements(window, { resourcesUrl: 'https://js.arcgis.com/calcite-components/2.8.0/assets' }); 25 | 26 | const root = ReactDOM.createRoot(document.getElementById('root')); 27 | root.render( 28 | 29 | 30 | 31 | ); 32 | -------------------------------------------------------------------------------- /packages/coding-components/templates/react/src/index.tsx: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import React from "react"; 17 | import ReactDOM from "react-dom/client"; 18 | import "./index.css"; 19 | 20 | import ArcadeEditor from "./components/ArcadeEditor"; 21 | import { defineCustomElements as defineCalciteElements } from "@esri/calcite-components/dist/loader"; 22 | import { defineCustomElements as defineCodingElements } from "@arcgis/coding-components/dist/loader"; 23 | 24 | // define custom elements in the browser, and load the assets from the CDN 25 | defineCodingElements(window, { resourcesUrl: "https://js.arcgis.com/coding-components/4.30/assets" }); 26 | defineCalciteElements(window, { resourcesUrl: "https://js.arcgis.com/calcite-components/2.8.0/assets" }); 27 | 28 | const root = ReactDOM.createRoot(document.getElementById("root")); 29 | root.render( 30 | 31 | 32 | 33 | ); 34 | -------------------------------------------------------------------------------- /packages/coding-components/templates/react/src/functions/load-data.ts: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import WebMap from "@arcgis/core/WebMap"; 17 | import type FeatureLayer from "@arcgis/core/layers/FeatureLayer"; 18 | 19 | /** 20 | * Simple data loader against public data. 21 | * For this template we are using the Popup profile. 22 | * For the profile definition, we need a web map and a feature layer 23 | * For the test data, we need a web map, a feature layer and a feature set. 24 | */ 25 | export async function loadData() { 26 | const webMap = new WebMap({ 27 | portalItem: { id: "93d14bfd59a84af0be99a883feba052b" }, 28 | }); 29 | await webMap.loadAll(); 30 | 31 | const featureLayer = webMap.findLayerById("17c807fd286-layer-47") as FeatureLayer; 32 | 33 | const featureSet = await featureLayer.queryFeatures({ 34 | where: "1=1", 35 | outFields: ["*"], 36 | returnGeometry: true, 37 | }); 38 | 39 | return { webMap, featureLayer, featureSet }; 40 | } 41 | -------------------------------------------------------------------------------- /packages/map-components/templates/react/src/index.tsx: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import React from "react"; 17 | import ReactDOM from "react-dom/client"; 18 | import "./index.css"; 19 | 20 | import { ArcgisMap, ArcgisSearch, ArcgisLegend } from "@arcgis/map-components-react"; 21 | import { defineCustomElements as defineMapElements } from "@arcgis/map-components/dist/loader"; 22 | 23 | defineMapElements(window, { resourcesUrl: "https://js.arcgis.com/map-components/4.30/assets" }); 24 | 25 | const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement); 26 | root.render( 27 | 28 | { 31 | console.log("MapView ready", event); 32 | }} 33 | > 34 | 35 | 36 | 37 | 38 | ); 39 | -------------------------------------------------------------------------------- /packages/coding-components/templates/angular/src/functions/load-data.service.ts: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import WebMap from "@arcgis/core/WebMap"; 17 | import type FeatureLayer from "@arcgis/core/layers/FeatureLayer"; 18 | 19 | /** 20 | * Simple data loader against public data. 21 | * For this template we are using the Popup profile. 22 | * For the profile definition, we need a web map and a feature layer 23 | * For the test data, we need a web map, a feature layer and a feature set. 24 | */ 25 | export async function loadData(): Promise { 26 | const webMap = new WebMap({ 27 | portalItem: { id: "93d14bfd59a84af0be99a883feba052b" }, 28 | }); 29 | await webMap.loadAll(); 30 | 31 | const featureLayer = webMap.findLayerById("17c807fd286-layer-47") as FeatureLayer; 32 | 33 | const featureSet = await featureLayer.queryFeatures({ 34 | where: "1=1", 35 | outFields: ["*"], 36 | returnGeometry: true, 37 | }); 38 | 39 | return { webMap, featureLayer, featureSet }; 40 | } 41 | -------------------------------------------------------------------------------- /packages/coding-components/templates/angular/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import { TestBed } from '@angular/core/testing'; 17 | import { AppComponent } from './app.component'; 18 | 19 | describe('AppComponent', () => { 20 | beforeEach(() => TestBed.configureTestingModule({ 21 | declarations: [AppComponent] 22 | })); 23 | 24 | it('should create the app', () => { 25 | const fixture = TestBed.createComponent(AppComponent); 26 | const app = fixture.componentInstance; 27 | expect(app).toBeTruthy(); 28 | }); 29 | 30 | it(`should have as title 'coding-components-angular-template'`, () => { 31 | const fixture = TestBed.createComponent(AppComponent); 32 | const app = fixture.componentInstance; 33 | expect(app.title).toEqual('coding-components-angular-template'); 34 | }); 35 | 36 | it('should render the calcite scrim on initial render', () => { 37 | const fixture = TestBed.createComponent(AppComponent); 38 | fixture.detectChanges(); 39 | const compiled = fixture.nativeElement as HTMLElement; 40 | expect(compiled.querySelector('calcite-scrim')).toBeTruthy(); 41 | }); 42 | }); 43 | -------------------------------------------------------------------------------- /packages/map-components/templates/angular/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import { TestBed } from '@angular/core/testing'; 17 | import { ComponentLibraryModule } from '@arcgis/map-components-angular'; 18 | import { AppComponent } from './app.component'; 19 | 20 | 21 | describe('AppComponent', () => { 22 | beforeEach(() => TestBed.configureTestingModule({ 23 | declarations: [AppComponent], 24 | imports: [ComponentLibraryModule] 25 | })); 26 | 27 | it('should create the app', () => { 28 | const fixture = TestBed.createComponent(AppComponent); 29 | const app = fixture.componentInstance; 30 | expect(app).toBeTruthy(); 31 | }); 32 | 33 | it(`should have as title 'map-components-angular-template'`, () => { 34 | const fixture = TestBed.createComponent(AppComponent); 35 | const app = fixture.componentInstance; 36 | expect(app.title).toEqual('map-components-angular-template'); 37 | }); 38 | 39 | it('should render the arcgis-map custom element', () => { 40 | const fixture = TestBed.createComponent(AppComponent); 41 | fixture.detectChanges(); 42 | const compiled = fixture.nativeElement as HTMLElement; 43 | expect(compiled.querySelector('arcgis-map')).toBeTruthy(); 44 | }); 45 | }); 46 | -------------------------------------------------------------------------------- /packages/charts-components/templates/angular/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import { TestBed } from "@angular/core/testing"; 17 | import { RouterTestingModule } from "@angular/router/testing"; 18 | import { AppComponent } from "./app.component"; 19 | 20 | describe("AppComponent", () => { 21 | beforeEach(async () => { 22 | await TestBed.configureTestingModule({ 23 | imports: [RouterTestingModule], 24 | declarations: [AppComponent] 25 | }).compileComponents(); 26 | }); 27 | 28 | it("should create the app", () => { 29 | const fixture = TestBed.createComponent(AppComponent); 30 | const app = fixture.componentInstance; 31 | expect(app).toBeTruthy(); 32 | }); 33 | 34 | it(`should have as title 'charts-components-angular-template'`, () => { 35 | const fixture = TestBed.createComponent(AppComponent); 36 | const app = fixture.componentInstance; 37 | expect(app.title).toEqual("charts-components-angular-template"); 38 | }); 39 | 40 | it("should render title", () => { 41 | const fixture = TestBed.createComponent(AppComponent); 42 | fixture.detectChanges(); 43 | const compiled = fixture.nativeElement as HTMLElement; 44 | expect(compiled.querySelector("h1")?.textContent).toContain("Hello, charts-components-angular-template"); 45 | }); 46 | }); 47 | -------------------------------------------------------------------------------- /packages/charts-components/templates/vite/main.js: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import './style.css'; 17 | 18 | import { ScatterPlotModel } from '@arcgis/charts-model'; 19 | import { createFeatureLayer } from './create-feature-layer'; 20 | 21 | import { defineCustomElements as defineChartsElements } from '@arcgis/charts-components/dist/loader'; 22 | 23 | // Define custom elements in the browser, and load the assets from the CDN 24 | defineChartsElements(window, { resourcesUrl: 'https://js.arcgis.com/charts-components/4.30/t9n' }); 25 | 26 | // Function to initialize the scatterplot. 27 | async function initScatterplot() { 28 | const layer = await createFeatureLayer('https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/ChicagoCr/FeatureServer/0'); 29 | 30 | const scatterplotElement = document.getElementById('scatterplot'); 31 | 32 | // Create a new ScatterPlotModel and set the x and y axis fields. 33 | const scatterplotModel = new ScatterPlotModel(); 34 | await scatterplotModel.setup({ layer }); 35 | 36 | await scatterplotModel.setXAxisField('Ward'); 37 | await scatterplotModel.setYAxisField('Beat'); 38 | 39 | // Set the scatterplot element's config and layer properties. 40 | const config = scatterplotModel.getConfig(); 41 | 42 | scatterplotElement.config = config; 43 | scatterplotElement.layer = layer; 44 | } 45 | 46 | // Call initScatterplot() function to render the chart. 47 | initScatterplot(); 48 | -------------------------------------------------------------------------------- /packages/map-components/templates/webpack/webpack.config.js: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | const path = require("path"); 16 | 17 | const HtmlWebPackPlugin = require("html-webpack-plugin"); 18 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 19 | const TerserPlugin = require("terser-webpack-plugin"); 20 | 21 | module.exports = { 22 | entry: { 23 | index: ["./src/index.css", "./src/index.js"] 24 | }, 25 | node: false, 26 | optimization: { 27 | minimizer: [new TerserPlugin({ extractComments: false })] 28 | }, 29 | output: { 30 | path: path.join(__dirname, "dist"), 31 | chunkFilename: "chunks/[id].js", 32 | publicPath: "", 33 | clean: true 34 | }, 35 | devServer: { 36 | static: { 37 | directory: path.join(__dirname, "dist") 38 | }, 39 | compress: true, 40 | port: 8080 41 | }, 42 | module: { 43 | rules: [ 44 | { 45 | test: /\.js$/, 46 | enforce: "pre", 47 | use: ["source-map-loader"] 48 | }, 49 | { 50 | test: /\.css$/, 51 | use: [MiniCssExtractPlugin.loader, "css-loader"] 52 | } 53 | ] 54 | }, 55 | plugins: [ 56 | new HtmlWebPackPlugin({ 57 | title: "Map components Webpack template", 58 | template: "./public/index.html", 59 | filename: "./index.html", 60 | chunksSortMode: "none", 61 | inlineSource: ".(css)$" 62 | }), 63 | new MiniCssExtractPlugin({ 64 | filename: "[name].[chunkhash].css", 65 | chunkFilename: "[id].css" 66 | }) 67 | ] 68 | }; 69 | -------------------------------------------------------------------------------- /packages/charts-components/templates/webpack/webpack.config.js: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | const path = require('path'); 16 | 17 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 18 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 19 | const TerserPlugin = require('terser-webpack-plugin'); 20 | 21 | module.exports = { 22 | entry: { 23 | index: ['./src/index.css', './src/index.js'], 24 | }, 25 | node: false, 26 | optimization: { 27 | minimizer: [new TerserPlugin({ extractComments: false })], 28 | }, 29 | output: { 30 | path: path.resolve(__dirname, 'dist'), 31 | chunkFilename: 'chunks/[id].js', 32 | publicPath: '', 33 | clean: true, 34 | }, 35 | devServer: { 36 | static: { 37 | directory: path.join(__dirname, 'dist'), 38 | }, 39 | compress: true, 40 | port: 8080, 41 | }, 42 | module: { 43 | rules: [ 44 | { 45 | test: /\.js$/, 46 | enforce: 'pre', 47 | use: ['source-map-loader'], 48 | }, 49 | { 50 | test: /\.css$/, 51 | use: [MiniCssExtractPlugin.loader, 'css-loader'], 52 | }, 53 | ], 54 | }, 55 | plugins: [ 56 | new HtmlWebpackPlugin({ 57 | title: 'Charts components Webpack template', 58 | template: './public/index.html', 59 | filename: './index.html', 60 | chunksSortMode: 'none', 61 | inlineSource: '.(css)$', 62 | }), 63 | new MiniCssExtractPlugin({ 64 | filename: '[name].[chunkhash].css', 65 | chunkFilename: '[id].css', 66 | }), 67 | ], 68 | }; 69 | -------------------------------------------------------------------------------- /packages/charts-components/templates/webpack/src/index.js: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import { ScatterPlotModel } from '@arcgis/charts-model'; 17 | import { createFeatureLayer } from './create-feature-layer'; 18 | 19 | import { defineCustomElements as defineCalciteElements } from "@esri/calcite-components/dist/loader"; 20 | import { defineCustomElements as defineChartsElements } from "@arcgis/charts-components/dist/loader"; 21 | 22 | // define custom elements in the browser, and load the assets from the CDN 23 | defineCalciteElements(window, { resourcesUrl: 'https://js.arcgis.com/calcite-components/2.8.0/assets' }); 24 | defineChartsElements(window, { resourcesUrl: 'https://js.arcgis.com/charts-components/4.30/t9n' }); 25 | 26 | // Function to initialize the scatterplot. 27 | async function initScatterplot() { 28 | const layer = await createFeatureLayer('https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/ChicagoCr/FeatureServer/0'); 29 | 30 | const scatterplotElement = document.getElementById('scatterplot'); 31 | 32 | // Create a new ScatterPlotModel and set the x and y axis fields. 33 | const scatterplotModel = new ScatterPlotModel(); 34 | await scatterplotModel.setup({ layer }); 35 | 36 | await scatterplotModel.setXAxisField('Ward'); 37 | await scatterplotModel.setYAxisField('Beat'); 38 | 39 | // Set the scatterplot element's config and layer properties. 40 | const config = scatterplotModel.getConfig(); 41 | 42 | scatterplotElement.config = config; 43 | scatterplotElement.layer = layer; 44 | } 45 | 46 | // Call initScatterplot() function to render the chart. 47 | initScatterplot(); 48 | -------------------------------------------------------------------------------- /packages/charts-components/templates/angular/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import { Component, ViewChild } from "@angular/core"; 17 | import { createFeatureLayer } from "../functions/create-feature-layer.service"; 18 | import { ScatterPlotModel } from "@arcgis/charts-model"; 19 | 20 | import { defineCustomElements as defineChartsElements } from "@arcgis/charts-components/dist/loader"; 21 | 22 | @Component({ 23 | selector: "app-root", 24 | templateUrl: "./app.component.html", 25 | styleUrl: "./app.component.css" 26 | }) 27 | export class AppComponent { 28 | title = "charts-components-angular-template"; 29 | 30 | @ViewChild("scatterplot") scatterplot: HTMLArcgisChartsScatterPlotElement | undefined; 31 | 32 | ngOnInit() { 33 | // define custom elements in the browser, and load the assets from the CDN 34 | defineChartsElements(window, { resourcesUrl: "https://js.arcgis.com/charts-components/4.30/t9n" }); 35 | } 36 | 37 | ngAfterViewInit() { 38 | this.initScatterplot(); 39 | } 40 | 41 | /** 42 | * Function to initialize the scatterplot. 43 | */ 44 | async initScatterplot() { 45 | const layer = await createFeatureLayer( 46 | "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/ChicagoCr/FeatureServer/0" 47 | ); 48 | 49 | // Create a new ScatterPlotModel and set the x and y axis fields. 50 | const scatterplotModel = new ScatterPlotModel(); 51 | await scatterplotModel.setup({ layer }); 52 | 53 | await scatterplotModel.setXAxisField("Ward"); 54 | await scatterplotModel.setYAxisField("Beat"); 55 | 56 | // Set the scatterplot element's config and layer properties. 57 | const config = scatterplotModel.getConfig(); 58 | 59 | if (this.scatterplot !== undefined) { 60 | this.scatterplot.config = config; 61 | this.scatterplot.layer = layer; 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /packages/coding-components/templates/webpack/webpack.config.js: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | const path = require("path"); 16 | 17 | const HtmlWebPackPlugin = require("html-webpack-plugin"); 18 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 19 | const TerserPlugin = require("terser-webpack-plugin"); 20 | 21 | module.exports = { 22 | entry: { 23 | index: ["./src/index.css", "./src/index.js"] 24 | }, 25 | node: false, 26 | optimization: { 27 | minimizer: [new TerserPlugin({ extractComments: false })] 28 | }, 29 | output: { 30 | path: path.join(__dirname, "dist"), 31 | chunkFilename: "chunks/[id].js", 32 | publicPath: "", 33 | clean: true 34 | }, 35 | devServer: { 36 | static: { 37 | directory: path.join(__dirname, "dist") 38 | }, 39 | compress: true, 40 | port: 8080 41 | }, 42 | experiments: { 43 | // Because we are using async/await in index.js 44 | topLevelAwait: true 45 | }, 46 | module: { 47 | rules: [ 48 | { 49 | test: /\.js$/, 50 | enforce: "pre", 51 | use: ["source-map-loader"] 52 | }, 53 | { 54 | test: /\.css$/, 55 | use: [MiniCssExtractPlugin.loader, "css-loader"] 56 | } 57 | ] 58 | }, 59 | plugins: [ 60 | // This plugin simplifies creation of HTML files to serve your webpack bundles. 61 | new HtmlWebPackPlugin({ 62 | title: "Coding components Webpack template", 63 | template: "./public/index.html", 64 | filename: "./index.html", 65 | chunksSortMode: "none", 66 | inlineSource: ".(css)$" 67 | }), 68 | new MiniCssExtractPlugin({ 69 | filename: "[name].[chunkhash].css", 70 | chunkFilename: "[id].css" 71 | }) 72 | ], 73 | // Resolve property for importing files 74 | resolve: { 75 | modules: [path.resolve(__dirname, "/src"), "node_modules/"], 76 | extensions: [".js", ".css"] 77 | } 78 | }; 79 | -------------------------------------------------------------------------------- /packages/coding-components/templates/vue/src/components/ArcadeEditor.vue: -------------------------------------------------------------------------------- 1 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 83 | -------------------------------------------------------------------------------- /packages/charts-components/templates/angular/angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "charts-components-angular-template": { 7 | "projectType": "application", 8 | "schematics": {}, 9 | "root": "", 10 | "sourceRoot": "src", 11 | "prefix": "app", 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:browser", 15 | "options": { 16 | "outputPath": "dist/", 17 | "index": "src/index.html", 18 | "main": "src/main.ts", 19 | "polyfills": ["zone.js"], 20 | "tsConfig": "tsconfig.app.json", 21 | "assets": ["src/favicon.ico"], 22 | "styles": ["src/styles.css"], 23 | "scripts": [] 24 | }, 25 | "configurations": { 26 | "production": { 27 | "budgets": [ 28 | { 29 | "type": "initial", 30 | "maximumWarning": "500kb", 31 | "maximumError": "1mb" 32 | }, 33 | { 34 | "type": "anyComponentStyle", 35 | "maximumWarning": "2kb", 36 | "maximumError": "4kb" 37 | } 38 | ], 39 | "outputHashing": "all" 40 | }, 41 | "development": { 42 | "optimization": false, 43 | "extractLicenses": false, 44 | "sourceMap": true 45 | } 46 | }, 47 | "defaultConfiguration": "production" 48 | }, 49 | "serve": { 50 | "builder": "@angular-devkit/build-angular:dev-server", 51 | "configurations": { 52 | "production": { 53 | "buildTarget": "charts-components-angular-template:build:production" 54 | }, 55 | "development": { 56 | "buildTarget": "charts-components-angular-template:build:development" 57 | } 58 | }, 59 | "defaultConfiguration": "development" 60 | }, 61 | "extract-i18n": { 62 | "builder": "@angular-devkit/build-angular:extract-i18n", 63 | "options": { 64 | "buildTarget": "charts-components-angular-template:build" 65 | } 66 | }, 67 | "test": { 68 | "builder": "@angular-devkit/build-angular:karma", 69 | "options": { 70 | "polyfills": ["zone.js", "zone.js/testing"], 71 | "tsConfig": "tsconfig.spec.json", 72 | "assets": ["src/favicon.ico", "src/assets"], 73 | "styles": ["src/styles.css"], 74 | "scripts": [] 75 | } 76 | } 77 | } 78 | } 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /packages/coding-components/templates/angular/angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "coding-components-angular-template": { 7 | "projectType": "application", 8 | "schematics": {}, 9 | "root": "", 10 | "sourceRoot": "src", 11 | "prefix": "app", 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:browser", 15 | "options": { 16 | "outputPath": "dist/", 17 | "index": "src/index.html", 18 | "main": "src/main.ts", 19 | "polyfills": ["src/zone-flags.ts","zone.js"], 20 | "tsConfig": "tsconfig.app.json", 21 | "assets": ["src/favicon.ico"], 22 | "styles": ["src/styles.css"], 23 | "scripts": [] 24 | }, 25 | "configurations": { 26 | "production": { 27 | "budgets": [ 28 | { 29 | "type": "initial", 30 | "maximumWarning": "3mb", 31 | "maximumError": "10mb" 32 | }, 33 | { 34 | "type": "anyComponentStyle", 35 | "maximumWarning": "3mb", 36 | "maximumError": "10mb" 37 | } 38 | ], 39 | "outputHashing": "all" 40 | }, 41 | "development": { 42 | "optimization": false, 43 | "extractLicenses": false, 44 | "sourceMap": true 45 | } 46 | }, 47 | "defaultConfiguration": "production" 48 | }, 49 | "serve": { 50 | "builder": "@angular-devkit/build-angular:dev-server", 51 | "configurations": { 52 | "production": { 53 | "buildTarget": "coding-components-angular-template:build:production" 54 | }, 55 | "development": { 56 | "buildTarget": "coding-components-angular-template:build:development" 57 | } 58 | }, 59 | "defaultConfiguration": "development" 60 | }, 61 | "extract-i18n": { 62 | "builder": "@angular-devkit/build-angular:extract-i18n", 63 | "options": { 64 | "buildTarget": "coding-components-angular-template:build" 65 | } 66 | }, 67 | "test": { 68 | "builder": "@angular-devkit/build-angular:karma", 69 | "options": { 70 | "polyfills": ["zone.js", "zone.js/testing"], 71 | "tsConfig": "tsconfig.spec.json", 72 | "assets": ["src/favicon.ico"], 73 | "styles": ["src/styles.css"], 74 | "scripts": [] 75 | } 76 | } 77 | } 78 | } 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /packages/map-components/templates/angular/angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "map-components-angular-template": { 7 | "projectType": "application", 8 | "schematics": {}, 9 | "root": "", 10 | "sourceRoot": "src", 11 | "prefix": "app", 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:browser", 15 | "options": { 16 | "outputPath": "dist/map-components-angular-template", 17 | "index": "src/index.html", 18 | "main": "src/main.ts", 19 | "polyfills": ["src/zone-flags.ts", "zone.js"], 20 | "tsConfig": "tsconfig.app.json", 21 | "assets": ["src/favicon.ico", "src/assets"], 22 | "styles": ["src/styles.css"], 23 | "scripts": [] 24 | }, 25 | "configurations": { 26 | "production": { 27 | "budgets": [ 28 | { 29 | "type": "initial", 30 | "maximumWarning": "500kb", 31 | "maximumError": "1mb" 32 | }, 33 | { 34 | "type": "anyComponentStyle", 35 | "maximumWarning": "2kb", 36 | "maximumError": "4kb" 37 | } 38 | ], 39 | "outputHashing": "all" 40 | }, 41 | "development": { 42 | "buildOptimizer": false, 43 | "optimization": false, 44 | "extractLicenses": false, 45 | "sourceMap": true, 46 | "namedChunks": true 47 | } 48 | }, 49 | "defaultConfiguration": "production" 50 | }, 51 | "serve": { 52 | "builder": "@angular-devkit/build-angular:dev-server", 53 | "configurations": { 54 | "production": { 55 | "buildTarget": "map-components-angular-template:build:production" 56 | }, 57 | "development": { 58 | "buildTarget": "map-components-angular-template:build:development" 59 | } 60 | }, 61 | "defaultConfiguration": "development" 62 | }, 63 | "extract-i18n": { 64 | "builder": "@angular-devkit/build-angular:extract-i18n", 65 | "options": { 66 | "buildTarget": "map-components-angular-template:build" 67 | } 68 | }, 69 | "test": { 70 | "builder": "@angular-devkit/build-angular:karma", 71 | "options": { 72 | "polyfills": ["zone.js", "zone.js/testing"], 73 | "tsConfig": "tsconfig.spec.json", 74 | "assets": ["src/favicon.ico", "src/assets"], 75 | "styles": ["src/styles.css"], 76 | "scripts": [], 77 | "sourceMap": false 78 | } 79 | } 80 | } 81 | } 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /packages/charts-components/templates/amd-script-tag/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Charts components AMD template 8 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /packages/coding-components/templates/angular/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import { Component, OnInit } from "@angular/core"; 17 | import { loadData } from "../functions/load-data.service"; 18 | import { IEditorProfileDefinition, IPredefinedProfile } from "@arcgis/coding-components/dist/types/utils/profile/types"; 19 | import { IEditorTestContext } from "@arcgis/coding-components/dist/types/utils/arcade-executor"; 20 | import { defineCustomElements as defineCalciteElements } from "@esri/calcite-components/dist/loader"; 21 | import { defineCustomElements as defineCodingElements } from "@arcgis/coding-components/dist/loader"; 22 | 23 | // Calcite Components 24 | // import "@esri/calcite-components/dist/components/calcite-scrim"; 25 | // import "@arcgis/coding-components/dist/components/arcgis-arcade-editor"; 26 | 27 | @Component({ 28 | selector: "app-root", 29 | templateUrl: "./app.component.html", 30 | styleUrls: ["./app.component.css"] 31 | }) 32 | export class AppComponent implements OnInit { 33 | title = 'coding-components-angular-template'; 34 | 35 | // Property to track loading state 36 | public isLoading: boolean = true; 37 | 38 | // Properties for the arcade editor 39 | public profile!: IEditorProfileDefinition | IPredefinedProfile; 40 | public testData!: IEditorTestContext; 41 | 42 | ngOnInit() { 43 | // define custom elements in the browser, and load the assets from the CDN 44 | defineCalciteElements(window, { resourcesUrl: "https://js.arcgis.com/calcite-components/2.8.0/assets" }); 45 | defineCodingElements(window, { resourcesUrl: "https://js.arcgis.com/coding-components/4.30/assets" }); 46 | // Call async functions here 47 | this.fetch(); 48 | } 49 | 50 | // Async function to fetch data 51 | async fetch() { 52 | const data = await loadData(); 53 | 54 | this.profile = { 55 | id: "popup", 56 | definitions: { 57 | $feature: data.featureLayer, 58 | $layer: data.featureLayer, 59 | $map: data.webMap, 60 | $datastore: data.featureLayer 61 | } 62 | }; 63 | 64 | this.testData = { 65 | profileVariableInstances: { 66 | $feature: data.featureSet.features[0], 67 | $layer: data.featureLayer, 68 | $map: data.webMap, 69 | $datastore: data.featureLayer.url 70 | } 71 | // spatialReference: {wkid: 3857}, 72 | // timeZone: "system" 73 | }; 74 | 75 | // Once data is fetched, set isLoading to false 76 | this.isLoading = false; 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /packages/coding-components/templates/webpack/src/index.js: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import { defineCustomElements as defineCalciteElements } from "@esri/calcite-components/dist/loader"; 17 | import { defineCustomElements as defineCodingElements } from "@arcgis/coding-components/dist/loader"; 18 | 19 | // define custom elements in the browser, and load the assets from the CDN 20 | defineCalciteElements(window, { resourcesUrl: "https://js.arcgis.com/calcite-components/2.8.0/assets" }); 21 | defineCodingElements(window, { resourcesUrl: "https://js.arcgis.com/coding-components/4.30/assets" }); 22 | 23 | import { loadData } from "./load-data"; 24 | 25 | (async () => { 26 | // Get the Arcade editor element 27 | const arcadeEditorElt = document.querySelector("arcgis-arcade-editor"); 28 | 29 | // Log script change events 30 | arcadeEditorElt.addEventListener("arcgisScriptChange", async (e) => { 31 | console.log("script:", e.detail); 32 | // console.log("outputType on script:", await arcadeEditorElt.getOutputType()); 33 | }); 34 | 35 | // Log editor diagnostics 36 | arcadeEditorElt.addEventListener("arcgisDiagnosticsChange", async (e) => { 37 | console.log("diagnostics:", e.detail); 38 | }); 39 | 40 | // Start loading data. Don't need to await, we want the fetching to start. 41 | const dataPromise = loadData(); 42 | 43 | // Wait for our data to be loaded and wait for the component to be defined in the custom elements 44 | const [data] = await Promise.all([ 45 | dataPromise, 46 | customElements.whenDefined("arcgis-arcade-editor"), 47 | ]); 48 | 49 | // Tells Arcade editor to use the 'popup' profile and provides the necessary data used as 50 | // definition for the profile variables. Feature Layer and Web Map instances are used by the 51 | // Editor UX to help users understand the structure of data used. 52 | // Note that for the $feature variable, we pass the feature layer instance as for definition 53 | // the editor needs the metadata of the feature not an actual feature. 54 | arcadeEditorElt.profile = { 55 | id: "popup", 56 | definitions: { 57 | $feature: data.featureLayer, 58 | $layer: data.featureLayer, 59 | $map: data.webMap, 60 | $datastore: data.featureLayer, 61 | }, 62 | }; 63 | 64 | // Tells Arcade editor to the following test data. The data provided must match the expected data for the 65 | // profile used. 66 | // Note that for test data, the feature must an instance of a feature. This is not used for user experience 67 | // but for actually executing the the Arcade expression in the editor. 68 | arcadeEditorElt.testData = { 69 | profileVariableInstances: { 70 | $feature: data.featureSet.features[0], 71 | $layer: data.featureLayer, 72 | $map: data.webMap, 73 | $datastore: data.featureLayer.url, 74 | } 75 | }; 76 | 77 | // Set a script on the editor 78 | arcadeEditorElt.script = "$feature"; 79 | 80 | // Everything has been loaded and assigned, we can remove scrim 81 | document.getElementById("scrim").remove(); 82 | })(); 83 | -------------------------------------------------------------------------------- /packages/coding-components/templates/vite/main.js: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import "./style.css"; // Arcade editor styles 17 | 18 | import { loadData } from "./load-data"; 19 | 20 | import { defineCustomElements as defineCalciteElements } from "@esri/calcite-components/dist/loader"; 21 | import { defineCustomElements as defineCodingElements } from "@arcgis/coding-components/dist/loader"; 22 | 23 | // define custom elements in the browser, and load the assets from the CDN 24 | defineCalciteElements(window, { resourcesUrl: "https://js.arcgis.com/calcite-components/2.8.0/assets" }); 25 | defineCodingElements(window, { resourcesUrl: "https://js.arcgis.com/coding-components/4.30/assets" }); 26 | 27 | (async () => { 28 | // Get the Arcade editor element 29 | const arcadeEditorElt = document.querySelector("arcgis-arcade-editor"); 30 | 31 | // Log script change events 32 | arcadeEditorElt.addEventListener("arcgisScriptChange", async (e) => { 33 | console.log("script:", e.detail); 34 | // console.log("outputType on script:", await arcadeEditorElt.getTestResult()); 35 | }); 36 | 37 | // Log editor diagnostics 38 | arcadeEditorElt.addEventListener("arcgisDiagnosticsChange", async (e) => { 39 | console.log("diagnostics:", e.detail); 40 | }); 41 | 42 | // Start loading data. Don't need to await, we want the fetching to start. 43 | const dataPromise = loadData(); 44 | 45 | // Wait for our data to be loaded and wait for the component to be defined in the custom elements 46 | const [data] = await Promise.all([ 47 | dataPromise, 48 | customElements.whenDefined("arcgis-arcade-editor"), 49 | ]); 50 | 51 | // Tells Arcade editor to use the 'popup' profile and provides the necessary data used as 52 | // definition for the profile variables. Feature Layer and Web Map instances are used by the 53 | // Editor UX to help users understand the structure of data used. 54 | // Note that for the $feature variable, we pass the feature layer instance as for definition 55 | // the editor needs the metadata of the feature not an actual feature. 56 | arcadeEditorElt.profile = { 57 | id: "popup", 58 | definitions: { 59 | $feature: data.featureLayer, 60 | $layer: data.featureLayer, 61 | $map: data.webMap, 62 | $datastore: data.featureLayer, 63 | }, 64 | }; 65 | 66 | // Tells Arcade editor to the following test data. The data provided must match the expected data for the 67 | // profile used. 68 | // Note that for test data, the feature must an instance of a feature. This is not used for user experience 69 | // but for actually executing the the Arcade expression in the editor. 70 | arcadeEditorElt.testData = { 71 | profileVariableInstances: { 72 | $feature: data.featureSet.features[0], 73 | $layer: data.featureLayer, 74 | $map: data.webMap, 75 | $datastore: data.featureLayer.url, 76 | }, 77 | // spatialReference: {wkid: 3857} 78 | }; 79 | 80 | // Set a script on the editor 81 | arcadeEditorElt.script = "$feature"; 82 | 83 | // Everything has been loaded and assigned, we can remove scrim 84 | document.getElementById("scrim").remove(); 85 | })(); 86 | -------------------------------------------------------------------------------- /packages/coding-components/templates/react/src/components/ArcadeEditor.tsx: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import { useEffect, useCallback, useState } from "react"; 17 | 18 | import { ArcgisArcadeEditor } from "@arcgis/coding-components-react"; 19 | import { CalciteScrim } from "@esri/calcite-components-react"; 20 | 21 | import { loadData } from "../functions/load-data"; 22 | 23 | import "./ArcadeEditor.css"; 24 | 25 | export default function ArcadeEditor() { 26 | const [data, setData] = useState(null); 27 | 28 | // useCallback to prevent the function from being recreated when the component rebuilds 29 | const initializeTheEditor = useCallback(async () => { 30 | const data = await loadData(); 31 | setData(data); 32 | }, []); 33 | 34 | // Register a function that will execute after the current render cycle 35 | useEffect(() => { 36 | initializeTheEditor().catch(console.error); 37 | }, [initializeTheEditor]); 38 | 39 | return ( 40 |
41 |
42 | {data ? ( 43 | { 48 | console.log("script:", e.detail); 49 | // console.log("outputType on script:", await arcadeEditorElt.getOutputType()); 50 | }} 51 | // Log editor diagnostics 52 | onArcgisDiagnosticsChange={async (e) => { 53 | console.log("diagnostics:", e.detail); 54 | }} 55 | // Tells Arcade editor to use the 'popup' profile and provides the necessary data used as 56 | // definition for the profile variables. Feature Layer and Web Map instances are used by the 57 | // Editor UX to help users understand the structure of data used. 58 | // Note that for the $feature variable, we pass the feature layer instance as for definition 59 | // the editor needs the metadata of the feature not an actual feature. 60 | profile={{ 61 | id: "popup", 62 | definitions: { 63 | $feature: data.featureLayer, 64 | $layer: data.featureLayer, 65 | $map: data.webMap, 66 | $datastore: data.featureLayer 67 | } 68 | }} 69 | // Tells Arcade editor to the following test data. The data provided must match the expected data for the 70 | // profile used. 71 | // Note that for test data, the feature must an instance of a feature. This is not used for user experience 72 | // but for actually executing the the Arcade expression in the editor. 73 | testData={{ 74 | profileVariableInstances: { 75 | $feature: data.featureSet.features[0], 76 | $layer: data.featureLayer, 77 | $map: data.webMap, 78 | $datastore: data.featureLayer.url 79 | } 80 | }} 81 | /> 82 | ) : ( 83 | 84 | )} 85 |
86 |
87 | ); 88 | } 89 | -------------------------------------------------------------------------------- /packages/charts-components/templates/react/src/components/Scatterplot.tsx: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import { useEffect, useRef, useCallback } from "react"; 17 | 18 | import { ArcgisChartsActionBar, ArcgisChartsScatterPlot } from "@arcgis/charts-components-react"; 19 | import { ScatterPlotModel } from "@arcgis/charts-model"; 20 | 21 | import { createFeatureLayer } from "../functions/create-feature-layer"; 22 | 23 | import "./Charts.css"; 24 | // set the default action bar based on the series type 25 | function setDefaultActionBar(chartElementId: string, seriesType: string) { 26 | const actionBarElement = document.getElementById(chartElementId) as HTMLArcgisChartsActionBarElement; 27 | 28 | if (actionBarElement !== null) { 29 | actionBarElement.actionBarHideActionsProps = { 30 | hideRotateChart: seriesType === "histogramSeries" || seriesType === "pieSeries" || seriesType === "scatterSeries", 31 | hideFilterByExtent: true, 32 | hideZoom: true, 33 | hideSelection: true, 34 | hideFullExtent: true 35 | }; 36 | } 37 | } 38 | 39 | // Default export for the Scatterplot component 40 | export default function Scatterplot() { 41 | const scatterplotRef = useRef(null); 42 | 43 | // useCallback to prevent the function from being recreated when the component rebuilds 44 | const initScatterplot = useCallback(async () => { 45 | const layer = await createFeatureLayer( 46 | "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/ChicagoCr/FeatureServer/0" 47 | ); 48 | 49 | // Create a new ScatterPlotModel and set the x and y axis fields. 50 | const scatterplotModel = new ScatterPlotModel(); 51 | await scatterplotModel.setup({ layer }); 52 | 53 | await scatterplotModel.setXAxisField("Ward"); 54 | await scatterplotModel.setYAxisField("Beat"); 55 | 56 | // Set the scatterplot element's config and layer properties. 57 | const config = scatterplotModel.getConfig(); 58 | 59 | scatterplotRef.current.config = config; 60 | scatterplotRef.current.layer = layer; 61 | 62 | // Add event listener when selection is made on the chart to enable/disable action bar buttons. 63 | scatterplotRef.current.addEventListener("arcgisChartsSelectionComplete", (event: CustomEvent) => { 64 | const actionBarElement = document.getElementById("scatterplot-action-bar") as HTMLArcgisChartsActionBarElement; 65 | 66 | const selectionData = event.detail; 67 | if (selectionData.selectionOIDs === undefined || selectionData.selectionOIDs.length === 0) { 68 | actionBarElement.clearSelectionState = "disabled"; 69 | actionBarElement.filterBySelectionState = "disabled"; 70 | } else { 71 | actionBarElement.clearSelectionState = "enabled"; 72 | actionBarElement.filterBySelectionState = "enabled"; 73 | } 74 | }); 75 | 76 | // Set the default actions for the action bar based on the series type 77 | setDefaultActionBar("scatterplot-action-bar", config.series[0].type); 78 | }, []); 79 | 80 | // Register a function that will execute after the current render cycle 81 | useEffect(() => { 82 | initScatterplot().catch(console.error); 83 | }, [initScatterplot]); 84 | 85 | return ( 86 | 87 | 88 | 89 | ); 90 | } 91 | -------------------------------------------------------------------------------- /packages/map-components/tutorials/create-a-web-app-using-components-solution/main.js: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import "./style.css"; 17 | 18 | /** 19 | * Import functions to define the custom HTML elements from the 20 | * Map Components and Calcite Components libraries. 21 | */ 22 | import { defineCustomElements as defineMapElements } from "@arcgis/map-components/dist/loader"; 23 | import { defineCustomElements as defineCalciteElements } from "@esri/calcite-components/dist/loader"; 24 | 25 | /** 26 | * Define the custom elements on the window using the Calcite Components 27 | * Use the CDN-hosted assets. When using the CDN-hosted assets, 28 | * you need to keep the version number in the path the same as the version of 29 | * `@esri/calcite-components` installed as a dependency of `@arcgis/map-components`. 30 | */ 31 | defineCalciteElements(window, { 32 | resourcesUrl: "https://js.arcgis.com/calcite-components/2.8.0/assets" 33 | }); 34 | 35 | /** 36 | * Use the Map Components to define and lazy load the custom map elements. 37 | */ 38 | defineMapElements(window, { 39 | resourcesUrl: "https://js.arcgis.com/map-components/4.30/assets" 40 | }); 41 | 42 | /** 43 | * Use `document.querySelector()` to get a reference to the `arcgis-layer-list` component. 44 | * Add an event listener for the `arcgis-layer-list` component's `arcgisLayerListReady` event. 45 | */ 46 | document.querySelector("arcgis-layer-list").addEventListener("arcgisLayerListReady", (event) => { 47 | /** 48 | * Get a reference to the ArcGIS Maps SDK for JavaScript `LayerList` widget 49 | * from the `event.detail` object. 50 | */ 51 | const arcgisLayerList = event.target; 52 | /** 53 | * Add a listItemCreatedFunction to the layer list. 54 | * This function will add a legend in the list item panel for all layers except group layers. 55 | * https://next.sites.afd.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#listItemCreatedFunction 56 | */ 57 | arcgisLayerList.listItemCreatedFunction = (event) => { 58 | const { item } = event; 59 | if (item.layer.type !== "group") { 60 | item.panel = { 61 | content: "legend" 62 | }; 63 | } 64 | }; 65 | }); 66 | 67 | /** 68 | * Use `document.querySelector()` to get a reference to the `arcgis-map` component. 69 | * Add an event listener for the `arcgis-map` component's `arcgisViewReadyChange` event. 70 | */ 71 | document.querySelector("arcgis-map").addEventListener("arcgisViewReadyChange", (event) => { 72 | /** 73 | * Create a constant for the map's portal item. 74 | * https://developers.arcgis.com/javascript/latest/api-reference/esri-WebMap.html#portalItem 75 | */ 76 | const { portalItem } = event.target.map; 77 | 78 | /** 79 | * Set properties on the `calcite-navigation-logo` 80 | * from the properties of the portal item. 81 | */ 82 | const navigationLogo = document.querySelector("calcite-navigation-logo"); 83 | navigationLogo.heading = portalItem.title; 84 | navigationLogo.description = portalItem.snippet; 85 | navigationLogo.thumbnail = portalItem.thumbnailUrl; 86 | 87 | /** 88 | * Find the accidental deaths layer in the `event.target.map.layers` collection. 89 | * https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html#layers 90 | */ 91 | const layer = event.target.map.layers.find((layer) => layer.id === "Accidental_Deaths_8938"); 92 | 93 | /** 94 | * Modify the layer's popup template title. 95 | * https://developers.arcgis.com/javascript/latest/api-reference/esri-PopupTemplate.html 96 | */ 97 | layer.popupTemplate.title = "Accidental Deaths"; 98 | }); 99 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | > ⚠️ ArcGIS Maps SDK for JavaScript components are no longer in beta. This repository has been archived. Please visit https://github.com/Esri/jsapi-resources for the latest samples. 2 | 3 | # ArcGIS Maps SDK for JavaScript samples (Archived) 4 | 5 | This repository contains code samples and templates for coding with the ArcGIS Maps SDK for JavaScript. 6 | 7 | If you are looking for the ArcGIS Maps SDK for JavaScript core package, it is available on [npm](https://www.npmjs.com/package/@arcgis/core). 8 | 9 | ## How to use this repository 10 | 11 | This repository is organized as a [monorepo](https://en.wikipedia.org/wiki/Monorepo). 12 | 13 | ### Clone this repository 14 | 15 | This monorepo was built using [yarn workspaces](https://yarnpkg.com/features/workspaces). 16 | After cloning, you only need to run `yarn install` in the root of the repository once to get a single `/node_modules` for all the code samples and templates. 17 | 18 | If you want to test a specific template, you can use the `yarn workspaces` command. 19 | 20 | E.g., running the development server for the map components vue template 21 | 22 | ``` 23 | yarn workspace map-components-vue-template dev 24 | ``` 25 | 26 | ## Available code samples 27 | 28 | Below are a collection of code samples that provide proof-of-concept for using ArcGIS Maps SDK for JavaScript components with a variety of popular JavaScript build tools, frameworks and module bundlers. 29 | 30 | - Map components 31 | - [AMD Script Tag](./packages/map-components/templates/amd-script-tag) 32 | - [Angular](./packages/map-components/templates/Angular) 33 | - [React](./packages/map-components/templates/react) 34 | - [Vite](./packages/map-components/templates/vite) 35 | - [Vue](./packages/map-components/templates/vue) 36 | - [Webpack](./packages/map-components/templates/webpack) 37 | - Coding components 38 | - [AMD Script Tag](./packages/coding-components/templates/amd-script-tag) 39 | - [Angular](./packages/coding-components/templates/angular) 40 | - [React](./packages/coding-components/templates/react) 41 | - [Vite](./packages/coding-components/templates/vite) 42 | - [Vue](./packages/coding-components/templates/vue) 43 | - [Webpack](./packages/coding-components/templates/webpack) 44 | - Charts components 45 | - [AMD Script Tag](./packages/charts-components/templates/amd-script-tag) 46 | - [Angular](./packages/charts-components/templates/angular) 47 | - [React](./packages/charts-components/templates/react) 48 | - [Vite](./packages/charts-components/templates/vite) 49 | - [Vue](./packages/charts-components/templates/vue) 50 | - [Webpack](./packages/charts-components/templates/webpack) 51 | 52 | ## Requirements 53 | 54 | Use of the ArcGIS Maps SDK for JavaScript is subject to [System Requirements](https://developers.arcgis.com/javascript/latest/system-requirements/), and the terms described in the product-specific [Terms of Use.](https://www.esri.com/en-us/legal/terms/product-specific-scope-of-use) Learn more about licensing [here](https://developers.arcgis.com/javascript/latest/licensing/). 55 | 56 | ## Resources 57 | 58 | - [ArcGIS Maps SDK for JavaScript](https://developers.arcgis.com/javascript/) 59 | - [https://www.esri.com/arcgis-blog/?s=#&products=js-api-arcgis](https://www.esri.com/arcgis-blog/?s=#&products=js-api-arcgis) 60 | - [twitter@EsriDevs](https://twitter.com/EsriDevs) 61 | 62 | ## Issues 63 | 64 | - General questions about using these modules or the ArcGIS Maps SDK for JavaScript? See the [Esri developer community](https://community.esri.com/t5/arcgis-api-for-javascript/ct-p/arcgis-api-for-javascript). 65 | - [Technical support](https://support.esri.com/). 66 | 67 | ## Licensing 68 | 69 | COPYRIGHT © 2024 Esri 70 | 71 | All rights reserved under the copyright laws of the United States and applicable international laws, treaties, and conventions. 72 | 73 | This material is licensed for use under the Esri Master License Agreement (MLA), and is bound by the terms of that agreement. You may redistribute and use this code without modification, provided you adhere to the terms of the MLA and include this copyright notice. 74 | 75 | See use restrictions at http://www.esri.com/legal/pdfs/mla_e204_e300/english 76 | 77 | For additional information, contact: Environmental Systems Research Institute, Inc. Attn: Contracts and Legal Services Department 380 New York Street Redlands, California, USA 92373 USA 78 | 79 | email: contracts@esri.com -------------------------------------------------------------------------------- /.syncpackrc.js: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | // @ts-check 17 | 18 | /** 19 | * Only add the version groups for which we want to enforce specific range or version. 20 | */ 21 | 22 | /** @type {import("syncpack").RcFile} */ 23 | const config = { 24 | sortFirst: [ 25 | "name", 26 | "description", 27 | "homepage", 28 | "version", 29 | "private", 30 | "sideEffects", 31 | "workspaces", 32 | "type", 33 | "module", 34 | "main", 35 | "types", 36 | "keywords", 37 | "files", 38 | "bin", 39 | "publishConfig", 40 | "license", 41 | "scripts", 42 | "acme:scripts", 43 | "dependencies", 44 | "devDependencies", 45 | "peerDependencies", 46 | "packageManager" 47 | ], 48 | sortAz: ["devDependencies", "dependencies", "peerDependencies", "optionalDependencies"], 49 | versionGroups: [ 50 | { 51 | label: "ArcGIS Core dev dependency", 52 | dependencies: ["@arcgis/core"], 53 | dependencyTypes: ["dev", "prod"], 54 | packages: ["**"], 55 | pinVersion: "~4.30.8" 56 | }, 57 | { 58 | label: "ArcGIS Components dev and prod dependency", 59 | dependencyTypes: ["dev", "prod"], 60 | dependencies: [ 61 | "@arcgis/coding-components", 62 | "@arcgis/coding-components-angular", 63 | "@arcgis/coding-components-react", 64 | "@arcgis/map-components", 65 | "@arcgis/map-components-angular", 66 | "@arcgis/map-components-react", 67 | ], 68 | packages: ["**"], 69 | pinVersion: "~4.30.5" 70 | }, 71 | { 72 | label: "ArcGIS Charts Components dev and prod dependency", 73 | dependencyTypes: ["dev", "prod"], 74 | dependencies: [ 75 | "@arcgis/charts-components", 76 | "@arcgis/charts-model", 77 | "@arcgis/charts-components-angular", 78 | "@arcgis/charts-components-react" 79 | ], 80 | packages: ["**"], 81 | pinVersion: "~4.30.2" 82 | }, 83 | { 84 | label: "Calcite Components dev dependency", 85 | dependencies: [ 86 | "@esri/calcite-components", 87 | "@esri/calcite-components-angular", 88 | "@esri/calcite-components-react" 89 | ], 90 | packages: ["**"], 91 | dependencyTypes: ["dev", "prod"], 92 | pinVersion: "^2.8.5" 93 | }, 94 | { 95 | label: "React for dev and prod", 96 | dependencyTypes: ["dev", "prod"], 97 | dependencies: [ 98 | "react", 99 | "react-dom", 100 | "@types/react-dom", 101 | "@types/react" 102 | ], 103 | packages: ["**"], 104 | pinVersion: "^18.3.0" 105 | }, 106 | { 107 | label: "Angular dev and prod deps", 108 | dependencyTypes: ["dev", "prod"], 109 | dependencies: [ 110 | "@angular/animations", 111 | "@angular/common", 112 | "@angular/compiler", 113 | "@angular/core", 114 | "@angular/forms", 115 | "@angular/platform-browser", 116 | "@angular/platform-browser-dynamic", 117 | "@angular/router", 118 | "@angular-devkit/build-angular", 119 | "@angular/cli", 120 | "@angular/compiler-cli" 121 | ], 122 | packages: ["**"], 123 | pinVersion: "^17.3.6" 124 | }, 125 | { 126 | label: "Vite for dev", 127 | dependencyTypes: ["dev"], 128 | dependencies: ["vite"], 129 | packages: ["**"], 130 | pinVersion: "^5.1.3" 131 | }, 132 | { 133 | label: "Webpack for dev", 134 | dependencyTypes: ["dev", "prod"], 135 | dependencies: ["webpack"], 136 | packages: ["**"], 137 | pinVersion: "^5.90.3" 138 | }, 139 | { 140 | label: "vue for dev, prod", 141 | dependencyTypes: ["dev", "prod"], 142 | dependencies: ["vue"], 143 | packages: ["**"], 144 | pinVersion: "^3.4.19" 145 | }, 146 | { 147 | label: "css-loader for dev", 148 | dependencyTypes: ["dev"], 149 | dependencies: ["css-loader"], 150 | packages: ["**"], 151 | pinVersion: "^6.10.0" 152 | } 153 | ] 154 | }; 155 | 156 | module.exports = config; 157 | -------------------------------------------------------------------------------- /packages/charts-components/tutorials/charts-components-with-map-components-solution/main.js: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 Esri 2 | * 3 | * Licensed under the Apache License Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | import "./style.css"; 17 | 18 | import { defineCustomElements as defineCalciteElements } from "@esri/calcite-components/dist/loader"; 19 | import { defineCustomElements as defineChartsElements } from "@arcgis/charts-components/dist/loader"; 20 | import { defineCustomElements as defineMapElements } from "@arcgis/map-components/dist/loader"; 21 | 22 | /** 23 | * Define the custom elements on the window using the Calcite Components 24 | * Use the CDN-hosted assets. When using the CDN-hosted assets, 25 | * you need to keep the version number in the path the same as the version of 26 | * `@esri/calcite-components` installed as a dependency of `@arcgis/map-components`. 27 | */ 28 | defineCalciteElements(window, { resourcesUrl: "https://js.arcgis.com/calcite-components/2.8.0/assets" }); 29 | 30 | /** 31 | * Use the Map Components to define and lazy load the custom map elements. 32 | */ 33 | defineMapElements(window, { resourcesUrl: "https://js.arcgis.com/map-components/4.30/assets" }); 34 | 35 | /** 36 | * Use the Charts Components to define and lazy load the custom charts elements. 37 | */ 38 | defineChartsElements(window, { resourcesUrl: "https://js.arcgis.com/charts-components/4.30/t9n" }); 39 | 40 | /** 41 | * Get a reference to the `arcgis-charts-scatter-plot` element 42 | */ 43 | const mapElement = document.querySelector("arcgis-map"); 44 | const scatterplotElement = document.querySelector("arcgis-charts-scatter-plot"); 45 | const actionBarElement = document.querySelector("arcgis-charts-action-bar"); 46 | 47 | /** 48 | * Add an event listener for the `arcgis-map` component's `arcgisViewReadyChange` event. 49 | */ 50 | mapElement.addEventListener("arcgisViewReadyChange", (event) => { 51 | /** 52 | * Get the map and the view from the event target 53 | */ 54 | const { map, view } = event.target; 55 | 56 | /** 57 | * Get the layer from the mapElement and the config from the layer 58 | */ 59 | const featureLayer = map.layers.find((layer) => layer.title === "CollegeScorecard_Charts"); 60 | const scatterplotConfig = featureLayer.charts[0]; 61 | 62 | /** 63 | * Assign the config and the layer to the chart element to render the chart 64 | */ 65 | scatterplotElement.config = scatterplotConfig; 66 | scatterplotElement.layer = featureLayer; 67 | 68 | /** 69 | * Get the layerView from the view 70 | * Add an event listener to the scatter plot element to listen to the selection complete event, and highlight the selected features on the map 71 | */ 72 | const featureLayerViews = view.layerViews; 73 | 74 | scatterplotElement.addEventListener("arcgisChartsSelectionComplete", (event) => { 75 | map.highlightSelect?.remove(); 76 | map.highlightSelect = featureLayerViews.items[0].highlight(event.detail.selectionOIDs); 77 | }); 78 | 79 | /** 80 | * Add an event listener to the action bar element to listen to the default action select event. 81 | */ 82 | actionBarElement.addEventListener("arcgisChartsDefaultActionSelect", (event) => { 83 | // Get the actionId and actionActive from the event detail 84 | const { actionId, actionActive } = event.detail; 85 | 86 | if (actionId === "filterByExtent") { 87 | if (mapElement.view !== undefined) { 88 | // Set the view of the scatterplot element to the map view if the Filter By Extent action is toggled on 89 | scatterplotElement.view = actionActive ? mapElement.view : undefined; 90 | } 91 | } 92 | }); 93 | }); 94 | 95 | /** 96 | * Add an event listener to the `arcgisViewClick` event on the `arcgis-map` element. 97 | * This is used to sync up a selection on the map with the scatterplot. 98 | */ 99 | mapElement.addEventListener("arcgisViewClick", (event) => { 100 | // Get the view from the event target 101 | const { view } = event.target; 102 | 103 | // Get the screen points from the event detail 104 | var screenPoints = event.detail.screenPoint; 105 | view.hitTest(screenPoints).then(getFeatures); 106 | 107 | // Get the features from the hitTest 108 | function getFeatures(response) { 109 | // Get the selected feature OID 110 | const selectedFeatureOID = response.results[0].graphic.attributes["ObjectId"]; 111 | 112 | // Set the selection data on the scatterplot element 113 | scatterplotElement.selectionData = { 114 | selectionOIDs: [selectedFeatureOID] 115 | }; 116 | } 117 | }); 118 | -------------------------------------------------------------------------------- /packages/coding-components/templates/amd-script-tag/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Coding components AMD template 7 | 8 | 29 | 30 | 31 | 32 | 33 | 34 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 50 | 51 | 52 | 53 |
54 | 55 |
56 | 57 | 58 | 147 | 148 | 149 | --------------------------------------------------------------------------------