PSC.Blazor.Components.WorldMap 1.0.3

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="/_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

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