~/geomapchart/overview.md

The GeoMap Chart

The GeoMap control is useful to create geographical maps, it uses files in geojson format to render vectorized maps.

image

using LiveChartsCore.SkiaSharpView;
using LiveChartsCore.SkiaSharpView.Drawing.Geometries;

namespace ViewModelsSamples.Maps.World
{
    public class ViewModel
    {
        public HeatLandSeries[] Series { get; set; }
            = new HeatLandSeries[]
            {
                new HeatLandSeries
                {
                    // 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
                    Lands = new HeatLand[]
                    {
                        new HeatLand { Name = "bra", Value = 13 },
                        new HeatLand { Name = "mex", Value = 10 },
                        new HeatLand { Name = "usa", Value = 15 },
                        new HeatLand { Name = "deu", Value = 13 },
                        new HeatLand { Name = "fra", Value = 8 },
                        new HeatLand { Name = "kor", Value = 10 },
                        new HeatLand { Name = "zaf", Value = 12 },
                        new HeatLand { Name = "are", Value = 13 }
                    }
                }
            };
    }
}
<lvc:GeoMap Series="{Binding Series}"></lvc:GeoMap>

Series

There are multiple series available in the library, you can add one or mix them all in the same chart, every series has unique properties, any image bellow is a link to an article explaining more about them.

series
Heat Land series

Stroke property

Determines the default stroke of every land, if the stroke property is not set, then LiveCharts will create it based on the series position in your series collection and the current theme.

using LiveChartsCore.SkiaSharpView;
using LiveChartsCore.SkiaSharpView.Drawing.Geometries;

namespace ViewModelsSamples.Maps.World
{
    public class ViewModel
    {
        public HeatLandSeries[] Series { get; set; }
            = new HeatLandSeries[]
            {
                new HeatLandSeries { Lands = new HeatLand[] { ... } }
            };

        public SolidColorPaint Stroke { get; set; } 
            = new SolidColorPaint(SKColors.Red) { StrokeThickness = 2 }; // mark
    }
}
<lvc:GeoMap
    Series="{Binding Series}"
    Stroke="{Binding Stroke}"><!-- mark -->
</lvc:GeoMap>

image

Paints can create gradients, dashed lines and more, if you need help using the Paint instances take a look at the Paints article.

Fill property

Determines the default fill of every land, if the stroke property is not set, then LiveCharts will create it based on the series position in your series collection and the current theme.

using LiveChartsCore.SkiaSharpView;
using LiveChartsCore.SkiaSharpView.Drawing.Geometries;

namespace ViewModelsSamples.Maps.World
{
    public class ViewModel
    {
        public HeatLandSeries[] Series { get; set; }
            = new HeatLandSeries[]
            {
                new HeatLandSeries { Lands = new HeatLand[] { ... } }
            };

        public SolidColorPaint Fill { get; set; } = new SolidColorPaint(SKColors.LightPink); // mark
    }
}
<lvc:GeoMap
    Series="{Binding Series}"
    Fill="{Binding Fill}"><!-- mark -->
</lvc:GeoMap>

image

Paints can create gradients, dashed lines and more, if you need help using the Paint instances take a look at the Paints article.

MapProjection property

Defines the projection of the map coordinates in the control coordinates, currently it only support the Default (none) and Mercator projections.

<lvc:GeoMap
    Series="{Binding Series}"
    MapProjection="Mercator"><!-- mark -->
</lvc:GeoMap>

image