Enhance Your ArcGIS Web App with OpenAI
As I’ve progressed through my coding experiences and career (and, let’s be honest, throughout life), I’m constantly looking for fun ways to connect what I learn with what I know. Most recently, I’ve been creating a video series for web developers looking to add a bit of AI to their mapping applications. I’ve had fun testing out different AI libraries and showing developers just how easy it can be to implement these in their apps.
Today, I’m guiding you through a tutorial that shows how to generate insights about a location with minimal code. We’ll be using the OpenAI API alongside the ArcGIS Maps SDK for JavaScript, with the modern web components approach. This is a simple and declarative way to add powerful mapping features to your web apps. Don’t worry if you’re new to either of these tools — I’ll guide you through each step.
AI ArcGIS JS SDK Project Setup
To start, we’ll use a simple HTML, CSS, and JS setup. In Visual Studio Code, I’ll create the HTML, CSS, and JS files. In the HTML, I’ll use the ! Enter shortcut for the basic HTML setup. I’ll also be sure to link my CSS and JS files. Here's what it looks like so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="/styles.css" />
<script src="/scripts.js"></script>
</head>
<body>
</body>
</html>
HTML Setup
Since I’m using the ArcGIS Maps SDK for JS components, I’ll need to include a couple of libraries through CDN — Calcite Components and the ArcGIS JS SDK. We’re using CDN for simplicity, but for larger production apps, using npm is recommended.
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.13.2/calcite.css" />
<link rel="stylesheet" href="https://js.arcgis.com/4.31/esri/themes/light/main.css" />
<script type="module" src="https://js.arcgis.com/calcite-components/2.13.2/calcite.esm.js"></script>
<script src="https://js.arcgis.com/4.31/"></script>
<script type="module" src="https://js.arcgis.com/map-components/4.31/arcgis-map-components.esm.js"></script>
Before using the ArcGIS map styles, I’ll set up authentication with my ArcGIS API key. Note: Never expose your API key publicly in the frontend. In a production environment, you should use a backend server to securely handle API requests and manage keys. For now, I’ll include this above all other script tags in my HTML file for simplicity.
<script>
var esriConfig = {
apiKey: "yourKey"
};
</script>
Now, I can use the custom element to represent the map and set the basemap, center (longitude, latitude), and zoom properties to my liking.
<arcgis-map basemap="arcgis/topographic" center="-77.02, 38.89" zoom="13">
<arcgis-zoom position="top-left"></arcgis-zoom>
</arcgis-map>
Here’s what the final HTML file should look like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OpenAI + ArcGIS Map</title>
<script>
var esriConfig = {
apiKey: "yourKey"
};
</script>
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.13.2/calcite.css" />
<link rel="stylesheet" href="https://js.arcgis.com/4.31/esri/themes/light/main.css" />
<link rel="stylesheet" href="/styles.css" />
<script type="module" src="https://js.arcgis.com/calcite-components/2.13.2/calcite.esm.js"></script>
<script src="https://js.arcgis.com/4.31/"></script>
<script type="module" src="https://js.arcgis.com/map-components/4.31/arcgis-map-components.esm.js"></script>
</head>
<body>
<arcgis-map basemap="arcgis/topographic" center="-77.02, 38.89" zoom="13">
<arcgis-zoom position="top-left"></arcgis-zoom>
</arcgis-map>
<script src="/scripts.js"></script>
</body>
</html>
CSS Setup
Now, onto the CSS. We’ll start by targeting the html, body, and arcgis-map elements. Since I want my map to take up the entire page, I'll ensure there are no predefined padding or margins and that it takes up 100% of the height and width of the page.
html,
body,
arcgis-map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
At this point, you’ll be able to see your ArcGIS JS map on the screen. Functionality is limited to zooming and panning, so let’s continue!
JS Setup
Now, onto the fun part — getting our map to interact with OpenAI! First, we need to define our OpenAI API key for authentication. You’ll need to have an account with OpenAI to get one. After that, we’ll grab the map by selecting the custom element from the DOM and assigning it to the arcgisMap variable. This lets us manipulate the map programmatically.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="/styles.css" />
<script src="/scripts.js"></script>
</head>
<body>
</body>
</html>
Speaking of interacting with our map, we’ll go ahead and add an event listener to it. We’ll capture the arcgisViewClick event, which is triggered when the user clicks anywhere on the map. This will help us get the clicked location and send it to the OpenAI API.
After the user clicks, we’ll extract the map coordinates (mapPoint) from the event details and store them in the params object. This gives us the location (longitude, latitude) where the user clicked. We'll also use outFields: "*" to request all attributes for the clicked feature (you can refine this based on your needs).
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.13.2/calcite.css" />
<link rel="stylesheet" href="https://js.arcgis.com/4.31/esri/themes/light/main.css" />
<script type="module" src="https://js.arcgis.com/calcite-components/2.13.2/calcite.esm.js"></script>
<script src="https://js.arcgis.com/4.31/"></script>
<script type="module" src="https://js.arcgis.com/map-components/4.31/arcgis-map-components.esm.js"></script>
Now, let’s move on to getting the response from OpenAI. First, we define the prompt that will be sent to the API using the longitude and latitude from params.location. Next, we'll destructure the choices array from the response. This is where OpenAI will store the generated content based on our prompt. We'll then call the OpenAI API with fetch(), sending a POST request to the chat/completions endpoint. The headers include Content-Type: application/json to indicate we're sending and receiving JSON, and Authorization with the Bearer token for authentication.
In the body, we specify the model (I’m choosing the gpt-4o model here). Then, we'll pass the prompt in the messages field with a "user" role, indicating it's user input. After making the request, we use await to get the response and call .json() to parse it.
<script>
var esriConfig = {
apiKey: "yourKey"
};
</script>
Finally, we use arcgisMap.popup.open() to display a popup at the clicked location. The longitude and latitude are set from params.location, and the title is whatever you choose. The content is set to the AI-generated text from choices[0].message.content, showing the fact on the map.
<arcgis-map basemap="arcgis/topographic" center="-77.02, 38.89" zoom="13">
<arcgis-zoom position="top-left"></arcgis-zoom>
</arcgis-map>
Final App in Action
With everything set up, this app now allows users to click anywhere on the map. Based on their click, it sends the coordinates to the OpenAI API. The API generates a relevant fact about that location, which is then displayed in a popup on the map. But don’t stop there — have fun with it! You can easily change the prompt sent to OpenAI. For example, you could ask for a scary fact ?, a funny one ?, or even ask it to include emojis! ?
For your reference, here’s a CodePen with the full code.
Conclusion
By following these steps, we’ve successfully created an AI-powered mapping application. Here’s a quick recap of what we’ve done:
Set up the map using the ArcGIS Maps SDK for JavaScript Web Components via CDN.
Used the OpenAI API to generate dynamic content based on clicked locations.
Displayed that content in a popup on the map.
With this approach, you’ve seen how easy it is to integrate AI and mapping tools into your web applications. The key takeaway is that it really takes minimal setup and code to build powerful applications that combine real-time user interactions with AI insights.
So whether you’re enhancing your mapping projects or exploring new ways to use AI, I hope I’ve inspired you today. I’d love to see any future creations you make, so please share them here or with me on my socials. I’d love to see your work!
This article was written by Courtney Yatteau, a Developer Advocate at Esri. The opinions expressed in this article are solely Courtney’s and do not necessarily represent the views, strategies, or opinions of her employer. If you have any feedback, please feel free to like and/or comment. Additionally, if you have any questions or comments that you’d prefer to send privately, you can contact Courtney through LinkedIn, X, Bluesky, or email. If you’re considering a career switch, looking to get into tech, or curious about what it’s like to work at Esri, then please stay tuned for future posts! You can also check out Esri’s careers page or this video for more information.
The above is the detailed content of Enhance Your ArcGIS Web App with OpenAI. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What should I do if I encounter garbled code printing for front-end thermal paper receipts?
Apr 04, 2025 pm 02:42 PM
Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...
Demystifying JavaScript: What It Does and Why It Matters
Apr 09, 2025 am 12:07 AM
JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.
Who gets paid more Python or JavaScript?
Apr 04, 2025 am 12:09 AM
There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.
Is JavaScript hard to learn?
Apr 03, 2025 am 12:20 AM
Learning JavaScript is not difficult, but it is challenging. 1) Understand basic concepts such as variables, data types, functions, etc. 2) Master asynchronous programming and implement it through event loops. 3) Use DOM operations and Promise to handle asynchronous requests. 4) Avoid common mistakes and use debugging techniques. 5) Optimize performance and follow best practices.
How to achieve parallax scrolling and element animation effects, like Shiseido's official website?
or:
How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website?
Apr 04, 2025 pm 05:36 PM
Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...
How to merge array elements with the same ID into one object using JavaScript?
Apr 04, 2025 pm 05:09 PM
How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...
The Evolution of JavaScript: Current Trends and Future Prospects
Apr 10, 2025 am 09:33 AM
The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.
The difference in console.log output result: Why are the two calls different?
Apr 04, 2025 pm 05:12 PM
In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...
