The purpose of this guide is to help you quickly get started building your own spatially aware applications with ThinkGeo Cloud. Like any new software, there is some learning to be done along the way.

How do we start to learn how to take advantage of the power of ThinkGeo Cloud? The best way is to make a sample application with it.

Download Sample Code From GitHub

Let's start with a new WPF project in Microsoft Visual Studio (2015 or newer) and call it QuickstartSample (see Figure 1). We can create the project with .NET Framework 4.0 or 4.5.

Figure 1. Creating a new project in the Visual Studio IDE.

The project QuickstartSample is created in a new solution called QuickstartSample. The wizard creates a single WPF Application. Next we need to install MapSuiteDesktopForWpf-Standard from nugget package server (see Figure 2-5).

Figure 2. Refer to Manage NuGet Packages.

Figure 3. Refer to MapSuiteDesktopForWpf - Standard.

Now the package is installing into the project.

Click “OK” if the message box like Figure 4 pops up.

Figure 4. Review package references.

The “NetTopologySuite” is the third part assembly, so the license acceptance is required. You can click “I Accept” to agree the license.(See Figure 5)

Figure 5. NuGet installation success.

Open “…/QuickstartSample/packages/MapSuiteDesktopForWpf-Standard.10.0.0/designtime” package folder and drag “ThinkGeo.MapSuite.Wpf.dll” assembly to the Toolbox of Visual Studio.

Draw the Map control on the MainWindow by clicking on the WpfMap Control object in the Toolbox and then dragging(using the left mouse button) it to the MainWindow. You can resize the map if you desire. You can leave the name of the Map control as Map1. Our map will display in this object.

The second way. You can open your .xaml file and add reference code to refer Wpf map to your application (See Figure 6)

<Window x:Class="HelloWorld.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"
        xmlns:local="clr-namespace:HelloWorld"
        mc:Ignorable="d"
        xmlns:uc1="clr-namespace:ThinkGeo.MapSuite.Wpf;assembly=ThinkGeo.MapSuite.Wpf"
        Title="MainWindow" Height="600" Width="800">
    <Grid>
        <uc1:WpfMap Name="Map1" Loaded="Map1_Loaded"/>
    </Grid>
</Window>

Figure 6. Add Map Control to your application.

If you have not set up a developer license, ​the Map Suite Product Center will pop up when you debug the app. You need to generate your developer license. For more details, please refer to http://wiki.thinkgeo.com/wiki/map_suite_developer_license_guide.
Once the developer license is ready, run the application. Your map should look like the one below: (see Figure 7).

Figure 7. The normal map is rendered after the developer license file has been got.

In creating our “QuickstartSample“ application, our first step is to set references to the ThinkGeo.MapSuite.Layers, ThinkGeo.MapSuite.Styles and ThinkGeo.MapSuite.Wpf workspaces at the very top of our code, as we will use many classes within them. We do this so that we do not have to use the fully qualified name of the Map Suite classes throughout our code. Setting a reference to the Map Suite workspace can be done in the “code-behind” of the form by selecting the form and hitting the F7 function key. Set the reference like this:

using ThinkGeo.MapSuite;
using ThinkGeo.MapSuite.Drawing;
using ThinkGeo.MapSuite.Layers;
using ThinkGeo.MapSuite.Shapes;
using ThinkGeo.MapSuite.Styles;
using ThinkGeo.MapSuite.Wpf;

Now let's look at a code sample to bring this concept to fruition. We'll look at Shapefiles relating to the entire world. In our example, we have one such Shapefile:

* The borders of every country in the world (Countries02.shp)

(NOTE: The data used in this sample can be found in the attached sample above in the “\Data” folder)

Our next step is to define and add our Layers. All of the following code can be placed in the ​Map1_Loaded​ event of the form. Here is the code to use for our example.

