You can use these instructions in the Legacy samples for ArcGIS Maps SDK for JavaScript Resources to install the 3.x types. Follow the instructions outlined in the /3.x/typescript
directory.
Use import * as esri from 'esri';
to implement the types as shown here.
// define a type that is an array of the 3.x types you are using
// and indicate that loadModules() will resolve with that type
type MapModules = [typeof import("esri/map"), typeof import("esri/geometry/Extent")];
const [Map, Extent] = await (loadModules(["esri/map", "esri/geometry/Extent"]) as Promise<MapModules>);
// the returned objects now have type
let map = new Map("viewDiv"...
A more complete 3.x sample can be seen here.
A more complete 4.x sample can be seen here.
Since this library also works with v3.x of the ArcGIS Maps SDK, the community has made some effort to get it to work with some of the older browsers supported by 3.x like IE < 11.
Here is an archive of some applications and framework-specific wrapper libraries that use this library. Most of these examples haven't been updated in a long time, so check the version of esri-loader and their commit history before using them as a reference. They are presented by framework in alphabetical order - not picking any favorites here 😜:
- angular-esri-components - A set of Angular components to work with ArcGIS Maps SDK for JavaScript v4.3
- angular-cli-esri-map - Example of how to build a simple mapping component using Angular CLI.
- can-arcgis - CanJS configurable mapping app (inspired by cmv-app) and components built for the ArcGIS Maps SDK for JavaScript 4.x, bundled with StealJS
- esri-choo-example - An example Choo application that shows how to use esri-loader to create a custom map view.
-
dojo-esri-loader - Dojo 5 app with esri-loader (blog post)
-
esri-dojo - An example of how to use Esri Loader with Dojo 2+. This example is a simple map that allows you to place markers on it.
- ng-cli-electron-esri - This project is meant to demonstrate how to run a mapping application using the ArcGIS Maps SDK for JavaScript inside of Electron
- ember-esri-loader - An Ember addon that wraps this library
See the examples over at ember-esri-loader
- esri-glimmer-example - An example of how to use the ArcGIS Maps SDK for JavaScript in a https://glimmerjs.com/ application
- esri-hyperapp-example - An example Hyperapp application that shows how to use esri-loader to create a custom map view and component.
- esri-preact-pwa - An example progressive web app (PWA) using the ArcGIS Maps SDK for JavaScript built with Preact
- esri-loader-hooks - Custom React hooks for using the ArcGIS Maps SDK for JavaScript with esri-loader
- react-arcgis - A few components to help you get started using esri-loader with React
- esri-loader-react - A React component wrapper around esri-loader (blog post)
- arcgis-react-redux-legend - Legend control for ArcGIS JS v4 using React and Redux
- create-arcgis-app - An example of how to use the ArcGIS platform in an application created with Create React App and React Router.
- next-arcgis-app - An example of how to use the ArcGIS platform in an application built with Next.js
- esri-loader-react-starter-kit - A fork of the react-starter-kit showing how to use esri-loader in an isomorphic/universal React application
- create-react-app-esri-loader - An example create-react-app application that uses esri-loader-react to load the ArcGIS Maps SDK for JavaScript
- React-Typescript-App-with-ArcGIS-JSAPI - An example create-react-app application that uses esri-loader, esri-loader-react, Typescript, Webpack3 to create MapView
- esri-riot-example - An example Riot application that shows how to use esri-loader to create a custom
<esri-map-view>
component.
- esri-stencil-example - An example Stencil application that shows how to use esri-loader to create a custom map view component and implement some basic routing controlling the map state
- esri-svelte-example - An example Svelte application that shows how to use esri-loader to load a map.
- esri-svelte-basemaps-example - An example Svelte application that shows how to use esri-loader to create a custom
<EsriMapView>
component and explore various basemaps.
- CreateMap - Create Map: City of Baltimore - https://gis.baltimorecity.gov/createmap/#/
- City of Baltimore: Map Gallery - Map Gallery built with Vue.js that uses this library to load the ArcGIS SDK
- vue-jsapi4 - An example of how to use the ArcGIS Maps SDK for Javascript in a NUXT application (blog post, video)
- esri-vue-cli-example - An example of how to use the ArcGIS Maps SDK for JavaScript 3.x in a vue-cli application