From the course: Using Spatial Data in AI Workflows
Join today to access over 25,600 courses taught by industry experts.
Build the map application
From the course: Using Spatial Data in AI Workflows
Build the map application
Now, let's assemble the application. We are working with three files, index.html for the structure, style.css for the dark mode look, and app.js for the logic. Open app.js. First, we initialize the map using MapLibre. We load a dark base map from Cardo. This gives us a nice high contrast canvas. Then, we load our data, airports.js. This is a GeoJSON file containing 150 airports in the United States. We add it to the map as a circle layer, using color coding, red for large airports, orange for medium, and blue for small. Now let's look at the AI integration. Scroll down to the sendMessage function. This is where the user's text leaves the browser and goes to the Groq API. We send the user's message plus the list of tools we designed in the last video. When the response comes back, we check, did the model ask to call a tool? If yes, we enter the executeToolCall function. This is the switchboard. If the tool name is move map, we call the MapLibre function map.flyTo. If the tool name is…
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.