World Map component for Blazor

This World Map component for Blazor WebAssembly and Blazor Server creates an interactive map of the world or specific region and shows your data. The component is built with .NET6 using jqvmap. jQuery is required.

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.

Add the component to your project

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

<script src="lib/jquery/jquery.js"></script>
<script src="/_content/PSC.Blazor.Components.WorldMap/js/worldmap.js"></script>

jQuery is required, so I added it in the script section. The src could be different for you.

Now, we have to tell the Blazor project we want to use the component. So, open your _Import.razor and add the following lines:

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

Also, I recommend to add also the library PSC.Extensions to convert an enum in a string. So, add in the _Import.razor this line

@using PSC.Extensions

Awesome! We set the component and now we have to use it.

Add a map

Now, in your page you can display a map of a region or entire world. To display the map of the world, add the following code

<WorldMap />

Now, you see the result of it in the following screenshot.

Very basic but efficient. The magic is done for the component itself. When the first render of the component starts, the component itself is adding in the page the required CSS and JavaScript to display the map using these scripts.

Now, I like to display only the map of the USA.

<WorldMap Map="Map.USA" />

So, the component has 6 enums that contains all the regions:

• Europe
• Germany
• Map
• Russia
• USA
• World

There is a long list of countries, regions and continent to display. Here the list

The full list of country codes for all the maps is available in the component, in the NuGet package page or on GitHub.

Icons and flags

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.

Add pins

So, in a map we need to put pins. In this component I created 2 ways to have pins: by the ID (from the DOM) or to pass the HTML content. For each map you can choose only 1 option.

Example of pin by ID

<div style="display: none;">
    <SVGIcon id="svgIcon" Elements="@SVGIcons.Map_pin" style="z-index: 999;" />
</div>

<WorldMap PinMode="PinMode.Id" Pins="@pins" />

Then, the code

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

SVGIcon is the component for showing icons. PinMode is the property to select what kind of pin I want to display. In the Dictionary for the county, it I want to use the HTML element with ID svgIcon.

Example of pin by content

<div style="display: none;">
    <SVGIcon id="svgIcon" Elements="@SVGIcons.Map_pin" style="z-index: 999;" />
</div>

<WorldMap PinMode="PinMode.Content" Pins="@pins" />

and then the code

@code { 
   Dictionary<string, string> pins = new Dictionary<string, string>()
        {
            { "it", "\u003cimg src=\"pk.png\" width=\"30px\" /\u003e" } // content
        };
}

Obviously, you have to have the file pk.png in your wwwroot folder.

Add data

Now, we want to add data to our map. It is quite easy. In this case I have to pass to the component a Dictionary with the country code and the value. If you are not sure about the country code, you can use PSC.Extensions to have the right country code by the enum. Here an example

@page "/"

<div style="display: none;">
    <SVGIcon id="svgIcon" Elements="@SVGIcons.Map_pin" />
</div>

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

<hr />

<p>
    Selected regions: @SelectedRegions
</p>
<p>
    Selection: @(String.Join(", ", Selection.ToArray()))
</p>

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

    Dictionary<string, string> values = new Dictionary<string, string>()
        {
            { World.UnitedStatesofAmerica.GetDescription(), "20937" },
            { World.China.GetDescription(), "14723" },
            { World.Japan.GetDescription(), "4975" },
            { World.Germany.GetDescription(), "3846" },
            { World.UnitedKingdom.GetDescription(), "2708" },
            { World.France.GetDescription(), "2630" },
            { World.India.GetDescription(),"2623" },
            { World.Italy.GetDescription(), "1886" }
        };

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

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

Wrap up

In conclusion, we have a new beautiful World Map component for Blazor to use download and use.