Adding a map overlay to your Windows Phone Application

05 Nov 2012
by Rowdy

In het kort; je maakt met bijvoorbeeld MapChruncer (download) je tiles aan en zet die ergens publiekelijk neer.
Ook dien je een Bing Maps API key aan te vragen.

Als eerste dienen we een referentie toe te voegen naar de Bing maps

Microsoft.Phone.Controls.Maps

 

De XAML is pretty straight-forward. Je geeft je API key op, een zoomlevel en een locatie waar je de map op gecentreerd wilt zien.

<!-- Center is het Julianapark in Venlo -->
<Grid x:Name="LayoutRoot">
<map:Map Name="mapControl" 
HorizontalAlignment="Left" 
Margin="0" 
Width="480" 
Height="800" 
CredentialsProvider="BingMapsAPIKey"
Center="51.36835441,6.17482603" 
ZoomLevel="17.5"/>
</Grid>

Verder de code behind om de tiles aan de het mapelement toe te voegen. Je geeft tevens een gebied op waar we de tiles willen laten zien. Het is namelijk onzin om te pogen op tiles op te halen voor een locatie waar we geen tiles voor hebben.

// De LocationRectTileSource waarin we willen dat de tilelayers geladen worden (om layers voor bijvoorbeeld Amsterdam te laden zou onzin zijn)
// Het Uriformat specificeert waar de tiles staan; de quadkey wordt automatisch vervangen door een nummer en die correspondeerd met de bestandsnamen van de files die MapChruncer uitspuwt 
// Als laatste geef je nog de zoomrange op waarvoor je tilelayers gegenereert hebt
var locationRectTileSource = new Microsoft.Phone.Controls.Maps.LocationRectTileSource();
locationRectTileSource.UriFormat = @"http://dev.rowdy.nl/layers/zpf/{quadkey}.png";
locationRectTileSource.BoundingRectangle = new Microsoft.Phone.Controls.Maps.LocationRect(51.36980453, 6.17281437, 51.36698462, 6.17586136);
locationRectTileSource.ZoomRange = new Range<double>(10, 20); ;

// De MapTileLayer, hier voegen we de zojuist gecreeerde LocationRectTileSource toe
// Verder kunnen we nog wat variabelen zetten, pretty straight forward
var mapTileLayer = new Microsoft.Phone.Controls.Maps.MapTileLayer();
mapTileLayer.TileSources.Add(locationRectTileSource);
mapTileLayer.Opacity = .8;
mapTileLayer.Visibility = Visibility.Visible;

// Als laatste voegen we de MapTileLayer toe aan het MapControl
mapControl.Children.Add(mapTileLayer);

 

Leave a Comment:

* - required fields

© Copyright 1999-2016 Rowdy.nl | Kamer van Koophandel 58560874 | Privacy policy