private void Map1_Loaded(object sender, RoutedEventArgs e)
{
    // Set the Map Unit. The reason for setting it to DecimalDegrees is that is what the shapefile’s unit of measure is inherently in.
    Map1.MapUnit = GeographyUnit.DecimalDegree;
    // We create a new Layer and pass the path to a Shapefile into its constructor. 
    ShapeFileFeatureLayer worldLayer = new ShapeFileFeatureLayer(@"../../Data/Countries02.shp");
    AreaStyle areaStyle = new AreaStyle();
    areaStyle.FillSolidBrush = new GeoSolidBrush(GeoColor.FromArgb(255, 233, 232, 214));
    areaStyle.OutlinePen = new GeoPen(GeoColor.FromArgb(255, 118, 138, 69), 1);
    areaStyle.OutlinePen.DashStyle = LineDashStyle.Solid;
    worldLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = areaStyle;
    // This setting will apply from ZoonLevel01 to ZoomLevel20, that means we can see the world the same style with ZoomLevel01 all the time no matter how far we zoom out/in.
    worldLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
    // Create a new Layer Overlay to hold the layer we just created
    LayerOverlay layerOverlay = new LayerOverlay();
    // Add a background Layer
    layerOverlay.Layers.Add(new BackgroundLayer(new GeoSolidBrush(GeoColor.GeographicColors.ShallowOcean)));
    // Add the shapefile layer to the layer overlay
    layerOverlay.Layers.Add(worldLayer);
    // We need to add the layerOverlay to map.
    Map1.Overlays.Add(layerOverlay);
    // Set a proper extent for the Map.  
    Map1.CurrentExtent = new RectangleShape(-134, 70, -56, 7);
    // We now need to call the Refresh() method of the Map control so that the Map can redraw based on the data that has been provided.
    Map1.Refresh();
}

You can get a normal map render (See Figure 8)

Figure 8 QuickstartSample Run Result.

So what has occurred here? We have created a layer and added it to the Map and the Map has rendered according to its default style parameters. Also, we have used ZoomLevel to display the map the way that we want.

NOTE: It is important that the “MapUnit” property of a Map object be set using the “GeographyUnit” enumeration. This is because ShapeFiles only store binary vector coordinates, which can be in DecimalDegree, feet, meters, etc., and our map has no idea about what the unit of measurement is until we set it. This information is normally found somewhere in the documentation or within the supplemental data file as discussed in the section on ShapeFiles.

With the above code, you can both display a map and navigate it. You can pan by dragging the map, zoom in by double-clicking, track zoom in by drawing a rectangle with your left mouse button mouse while holding the shift key, or zoom in and out by using the mouse wheel. Very powerful for just couple lines of code, isn't it?

That was an easy start! Now, let's add another Shapefile to the sample so that we will have a total of two layers:

1. The borders of every country in the world (“Countries02.shp”)
2. The capitals of the world countries (“WorldCapitals.shp”)

private void Map1_Loaded(object sender, RoutedEventArgs e)
{
    Map1.MapUnit = GeographyUnit.DecimalDegree;
    ShapeFileFeatureLayer worldLayer = new ShapeFileFeatureLayer(@"../../Data/Countries02.shp");
    AreaStyle areaStyle = new AreaStyle();
    areaStyle.FillSolidBrush = new GeoSolidBrush(GeoColor.FromArgb(255, 233, 232, 214));
    areaStyle.OutlinePen = new GeoPen(GeoColor.FromArgb(255, 118, 138, 69), 1);
    areaStyle.OutlinePen.DashStyle = LineDashStyle.Solid;
    worldLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = areaStyle;
    worldLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
    ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer(@"../../Data/WorldCapitals.shp");
    PointStyle pointStyle = new PointStyle();
    pointStyle.SymbolType = PointSymbolType.Square;
    pointStyle.SymbolSolidBrush = new GeoSolidBrush(GeoColor.StandardColors.White);
    pointStyle.SymbolPen = new GeoPen(GeoColor.StandardColors.Black, 1);
    pointStyle.SymbolSize = 6;
 
    PointStyle stackStyle = new PointStyle();
    stackStyle.SymbolType = PointSymbolType.Square;
    stackStyle.SymbolSolidBrush = new GeoSolidBrush(GeoColor.StandardColors.Maroon);
    stackStyle.SymbolPen = new GeoPen(GeoColor.StandardColors.Transparent, 0);
    stackStyle.SymbolSize = 2;
 
    pointStyle.CustomPointStyles.Add(stackStyle);
    capitalLayer.ZoomLevelSet.ZoomLevel01.DefaultPointStyle = pointStyle;
    // This setting also applies from ZoonLevel01 to ZoomLevel20, that means we can see city symbols the same style with ZoomLevel01 all the time.
    capitalLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
 
    LayerOverlay layerOverlay = new LayerOverlay();
    layerOverlay.Layers.Add(new BackgroundLayer(new GeoSolidBrush(GeoColor.GeographicColors.ShallowOcean)));
    layerOverlay.Layers.Add(worldLayer);
    // We need to add both of the new layers to the Layer OverLay. 
    layerOverlay.Layers.Add(capitalLayer);
 
    Map1.Overlays.Add(layerOverlay);
    Map1.CurrentExtent = new RectangleShape(-134, 70, -56, 7);
    Map1.Refresh();
}

And the result is as follows (Figure 9):

Figure 9. Map of Europe with 2 layers.