Creating an Interactive Eurozones Map with .NET

In a previous blog post, I wanted a simple, at-a-glance visual aid to Europe’s myriad memberships and border questions. I started by creating a dynamic table in JavaScript, but I knew I wanted to move this into a standalone app using my .NET stack.

Description

In this iteration of the app, I focused on a dynamic map feature. The check boxes control the list of countries on the map as well as the results in the table. I found this solution with LeafletForBlazor, a wrapper for the 3rd party Leaflet.js library. The documentation was scattered, but it was good enough to build some moderately advanced features like custom polygons.

On top of my knowledge of Blazor, I built a stronger understanding of JSON deserialization, using maps, polygons, and other features of Leaflet, and git and deployment (first in Azure App Service, then to a Cloudways shared server).

Technologies Used

  • ASP.NET / C# / Blazor WASM
  • Mudblazor
  • LeafletForBlazor
  • GeoJSON
  • Azure App Service / Cloudways hosting
  • JetBrains Rider IDE