Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (150).NET Core  (25)Angular  (45)ASP.NET  (48)ASP.NET Core  (59)ASP.NET MVC  (84)Azure  (28)Blazor  (79)DocIO  (18)Essential JS 2  (67)Essential Studio  (161)Flutter  (92)JavaScript  (143)Microsoft  (101)PDF  (55)React  (32)Succinctly series  (120)Syncfusion  (460)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (26)Webinar  (20)Windows Forms  (54)WPF  (111)Xamarin  (122)XlsIO  (24)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (105)Chart  (46)Cloud  (9)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (3)DataGrid  (38)Development  (245)Doc  (7)DockingManager  (1)eBook  (91)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (18)Extensions  (12)File Manager  (3)Gantt  (8)Gauge  (6)Git  (3)Grid  (26)HTML  (9)Installer  (2)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (196)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (21)Performance  (4)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (21)SfDataGrid  (8)Silverlight  (21)Sneak Peek  (15)Solution Services  (2)Spreadsheet  (6)SQL  (6)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (9)Tips and Tricks  (48)UI  (108)Uncategorized  (68)Unix  (2)User interface  (67)Visual State Manager  (1)Visual Studio  (18)Visual Studio Code  (10)Web  (175)What's new  (108)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
How to Create a Choropleth Map in a Xamarin Application

How to Create a Choropleth Map in a Xamarin Application

A choropleth map 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 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 documentation.

<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
Rendering a Basic World Map Using Xamarin Maps Control

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.

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 property. Also, link the shape files and populated data with the ShapeIDTableField, and ShapeIDPath 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 property.

Refer to the following code.

<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 support.

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.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
Applying Colors to the Choropleth Map in a Xamarin Application

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.

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 in the shape file layer and positioned using the LegendPosition property.

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

<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
Adding Legends to the Choropleth Map in a Xamarin Application

GitHub reference

You can get the complete sample in the Display Choropleth Maps using Xamarin Maps demo.

Conclusion

Thanks for reading! In this blog, we have learned how to easily create a choropleth map using the Syncfusion Xamarin Maps 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 and demos available at this GitHub location. Additionally, you can download our demo apps from Google Play and Microsoft Store.

You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top