Have you ever had to display a map representing geographical data inside your mobile application? Or to provide seat selection options to your users for an event or airplane boarding? If so, the latest addition to the Telerik UI for Xamarin suite - the Map component - will come in handy.
In short, RadMap for Telerik UI for Xamarin is a data visualization control used to render shapes consisting of points, lines and polygons (areas). The shapes are read from ESRI shape files. The shape file format is now a common format for storing geometric location along with associated attribute data of spatial features. If you’d like to learn more about the shape file format, you can go through its specification here.
In this post I am going to briefly introduce you to the Map control and its main features, such as support for multiple layers, selection, pan and zoom as well as conditional styling.
As I mentioned in the introduction, RadMap works with shape files. Shape files usually represent maps, but they can be used in other scenarios as well. For example, they can store information for various types of schemes – like theater seats, airplane seats distribution or floor plans, just to name a few.
You can download ready-to-use shape files or create your own (if you’d like to visualize a specific scheme) with any of the GIS software available on the market.
A good collection of free and ready-to-use shape files presenting the world map can be found on the Natural Earth website.
In the example we're going to create in this post we will use the Countries shape file from the resource referred to above. Keep in mind that although its name indicates a singular file, a shape file is actually a collection of at least three basic files: .shp, .shx and .dbf. For our purposes we would need only the .shp and the .dbf files.
So, let’s stop talking and start coding.
First, we will need to include the .shp and .dbf files to our Xamarin.Forms project and set their Build Action to “Embedded resource.” Setting the build action is an important step as otherwise the files can't be read.
Then, the Countries shape file should be assigned to the Map through a
ShapefileLayer instance. Check below the Map XAML definition with the ShapefileLayer added:
You would also need to add the telerikMap namespace:
And here is how the .shp file and the corresponding data file (.dbf) are loaded through the reader:
At this point, if we run the app on iOS emulator, we see this:
The dbf file that we just loaded through the
DataSource of the map reader contains additional information for each shape in the form of attributes. We could show shapes labels, for example, or apply different styling to the shapes according to some criteria taken from the attribute’s details.
You could check all the loaded shapes and their attributes by looking into the
Shapes property of the
In our case, there is an attribute with key “NAME” which holds the name of the country represented by each shape. So, we can easily display labels and customize their appearance through the
ShapeLabelStyle properties, respectively, like this:
When viewed in the iOS device simulator, the map should look something like this:
The appearance of the rendered shapes can be customized through the
ShapeStyle property, which provides the means for defining FillColor, StrokeColor and StrokeWidth for each shape. In addition, different styles could be applied to distinguish different areas through the
In our example we will use the “INCOME_GRP” attribute which holds information about each country’s income to set separate colors to the countries according to the income value.
First, let's create the custom style selector that should inherit from
Then, we would need to define It in XAML as a resource:
And lastly, apply it to the
Running the application after the latest changes should look like this:
RadMap supports single and multiple selection of shapes to help draw users’ attention on specific areas. By default, the selection is turned off, so we would need to enable it by setting the SelectionMode property of the
ShapefileLayer instance to either “Single” or “Multiple” per our preferences.
In addition, we can access the selected elements through
SelectedShapes properties according to the chosen selection mode.
Check the needed changes below:
Where SelectedShape property is defined like this;
Here is the result after running the updated code on iOS:
RadMap has a multi-layered architecture, so we could add more layers displaying different types of elements on the same map. Let’s explore this option by adding, for example, the Roads shape file (from the Natural Earth collection) in our example.
Add the shp file to the roadsReader:
And we will have the roads visualized on the map:
Last but not least, I would like to mention the interaction feature of the Map – the control provides pan and zoom functionality that will help the end users of your app interact with the view and inspect it in more details.
You can choose between a few interaction modes to provide the needed user experience. The available options are only Pan, only Zoom, PanAndZoom (which is the default value) as well as None. The selected one is applied through the
InteractionMode property of the Map.
In addition, you can configure the minimum and maximum allowed zoom levels. Please check the Key Features documentation topic for more details on this.
I hope I have managed to give you an overview on the basic features of the Map control in Telerik UI for Xamarin. Don’t forget to check out the various demos of the controls in our Sample Browser and the Telerik UI for Xamarin Demos application.
As always, we would love to hear your feedback about the Map control and how we can improve it. If you have any ideas for features to add, do not hesitate to share this information with us on our Telerik UI for Xamarin Feedback portal.
Still haven't tried Telerik UI for Xamarin? The free trial is right here waiting for you to give it a try and explore all the components provided in the suite.
Yana Kerpecheva is a Senior Technical Support Engineer on the Telerik UI for Xamarin team. She has been working with Telerik products since 2008, when she joined the company. Apart from work, she likes skiing and travelling to new places.
Subscribe to be the first to get our expert-written articles and tutorials for developers!