Build a Navigation App with GeoBlazor and Blazor

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?

Feature Core Pro
Location Tracking
Widget LocateWidget TrackWidget
Continuous tracking Manual button Automatic
Map rotation No Yes
Heading direction No Yes
Routing
RouteService No Yes
Turn-by-turn directions No Yes
Real road routing No Yes
Multiple stops No Yes
Traffic awareness No Yes
Pricing
Cost Free Licensed
Best for Simple apps, store locators Full navigation apps

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

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!