🔍 ITAG 2026 — The Case File

Case Status: Solved

Thank you for attending dymaptic's sessions at ITAG 2026!

Iowa Technology & Geospatial Conference · The Meadows, Altoona, Iowa · June 2, 2026

Every good investigation ends with the evidence laid out on the table. Below is the complete case file — every tool, dataset, and document referenced across dymaptic's ITAG sessions. Follow the leads.

Four sessions · four case files — open the one whose room you were in, then follow its leads down to the evidence.

🚪 Stop Searching for the Perfect Prompt List

Tue Jun 2 · 1:15 PM workshop · Tim Purdum & Holly Kluever

The trick isn't the prompt — it's the context. Treat AI like a junior colleague: give it real context, accept a draft, push back, iterate.

📅 Session on the ITAG schedule 📄 Investigate the Slide Show 🤖 The 8 ArcGIS AI Assistants — jump to the evidence ↓ 🗣️ General AI chatbots — jump to the evidence ↓ 🧪 ArcGIS Arcade Playground — practice the expressions live

🚪 From Plain English to GIS App in 30 Minutes or Less

Wed Jun 3 · 10:30 AM · Skinner C · Tim Purdum

Watch a single English sentence become a working Blazor mapping app: "Build me a map of Iowa's bridges from the National Bridge Inventory, colored by condition."

📅 Session on the ITAG schedule 📄 Investigate the Slide Show 🤖 Claude Code — the AI agent that built the app on stage 🧰 GeoBlazor — jump to the evidence ↓ 🛰️ ArcGIS & Esri — jump to the evidence ↓ 🧱 Blazor & .NET — jump to the evidence ↓ 🔬 The Iowa bridge data — jump to the evidence ↓

🚪 Your ArcGIS Monitor Has Been Taking Notes. Are You Reading Them?

Wed Jun 3 · 1:30 PM · Skinner B · dymaptic

Monitor records everything — but the gap between data collection and operational insight is wide. Point an AI at Monitor's REST API and have it write the narrative report for the person who never opens the dashboard.

📅 Session on the ITAG schedule 📄 Investigate the Slide Show 🗣️ Works with any AI chatbot — jump to the evidence ↓ 🏢 dymaptic — ArcGIS Monitor consulting & AI reports

🚪 Maps Don't Speak for Themselves: Storytelling for GIS Professionals

Wed Jun 3 · 2:45 PM · Skinner B · Holly Kluever

The hard part isn't building the dashboard — it's getting other departments to actually open and use it. How to frame a map for a real audience so the work lands.

📅 Session on the ITAG schedule 📖 ArcGIS StoryMaps 📄 Investigate the Slide Show 📝 AI Prompt for GIS Storytelling — the handout 🤖 StoryMaps Assistant & the AI lineup — jump to the evidence ↓

🕵️ Persons of Interest — Contact

dymaptic — Tim Purdum & Holly Kluever 📧tim.purdum@dymaptic.com 📧holly.kluever@dymaptic.com timpurdum.dev — blog & more presentation links

Case Closed — Discover GeoBlazor

Add interactive maps to your Blazor applications — open source and MIT licensed.

C# Advent Calendar 2025

It's that time of year again. The airports are packed, the highways are jammed, and everyone's trying to get somewhere—whether it's Grandma's house, a cozy cabin in the mountains, or anywhere that isn't the office. And what does every holiday traveler need? A good map.

In this post, I'll show you how to add interactive maps and GPS tracking to your Blazor applications using GeoBlazor—a Blazor component library that wraps the powerful ArcGIS JavaScript SDK. We'll build a simple "find your way to Grandma's" navigation app, starting with the free GeoBlazor Core and then showing how GeoBlazor Pro can level up your app with continuous GPS tracking and turn-by-turn navigation.

The best part? The same code works on web and mobile (via .NET MAUI Blazor Hybrid), so you could really use such an app on the go with your phone, like Google or Apple maps but with your own custom features. Write once, navigate everywhere.

Let's pack our bags and hit the road!

Packing for the Trip: Setting Up GeoBlazor

Before any road trip, you need to pack. For our mapping journey, that means setting up a new GeoBlazor project.

The easiest way to get started is with the GeoBlazor project templates. Install them via the .NET CLI:

Now create your project:

This scaffolds a Blazor Web App project with GeoBlazor already configured for the Interactive Server rendering mode. The template sets up everything you need: package references, service registration, and a sample map page.

Before you can display maps, you'll need an ArcGIS API key. Head over to the ArcGIS Developer Portal and sign up for a free account. Once you have your key, add it to appsettings.json:

If you're using GeoBlazor Pro (more on that later), you'll also need a registration key:

That's it—bags packed, we're ready to go!

Starting the Journey: Your First Map

With GeoBlazor, adding a map to your Blazor app is as simple as adding a component. If you're familiar with Blazor's declarative syntax, this will feel right at home.

Open up a Razor page and add your first map:

That's a full-screen map of the United States, centered and ready to explore. Let's break down what's happening:

• MapView is the main container component. It handles rendering, user interaction, and camera positioning. The Longitude, Latitude, and Zoom properties set the initial view.
• Map represents the map's data model—the layers, basemap, and other content.
• Basemap provides the background imagery. We're using ArcgisNavigation, which is perfect for turn-by-turn directions with its clean, road-focused design.

The component hierarchy mirrors how you'd think about a map: you have a view that displays a map that has a basemap. Simple and intuitive.

