WorldMap for Blazor

This component shows a map for using it with Blazor WebAssembly and Blazor Server. The components is build with .NET6. The map is build with jqvmap. jquery is required.

Now, usually in connection with the map, we want to display flags or icons. For that, you can use other my component that allows you to use SVG image for icons and flags.

You can see the component is action on this website. The full source code is on GitHub. For any comment or question, please use my forum in the WorldMap section.

Installation

Fist, you have to add the component from NuGet. Then, open your index.html or _Host and add at the end of the page the following scripts:

<script src="https://github.com/erossini/BlazorWorldMap/raw/main/_content/PSC.Blazor.Components.WorldMap/js/worldmap.js"></script>

The first script is the jqvmap library version 1.5.0 because I'm using this version to create the components. You can use other sources for it but maybe you can face issues in other versions.

Then, open your _Imports.razor and add the following:

@using PSC.Blazor.Components.WorldMap
@using PSC.Blazor.Components.WorldMap.Enums

I recommend to add also the library PSC.Extensions to convert an enum in a string. See the example below.

@using PSC.Extensions

Add a new map

In your page you can create a new chart adding this code

<WorldMap Values="@values" TextTooltip=": {0} visitors" RegionSelect="@OnRegionSelect" 
    SelectedRegions="@SelectedRegions" SelectChanged="@SelectedChanged"
    PinMode="PinMode.Id" Pins="@pins" />

@code {
    string SelectedRegions = "it, ru";
    List<string> Selection = new List<string>();
    Dictionary<string, string> pins = new Dictionary<string, string>()
    {
        { "it", "svgIcon" }
    };

    Dictionary<string, string> values = new Dictionary<string, string>()
        {
            { World.UnitedKingdom.GetDescription(), "15" },
            { World.Italy.GetDescription(), "7.5" },
            { World.Australia.GetDescription(), "9" },
        };

    Task OnRegionSelect(ChangeData data)
    {
        Console.WriteLine($"Selected {data.Code} / {data.Region}");
        return Task.CompletedTask;
    }

    Task SelectedChanged(List<string> slc)
    {
        Selection = slc;
        return Task.CompletedTask;
    }
}

So, with this code you create the map in the followinf screenshot

Add the map to your project

Countries

Regions

Continents

Configuration settings

Events

Regions and enums

World

USA

Europe

Germany

Russia

Licence and contribution

A lot of people sent me the same question. My components (MarkdownEditor, DataTable, SVG Icon and others that you find on my GitHub) are freeware.

I ask you to contribute to the project in one of the following ways:

• sending your feedback
• highlight bugs
• ask for improvement
• submit code and fixes
• share the project
• share my website PureSourceCode.com

If you don't know how to do it or you:

• want to support this project
• find very useful this project and it saves you a lot of time and work
• like to sustain my work
• want to pay my a beer
• are using this component for commercial purpose and you want to set your conscience at rest and/or put a hand on one's heart 😂

then, you can buy one of the support licence I created. There are different prices. The amount is your decision. You find have a full list on PureSourceCode Shop

The contribution gives you:

• dedicate email support
• priority access to the support
• fast bug fix
• receive preview and beta of the components
• help to fix your code with Visual Studio Live Share

Other Blazor components

More examples and documentation

• Write a reusable Blazor component
• Getting Started With C# And Blazor
• Setting Up A Blazor WebAssembly Application
• Working With Blazor Component Model
• Secure Blazor WebAssembly With IdentityServer4
• Blazor Using HttpClient With Authentication
• InputSelect component for enumerations in Blazor
• Use LocalStorage with Blazor WebAssembly
• Modal Dialog component for Blazor
• Create Tooltip component for Blazor
• Consume ASP.NET Core Razor components from Razor class libraries | Microsoft Docs