Minimal example for "Xaml MapControl"

I have mentioned the map control named "Xaml.MapControl" by Clemes Fischer on this blog earlier. This is a very good map control for use in WPF applications and some of the main features are:

  • It can get tiles from many sources such as "Open Street Map", "Bing Maps" and custom sorces by using a url format string.
  • It can also have WMS layers on from different sources, and you may also add your own tile sources or images.
  • You can display UI elements on the map. The mapp add Points, Lines, Elipses and Polygons but you may add xaml-elements yourself to be displayed on your map. 
  • XAML and MVVM support.  Using ItemsControls for multiple elements.
Since it is meant to be used in MVVM and XAML it is very flexible. You can provide data for the map by using WPF binding. You can style it with WPF templates and styles. And adjust data by using WPF converters.

I wanted to write this post to show the most simple and basic way to get a map in a WPF application. And this is the way:

Create project and get the package from Nuget

Make a new WPF solution in Visual Studio.

Inside VS; go to the NuGet Package Manager (Tools + Nuget package manager + Manage Packages for this project).

Search for "Xaml.MapControl" and press install.

Show it on the form

In the MainWindow.xaml add the following inside the grid-tag:

        <map:Map x:Name="MainMap" Center="59.9,10.7" ZoomLevel="4">
            <map:MapTileLayer TileSource="https://{s}.tile.openstreetmap.de/{z}/{x}/{y}.png" />
        </map:Map>

You should get some squiggly red lines and an error. This is because the reference to the mapControl's not there. Add the following as a new attribute to the "Window":

		xmlns:map="clr-namespace:MapControl;assembly=MapControl.WPF"

The full XAML form should then look be something like this:

<Window x:Class="XamlMapBoilerplate.MainWindow"       
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        xmlns:map="clr-namespace:MapControl;assembly=MapControl.WPF"
        Title="MainWindow" Height="450" Width="800">
    
    <Grid>
        <map:Map x:Name="MainMap" Center="59.9,10.7" ZoomLevel="4">
            <map:MapTileLayer TileSource="https://{s}.tile.openstreetmap.de/{z}/{x}/{y}.png" />
        </map:Map>
    </Grid>
</Window>

Press F5  and this is what you should see:


Just in case...

In case it doesn't show up allrigt this may be some tips:

The TileSource in the xample might have changed. You may try some other URL you can find here: https://wiki.openstreetmap.org/wiki/Tile_servers .

The tile server may have implemented new security features or data limits. Check the above link.


Comments

Post a Comment

Popular posts from this blog

Custom Pushpin in Bing Maps Control for WPF

Image
Pushpins in "Bing Maps Control for WPF" can be styled in XAML. The code below may seem a bit much, but this is actually very flexible and easy to adjust. And it doesn't require code-behind that is forgotten when copying, problems with change of names that isn't reflected in code or overriding rendering events. It also get additional benefits at a later stage since this can also contain text( see below ) be data-bound, bound to other controls or templates or be rotated and transformed. We could also control size or placement according to converters related to real-world sizes like meters or have it's visbility set according to zoom-level. This is out of scope here but I will try to get to that later. In the example below the styles are placed inside the map-control in <m:Map.Resources> . This is handy when designing or for a cut-copy-paste library. But this get quite a bit readable when it's moved into an Application.Resource in App.Xaml or in it...
Read more

Bing Maps Control for WPF with Essential Tools

There are alternatives, but the basic Bing Maps for WPF has a lot of resources and a strong documentation available. Microsoft has moved the focus to the UWP-version and the WEB-version, but for desktop applications that requires local file operations this is still the basic tool. I have been using " XAML Map Control " by Clemens Ficher a lot. But since that control is modelled after the features of "BingMaps"the toolkits below will still be relevant. To get started we should get the bing-map-key from Microsoft here: https://www.bingmapsportal.com/ First off there is the Control itself. It can be found on Nuget: PM> Install-Package Microsoft.Maps.MapControl.WPF Then I add the Spatial Toolbox ( see below ). This is not on Nuget, so you have to download it , unpack it, and then include it to your project. You can add a reference to the toolbox project to your solution (Located in the archive folders, and named: Microsoft.Maps.SpatialToolbox.Core and Micros...
Read more

Tip to enable key-events in WPF

Working on a project with editing shapes I came over a problem when I wanted to canced the operation when the user pressed the escape-key. When I added an event handler for KeyPress or KeyDown or even PreviewKeyDown it never fired. This was because the graphical elements didn't actully have focus. For my user-control for the graphic element I solved this by adding this in the constructor: this.Focusable = true; this.FocusVisualStyle = null; The second line ensured that the dotted focus-rectangle also disseapeared. For a xaml-based approach this is the markup: <Canvas Focusable="True" FocusVisualStyle="{x:Null}">  <!-- The shapes or elements like an elipse, rectangle, path or stack-panel... --> </Canvas>
Read more