Loupe

[UWP] Utiliser le contrôle de Maps avec un webservice tiers

Et si l'on pouvait se passer de Bing pour une app de cartographie ?!
Quand on pense à faire de l’affichage de cartes dans une application Windows 8 on pense au contrôle Bing Maps.
Depuis Windows 10 et les UWP ce contrôle a été renommé en MapControl. Cela paraît anodin mais en réalité le changement est plus profond qu’un simple renommage.

Cela signifie qu’il ne dépend plus du SDK Bings. En effet, le contrôle dépend désormais du SDK Universal Windows et il est donc disponible nativement à la création d’un projet via le namespace suivant:

xmlns:maps="using:Windows.UI.Xaml.Controls.Maps"

 

Passé cette petite présentation, on peut se poser une question: Jusqu’où la dépendance à Bings a été supprimée et peut-on utiliser ce contrôle avec notre propre service de carte ?

Alerte Spoil. La réponse est oui. Alors, voyons un peu comment cela se passe.

 

Front XAML

Pour la création du contrôle, rien de plus simple puisque l’on a vu qu’il était disponible directement.

On ajoute le namespace et on positionne notre contrôle

<maps:MapControl x:Name="MyMapControl"/> 

 

Code-Behind C#

Là non plus la mise en place n’est pas très compliquée. La propriété importante sur laquelle nous allons interagir est TileSources.

Nous pouvons ajouter des sources à notre contrôle de la manière suivante :

MyMapControl.TileSources.Add(tileSource);

 

Reste évidemment à configurer cette fameuse tileSource, la source pour nos tuiles.

C’est ici que va se passer toute la magie puisque l’on va préciser comment récupérer les cartes depuis notre fournisseur de cartes.

Pour cela il va falloir définir l’url de consommation du webservice.

var urlFormatString = "http://mymapservice?z={zoomlevel}&x={x}&y={y}";

Nous pouvons utiliser plusieurs paramètres dynamiques qui seront donc pris en compte dans l’url.

 

Maintenant nous pouvons créer un objet de type HttpMapTileDataSource dont le constructeur utilise le format d’url que nous venons de définir.

HttpMapTileDataSource dataSource = new HttpMapTileDataSource(urlFormatString);

Enfin pour faire la liaison avec le TileSource dont nous avons besoin pour notre MapControl, il  nous reste à passer par un objet MapTileSource que nous créerons ensuite :

MapTileSource tileSource = new MapTileSource(dataSource);

 

Très bien. Maintenant nous devrions nous retrouver avec une application qui utilise un contrôle MapControl, qui lui-même va chercher de manière automatique ces tuiles via notre webservice.

Ces tuiles seront superposées sur les tuiles standard récupérées du service Bing.

 

Remplacement complet du service Bing

Si vous souhaitez vous passer de ces cartes Bing car votre système de carte retourne des images suffisantes, vous n’aurez qu’à modifier les propriétés Layer et Style du contrôle de la manière suivante :

tileSource.Layer = MapTileLayer.BackgroundReplacement;
MyMapControl.Style = MapStyle.None;

 

Voici donc le code complet pour notre UWP que nous devrions avoir dans notre XAML ainsi que dans notre code-behind pour nous permettre de consommer notre webservice et de remplacer les cartes Bing par celles de notre fournisseur :

var urlFormatString = "http://mymapservice?z={zoomlevel}&x={x}&y={y}";
HttpMapTileDataSource dataSource = new HttpMapTileDataSource(urlFormatString);
MapTileSource tileSource = new MapTileSource(dataSource);
tileSource.Layer = MapTileLayer.BackgroundReplacement;
MyMapControl.Style = MapStyle.None;
MyMapControl.TileSources.Add(tileSource);
//namespace
xmlns:maps="using:Windows.UI.Xaml.Controls.Maps"
//page content
<maps:MapControl x:Name="MyMapControl"/>

 

Superposition de cartes

En revanche si vous souhaitez ajouter plusieurs niveaux de cartes pour superposer un service de trafic routier à un service de maps alors nous n’aurez qu’à construire ces différentes sources et à les ajouter à la propriété TileSources de cotre MapControl.

 

A vous de coder votre app de Mapping maintenant.

Ces billets pourraient aussi vous intéresser

Vous nous direz ?!

Commentaires

comments powered by Disqus