Jan 16
Loading video player...
In this session, Shriram Sankaran, Senior Product Manager at Syncfusion, walks you through how to build smart, AI-powered, interactive maps in your Blazor applications using Azure OpenAI—all without traditional geospatial APIs or databases. You’ll learn how to take a user query like “cafes in Paris” or “hospitals in New York” and transform it into dynamic, real-time map markers enriched with detailed descriptions and even images. Using Blazor (.NET 9), Azure OpenAI Chat Completions, and Syncfusion Blazor components, Shriram demonstrates how quickly you can build a fully functional, natural-language-driven mapping experience. Whether you're exploring AI-powered features for enterprise apps or experimenting with .NET’s growing AI ecosystem, this demo gives you a complete, working example you can start using today. Find the Source Code here: https://github.com/SyncfusionExamples/build-smart-interactive-maps-with-azure-openai You’ll Learn How To: - Set up a Blazor Web App using .NET 9 with server interactivity - Connect to Azure OpenAI using Chat Completions - Generate structured JSON geolocation data from natural language prompts - Parse AI responses and bind them to an interactive map - Use Syncfusion Blazor Maps, TextBox, and Spinner components - Display contextual tooltips with dynamic images - Build a fully interactive AI-powered map with minimal configuration Who This Session Is For: - .NET developers adopting AI in their applications - Blazor developers building interactive UI features - Teams exploring Azure OpenAI integrations - Beginners with no geospatial or mapping background BOOKMARK DETAILS ----------------- [00:00] Welcome & Session Overview [00:33] What You’ll Build Today [01:27] Agenda & Learning Path [02:12] Demo Overview [03:01] Why AI for Geospatial Experience? [03:56] Prerequisites & Setup [04:18] Starting the Live Demo [05:32] Installing Syncfusion Packages [08:16] Registering Services & Configuring the App [09:38] Creating the Azure OpenAI Service Class [16:49] Handling AI Response Success & Error Paths [18:12] Registering DI, License Keys & Models [21:06] Building the Marker Model [23:16] Implementing the AI-Powered Marker Fetch [25:43] Adding Syncfusion Map Components [27:18] Adding a Natural Language Search Box [30:19] Adding Dynamic Tooltip Images [32:04] Live Demo Showcase [33:20] Key Takeaways & Resources SUBSCRIBE ------------- Syncfusion on YouTube: https://www.youtube.com/user/syncfusioninc Sign up to receive email updates: https://www.syncfusion.com/account/email-preference SOCIAL COMMUNITIES ----------------------------- Facebook: https://www.facebook.com/Syncfusion/ X: https://x.com/Syncfusion LinkedIn: https://www.linkedin.com/company/syncfusion/ Instagram: https://www.instagram.com/syncfusionofficial #blazor #dotnet #azureopenai #syncfusion #blazormaps #aiapps #dotnet9 #developers #webdevelopment