${result.name}
${result.place_formatted || ''}
`
)
.join('');
// Handle result selection
resultsContainer.querySelectorAll('.result').forEach((el) => {
el.addEventListener('click', async () => {
const feature = await search.retrieve(el.dataset.id);
handleResultSelection(feature);
});
});
}
function handleResultSelection(feature) {
const [lng, lat] = feature.geometry.coordinates;
// Fly map to result
map.flyTo({
center: [lng, lat],
zoom: 15
});
// Add marker
new mapboxgl.Marker().setLngLat([lng, lat]).addTo(map);
// Close results
resultsContainer.innerHTML = '';
input.value = feature.properties.name;
}
```
--------------------------------
### Run Agent with Complex Query
Source: https://github.com/mapbox/mapbox-agent-skills/blob/main/skills/mapbox-mcp-runtime-patterns/references/smolagents.md
Demonstrates how to run an agent with a complex natural language query that includes location, search criteria, and distance calculations. Ensure the agent is properly initialized with necessary tools.
```python
result = agent.run(
"Find restaurants within 10 minutes walking from Times Square NYC "
"(coordinates: -73.9857, 40.7484). Calculate distances to each."
)
print(result)
```
--------------------------------
### Example GeoJSON Feature Structure
Source: https://github.com/mapbox/mapbox-agent-skills/blob/main/skills/mapbox-data-visualization-patterns/AGENTS.md
Illustrates the structure of a GeoJSON feature with properties that can be accessed by Mapbox Style expressions.
```json
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-77.0323, 38.9131] // [longitude, latitude]
},
"properties": {
"magnitude": 7.8, // Custom data property
"value": 42, // Another property
"category": "coffee" // Can be any data type
}
}
```
--------------------------------
### Tool Selection Flowchart
Source: https://github.com/mapbox/mapbox-agent-skills/blob/main/skills/mapbox-search-patterns/SKILL.md
A flowchart to guide the selection of the appropriate Mapbox tool based on the user's query.
```text
User query contains...
-> Specific name/brand (Starbucks, Empire State Building)
-> search_and_geocode_tool
-> Generic category/plural (coffee shops, museums, any restaurant)
-> category_search_tool
-> Coordinates -> Address
-> reverse_geocode_tool
-> Address -> Coordinates
-> search_and_geocode_tool with types: ["address"]
```
--------------------------------
### Get MapboxMap Controller
Source: https://github.com/mapbox/mapbox-agent-skills/blob/main/skills/mapbox-flutter-patterns/SKILL.md
Obtain the `MapboxMap` controller via the `onMapCreated` callback to interact with the map after it's initialized.
```dart
class MapScreen extends StatefulWidget {
const MapScreen({super.key});
@override
State