This is a web page.
A spinning planet in about thirty lines of code. Everything below is live, and you can build it.
<!DOCTYPE html>
<html>
<head>
<script type="module" src="https://js.arcgis.com/5.1/"></script>
<style> arcgis-scene { height: 100vh; display: block; } </style>
</head>
<body>
<arcgis-scene id="globe" basemap="satellite" ground="world-elevation">
</arcgis-scene>
<script type="module">
const el = document.getElementById("globe");
el.addEventListener("arcgisViewReadyChange", () => {
if (!el.ready) return;
const view = el.view;
let spinning = true;
view.on("pointer-down", () => (spinning = false)); // hand it to the user
(function spin() {
if (!spinning) return;
const camera = view.camera.clone();
camera.position.longitude -= 0.05; // one slow turn every two minutes
view.camera = camera;
requestAnimationFrame(spin);
})();
}, { once: true });
</script>
</body>
</html>What an SDK actually is
SDK stands for Software Development Kit. Forget the acronym. Think of it as a box of finished map parts: the maps, the globes, the layers, the legends, the search bars, the time sliders, the charts. Esri built every part, tested every part, and keeps every part current.
Experience Builder hands you a furnished model home. The rooms are nice, but the walls are where the walls are. The SDK hands you the same materials and lets you place every wall yourself. Same Esri foundation, same data, same security. The difference is who decides what the tool looks like and how it behaves: the template, or you.
And here is the part that surprises people: you do not install anything. One line in a plain web page loads the whole kit from Esri's servers. The planet above arrived through that one line. Your "development environment" can be a single text file.
The Parts
Maps, globes, layers, widgets, and charts as ready-made building blocks. You assemble; you do not invent.
The Freedom
Any layout, any behavior, any audience. If you can describe it, the page can do it.
The Reach
It runs in a plain web page. Public layers are free; your org's secured layers work too, with the ArcGIS sign-in you already have.
Your first map is one HTML tag
This is a complete web page. Not an excerpt. Ten lines, and three of them are just closing tags.
<!DOCTYPE html>
<html>
<head>
<script type="module" src="https://js.arcgis.com/5.1/"></script>
<style> arcgis-map { height: 100vh; display: block; } </style>
</head>
<body>
<arcgis-map basemap="osm" center="-82.46,27.95" zoom="7"></arcgis-map>
</body>
</html>A map is now an HTML tag, the same way a photo is. Change center and zoom and it is anywhere on Earth.
Add live data with a dozen lines
Point the page at any public feed. This one is the United States Geological Survey: every earthquake on the planet in the last seven days, sized by magnitude. Yes, Map Viewer can plot this feed too. Hold that thought: the next section is where the paths split.
const GeoJSONLayer = await $arcgis.import(
"@arcgis/core/layers/GeoJSONLayer.js");
const quakes = new GeoJSONLayer({
url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson",
renderer: {
type: "simple",
symbol: { type: "simple-marker",
color: [216, 0, 27, 0.55],
outline: { color: "white", width: 0.4 } },
visualVariables: [{ type: "size", field: "mag",
stops: [{ value: 1, size: 3 }, { value: 7, size: 28 }] }],
},
});
document.querySelector("arcgis-map").map.add(quakes);No export, no copy, no upload. The dots on this map happened this week. And nobody memorizes this syntax: The AI Shift explains who types it now.
Make it answer questions
Sixteen more lines and the map talks back. Click any earthquake: the page writes the card itself, in your layout, worded exactly as you decide, with no pop-up chrome. This is where templates stop and you keep going.
Click an earthquake to see its card.
const mapEl = document.getElementById("answerMap");
const card = document.getElementById("answerCard");
mapEl.view.on("click", async (event) => {
const hit = await mapEl.view.hitTest(event, { include: quakes });
const result = hit.results.find((r) => r.graphic?.layer === quakes);
if (!result) return;
const a = result.graphic.attributes;
const hours = Math.max(1, Math.round((Date.now() - a.time) / 3600000));
const when = hours < 48 ? `${hours} hours ago`
: `${Math.round(hours / 24)} days ago`;
card.innerHTML = `
<h3>Magnitude ${Number(a.mag).toFixed(1)}</h3>
<p>${a.place}</p>
<p>${when}</p>`;
});The same kit does 3D and time
Two more parts from the same box, each about twenty lines. Not screenshots. Drag them.
const [SceneLayer, Camera, Point] = await $arcgis.import([
"@arcgis/core/layers/SceneLayer.js", // ask the kit for more parts
"@arcgis/core/Camera.js",
"@arcgis/core/geometry/Point.js",
]);
const sceneEl = document.querySelector("arcgis-scene");
sceneEl.map.add(new SceneLayer({
url: "https://basemaps3d.arcgis.com/arcgis/rest/services/OpenStreetMap3D_Buildings_v1/SceneServer",
}));
sceneEl.view.goTo(new Camera({
position: new Point({ longitude: -74.0027, latitude: 40.6935,
z: 900, spatialReference: { wkid: 4326 } }),
tilt: 68,
heading: 33,
}));<arcgis-map basemap="osm" center="-65,28" zoom="3">
<arcgis-time-slider mode="cumulative-from-start" loop play-rate="90">
</arcgis-time-slider>
</arcgis-map>
<script type="module">
const FeatureLayer = await $arcgis.import(
"@arcgis/core/layers/FeatureLayer.js");
const mapEl = document.querySelector("arcgis-map");
const slider = document.querySelector("arcgis-time-slider");
const storms = new FeatureLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Hurricanes/MapServer/0",
});
mapEl.map.add(storms);
await storms.when();
slider.fullTimeExtent = storms.timeInfo.fullTimeExtent;
slider.stops = { interval: { value: 6, unit: "hours" } };
slider.play();
</script>So why do we all build dashboards?
Because until recently, this was the honest math: Experience Builder and Dashboards gave you eighty percent of what you wanted in an afternoon, and the SDK gave you a hundred percent in a month of JavaScript you did not have time to learn. Most of us took the eighty percent. That was the right call.
But the trade has changed. The builders still cost an afternoon. The SDK now costs about the same afternoon, because an AI assistant writes the first draft of the code and you steer it in plain English. When both paths take a day, the question is no longer which one is faster. It is which one gives you the tool you actually imagined.
Reach for the builders when
- The standard widgets already say what you need to say.
- The app is internal, routine, and temporary.
- You want Esri to upgrade the app for you as the platform moves.
- Nobody on the team wants to touch a code file, even with help.
Reach for the SDK when
- You caught yourself saying "I wish it could just..."
- The idea in your head has a globe, a timeline, or a story in it.
- You are happy owning one file that keeps working, pinned to a version, until you choose to update it.
- You want one page that loads fast, looks like yours, and does exactly one job well.
The AI shift, plainly stated
Here is the workflow that changed the trade. You open an AI assistant (Claude or ChatGPT, whichever your org allows) and describe the tool: "A globe that spins until you grab it. Clicking an earthquake shows its magnitude in a card, not a pop-up." The assistant writes the SDK code. You look at the result, ask for changes the way you would ask a colleague, and repeat until it is right.
You are not typing JavaScript from memory. You are directing it. Your GIS judgment, the part you already have, is what steers: which layers, which fields, what the audience needs, what would mislead them. The assistant supplies syntax; you supply sense.
Two cautions. First, you still test what it builds, the same way you would check a stranger's map before publishing it. Second, the first day feels unfamiliar. After that first day, building any demo on this page feels like a superpower.
"On the earthquake map, when someone clicks a quake, show a card
below the map with the magnitude, the place, and how long ago it
happened. No default pop-ups. Plain wording."
The click handler in Make It Answer is what came back.Esri is building this straight into the kit too. The 5.x box ships beta AI components: an assistant chat panel whose agents pan the map, query the data, and explain the layers, each one an HTML tag like everything else on this page. The catch is governance, not code: it only works for signed-in ArcGIS users whose organization has AI assistants turned on, so it stays in a code block here. When your org flips that switch, it is seven tags. Until then, the open path already works: the Field Guide's Ask panel on this site is the same idea, built with the Claude API and one small serverless file.
<arcgis-map id="map" item-id="YOUR_WEB_MAP_ID"></arcgis-map>
<arcgis-assistant reference-element="#map"
heading="Map Assistant"
description="Ask questions about the data on this map.">
<arcgis-assistant-navigation-agent></arcgis-assistant-navigation-agent>
<arcgis-assistant-data-exploration-agent></arcgis-assistant-data-exploration-agent>
<arcgis-assistant-help-agent></arcgis-assistant-help-agent>
</arcgis-assistant>
<!-- Needs: a signed-in ArcGIS Online user whose org has
AI assistants enabled. Layout tags trimmed for clarity. -->Watch the four-minute film
A short film on how mapping work used to be done, how it works now, and what building layers really means.
Start here
-
Save the ten-line file
Copy the file from Your First Map into a text editor and save it as
map.html. Double-click it. That is a running SDK app. -
Ask for one change
Open an AI assistant (Claude and ChatGPT both work), paste the file, and ask for something small: your city, a different basemap, one of your own layers. Watch what comes back.
-
Read the real documentation
Esri's SDK documentation and components reference are excellent, and every sample runs live in the browser.
-
Put it on the web, when you are ready
A file on a shared drive already works for your team. When you want a real URL, a free GitHub account and a free Vercel account get you there in about an hour the first time; check your org's policy before publishing work data. This page was published exactly that way.
-
Learn it properly
This page is the demonstration; the course is at coding.jbf.com, where a dedicated ArcGIS SDK section takes the slow road: components, patterns, and real exercises, in plain English.