Repository files navigation

This component shows a map for using it withBlazor WebAssembly andBlazor Server. The components is build with .NET6.The map is build withjqvmap.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 useSVG image for icons and flags.

You can see the component is action on thiswebsite. The full source code is onGitHub. For any comment or question, please use myforum in theWorldMap section.

Fist, you have to add the component from NuGet. Then, open yourindex.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 libraryPSC.Extensions to convert anenum in a string. See the example below.

@using PSC.Extensions

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

A lot of people sent me the same question. My components (MarkdownEditor,DataTable,SVG Icon and others that you find on myGitHub) 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 websitePureSourceCode.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 onPureSourceCode 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 withVisual Studio Live Share

• 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