Building a Windows Forms application with an interactive map

This tutorial shows how to build a Windows Forms application with an interactive xServer map. After we have added the basic map to our form, we create an additional layer with a pushpin icon.

Step 1: Download and install the PTV xServer .NET SDK

PTV xServer provides a .NET SDK to build interactive Windows Client applications. You can download the SDK here. Run the setup and make sure the item “Visual Studio Toolbox Items” is selected.

This option checks the Visual Studio versions installed on your system. You can select the Visual Studio versions for which the additional toolbox item should be installed.

Step 2: Create a new application and add the map

Open Visual Studio and create a new Windows Forms application named “HelloMap”. Then open the MainForm. In your toolbox a new icon “FormsMap” should appear in the category “PTV xServer .NET”. Drag this control on the form and dock it in the forms container.

Step 3: Set the properties for xServer internet

Set the following entries in the properties sheet of the control:

After you’ve set the properties, the map should appear in the designer.

Step 4: Add a new layer with a pushpin

If you double-click the form in the designer an event-handler for the load-event is created. We can add our additional code here. In this code, we create a new shape layer. This shape layer will contain our custom content and a push pin which we add to the custom layer.

using System;
using System.Windows.Forms;
using Ptv.XServer.Controls.Map.Layers.Shapes;
 
namespace HelloMap
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
 
        private void Form1_Load(object sender, EventArgs e)
        {
            // We need a layer to hold our custom map objects.
            // Create a new shape layer instance and add it to the map.
            var myLayer = new ShapeLayer("MyLayer") { Caption = "My First Layer" };
            this.formsMap1.Layers.Add(myLayer);
 
            // XServer.NET comes with a bunch of predefined symbols. We use the Pin.
            var pin = new Ptv.XServer.Controls.Map.Symbols.Pin()
            {
                ToolTip = "Hello Map!", // assign a tool tip
                Width = 50, Height = 50, // set size to 50 pixels
                Color = System.Windows.Media.Colors.Green // set color to green
            };
 
            // The dependency property Location sets the geographic location of the pin.
            // By default the coordinates are defined as longitude and latitude.
            ShapeCanvas.SetLocation(pin, new System.Windows.Point(8.4, 49));
 
            // The optional anchor property sets an alignment, so the tip of the pin
            // (located at right-bottom) points to the geographic location.
            ShapeCanvas.SetAnchor(pin, LocationAnchor.RightBottom);
 
            // Add the shape to our shape layer
            myLayer.Shapes.Add(pin);
 
            // We set the center of the map to the same coordinate as the location of the pin.
            this.formsMap1.SetMapLocation(new System.Windows.Point(8.4, 49), 10);
        }
    }
}

If we now start the application, we have a pannable and zoomable map containing a pushpin. When moving the mouse over the pushpin, a tooltip appears. You can download the whole sample here.

 

 

Explore the xServer .NET Demo Center for advanced samples

Together with the xServer .NET SDK, an interactive demo center is installed. The SDK also contains the sources of the demo center which can be compiled after setting your token in the code. You can run the demo center here.