How to Create a Choropleth Map in a Xamarin Application
Tags: mobile, xamarin, csharp, productivity
Published: 2021-05-26 12:21:43

---
title: How to Create a Choropleth Map in a Xamarin Application
published: true
date: 2021-05-26 11:19:54 UTC
tags: mobile, xamarin, csharp, productivity
canonical_url: https://www.syncfusion.com/blogs/post/create-a-choropleth-map-in-a-xamarin-application.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/05/How-to-Create-a-Choropleth-Map-in-a-Xamarin-Application-672x372.png
---

A [choropleth map](https://en.wikipedia.org/wiki/Choropleth_map "Link to the Wikipedia article Choropleth Maps") is a specialized type of geographic map in which regions are highlighted by color based on the data of those areas. They are appropriate for visualizing regional patterns in data. The higher the value is,  the darker the color will be in that region. This will be helpful to understand trends in the data with a quick look. In this blog post, I will explain how to create a choropleth map easily using the Syncfusion [Xamarin Maps](https://www.syncfusion.com/xamarin-ui-controls/xamarin-maps "Link to Xamarin Maps control") control.

A choropleth map works perfectly for showing data across a region and how data varies across a geographic area or the level of variability within a region. It is used to showcase the data of a region relative to the data of the nearby regions, like for population density, COVID-19 cases, GDP growth, election results, average rain fall, literacy rates and weather.

## Add choropleth maps to the Xamarin Maps shape layer

We are going to create a choropleth map to show the world’s population density. For that, we need to render the basic world map first.

Create an instance of the Xamarin Maps control with the shape layer that contains the basic word map. Check out our [getting started with Xamarin Maps](https://help.syncfusion.com/xamarin/maps/getting-started "Link to Getting Started with Xamarin Maps") documentation.

```html
<sfmaps:SfMaps >
  <sfmaps:SfMaps.Layers>
     <sfmaps:ShapeFileLayer Uri="world-map.shp">
     </sfmaps:ShapeFileLayer>
  </sfmaps:SfMaps.Layers>
</sfmaps:SfMaps>
```

![Rendering a Basic World Map Using Xamarin Maps Control](https://www.syncfusion.com/blogs/wp-content/uploads/2021/05/Rendering-a-Basic-World-Map-Using-Xamarin-Maps-Control-1.png)<figcaption>Rendering a Basic World Map Using Xamarin Maps Control</figcaption>

**Note:** You can add a title for the choropleth map using the labels feature in the Xamarin Maps control.

## Populate data and link to the Maps

Then, we need the world population density data to be mapped. Let’s define a model and view model data for it as shown in the following code example.

```csharp
public class ViewModel
    {
        public ObservableCollection<CountryDensityModel> WorldPopulationDensityDetails { get; set; }
        public ViewModel()
        {
            WorldPopulationDensityDetails = new ObservableCollection<CountryDensityModel>();
            WorldPopulationDensityDetails.Add(new CountryDensityModel("Taiwan", 672));
            WorldPopulationDensityDetails.Add(new CountryDensityModel("Bangladesh", 1265));
            WorldPopulationDensityDetails.Add(new CountryDensityModel("Israel", 400));
            WorldPopulationDensityDetails.Add(new CountryDensityModel("Tuvalu", 393));
            WorldPopulationDensityDetails.Add(new CountryDensityModel("Belgium", 382));
            WorldPopulationDensityDetails.Add(new CountryDensityModel("Curacao", 369));
            WorldPopulationDensityDetails.Add(new CountryDensityModel("Philippines", 367));
            …
            …
            …
        }
    }
    public class CountryDensityModel
    {
        public CountryDensityModel(string countryName, double density)
        {
            this.CountryName = countryName;
            this.Density = density;
        }

        public string CountryName { get; set; }
        public double Density { get; set; }
    }
```

Next, assign the populated data source to the map’s [ItemsSource](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfMaps.XForms.ShapeFileLayer.html#Syncfusion_SfMaps_XForms_ShapeFileLayer_ItemsSource "Link to ItemsSource property of Xamarin Maps") property. Also, link the shape files and populated data with the [ShapeIDTableField](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfMaps.XForms.ShapeFileLayer.html#Syncfusion_SfMaps_XForms_ShapeFileLayer_ShapeIDTableField "Link to ShapeIDTableField property of Xamarin Maps"), and [ShapeIDPath](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfMaps.XForms.ShapeFileLayer.html#Syncfusion_SfMaps_XForms_ShapeFileLayer_ShapeIDPath "Link to ShapeIDPath property of Xamarin Maps") properties, respectively.

Refer to the following code.

```
<sfmaps:SfMaps >
  <sfmaps:SfMaps.Layers>
     <sfmaps:ShapeFileLayer Uri="world-map.shp" ItemsSource="{Binding WorldPopulationDensityDetails}" ShapeIDTableField="name" ShapeIDPath="CountryName">
     </sfmaps:ShapeFileLayer>
  </sfmaps:SfMaps.Layers>
</sfmaps:SfMaps>
```

## Apply colors to the regions

Now, we have implemented the basic requirements for creating a choropleth map using Syncfusion Xamarin Maps. Each country data item has the country name and population density.

Now, return the density value of each country and map it to the ShapeSetting’s [ShapeColorValuePath](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfMaps.XForms.ShapeSetting.html#Syncfusion_SfMaps_XForms_ShapeSetting_ShapeColorValuePath "Link to ShapeColorValuePath property of Xamarin Maps") property.

Refer to the following code.

```html
<sfmaps:ShapeFileLayer Uri="world-map.shp" ItemsSource="{Binding WorldPopulationDensityDetails}" ShapeIDTableField="name" ShapeIDPath="CountryName" >
  <sfmaps:ShapeFileLayer.ShapeSettings>
      <sfmaps:ShapeSetting ShapeColorValuePath="Density" >
      </sfmaps:ShapeSetting>
  </sfmaps:ShapeFileLayer.ShapeSettings>
</sfmaps:SfMaps.Layers>
```

Now, apply colors to the regions based on the value of their density and the range in which it falls. For example, if the density falls between 100 to 200, the region will be shown in a light color, and if it is between 201 to 300, then it will be a dark color. We will set these instructions using the [RangeColorMapping](https://help.syncfusion.com/xamarin/maps/colormapping#range-color-mapping "Link to Range color mapping documentation of Xamarin Maps") support.

Refer to the following code.

```html
<sfmaps:SfMaps >
 <sfmaps:SfMaps.Layers>
   <sfmaps:ShapeFileLayer Uri="world-map.shp" ItemsSource="{Binding WorldPopulationDensityDetails}" ShapeIDTableField="name" ShapeIDPath="CountryName" >
     <sfmaps:ShapeFileLayer.ShapeSettings>
       <sfmaps:ShapeSetting ShapeColorValuePath="Density" >
         <sfmaps:ShapeSetting.ColorMappings>
           <sfmaps:RangeColorMapping From="0" To="25" Color="#dfa9fe" LegendLabel="0 - 25" />
           <sfmaps:RangeColorMapping From="25" To="75" Color="#bd4efd" LegendLabel="25 - 75" />
           <sfmaps:RangeColorMapping From="75" To="150" Color="#a611fc" LegendLabel="75 - 150" />
           <sfmaps:RangeColorMapping From="150" To="400" Color="#9703ec" LegendLabel="150 - 400"/>
           <sfmaps:RangeColorMapping From="400" To="50000" Color="#7002b0" LegendLabel=">400"/>
         </sfmaps:ShapeSetting.ColorMappings>
       </sfmaps:ShapeSetting>
     </sfmaps:ShapeFileLayer.ShapeSettings>                      
   </sfmaps:ShapeFileLayer>
 </sfmaps:SfMaps.Layers>
</sfmaps:SfMaps>
```

![Applying Colors to the Choropleth Map in a Xamarin Application](https://www.syncfusion.com/blogs/wp-content/uploads/2021/05/Applying-Colors-to-the-Choropleth-Map-in-a-Xamarin-Application.png)<figcaption>Applying Colors to the Choropleth Map in a Xamarin Application</figcaption>

You can also apply colors based on the exact values. For example, red for 100, yellow for 200, etc. This is another way of color mapping in the Xamarin Maps.

**Note:** For more details,  you can refer to [equal color mapping in Xamarin Maps](https://help.syncfusion.com/xamarin/maps/colormapping#equal-color-mapping "Link to Equal color mapping in Xamarin Maps documentation").

## Add a legend

Legends provide a clear picture of the data plotted in maps using colors and brief text. This will further improve the data visualization and help us understand the trends in the data easily in the choropleth maps.

Legends can be added using the [LegendSettings](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfMaps.XForms.ShapeFileLayer.html#Syncfusion_SfMaps_XForms_ShapeFileLayer_LegendSettings "Link to LegendSettings property of Xamarin Maps") in the shape file layer and positioned using the [LegendPosition](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfMaps.XForms.MapLegendSetting.html#Syncfusion_SfMaps_XForms_MapLegendSetting_LegendPosition "Link to LegendPosition property of Xamarin Maps") property.

Refer to the following code to add a legend in the choropleth map.

```html
<sfmaps:SfMaps >
 <sfmaps:SfMaps.Layers>
   <sfmaps:ShapeFileLayer Uri="world-map.shp" ItemsSource="{Binding WorldPopulationDensityDetails}" ShapeIDTableField="name" ShapeIDPath="CountryName" >
     <sfmaps:ShapeFileLayer.ShapeSettings>
        <sfmaps:ShapeSetting ShapeColorValuePath="Density" >
            <sfmaps:ShapeSetting.ColorMappings>
               <sfmaps:RangeColorMapping From="0" To="25" Color="#dfa9fe" LegendLabel="0 - 25" />
               <sfmaps:RangeColorMapping From="25" To="75" Color="#bd4efd" LegendLabel="25 - 75" />
               <sfmaps:RangeColorMapping From="75" To="150" Color="#a611fc" LegendLabel="75 - 150" />
               <sfmaps:RangeColorMapping From="150" To="400" Color="#9703ec" LegendLabel="150 - 400"/>
               <sfmaps:RangeColorMapping From="400" To="50000" Color="#7002b0" LegendLabel=">400"/>
            </sfmaps:ShapeSetting.ColorMappings>
          </sfmaps:ShapeSetting>
        </sfmaps:ShapeFileLayer.ShapeSettings>
        <sfmaps:ShapeFileLayer.LegendSettings>
           <sfmaps:MapLegendSetting ShowLegend="True" LegendPosition="50,90" />
      </sfmaps:ShapeFileLayer.LegendSettings>
   </sfmaps:ShapeFileLayer>
 </sfmaps:SfMaps.Layers>
</sfmaps:SfMaps>
```

![Adding Legends to the Choropleth Map in a Xamarin Application](https://www.syncfusion.com/blogs/wp-content/uploads/2021/05/Adding-Legends-to-the-Choropleth-Map-in-a-Xamarin-Application.png)<figcaption>Adding Legends to the Choropleth Map in a Xamarin Application</figcaption>

## GitHub reference

You can get the complete sample in the [Display Choropleth Maps using Xamarin Maps demo](https://github.com/SyncfusionExamples/xamarin-choropleth-map- "Link to Xamarin choropleth map demo on GitHub").

## Conclusion

Thanks for reading! In this blog, we have learned how to easily create a choropleth map using the Syncfusion [Xamarin Maps](https://www.syncfusion.com/xamarin-ui-controls/xamarin-maps "Link to Xamarin Maps control") Control. With this, you can easily visualize the trends in data. So, try out the instructions provided in this blog and tell us about your experience in the comments section below.

You can go through our Xamarin Map’s complete [user guide](https://help.syncfusion.com/xamarin/maps/layers#shape-file-layer "Link to Getting Started with Xamarin Maps documentation") and demos available at this [GitHub location](https://github.com/syncfusion/xamarin-demos/tree/master/Forms/Maps "Link to Xamarin Maps demos on GitHub"). Additionally, you can download our demo apps from [Google Play](https://play.google.com/store/apps/details?id=com.syncfusion.samplebrowser "Link to Xamarin UI controls demo on Google Play Store") and [Microsoft Store](https://www.microsoft.com/en-us/p/syncfusion-essential-studio-for-xamarin/9nn069tldzf4?activetab=pivot:overviewtab "Link to Xamarin UI controls demo on Microsoft Store").

You can also contact us through our [support forums](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/support/directtrac/ "Link to the Syncfusion support system Direct Trac"), or [feedback portal](https://www.syncfusion.com/feedback/xamarin-forms "Link to Syncfusion Xamarin Feedback Portal"). We are always happy to assist you!

## Related blogs

- [How to Display Current GPS Location in OSM Maps Using Xamarin.Essentials](https://dev.to/syncfusion/how-to-display-current-gps-location-in-osm-maps-using-xamarin-essentials-2gh9 "Link to How to Display Current GPS Location in OSM Maps Using Xamarin.Essentials blog")
- [OpenStreetMap, Bing Maps in Xamarin App with Maps](https://www.syncfusion.com/blogs/post/put-openstreetmaps-bing-maps-in-your-xamarin-forms-application-using-syncfusion-maps.aspx "Link to OpenStreetMap, Bing Maps in Xamarin App with Maps blog")
- [Overview of the Best and Most Popular Xamarin.Forms Controls](https://dev.to/sureshmohan/overview-of-the-best-and-most-popular-xamarin-forms-controls-3d0c-temp-slug-2325662 "Link to Overview of the Best and Most Popular Xamarin.Forms Controls blog")
- [Easily Create a Meeting Room Calendar using Xamarin.Forms Scheduler](https://dev.to/karthickramasamy08/easily-create-a-meeting-room-calendar-using-xamarin-forms-scheduler-58c3-temp-slug-6689711 "Link to Easily Create a Meeting Room Calendar using Xamarin.Forms Scheduler blog")