map_suite_desktop_for_winforms_quick_start_guide
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
map_suite_desktop_for_winforms_quick_start_guide [2017/02/20 23:27] bradrollins |
map_suite_desktop_for_winforms_quick_start_guide [2017/03/15 05:16] (current) tgwikiupdate |
||
|---|---|---|---|
| Line 2: | Line 2: | ||
| <div msgbox> | <div msgbox> | ||
| - | The Winforms QuickStart Guide will guide you through the process of creating a sample application and will help you become | + | The Winforms Quickstart Guide will guide you through the process of creating a sample application and will help you become |
| - | familiar with Map Suite. This QuickStart Guide supports Map Suite 10.0.0.0 and higher and will show you how to create a Winforms application. | + | familiar with Map Suite. This Quickstart Guide supports Map Suite 10.0.0.0 and higher and will show you how to create a Winforms application. |
| - | If you want to build a WPF application, please see the [[map_suite_desktop_for_wpf_quick_start_guide|WPF QuickStart Guide]] instead. | + | If you want to build a WPF application, please see the [[map_suite_desktop_for_wpf_quick_start_guide|WPF Quickstart Guide]] instead. |
| </div> | </div> | ||
| Line 13: | Line 13: | ||
| The purpose of this guide is to help you quickly get started building your own spatially aware applications. Like any new software, there is some learning to be done. How do we start to learn how to take advantage of the power of Map Suite? The best way is to make a sample application with it. | The purpose of this guide is to help you quickly get started building your own spatially aware applications. Like any new software, there is some learning to be done. How do we start to learn how to take advantage of the power of Map Suite? The best way is to make a sample application with it. | ||
| + | \\ | ||
| ===== Download the Sample ===== | ===== Download the Sample ===== | ||
| - | <faicon fa fa-download fa-lg> {{mapsuite10:desktop:mapsuite_winforms_helloworld.zip|Download Sample Code From This Exercise}} //(1.5 MB)// | + | <faicon fa fa-download fa-lg> {{https://github.com/ThinkGeo/QuickstartSample-ForWinForms|Download Sample Code From GitHub}} //(1.65 MB)// |
| + | \\ | ||
| + | \\ | ||
| ===== Setting up the Environment ===== | ===== Setting up the Environment ===== | ||
| - | Let's start by creating a new Windows Forms Application in Microsoft Visual Studio (2015 or newer) named HelloWorld (see Figure 1). We can create the project with .NET Framework 4.5 or higher. | + | Let's start by creating a new Windows Forms Application in Microsoft Visual Studio (2015 or newer) named QuickstartSample(see Figure 1). We can create the project with .NET Framework 4.5 or higher. |
| - | {{::mapsuite_helloworld.png}} | + | {{mapsuite10:desktop:Map_Suite_WinForms_QSG_NewProject.png}} |
| \\ | \\ | ||
| //Figure 1. Creating a new project in Microsoft Visual Studio.// | //Figure 1. Creating a new project in Microsoft Visual Studio.// | ||
| + | \\ | ||
| + | \\ | ||
| - | After you created a HelloWorld project, we will see a project in the solution, please see Figure 2. | ||
| - | {{::mapsuite_winforms_helloword_project.png|}} | + | After you created a QuickstartSample project, we will see a project in the solution, please see Figure 2. |
| + | |||
| + | {{mapsuite10:desktop:Map_Suite_WinForms_QSG_QuickstartProject.png}} | ||
| + | \\ | ||
| + | |||
| + | //Figure 2. Create WinForms Project.// | ||
| + | \\ | ||
| \\ | \\ | ||
| - | //Figure 2. Create Win Forms Project.// | ||
| ===== Adding a NuGet Package to our Project ===== | ===== Adding a NuGet Package to our Project ===== | ||
| - | You need to add the NuGet package for Map Suite Desktop to the “Hello World” project. | + | You need to add the Map Suite Desktop for WinForms package to the “QuickstartSample” project from NuGet. |
| Right-click the Reference in Solution Explorer and select “Manage NuGet Packages” (See Figure 3). | Right-click the Reference in Solution Explorer and select “Manage NuGet Packages” (See Figure 3). | ||
| - | {{::mapsuite_winforms_helloword_references.png}} | + | {{mapsuite10:desktop:Map_Suite_WinForms_QSG_NuGetManager.png}} |
| //Figure 3. Refer to Manage NuGet Packages.// | //Figure 3. Refer to Manage NuGet Packages.// | ||
| \\ | \\ | ||
| + | \\ | ||
| + | |||
| You can see the NuGet Package management start page in our Microsoft Visual Studio main window. | You can see the NuGet Package management start page in our Microsoft Visual Studio main window. | ||
| - | Ensure that "Browse" is selected and then type “Desktop” in the search box then press enter. You should see a package list (See Figure 4) in the main window. | + | Ensure that "Browse" is selected and then type “MapSuiteDesktopForWinForms” in the search box then press enter. You should see a package list (See Figure 4) in the main window. |
| - | In that package list, please select “MapSuiteDesktopForWinForms-BareBone” package and click the “Install” button in the right panel. | + | In that package list, please select “MapSuiteDesktopForWinForms-Standard” package and click the “Install” button in the right panel. |
| - | {{::mapsuite_winforms_helloword_nuget_packages.png}} | + | {{mapsuite10:desktop:Map_Suite_WinForms_QSG_InstallWinFormsPackage.png}} |
| - | + | //Figure 4. Refer to MapSuiteDesktopForWinForms-Standard.// | |
| - | //Figure 4. Refer to MapSuiteDesktopForWinForms-BareBone.// | + | |
| - | \\ | + | |
| - | \\ | + | |
| - | The "NetTopologySuite" is the third part assembly, so the license acceptance is required. You can click "I Accept" to agree the license. | + | |
| \\ | \\ | ||
| - | {{::mapsuite10:desktop:licenseacceptance.png}} | ||
| \\ | \\ | ||
| Click “OK” if the message box like Figure 5 pops up. | Click “OK” if the message box like Figure 5 pops up. | ||
| \\ | \\ | ||
| + | {{mapsuite10:desktop:Map_Suite_WinForms_QSG_ReferenceRreview.png}} | ||
| \\ | \\ | ||
| + | //Figure 5. Review package references.// | ||
| \\ | \\ | ||
| - | {{::mapsuite_winforms_helloword_install.png}} | ||
| - | |||
| - | //Figure 5. NuGet installation success.// | ||
| \\ | \\ | ||
| - | Once the package is installed, you can see the message “Successfully installed | ||
| - | 'MapSuiteDesktopForWinForms-BareBone 10.0.0' to HelloWorld” in your Microsoft Visual Studio Output box. | ||
| - | Some Desktop assemblies have been added into the project references. (See Figure 6). | ||
| - | |||
| - | {{::mapsuite_winforms_helloword_package_installed.png}} | ||
| - | //Figure 6. NuGet installation result.// | + | The "NetTopologySuite" is the third part assembly, so the license acceptance is required. You can click "I Accept" to agree the license.(See Figure 6) |
| + | \\ | ||
| + | {{mapsuite10:desktop:Map_Suite_WinForms_QSG_PackageLicenseAcceptance.png}} | ||
| + | \\ | ||
| + | //Figure 6. NuGet installation success.// | ||
| \\ | \\ | ||
| - | In addition to the “MapSuiteDesktopForWinForms-BarBone” package, you also need two other packages named “ThinkGeo.MapSuite.Layers.ShapeFile” and “ThinkGeo.MapSuite.Styles.WorldStreets” to implement our “HelloWorld” application. Type “shapefile” into the search box and select the “ThinkGeo.MapSuite.Layers.ShapeFile” package to add it to the package list. Installing the package is the same as the steps for “MapSuiteDesktopForWinForms-BarBone” package. (See Figure 7). | ||
| - | {{::mapsuite_winforms_helloword_install_shapefile.png}} | ||
| - | |||
| - | //Figure 7. NuGet ShapeFile installation.// | ||
| \\ | \\ | ||
| - | Type “styles.worldstreets” into the search box and select the “ThinkGeo.MapSuite.Styles.WorldStreets” package | ||
| - | in the package list. Install this package following the same steps. (See Figure 8). | ||
| - | {{::mapsuite_winforms_helloword_install_styles.png}} | ||
| - | //Figure 8. NuGet WorldStreets installation.// | + | Once the package is installed, you can see the message “Successfully installed |
| + | 'MapSuiteDesktopForWinForms-Standard' to QuickstartSample” in your Microsoft Visual Studio Output box. | ||
| + | Some Desktop assemblies have been added into the project references. (See Figure 7). | ||
| - | ==== Adding the Map Control to the Toolbar ==== | + | {{mapsuite10:desktop:Map_Suite_WinForms_QSG_ProjectReferences.png}} |
| - | **1.** When you first open Microsoft Visual Studio after installing Map Suite, you may not see the controls in the Toolbox. | + | \\ |
| - | You will need to follow these steps to add the controls. Hover over Toolbox and right click anywhere on list of controls. | + | //Figure 7. NuGet installation result.// |
| - | You will get a pop-up menu. Select “Choose Items…” (See Figure 9) | + | \\ |
| - | + | ||
| - | {{::mapsuite_winforms_adding_control.png}} | + | |
| - | + | ||
| - | //Figure 9.Configure a nuget package address.// | + | |
| \\ | \\ | ||
| - | **2.** A dialogue box named "Choose Toolbox Items" will appear. You will need to select the .NET Framework Components tab and then click the Browse button. Finally navigate to the MapSuiteDesktopForWinForms-BareBone.10.0.0 Nuget package installation folder and select the “ThinkGeo.MapSuite.WinForms.dll” file. | + | ===== Adding the Map Control to Your Form ===== |
| + | Open ".../QuickstartSample/packages/MapSuiteDesktopForWinForms-Standard.10.0.0/designtime" package folder and drag "ThinkGeo.MapSuite.WinForms.dll" assembly to the Toolbox of Visual Studio. | ||
| - | {{mapsuite10:desktop:winformcomponents.png}} | + | {{mapsuite10:desktop:Map_Suite_WinForms_QSG_ControlDesigntime.png}} |
| - | //Figure 10.Add ThinkGeo.MapSuite.WinForms.dll to .Net Framework Components.// | ||
| - | \\ | ||
| - | **3.** You should now have the Map Control available in your Toolbox as shown in Figure 11 below. | ||
| - | |||
| - | {{::mapsuite_winforms_toolbox_control.png}} | ||
| - | \\ | ||
| - | //Figure 11. The Map Controls under the Toolbox window.// | ||
| - | \\ | ||
| - | ===== Adding the Map Control to Your Form ===== | ||
| Draw the Map control on the form by clicking on the WinformsMap Control object in the Toolbox and | Draw the Map control on the form by clicking on the WinformsMap Control object in the Toolbox and | ||
| then dragging and dropping (using the left mouse button) to the form. You can resize the map if you desire. You can leave the name of the | then dragging and dropping (using the left mouse button) to the form. You can resize the map if you desire. You can leave the name of the | ||
| Map control as winformsMap1. Our map will display in this object. | Map control as winformsMap1. Our map will display in this object. | ||
| - | {{::mapsuite_winforms_map.png}} | + | {{mapsuite10:desktop:Map_Suite_WinForms_QSG_AddMapControl.png}} |
| - | ===== Map Suite Desktop "Hello World" ===== | + | ===== Map Suite Desktop "QuickstartSample" ===== |
| - | In creating your “Hello World” sample application, your first step is to set some references at the very top of your code | + | In creating your “QuickstartSample" application, your first step is to set some references at the very top of your code |
| as you will use many classes within that. Open the “Form1.cs” in the project and click the form in the opened design box | as you will use many classes within that. Open the “Form1.cs” in the project and click the form in the opened design box | ||
| to move to the “View Code” of the form. Add the references like this: | to move to the “View Code” of the form. Add the references like this: | ||
| Line 160: | Line 146: | ||
| // Set a proper extent for the Map. | // Set a proper extent for the Map. | ||
| - | winformsMap1.CurrentExtent = new RectangleShape(0, 78, 30, 26); | + | winformsMap1.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. | // 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. | ||
| Line 171: | Line 157: | ||
| Once the developer license is ready, run the application. Your map should look like the one below: (see Figure 12). | Once the developer license is ready, run the application. Your map should look like the one below: (see Figure 12). | ||
| - | {{mapsuite10:desktop:2.png}} | + | {{mapsuite10:desktop:Map_Suite_WinForms_QSG_ShowAreaStyle.png}} |
| \\ | \\ | ||
| //Figure 12. A sample map of Europe.// | //Figure 12. A sample map of Europe.// | ||
| \\ | \\ | ||
| + | \\ | ||
| + | |||
| 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. | 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. | ||
| Line 218: | Line 206: | ||
| winformsMap1.Overlays.Add(layerOverlay); | winformsMap1.Overlays.Add(layerOverlay); | ||
| - | winformsMap1.CurrentExtent = new RectangleShape(0, 78, 30, 26); | + | winformsMap1.CurrentExtent = new RectangleShape(-134, 70, -56, 7); |
| winformsMap1.Refresh(); | winformsMap1.Refresh(); | ||
| Line 226: | Line 214: | ||
| And the result is as follows (Figure 13): | And the result is as follows (Figure 13): | ||
| - | {{mapsuite10:desktop:1.png}} | + | {{mapsuite10:desktop:Map_Suite_WinForms_QSG_ShowPointStyle.png}} |
| \\ | \\ | ||
| //Figure 13. Map of Europe with 2 layers.// | //Figure 13. Map of Europe with 2 layers.// | ||
| \\ | \\ | ||
| + | \\ | ||
| + | |||
| ===== How to Use GeoTextStyle ===== | ===== How to Use GeoTextStyle ===== | ||
| ==== TextStyle ==== | ==== TextStyle ==== | ||
| A TextStyle is used to label items on map. As every ShapeFile has a relative .dbf file that includes descriptions for every record, the most common way to use TextStyles is for labeling. For example, WorldCapital Shapefile's corresponding .dbf file contains the field "CITY_NAME". We can use this field to label the cities on our map. | A TextStyle is used to label items on map. As every ShapeFile has a relative .dbf file that includes descriptions for every record, the most common way to use TextStyles is for labeling. For example, WorldCapital Shapefile's corresponding .dbf file contains the field "CITY_NAME". We can use this field to label the cities on our map. | ||
| - | {{::mapsuite_winforms_helloword_data.png}} | + | {{mapsuite10:desktop:Map_Suite_WinForms_QSG_DBFDetails.png}} |
| Map Suite has many TextStyles built in to help us quickly design attractive labels for the cities on our map. We can just pick the TextStyle we like and use it. | Map Suite has many TextStyles built in to help us quickly design attractive labels for the cities on our map. We can just pick the TextStyle we like and use it. | ||
| Line 289: | Line 279: | ||
| winformsMap1.Overlays.Add(layerOverlay); | winformsMap1.Overlays.Add(layerOverlay); | ||
| - | winformsMap1.CurrentExtent = new RectangleShape(0, 78, 30, 26); | + | winformsMap1.CurrentExtent = new RectangleShape(-134, 70, -56, 7); |
| winformsMap1.Refresh(); | winformsMap1.Refresh(); | ||
| Line 295: | Line 285: | ||
| </code> | </code> | ||
| - | The result is as follows (Figure 13): | + | The result is as follows (Figure 14): |
| - | {{::mapsuite_winforms_helloword_display3.png}} | + | {{mapsuite10:desktop:Map_Suite_WinForms_QSG_ShowTextStyle.png}} |
| + | \\ | ||
| + | //Figure 14. Map of Europe with a TextStyle.// | ||
| + | \\ | ||
| \\ | \\ | ||
| - | //Figure 13. Map of Europe with a TextStyle.// | ||
| Now that we know how to render text and render symbols, let's define two different ZoomLevels in one single layer and create our own custom Style and TextStyle. | Now that we know how to render text and render symbols, let's define two different ZoomLevels in one single layer and create our own custom Style and TextStyle. | ||
| Line 360: | Line 352: | ||
| winformsMap1.Overlays.Add(layerOverlay); | winformsMap1.Overlays.Add(layerOverlay); | ||
| - | winformsMap1.CurrentExtent = new RectangleShape(0, 78, 30, 26); | + | winformsMap1.CurrentExtent = new RectangleShape(-134, 70, -56, 7); |
| winformsMap1.Refresh(); | winformsMap1.Refresh(); | ||
| Line 368: | Line 360: | ||
| Can you imagine what the map will look like now? Below is the result. At first it appears like figure 15, and the map changes to figure 8 as you zoom in. | Can you imagine what the map will look like now? Below is the result. At first it appears like figure 15, and the map changes to figure 8 as you zoom in. | ||
| - | {{::mapsuite_winforms_helloword_display4.png}} | + | {{mapsuite10:desktop:Map_Suite_WinForms_QSG_ShowLowZoomLevel.png}} |
| \\ | \\ | ||
| //Figure 15. A map of Europe with two ZoomLevels, before zooming in.// | //Figure 15. A map of Europe with two ZoomLevels, before zooming in.// | ||
| - | {{::mapsuite_winforms_helloword_display5.png}} | + | {{mapsuite10:desktop:Map_Suite_WinForms_QSG_ShowHeightZoomLevel.png}} |
| \\ | \\ | ||
| //Figure 16. The same map with two ZoomLevels, after zooming in.// | //Figure 16. The same map with two ZoomLevels, after zooming in.// | ||
map_suite_desktop_for_winforms_quick_start_guide.1487633256.txt.gz · Last modified: 2017/02/20 23:27 by bradrollins