Every release, our Xamarin.Forms suite is maturing with the addition of new controls, and each control is maturing with the addition of features and bug fixes. This would not be possible without your support and feedback.
We are glad to announce that we have provided built-in online map provider support to SfMaps in our 2018 Volume 2 release. You can now show OpenStreetMaps and Bing maps using the Xamarin.Forms maps control, providing the ability to visualize satellite, aerial, street map, or other kinds of imagery tiles without using any external shapes files.
The OpenStreetMap (OSM) is a map of the world built by a community of mappers that is free to use under an open license. It allows you to view geographical data in a collaborative way from anywhere on the Earth. It provides small tile images based on our requests and combines those images into a single one to display the map area in our maps control.
Maps control uses the imagery layer to display the tile images from the OSM service. To use OSM, you need to add an imagery layer in maps’ Layers collection and set LayerType as “OSM,” as shown in the following code.
<maps:SfMaps>
<maps:SfMaps.Layers>
<maps:ImageryLayer LayerType="OSM" ></maps:ImageryLayer>
</maps:SfMaps.Layers>
</maps:SfMaps>
Bing maps is a map of the entire world owned by Microsoft. As with OSM, it provides map tile images based on our requests and combines those images into a single one to display a map area. To use Bing maps, you need to set the LayerType as “Bing”. Also, you need to set the Bing maps key (which is obtained from this) to BingMapKey property, as shown in the following code.
<maps:SfMaps >
<maps:SfMaps.Layers>
<!--Need to create Bing maps key and set to BindMapKey property-->
<maps:ImageryLayer LayerType="Bing" BingMapKey="" />
</maps:SfMaps.Layers>
</maps:SfMaps>
Maps supports three types of Bing map viewing style options: Aerial, AerialWithLabel, and Road. The default view of Bing map style is Road.
Aerial view displays satellite images to highlight roads and major landmarks for easy identification. To apply the Aerial view, you need to set BingMapStyle as “Aerial,” as shown in the following code.
<maps:SfMaps >
<maps:SfMaps.Layers>
<!--Need to create Bing maps key and set to BindMapKey property-->
<maps:ImageryLayer LayerType="Bing" BingMapKey="" BingMapStyle="Aerial" />
</maps:SfMaps.Layers>
</maps:SfMaps>
AerialWithLabel view displays the Aerial map areas with labels for continent, country, ocean, etc., names. To apply this type of view style, you need to set BingMapStyle as “AerialWithLabel,” as shown in the following code.
<maps:SfMaps >
<maps:SfMaps.Layers>
<!--Need to create Bing maps key and set to BindMapKey property-->
<maps:ImageryLayer LayerType="Bing" BingMapKey="" BingMapStyle="AerialWithLabel" />
</maps:SfMaps.Layers>
</maps:SfMaps>
Road view displays the default map view of roads, buildings, and geography. To apply the Road view, you need to set BingMapStyle as “Road,” as shown in the following code.
<maps:SfMaps >
<maps:SfMaps.Layers>
<!--Need to create Bing maps key and set to BindMapKey property-->
<maps:ImageryLayer LayerType="Bing" BingMapKey="" BingMapStyle="Road" />
</maps:SfMaps.Layers>
</maps:SfMaps>
Maps provides additional options to add custom markers over the OSM maps layer. Just set the corresponding location’s coordinates of latitude and longitude, and you can place the marker with labels. The type of marker can be changed to built-in shapes such as circles, diamonds, rectangles, or squares. Also, custom images can be added as markers to highlight a location.
<maps:SfMaps >
<maps:ImageryLayer.Markers>
<maps:MapMarker Label="United States" Latitude="38.8833" Longitude= "-77.0167"/>
<maps:MapMarker Label="Brazil" Latitude="-15.7833" Longitude= "-47.8667" />
<maps:MapMarker Label="India" Latitude="21.0000" Longitude= "78.0000" />
<maps:MapMarker Label="China" Latitude="35.0000" Longitude= "103.0000" />
<maps:MapMarker Label="Indonesia" Latitude="-6.1750" Longitude= "106.8283" />
</maps:ImageryLayer.Markers>
</maps:SfMaps >
Maps provides interactive zooming and panning support for OSM and Bing maps.
Zooming helps you get a closer look at a particular area on a map for in-depth analysis. Panning helps you move a map around to focus the target area. You can perform zooming and panning with the pinching gesture in a map area.
We hope you will enjoy this feature that makes Syncfusion maps beautiful and more mature. Be sure to check out the sample, which is readily runnable, and see just how easy it is to add OSM and Bing maps to your application using map control.
If you have any questions or need clarification, please let us know in the comments section. You can also contact us through our support forum or Direct-Trac. We are happy to assist you!
Note: The demo application contains pre-released assemblies
If you liked this blog post, we think you’ll also enjoy: