World Heat Map

View model

using System;
using System.Linq;
using System.Threading.Tasks;
using CommunityToolkit.Mvvm.Input;
using LiveChartsCore.Geo;
using LiveChartsCore.SkiaSharpView;
using LiveChartsCore.SkiaSharpView.Drawing.Geometries;

namespace ViewModelsSamples.Maps.World;

public partial class ViewModel
{
    private bool _isBrazilInChart = true;
    private readonly HeatLand _brazil;
    private readonly Random _r = new();

    public ViewModel()
    {
        // every country has a unique identifier
        // check the "shortName" property in the following
        // json file to assign a value to a country in the heat map
        // https://github.com/beto-rodriguez/LiveCharts2/blob/master/docs/_assets/word-map-index.json
        var lands = new HeatLand[]
        {
            new() { Name = "bra", Value = 13 },
            new() { Name = "mex", Value = 10 },
            new() { Name = "usa", Value = 15 },
            new() { Name = "can", Value = 8 },
            new() { Name = "ind", Value = 12 },
            new() { Name = "deu", Value = 13 },
            new() { Name= "jpn", Value = 15 },
            new() { Name = "chn", Value = 14 },
            new() { Name = "rus", Value = 11 },
            new() { Name = "fra", Value = 8 },
            new() { Name = "esp", Value = 7 },
            new() { Name = "kor", Value = 10 },
            new() { Name = "zaf", Value = 12 },
            new() { Name = "are", Value = 13 }
        };

        Series = [new HeatLandSeries { Lands = lands }];

        _brazil = lands.First(x => x.Name == "bra");
        DoRandomChanges();
    }

    public HeatLandSeries[] Series { get; set; }

    [RelayCommand]
    public void ToggleBrazil()
    {
        var lands = Series[0].Lands;
        if (lands is null) return;

        if (_isBrazilInChart)
        {
            Series[0].Lands = lands.Where(x => x != _brazil).ToArray();
            _isBrazilInChart = false;
            return;
        }

        Series[0].Lands = [.. lands, _brazil];
        _isBrazilInChart = true;
    }

    private async void DoRandomChanges()
    {
        await Task.Delay(1000);

        while (true)
        {
            foreach (var shape in Series[0].Lands ?? Enumerable.Empty<IWeigthedMapLand>())
            {
                shape.Value = _r.Next(0, 20);
            }

            await Task.Delay(500);
        }
    }
}

XAML

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="AvaloniaSample.Maps.World.View"
             xmlns:lvc="using:LiveChartsCore.SkiaSharpView.Avalonia"
             xmlns:vms="using:ViewModelsSamples.Maps.World"
             xmlns:m="using:LiveChartsCore.Measure"
             x:DataType="vms:ViewModel">
    <UserControl.DataContext>
        <vms:ViewModel/>
    </UserControl.DataContext>
    <Grid RowDefinitions="Auto,*">

        <!-- Tooltip settings panel -->
        <StackPanel Grid.Row="0" Orientation="Horizontal" Spacing="12" Margin="8">
            <TextBlock Text="Tooltip:" VerticalAlignment="Center"/>

            <ComboBox x:Name="TooltipPositionCombo" SelectedIndex="1" VerticalAlignment="Center">
                <ComboBoxItem Content="Hidden" Tag="{x:Static m:TooltipPosition.Hidden}"/>
                <ComboBoxItem Content="Auto" Tag="{x:Static m:TooltipPosition.Auto}"/>
                <ComboBoxItem Content="Top (wedge below)" Tag="{x:Static m:TooltipPosition.Top}"/>
                <ComboBoxItem Content="Bottom (wedge above)" Tag="{x:Static m:TooltipPosition.Bottom}"/>
            </ComboBox>

            <TextBlock Text="Text size:" VerticalAlignment="Center"/>
            <NumericUpDown x:Name="TextSizeUpDown" Value="14" Minimum="8" Maximum="32"
                           Increment="1" Width="130" VerticalAlignment="Center"
                           ValueChanged="OnTextSizeChanged"/>

            <Button Content="Toggle Brazil" Command="{Binding ToggleBrazilCommand}"/>
            <Button Content="Clear Series" x:Name="ClearSeriesBtn"/>
            <Button Content="Reset Zoom" x:Name="ResetZoomBtn"/>

            <TextBlock Text="Border:" VerticalAlignment="Center"/>
            <NumericUpDown x:Name="BorderWidthUpDown" Value="1" Minimum="0" Maximum="10"
                           Increment="0.5" Width="110" VerticalAlignment="Center"
                           ValueChanged="OnBorderWidthChanged"/>
            <ComboBox x:Name="BorderColorCombo" SelectedIndex="0" VerticalAlignment="Center">
                <ComboBoxItem Content="White" Tag="White"/>
                <ComboBoxItem Content="Black" Tag="Black"/>
                <ComboBoxItem Content="Gray" Tag="Gray"/>
                <ComboBoxItem Content="Red" Tag="Red"/>
                <ComboBoxItem Content="None" Tag="None"/>
            </ComboBox>

            <TextBlock x:Name="ClickedLandText" Text="Click a country..." VerticalAlignment="Center"
                       Margin="12,0,0,0" Foreground="Gray"/>
        </StackPanel>

        <lvc:GeoMap
            Grid.Row="1"
            x:Name="geoMap"
            Series="{Binding Series}"
            MapProjection="Mercator">
        </lvc:GeoMap>
    </Grid>
</UserControl>

Related articles: