AI-Driven Mapping Data Insights from Gemini

Leveraging AI in your web apps to transform geospatial data Last month, at the 2025 Esri Developer and Technology Summit I presented a speedgeeking session where I demoed how a simple text query can turn into dynamic map highlights using the Google Gemini natural language API and the ArcGIS Maps SDK for JavaScript. So, let’s explore exactly how I built that GIS web app — from prompt to map — in just a few steps and with minimal code. Why Gemini + GIS? I love finding fun ways to put together what I’m learning with what I already know. In this case, I wanted to let users type any question (“List the top 3 hottest countries,” “Show me countries with population > 100 million,” etc.) and instantly highlight the results on a world map. Gemini handles the natural-language parsing, while ArcGIS handles the spatial query and rendering. 1. Project Setup 1.1 Create your files In VS Code, create a new folder and inside it create the following files: index.html scripts.js styles.css 1.2 HTML skeleton Use the VSCode shortcut (! + Enter) to scaffold your HTML. Then, link your CSS and JS local files: Gemini + ArcGIS Demo 1.3 Include ArcGIS JS SDK & Calcite Add these inside before your styles.css and scripts.js: 1.4 ArcGIS API key Still in , set your key: var esriConfig = { apiKey: "YOUR_ARCGIS_KEY" }; 2. Build the UI 2.1 Layout the map and controls In the , create two columns—map on left, controls on right: Submit 2.2 CSS for layout Add minimal CSS in styles.css: html, body, arcgis-map { padding:0; margin:0; height:100%; width:100%; } .main-container { display:flex; height:100%; } .left-column { flex:1; } .right-column { position:absolute; top:10px; right:10px; background:rgba(255,255,255,0.9); padding:1rem; border-radius:4px; max-width:250px; } #countryList { margin:0.5rem 0; padding-left:1rem; } 3. Gemini Query Logic Open scripts.js. First, store your Gemini key and feature layer URL: const googleGeminiApiKey = "YOUR_GEMINI_KEY"; const featureLayerURL = "https://services.arcgis.com/.../FeatureServer/0";

Apr 28, 2025 - 23:10

AI-Driven Mapping Data Insights from Gemini

Leveraging AI in your web apps to transform geospatial data

Last month, at the 2025 Esri Developer and Technology Summit I presented a speedgeeking session where I demoed how a simple text query can turn into dynamic map highlights using the Google Gemini natural language API and the ArcGIS Maps SDK for JavaScript. So, let’s explore exactly how I built that GIS web app — from prompt to map — in just a few steps and with minimal code.

Why Gemini + GIS?

I love finding fun ways to put together what I’m learning with what I already know. In this case, I wanted to let users type any question (“List the top 3 hottest countries,” “Show me countries with population > 100 million,” etc.) and instantly highlight the results on a world map. Gemini handles the natural-language parsing, while ArcGIS handles the spatial query and rendering.

1. Project Setup

1.1 Create your files

In VS Code, create a new folder and inside it create the following files:

index.html
scripts.js
styles.css

1.2 HTML skeleton

Use the VSCode shortcut (! + Enter) to scaffold your HTML. Then, link your CSS and JS local files:




  
  
  Gemini + ArcGIS Demo

1.3 Include ArcGIS JS SDK & Calcite

Add these inside before your styles.css and scripts.js:

1.4 ArcGIS API key

Still in , set your key:

2. Build the UI

2.1 Layout the map and controls

In the , create two columns—map on left, controls on right:

2.2 CSS for layout

Add minimal CSS in styles.css:

html, body, arcgis-map { 
  padding:0;
  margin:0;
  height:100%;
  width:100%; 
}
.main-container { 
  display:flex;
  height:100%; 
}
.left-column {
  flex:1; 
}
.right-column {
  position:absolute;
  top:10px;
  right:10px;
  background:rgba(255,255,255,0.9);
  padding:1rem;
  border-radius:4px;
  max-width:250px;
}
#countryList { 
  margin:0.5rem 0;
  padding-left:1rem; 
}

3. Gemini Query Logic

Open scripts.js. First, store your Gemini key and feature layer URL:

const googleGeminiApiKey = "YOUR_GEMINI_KEY";
const featureLayerURL = "https://services.arcgis.com/.../FeatureServer/0";

Read More

Tags:

Previous Article

Understanding Linux File Permissions - The Smarter Way (Day 9 of 30)

Next Article

Building the Escape Hatch: My New Beginning in Technical Writing

Related Posts

Stop Relying on Just LocalStorage: Others are powerful too

Apr 22, 2025 0

Augmented Connected Workforce: AR/VR Trends in Remote Work

Apr 28, 2025 0

I Built a Browser Extension to Save AI Chatbot Conversa...

Apr 21, 2025 0

Name

Email

Comment