ArcGIS API for Javascript
Tutorial Contents
What is ArcGIS API for Javascript?
ArcGIS API for JavaScript is a developer product for building mapping and spatial analysis applications for the web. The SDK contains a JavaScript API, API reference, documentation, samples, and other resources to assist with building web mapping applications. The SDK is designed to work optimally with the ArcGIS system and provide comprehensive GIS capabilities.
ArcGIS Maps SDK for JavaScript
ArcGIS Maps SDK for JavaScript to build compelling web apps that unlock your dataset potential with interactive user experiences and stunning 2D and 3D visualizations.
If you are new to ArcGIS start with the mapping APIs and location services guide.
Start Building your App
- Install and set up the API
- Get an API key
- Start the Display a map tutorial
Display a Map
This tutorial shows how to create and display a map of the Santa Monica Mountains in California using the topographic basemap layer.
Create a new pen
Go to CodePen to create a new pen for your mapping application.
Add HTML
Define an HTML page to create a map that is the full width and height of the web browser window.
In CodePen > HTML, add HTML and CSS to create a page with a viewDiv element.
The viewDiv is the element displays the map and its CSS resets any browser settings so it can consume the full width and height of the browser.
Add modules
The ArcGIS Maps SDK for JavaScript is available as AMD modules and ES modules,
You can specify "esri/Map" for loading the Map module.
After the modules are loaded, they are passed as parameters to the callback function where they can be used in your application.
It is important to keep the module references and callback parameters in the same order.
For more information on the different types of modules, visit the Introduction to Tooling guide topic.
In the <head> tag, add a <script> tag and a require statement to load the Map and MapView modules.
Get an API key
Go to your developer dashboard to get an API key.
Copy the key as it will be used in the next step.
Create a map
Use a Map to set the basemap layer and apply your API key.
In the CodePen, create a new Map and set the basemap property to arcgis-topographic. To enable access to the Basemap layer service, set the apiKey property of the Map.
Create a map view
Use a MapView class to set the location of the map to display.
Create a MapView and set the map property. To center the map view, set the center property, and the zoom property. Set the container property to viewDiv to display the contents of the map.
Run the app
In CodePen, run your code to display the map.