Creating Razor Class Library for Leaflet Maps Component

Our R&D team often dives into modern technologies and cutting-edge solutions, therefore one of its recent projects took its aim at an open source library for Blazor – a web framework first released in 2018, based on .NET Core.

One of the main advantages of using Blazor is that usually developers can write their code in C# and HTML without JavaScript. Code is easy to debug and it’s very convenient to use all advantages of Visual Studio, such as syntax highlighting and suggestions. However, although Blazor grows very fast, it is relatively new among other popular web frameworks and the base of libraries that are adapted for Razor Pages is still small. Sometimes, the only way to implement some functionality is to use JSInterop and call JavaScript functions from C# level and it’s not a perfect solution – readability of code decreases and it’s much harder to debug. One of FIS-SST developers faced such situation when he needed to use a component with a map and it resulted in an idea of creating a library for Blazor, that will let developers use maps and keep their solution in scope of C# and HTML.

Let’s wrap!

There is a number of JavaScript libraries that provide components with interactive maps for web applications and one of the most popular of them is Leaflet.js which is a subject of our “wrapper”. It’s free, opensource, easy to use and most of all it has a good documentation which is crucial in case of wrappers.

BlazorMaps (this is how we named the library) has been implemented with .NET Core 5.0, which provided us with incredibly useful interface, IJSObjectReference. Thanks to that feature the library’s structure can be as close as possible to Leaflet’s, so anyone who uses it doesn’t really need to get familiar with our documentation. Every class that is mapped from Leaflet has its IJSObjectReference, which is a reference to the original object implemented in JavaScript (e.g. L.Marker, L.Polyline). Let’s have a look how it works:

Within a scope of a Razor Page we’ve got an instance of a class Circle and we want to change its radius. In order to do this, we’re calling a method of the same name as L.Circle has in its original implementation – “SetRadius”:

Lines below show what happens inside our library. BlazorMaps’ Circle object keeps a reference to the L.Circle (JsReference) and invokes JavaScript function “setRadius” from the C# level with “radius” as an argument. Leaflet.js library takes care of the rest and set’s the Circle’s radius.

Keeping the code flexible

Although our team focused on reaching a high level of similarity to Leaflet’s hierarchical structure of classes, there are also parts that work differently. One of the most significant of them is a way of creating objects. We decided to use Factory method pattern to increase usability and readability of the code. The usage has been shown in the example below:

BlazorMaps powered by open source

BlazorMaps is an open source project and it still grows. The first version covers areas related to markers, polylines, polygons, shapes, events and basic operations on a map, such as adjusting zoom and re-centering, but the infrastructure we’ve built allows to extend it easily with increasing coverage of functions and classes of Leaflet.js. Everyone can get it via [NuGet package manager], read the code on [GitHub] and get familiar with the rest of our features, commit and create pull requests and issues. We’re proud to release our open source project and we can’t wait to build a community around it!

Błażej Stiskun – Junior Developer, enthusiast of data science. He believes that the goal is more important than the means so he doesn`t strictly stick to one favourite technology but if he had to, it would be Python.

This programmer enjoys solving problems and feels anxious when there are not any around. Fascinated web development since he has joined FIS-SST.

Contact form

Patrycja Pałus

Office Administrative Assistant

Please feel free to contact me by phone or email

Newsletter FIS-SST

To continue downloading please subscribe to our newsletter 

Newsletter FIS-SST

Aby kontynuować ściąganie prosimy zapisz się do naszego newsletter`a