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.

  • Together with the xServer .NET SDK, an interactive demo center is installed. The Demo Center is a sample program illustrating typical scenarios and use cases of PTV xServer applications: map visualisations, routing, trip planning etc. The Demo Center is only available for API Version 1. The source code of the Demo Center is included in the SDK for the retracing of the implementation.

    You can run the demo center here.