Run your app and you should see a beautiful, interactive map. Pan around, zoom in and out—it all just works.

Tip: GeoBlazor also offers SceneView for 3D maps. If you want to see the terrain as you virtually fly to Grandma's house, just swap MapView for SceneView and add a Tilt property!

Finding Your Destination: "Where to, Grandma's house?"

A map is nice, but we need to actually find where we're going. GeoBlazor includes a SearchWidget that lets users type an address and geocode it to coordinates.

Add the search widget inside your MapView:

Type "123 Main Street, Anytown, USA" (or Grandma's actual address) and the widget will geocode it, drop a pin, and zoom the map to that location. The OnSelectResult event gives you access to the result, including the geographic coordinates.

Notice how GeoBlazor provides strongly-typed events. No need to parse JSON or deal with dynamic objects—you get SearchSelectResultEvent with all the data you need in a clean C# object.

Are We There Yet? GPS Tracking

Now for the fun part—tracking your location as you make your way to Grandma's house. We'll look at two approaches: manual location updates with GeoBlazor Core (free), and continuous tracking with GeoBlazor Pro.

Manual Location with GeoBlazor Core

GeoBlazor Core includes the LocateWidget, which finds the user's current location on demand. Think of it like pulling over to check the map—it works, but you have to do it manually. Currently, the event returns a JSON string, which you need to parse to get the location.

Click the "Where Am I?" button or the LocateWidget itself, and the map zooms to your current location. Simple, effective, and free with GeoBlazor Core.

This approach is great for:

• "Check-in" style updates
• Battery-conscious mobile apps
• Simple "where am I?" functionality

If you wanted to navigate between the two points, you could draw a GeoBlazor Polyline Graphic between them, but that would be a straight line "as the crow flies". Great for Santa's sleigh, not so much for the SUV. You could also add your own navigational data sets to generate Polylines.

Here's an example with pre-set start and stop points and a simple line drawn between. You can still update the start and stop points with the widgets.

Continuous Tracking with GeoBlazor Pro

If you want all that hands-free navigation like your car's GPS out of the box, GeoBlazor Pro adds the TrackWidget, which continuously monitors your location and updates the map as you move—no button pressing required.

To upgrade, first update your package reference:

Update your service registration in Program.cs:

Add the Pro imports to your _Imports.razor:

Now replace LocateWidget with TrackWidget:

Click on the Tracking Widget to have it start tracking you. The TrackWidget continuously fires OnTrack events as you move. Enable RotationEnabled and the map even rotates to match your heading—just like a real car GPS.

Turn-by-Turn Directions with RouteService

Of course, real navigation needs actual driving directions—not just a straight line. GeoBlazor Pro includes the RouteService, which connects to ArcGIS routing services to calculate real road-based routes between points.

Here's how to get turn-by-turn directions from your current location to Grandma's house:

The RouteService.Solve() method takes a routing service URL and parameters, then returns the optimal route along with turn-by-turn directions. The route geometry can be displayed as a Graphic on the map, giving users a clear visual path to follow.

Key features of RouteService:

• Real road routing — Follows actual roads, not straight lines
• Turn-by-turn directions — Get text instructions for each maneuver
• Multiple stops — Plan routes with waypoints (stop for gas, pick up Aunt Martha)
• Travel modes — Configure for driving, walking, or trucking
• Traffic awareness — Factor in current traffic conditions for accurate ETAs

Which Should You Choose?

For a holiday trip tracker, GeoBlazor Pro's continuous tracking makes all the difference. But if you're just building a simple "store locator" or want to keep costs down, GeoBlazor Core has you covered.

Arriving Home: Conclusion

We've built a holiday navigation app with GeoBlazor! Here's what we covered:

1. Setup — Install the GeoBlazor template and configure your API key
2. Maps — Add an interactive map with just a few lines of declarative Razor markup
3. Search — Let users find addresses with the built-in SearchWidget
4. GPS — Track location manually with LocateWidget (Core) or continuously with TrackWidget (Pro)
5. Routing — Get turn-by-turn directions with RouteService (Pro)

The full AutoNav sample application that inspired this post is available on GitHub. It includes routing, turn-by-turn directions, and cross-platform support for both web and mobile (MAUI Hybrid).

Resources

• GeoBlazor Home Page
• GeoBlazor Documentation
• ArcGIS Developer Portal — Get your free API key
• GeoBlazor GitHub
• C# Advent Calendar

Whether you're building a full turn-by-turn navigation app or just want to show users where the nearest coffee shop is, GeoBlazor makes it easy to add rich mapping capabilities to your Blazor applications.

Now go ahead—fire up that app and get everyone home safely for the holidays!

Happy travels and happy coding!

This post is part of the C# Advent Calendar 2025. Check out all the other great posts from the community!

Thank you for attending my sessions at Live360 2025!

Discover GeoBlazor

Check out GeoBlazor to quickly add interactive maps to your Blazor applications

Session 1: Blazor for JavaScript Developers

Session 2: Blazor State Management

Thank you for attending my sessions at TechBash 2025!

Discover GeoBlazor

Check out GeoBlazor to quickly add interactive maps to your Blazor applications

Session 1: Blazor for JavaScript Developers

Session 2: Blazor State Management

Use the dropdowns and radio buttons to filter the data set by different region groupings and select either origin or destination regions to see migration patterns. The dashed red lines represent migration routes, with labels indicating the number of migrants on each route.

Click on a line or target to see a popup detailing the direction and number of migrants.

Since food insecurity is a big issue in the United States right now, I decided to create an interactive map of food pantries across the country. The data is sourced from Feeding America, which has tons of great resources for finding food assistance or contributing to the cause.

I layered this over an ArcGIS Online Living Atlas WebMap from the PLACES program led by the CDC around the past census, which gives some context on food insecurities.

Interactive Map of Food Pantries

Source Code

Thank you for joining my session on Blazor Render Modes!

🌟 Why This Matters

Blazor render modes can be overwhelming at first, but they set Blazor above and apart from every other web framework. Understanding when and how to use each render mode empowers you to build highly interactive, performant web applications that can run anywhere.

🗺️ Featured Tool: GeoBlazor

Discover GeoBlazor

Transform your Blazor apps with powerful interactive maps in just minutes!

📚 Essential Resources & Links

🎪 Event Central

BlazorDay.net - The Ultimate Blazor Conference

Revisit the conference sessions

📖 Session Materials

💻 Hands-On Code

📖 Level Up Your Knowledge

🎯 Official Microsoft Docs

🔥 Community Insights

🛠️ More Examples & Tutorials

Hello DevUp 2025 attendees! This post is to help you find the resources I mentioned in my two sessions at the conference.

Interactive Map of DevUp Attendees

Click on the map points to see attendee organizations.

Check out GeoBlazor to quickly add powerful interactive maps to your Blazor applications.

Session 1: Blazor for JavaScript Developers

Slide Show

Build your first web app with ASP.NET Core using Blazor

Session 2: Blazor State Management

Slide Show

Blazor State Management GitHub Repo

As a developer working with interactive maps embedded into complex web applications, I find the most interesting part of web development to be the ability to create instantaneous user feedback and smooth transitions of data between server and client environments. My tool of choice in this arena for the past five years has been ASP.NET Core Blazor, a powerful web framework that allows you to write both client and server code using C#, HTML, and CSS.

While Blazor is a robust and stable tool for building production applications, it does have a much smaller ecosystem of developers, open-source packages, and online documentation compared to something like React. Until frameworks like Blazor came out, JavaScript was the only way to create interactive and responsive web applications. That de facto status has led to the huge success of frameworks such as React.

Not wanting to live fully inside my .NET bubble, I decided to dive into React and learn about this JavaScript library and how it compares to Blazor. This blog post will document my findings, coming from a perspective of starting a new application in both Blazor and Next.js, the most popular React framework. If you are a JavaScript develope, you may find this a good starting point for learning about Blazor, or if you are a .NET developer like myself, this may help you understand the broader web development ecosystem and how Blazor fits into it.

TL;DR:

• Blazor and React/Next.js both offer modern component-based web development.
• They each have a single unified language for client and server code, an easy starting point with simple templates, and a large ecosystem of packages and libraries to help you build your application.
• Blazor provides you with a "batteries included" template experience, giving you a full website with navigation and interactive components out of the box.
• Next.js starts with a minimal, "blank canvas" template, and lets you add the pieces you want.

Read on for the full hands-on comparison!

Installing the Frameworks and Creating a New Project

Both Next.js and Blazor are fully cross-platform, and can be developed on any Mac, Linux, or Windows machine. I'm going to start with WinGet to be able to install easily on my Windows PC, but you can also use any other installation system, or download packages from the web. Below is a comparison of the commands to install and create your first application.

.NET Blazor

install

list all the available templates

list all the options for this template

create the application

open in VS Code

Installing the .NET SDK will prompt an installation popup. Modern .NET (5+) is not tied to Windows like the classic .NET Framework, and you can install multiple versions side-by-side on the same machine. .NET is on a yearly release cycle, and .NET 9 came out in November 2024.

Before creating a project, I'm calling list to see all of the available templates. This includes not just web applications, but console, desktop, and cross-platform mobile applications as well! Once I find the command for the blazor template (there are other options which you can read about here), I similarly use -h to see a list of template options. The -o option lets you name the new project, otherwise it gets a default name.

I chose -int Auto, which sets the Interactive Render Mode. Blazor was originally created to move Asp.NET Core from a server-side, non-interactive model to a fully interactive, client-side model that could compete with SPA libraries like React. This is accomplished by running .NET on top of WebAssembly in the browser. Blazor also provides a second option for running interactive components on the server, where SignalR is used to send events between client and server in real time. Interactive Auto means that the first time you visit a page, it will connect with the SignalR server-rendered components and load the WebAssembly data in the background. Then on repeated visits or refreshes, it will use the WebAssembly version. This is a great way to get the best of both worlds, fast first load times and snappy interactive performance.

After creating the project, we change directory (cd) into the new folder, and use code . to open that folder in Visual Studio Code. Of course, any IDE or even text editor will work for Blazor and Next.js, but I like VS Code for small quick projects due to its fast startup and great extensions.

Next.js React

install

create the application

open in VS Code

I'm using Node.js and the bundled npm to install and manage my JavaScript ecosystem. I started with the Next.js Getting Started docs to find the command to create a new project, which is create-next-app@latest. Unlike with the Blazor project, I am prompted here to answer a group of questions which help determine the contents of my template. This is my first React app, but I'm no stranger to the JavaScript ecosystem (GeoBlazor is a wrapper around a JS library with thousands of TypeScript files). My template choices were:

• Project Name - I first tried a name similar to how I would name a .NET project: Hello.React.World. This gives you an error, Invalid project name: name can no longer contain capital letters. Not sure why that limitation exists, but no big deal, I did the same name with lowercase letters. It seems fine with periods and dashes, which still gives a lot of flexibility for naming.
• TypeScript - Yes. Being mostly a C# developer, I strongly prefer strongly-typed languages.
• ESLint - Yes. I like relying on linting/formatting tools to keep my code clean, and warn me if I'm doing something wrong.
• Tailwind CSS - No. In my opinion, modern vanilla CSS has all the features I need for styling, and in practice it seems to be better encapsulated than Tailwind. Even on their landing page, you can see examples such as a button with eight different classes defined. To my eye this usage really clutters up the HTML markup, and goes against the reusability of components, scoped CSS, and custom classes. Yes, I know you can create custom classes with Tailwind to group the styles, but if I'm doing that, again, I'd rather just use CSS.
• App Router - I chose yes. Routing is apparently one of the many things in the JavaScript world that you need to choose from many options. The Next router is only one choice, there is also at least React Router and TanStack Router suggested on the React docs site. However, it appears that the Next router is the only one available directly from this wizard.
• Turbopack - Yes. This is a bundler, but I'm not sure what would happen if I chose No. I'm more familiar with esbuild, which I love for it's speed and simplicity. Seems like with TypeScript I need something to run the compiler, so this is fine for now.
• Import Alias - I just hit enter. I found this blog post which does a good job explaining the option.

Here's a quick summary of my takeaways from the installation and new project processes:

Blazor

Next

Pros

simple, one line to create project

create command prompts you for important choices before building the template

fast, no extra installs necessary

concise list of template options directly in the CLI with dotnet new list

Cons

templates and options are hidden behind help menu, easy to forget, harder to discover

lots of questions to answer to create project, had to research what several of them meant (e.g. turbopack, import alias)

project name can't contain capital letters?

templates only viewable available on github, huge list

While I'm used to the .NET ecosystem and CLI, I have definitely been frustrated by the inability to easily remember and select all the options for a blazor template. Options like including authentication and interactive render modes would be much easier to decide up front than change later, and I loved how the Next.js create-next-app command prompted me for various options.

On the other hand, once you do know what you want, the conciseness of the .NET CLI and template can be a nice feature, and I was definitely up and running with the Blazor app more quickly than with the Next.js app. I also like the fact that I can see a short list of .NET template options with dotnet new list.

Repository Overview

Once open in VS Code, I like to review the file tree and see how the project is organized.

Blazor File Structure

Next File Structure

First thing I notice here is that the Blazor repository is a much larger template. Part of this is due to my selecting -int Auto, which added the secondary HelloBlazorWorld.Client project for WebAssembly. The difference is also representative of the static-typed, business-oriented .NET ecosystem vs. the "freewheeling" JS approach.

Configuration & Project Files

Blazor Project File	Blazor App Settings
TargetFramework: This is the version of .NET we are using. 10.0 is in preview, 9.0 is the latest stable version. Nullable: C# language feature to require all variables to either be initialized, explicitly set to null, or checked for null. ImplicitUsings: C# language feature to automatically include common namespaces, such as System and System.Collections.Generic. ProjectReference: This is a reference to another project in the solution, in this case the client project. PackageReference: This is a reference to a NuGet package, in this case the Microsoft.AspNetCore.Components.Web package, which is required for Blazor to work. Logging: This is the default logging configuration for .NET applications. You can add your own custom settings here as well.	Logging: This is the default logging configuration for .NET applications. You can add your own custom settings here as well.

Next package.json	Next tsconfig.json
scripts: These are the various ways to compile, run, or deploy the application. dependencies: This is a list of all the npm packages that are required for this project. You can add your own custom packages here as well. devDependencies: This is a list of all the npm packages that are required for development only.	compilerOptions: This is a list of all the TypeScript compiler options that are available for this project. include: This tells TSC to include these file types in the transpilation process. exclude: This tells TSC to exclude these files in the transpilation process.

Next eslint.config.mjs	Next next.config.js
compat.extends: This is a list of all the ESLint extensions that are used for this project.	NextConfig: This is where you would add any custom configuration options to impact how Next functions.

For those new to .NET, the .csproj is the Project file, which you can probably tell is a flavor of XML. It's pretty self-explanatory. Nullable (Nullable reference types) and ExplicitUsings are modern C# language features that are "opt-in" to avoid breaking older applications. Like JavaScript/ECMAScript, C# is constantly evolving and has added many new features over the past two decades, most of which are definitely worth adding to your workflow. You can also see in the project file a project reference from the client application to the server application, and a package reference to a NuGet package, the .NET equivalent of npm.

When I first saw this architecture, introduced in .NET 8, I was confused and not a fan. Why would the server application depend on the client application? But this is just a convenient way of saying that if you put code in the client project, it can be run both client and server side, while the client itself can be deployed independently.

The other important .NET configuration file is appsettings.json. You can have an appsettings.Development.json and appsettings.Production.json that override the main file. These can also be overridden by User Secrets, and of course by environment variables in whatever deployment environment you use. The JSON schema of appsettings is completely up to you, although there are a few things like logging that are pre-defined.

On the Next side, package.json is the configuration for npm. It defines our package dependencies as well as some scripts for ease of startup. tsconfig.json is the TypeScript configuration file, which sets rules as to how the TypeScript is parsed and transpiled to JavaScript. ESLint, which helps with keeping our code organized and clean, is controlled by the eslint.config.mjs. Finally, next.config.js is where we can add custom Next server settings such as base path, cross site rules, and redirects. While this is a JavaScript module, it is not included in the client-side bundle, but is only used at compile time by the server.

Having all these separate configs in the repository definitely makes Next configuration seem more complex than Blazor. Of course, you can extend Blazor with TypeScript, in which case you have to deal with all of the above!

The closest parallel I can draw above is between .NET's appsettings.json and Next's next.config.ts. While JSON is a universal and easy to read configuration language, I really love how Next is laying out all the configuration in the same language as the program itself is written! Of course, you can certainly do this in C#, making your settings a static class, but it is not the normal or expected pattern.

UI Files

Blazor App.Razor

Blazor Routes.Razor

App.razor shows the root DOCTYPE, html, head, body, meta, links, and scripts tags, as well as the nested Routes razor component.

Routes.razor file shows the Router component that loads assemblies to find pages, loading from both the server and client program, and a Found, RouteView, and FocusOnNavigate component. RouteView loads the MainLayout component.

Blazor MainLayout.Razor

Blazor NavMenu.Razor

MainLayout.razor shows the layout of the page, including the sidebar with the NavMenu component, a top row with a static About link, and an error handler.

NavMenu.razor shows the sidebar navigation menu, with NavLink components to the various pages in the application.

Blazor Home.Razor

Home.razor demonstrates a Razor component page, with the @page declaration showing the route, the PageTitle component showing the title for the page in the browser, and markup for the page content.

Here we can see more of the .NET attention to code and application structure. Not only are the UI files organized into Layout, Pages, and Components folders, but the main page itself is broken down into App.razor, which contains the HTML structure, head, and metadata, Routes.razor, which details the functionality of the Blazor router, MainLayout.razor, which gives the shared structural layout to be used across pages, NavMenu.razor, which details the navigational side bar, and Home.razor, which contains the page content. These are all examples of Razor components, the fundamental building block of Blazor. The @ symbol throughout the file identifies where C# code begins, and the PascalCase markup tags are other nested Razor components, while lowercase tags are plain HTML. Code, components, and HTML can all be intermixed within a Razor file to encapsulate and generate our UI.

I didn't include the other pages and components in the screenshots, but the template also includes Counter.razor, which demonstrates user interaction on a button, and Weather.razor, which shows a data grid loading weather data. Notice the @page "/" line at the top of Home.razor. Counter.razor starts with @page "/counter". These are the route parameters, and also the only difference between a page and any other component. There is also an Error.razor component for showing errors during development, and a ReconnectModal.razor component for showing while fixing interactive sessions that get disconnected.

Next layout.tsx

Next page.tsx

layout.tsx shows the React function that generates the root html tag, with a metadata variable for the head and a RootLayout component. It takes a inner content, which is the page.

page.tsx shows the React function that generates the home page content, with a header, image, and button.

Next/React has a very different approach. The layout.tsx exports a Metadata variable, which appears to feed the HTML <head>. However, there's definitely other content in the head, some of which appears to be the necessary loading scripts for React to function. The RootLayout at the bottom of the file is our first React component. As you can see, the Markup-first approach of Razor is flipped upside down here, with the TypeScript code emitting the HTML. But there are still similarities in how variables can be used to insert properties or child components.

In page.tsx, we see a full page React component, with curly braces {} indicating TypeScript code injection. Like in Razor files, it appears that PascalCase represents child components; here we see <Image> components laid out on the page.

Unlike in Blazor, the navigation route is not defined in the file, but by the folder structure. Since this page.tsx is in the app folder, it is the home route. If you put a page inside an app/counter folder, then you would navigate to that page with the /counter route. This pages routing approach is wild to me because every page is called page, so only thing differentiating them is the directory! I think this would drive me crazy in an IDE, where I typically use a keyboard shortcut and file name search to quickly navigate between files.

Static Assets

The approach to CSS and image files is quite similar between the two frameworks. The one difference as I mentioned above is the folder structure. In ASP.NET Core, wwwroot, signifies the "public" folder, and this contains global CSS, JavaScript scripts, and static images. In Next, this most closely corresponds to the public folder. However, only truly static files can live in this folder, because the CSS and TS files are typically imported into React components. Notice the line import styles from "./page.module.css"; at the top of page.tsx. The .module.css file is a "scoped" CSS file, meaning it will only impact that one component. Scoping is a very handy way to keep global CSS from causing conflicts between components.

Blazor does also support compiled and scoped CSS, which you can see in files like MainLayout.razor.css and NavMenu.razor.css. Unlike in Next, these are imported and applied automatically by the framework compiler, and don't need to be declared in the Razor component.

Running the Application

Lets get these applications started!

.NET can implicitly find a project file in the current directory to run, and defaults to debug/development mode, so the simple command dotnet run is shorthand for dotnet run HelloBlazorWorld.csproj -c Debug. To switch to production/release you would use -c Release. For Next, the scripts dev and start correspond to development and release environments.

It was really simple as a new React developer to build and get started with Next.js. I was surprised by how simple the template was compared to Blazor templates, and had to learn to understand the pages and folder navigation, but once I had these basic concepts down, creating a basic application was very simple.

Startup for both applications was quite fast. Next reported ~800 milliseconds, while Blazor took a whopping 7-8 seconds. I will warn any developers new to .NET, as your applications become larger, this build time does go up. However, .NET supports Hot Reload of file changes, (from the command line use dotnet watch run), which allows continuous incremental changes, for a development cycle more akin to what JS developers are used to. Even with hot reload, however, .NET, as a fully-compiled and managed environment, will likely never match the rapid development cycle of the JavaScript ecosystem. This is definitely a tradeoff worth considering alongside the significant runtime server performance gains of .NET over Next/Node as demonstrated in the TechEmpower Framework Benchmarks.

The differences in default templates for each framework are very noticeable on startup. ASP.NET Core begins with a multi-page template including sidebar navigation, top banner, and interactive page samples. This is great if you want or need such a framework, but otherwise might be code you just need to delete. There is an option -e or --empty that will remove most of the UI and give an empty template.

Next.js presents a very minimal single page template with a few links, images, and buttons. There are other Next templates available in the Next.js Examples Repository, which you can create with npm create-next-app@latest --example [example-name]. This is a large list of samples, and would require a lot of study, picking and choosing from multiple templates to get the pieces that you really wanted. For example, there are examples with-cms, with-stencil, and with-stripe-typescript. If you want all 3 in one project, you would have to combine them yourself. .NET on the other hand doesn't even really have a repository like this. It does have more built-in options for things like authentication and database/ORM setup right in the template, but everything else is a NuGet package and you must find and follow the instructions for each library.

As mentioned above, if I run dotnet watch run to get the .NET hot reload, then I can work in both environments pretty much seeing my changes in real time, at least as long as I'm doing simple UI changes. I was able to change the page text, css, and markup in both without any issues.

Up to this point, both Blazor and Next appear to be very straightforward and capable frameworks for simple web development. In the next post of this series, we turn up the complexity a lot, by building a practical GIS web application using each framework. We’ll explore:

• Component architecture and data flow
• Interactive map integration
• State management approaches
• Server/client communication patterns
• Performance optimization techniques
• Development workflow and debugging tools

Whether you're a .NET developer considering React, or a JavaScript developer curious about Blazor, you'll see how these modern frameworks handle real-world challenges in building complex interactive applications.

In today’s data-driven world, mapping business trends and insights can turn complex problems into actionable strategies. Using geographic information system (GIS) tools make this possible by transforming location-tagged datasets into dynamic, interactive maps and charts. Whether you're pinpointing the perfect spot for a new store, analyzing customer demographics, or optimizing delivery routes, GIS lets you uncover insights you can’t see in spreadsheets alone. For businesses using Asp.NET Core, tools like GeoBlazor and ArcGIS make it easier than ever to create shared web and mobile GIS solutions that bring your data to life.

NOTE: The maps on this page are hosted as independent iframes running Blazor in WebAssembly. This is great for being able to quickly embed a variety of different GeoBlazor maps into a non-Blazor blog. However, the loading performance is definitely slower than what you should experience in a typical Blazor application, which would only have to load the WebAssembly and JavaScript one time. They also occasionally run out of memory, which can usually be fixed by either clicking the refresh link inside the iframe, or doing a hard refresh on the whole page.

What is Geospatial Information?

Geospatial data refers to information linked directly to specific geographical locations—a definition that comes to life through everyday examples. Addresses, for instance, are vital for shipping, billing, home construction, and public works. (click on any of the orange polygons in the map below to see address details.)

National Address Database - Overview (arcgis.com)

Route navigation data fuels the logistics behind shipping and tracking, while precise GPS coordinates enable advanced applications like monitoring crops with IoT sensors or tracking moving vehicles.

Hurricane Evacuation Routes - Overview (arcgis.com)

World Traffic Service - Overview (arcgis.com)

The use of political boundaries as geospatial data helps ensure compliance with local laws or analyze trends within neighborhoods. For example, tools like the Location Affordability Index leverage these boundaries to offer valuable insights.

Location Affordability Index - Overview (arcgis.com)

Businesses can even overlay public datasets, such as weather forecasts or ecological information, to understand how external events might impact operations—or how their operations might affect the environment.

National Weather Service Precipitation Forecast - Overview (arcgis.com)

Building GIS-Powered Applications with GeoBlazor and ArcGIS

The samples above showcase the capabilities of GeoBlazor, an open-source Asp.NET Blazor library powered by the ArcGIS Maps SDK for JavaScript. GeoBlazor allows you to seamlessly integrate interactive maps to your .NET web and mobile applications. Each sample includes a MapView, which combines a Map and multiple Layers of hosted data and imagery sourced from the ArcGIS Living Atlas, a vast repository of global geospatial content.

Getting started is straightforward: ArcGIS offers free developer accounts with an extensive free tier, pay-as-you-go options, and the ability to create free API keys for accessing data in your own applications.

Beyond defining Maps and Layers in C#, you can also leverage WebMaps - pre-defined maps with curated content and styles.

Imagery with MetaData (arcgis.com)

ArcGIS also supports 3D geospatial visualizations through the SceneView and WebScene.

Paris 3D - Vélib - Overview (arcgis.com)

Mountain Biking in Bavaria - Overview (arcgis.com)

Finally, you can enhance any map or scene with Widgets, customizable tools that add interactivity and functionality, such as search bars, legends, and measurement tools. Whether you're building a basic map or a complex 3D visualization, GeoBlazor and ArcGIS give you the tools to bring your geospatial data to life.

Creating Your First GIS Map in Blazor

In addition to the free, open-source GeoBlazor Core, GeoBlazor Pro includes additional features and dedicated developer support. Let’s walk through the process of adding geospatial data and maps to your Asp.NET Core Blazor applications. For even faster setup, consider using the pre-configured GeoBlazor .NET templates.

Step 1: Adding your ArcGIS API Key

First, take the ArcGIS API key mentioned earlier and add it to the appsettings.json file in your Blazor project. (For tips on securing your key in production, check the GeoBlazor authentication guide.)

Step 2: Install GeoBlazor

Next, add a reference to the dymaptic.GeoBlazor.Core or dymaptic.GeoBlazor.Pro NuGet package. You can do this via your IDE's package manager or the command line.

NOTE: GeoBlazor Pro includes a reference to Core, so there's no need to install both.

Step 3: Configure HTML Resources

Add the required CSS and resources to your HTML. The location depends on your Blazor app type:

• Blazor Web Apps: Update App.razor.
• Blazor Server Apps: Update _Layout.cshtml.
• Blazor WebAssembly Apps: Update index.html.

(depending on your project template, you might already have the YourProject.styles.css reference)

Step 4: Import Usings for GeoBlazor Components

To gain access to GeoBlazor components, add the following using statements to _Imports.razor:

NOTE: In the upcoming GeoBlazor 4 release, some of these namespaces will be changing. The list will be updated at https://docs.geoblazor.com/pages/gettingStarted.html when we release version 4.

You can also include these using directives directly in individual pages or components if preferred.

Step 5: Configure Startup Code

Add the GeoBlazor service to your app’s startup configuration in Program.cs:

Step 6: Create Your First Map

Now, define your map within a Blazor page (e.g., Index.razor). Start by adding a MapView, which acts as a container for your map and controls interactivity.

A MapView alone won't display anything just yet. However, the map view allows you to define a Class or Style parameter to define the boundaries of your map. It will also be used to control many aspects of map interactivity.

Inside the MapView, let’s add a Map and a Basemap. A Basemap is the visual foundation of your map, often including road networks, topographical features, or imagery. There are about 60 ArcGIS and OpenStreetMap basemap styles available by selecting from an enum in GeoBlazor.

Step 7: Run Your Application

Run the application, and you should see your first GIS map with an ArcGIS Imagery basemap!

GeoBlazor First Sample

Customizing Your GeoBlazor Map

Now that we’ve created a basic map, let’s take it further by zooming in, centering it on a specific location, and adding interactive features.

Adjusting MapView Settings

The default map is zoomed out to show the entire globe. To focus on a specific area, we can define the Latitude, Longitude, and Zoom parameters in the <MapView> component. Here’s how to center the map over Chicago, Illinois, with a medium zoom level:

GeoBlazor Sample with Latitude, Longitude, and Zoom defined

This centers the map on Chicago, but the zoom level of 4 still shows a broad view. Let’s change the Zoom parameter to 12 for a close-up view of the city.

Close-up map of Chicago

With this update, the map provides a focused view of downtown Chicago, making it perfect for localized applications.

Adding Interactive Search

To enhance usability, we can add a SearchWidget to let users find specific locations directly on the map. The widget is straightforward to implement—simply place the <SearchWidget> component inside the <MapView> and specify its Position parameter.

Here’s an updated example with the search widget positioned at the top-right corner of the map:

Map with Search Widget

With this addition, users can type destinations directly into the search box. For example, typing "Field Museum" zooms the map to this Chicago landmark. Try it out below.

Interactive Search Widget

Importing Custom Data

Finding one museum is great, but what if you want to display all museums in Chicago? This requires a reliable dataset and a method to load and visualize the data on your map. Here's how you can get started.

Step 1: Find a Data Source

For geospatial datasets, platforms like ArcGIS Living Atlas offer curated options. However, many business applications rely on proprietary or custom datasets. To simulate such a scenario, we’ll use the Institute of Museum and Library Services (IMLS) dataset, which provides comprehensive information about museums across the U.S.

Download the dataset from IMLS.gov and open the first CSV file. Filter the dataset by ADCITY = CHICAGO to isolate museums located in Chicago. Save the filtered results to a local file that your web app can access.

Step 2: Prepare Your Application to Read CSV Files

To import and process the CSV data in your Blazor application, use the CsvHelper library. Add the library to your project by running the following command in your terminal:

The CsvHelper library simplifies reading and parsing CSV files, making it easier to convert your dataset into a format suitable for display on your map.

Step 3: Load and Parse the Data

Create a record type to represent the data fields you want from the CSV file. This allows for efficient deserialization and ensures your map only processes the necessary information.

Define a private List<MuseumRecord> to store the parsed data:

Now, use CsvHelper in the OnInitialized method of your Blazor page to read and populate the List:

This loads the data into _records, ready to be used for rendering graphics. Next, add a GraphicsLayer to your Map to show the new data:

Create a method to load the graphics after the map has rendered:

This method creates a Graphic for each museum with a popup displaying its details, including the name, address, phone number, and website.

Run your application to see the map with interactive markers for each museum in Chicago! Clicking a marker displays a popup with detailed information.

For more advanced features, such as basemap toggling, filtering, trip routing, and adding traffic layers, explore the complete code sample on GitHub.

Conclusion

Adding geospatial capabilities to your web applications opens a world of possibilities for visualizing, analyzing, and interacting with data in meaningful ways. Whether you're building tools for internal business insights or delivering rich, user-friendly maps for customers, GeoBlazor makes integrating GIS into your .NET applications straightforward and powerful. From plotting locations to creating interactive maps with layered data and widgets, the possibilities are limited only by your imagination. Ready to take your applications to the next level? Dive deeper into the features and documentation at GeoBlazor.com and start building smarter, location-aware solutions today!

If you came to my presentation at ICC this year, here are the promised links!

Please also check out my employer, dymaptic for Geospatial/Mapping solutions and consulting!

Presentation Slides

ToDo App Demo Code

Nation Finder Game Code

Download .NET

TechEmpower Benchmarks

Sites that Use Blazor

Dotnet Live

Try DotNet

Microsoft Blazor Customers Showcase

Built with Blazor

Companies Using Blazor

Blazor Component Libraries

Open Source

Blazorise

Blazored

MudBlazor

MASA Blazor

Radzen

Ant Design

FluentUI (Microsoft)

Commercial

Telerik

SyncFusion

DevExpress

JavaScript Components I've Wrapped for Use in Blazor

Quill JS Rich Text Editing Component

Signature Pad Component

GeoBlazor Mapping Resources

GeoBlazor Landing Page

GeoBlazor Samples

GeoBlazor Docs

GeoBlazor Open Source Repository

GeoBlazor Samples Repository

GeoBlazor Blog Posts

If you came to my presentations at TechBash this year, here are the promised links!

Please also check out my employer, dymaptic for Geospatial/Mapping solutions and consulting!

Wrapping JavaScript APIs for use in Asp.NET Core Blazor

EasyPicker Demo Code

EasePick JS Calendar Component

Quill JS Rich Text Editing Component

Signature Pad Component

Geographically Visualizing Customer Data with Blazor and ArcGIS

Nation Finder Game Code

Museums of Chicago Demo Code

ArcGIS Developer Portal

ArcGIS Living Atlas

GeoBlazor

GeoBlazor Landing Page

GeoBlazor Samples

GeoBlazor Docs

GeoBlazor Open Source Repository

GeoBlazor Samples Repository

GeoBlazor Blog Posts

If you came to my presentations at VS Live Chicago this year, here are the promised links!

Please also check out my employer, dymaptic for Geospatial/Mapping solutions and consulting!

Wrapping JavaScript APIs for use in Asp.NET Core Blazor

EasyPicker Demo Code

EasePick JS Calendar Component

Quill JS Rich Text Editing Component

Signature Pad Component

Geographically Visualizing Customer Data with Blazor and ArcGIS

Nation Finder Game Code

Museums of Chicago Demo Code

ArcGIS Developer Portal

ArcGIS Living Atlas

GeoBlazor

GeoBlazor Landing Page

GeoBlazor Samples

GeoBlazor Docs

GeoBlazor Open Source Repository

GeoBlazor Samples Repository

GeoBlazor Blog Posts

Grabbing this feed in modern JavaScript is a breeze with fetch.

Digging into the XML feed, I realized that the description node is already encoded HTML.

Unfortunately, because of the encoding, we can't inject this directly into a DOM element as innerHTML. Instead, we need to decode it first. The simplest way to do this is to create a temporary HTMLTextArea element and use that to parse the encoded string.

Now we can pass the decoded value to innerHTML.

That's the basics! The full code is here, and includes parsing the Date of each post and creating click-through links. Checkout the results on my home page! And follow me on Mastodon to talk about software development, especially with #dotnet and #csharp!

There's a lot to recommend about Jekyll. The main downside? I had to install Ruby 😜. No big deal. Jekyll Installation Docs are pretty easy to follow to get going. Here's a short list of steps for Windows (different OSes will vary):

1. Download the latest Ruby+Devkit from RubyInstaller for Windows.
2. Run the installer, and select to run ridk install on the last step. Choose the MSYS2 and MINGW development tool chain option.
3. Reboot (it says you can just close your terminal, but this didn't work for me).
4. Check to make sure ruby and gem are registered with the PATH environment variable for command line actions. I think I ran into an issue on at least one machine where I had to add the path manually (search in the windows start menu for environment variables).
5. Run gem install jekyll bundler.
6. Navigate to the folder where you want to set up your site.
7. Run jekyll new myNewSite, this will create a new folder (./myNewSite).
8. Navigate into that folder (cd myNewSite).
9. Run bundle exec jekyll serve --livereload.
10. Open your browser and navigate to http://localhost:4000. You should see your new site rendered!

You don't actually need the --livereload flag to build your site, but I choose to always use this while developing, so that I can quickly see the changes I make to markdown and css sites rendered in the browser.

These steps got me up and running locally. However, when I went to publish to GitHub Pages, I found a few more things I needed to add.

1. In your Gemfile, comment out the line starting with gem "jekyll"
2. Also in the Gemfile, uncomment the line starting with gem "github-pages", and replace with gem "github-pages", "~> 227", group: :jekyll_plugins where 227 is the latest version of the github-pages gem available.
3. Run bundle install to install the github-pages gem.
4. Run bundle add webrick (no idea, but you'll get an error without it).

Once these steps are added, try pushing your code up to GitHub, and navigate to https://YOURNAME.github.io to see the code in action!