User Tools

Site Tools


map_suite_services_edition_quick_start_guide

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision
Previous revision
map_suite_services_edition_quick_start_guide [2015/08/20 03:08]
127.0.0.1 external edit
map_suite_services_edition_quick_start_guide [2017/03/17 02:33] (current)
tgwikiupdate
Line 1: Line 1:
-====== ​Map_Suite_Services_Edition_Quick_Start_Guide ​======+====== ​Map Suite Services Edition Quick Start Guide ======
  
-{{article rating}}+{{section>​upgrade_map_suite_to_10.0}}
  
-{{MsgBox|The Map Suite Services Edition illustrated QuickStart Guide will guide you through the process of creating a sample application and will help you become familiar with Map Suite. This edition of the QuickStart Guide supports Services Edition 9.0.0.0 and higher.}}+<div msgbox>The Map Suite Services Edition illustrated QuickStart Guide will guide you through the process of creating a sample application and will help you become familiar with Map Suite. This edition of the QuickStart Guide supports Services Edition 9.0.0.0 and higher.</​div>​
  
 Welcome to Map Suite™ from ThinkGeo, a full-featured mapping control that makes it easy for any Microsoft .NET developer to add mapping functionality to a Microsoft .NET application quickly and efficiently. Using the intuitive object model, even developers inexperienced in Geographic Information Systems (GIS) can have fully functional maps working in minutes. Welcome to Map Suite™ from ThinkGeo, a full-featured mapping control that makes it easy for any Microsoft .NET developer to add mapping functionality to a Microsoft .NET application quickly and efficiently. Using the intuitive object model, even developers inexperienced in Geographic Information Systems (GIS) can have fully functional maps working in minutes.
Line 11: Line 11:
 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. 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.
  
-Before we get started, make sure that you have installed the [[ThinkGeo Product Center]] and that you have either started an evaluation or activated a full license of Map Suite Services Edition. ​ By default, this will install the Map Suite Services Edition 9.0 assemblies to <kbd>C:\Program Files (x86)\ThinkGeo\Map Suite 9.0\Map Suite Services</kbd>.+Before we get started, make sure that you have installed the [[ThinkGeo Product Center]] and that you have either started an evaluation or activated a full license of Map Suite Services Edition. ​ By default, this will install the Map Suite Services Edition 9.0 assemblies to //C:\Program Files (x86)\ThinkGeo\Map Suite 9.0\Map Suite Services//.
  
 ===== Download the Sample ===== ===== Download the Sample =====
-{{Filelink}}[[:​File:HelloWorld Services.zip|Download Sample Code From This Exercise]] //(1.5 MB)//+<faicon fa fa-download ​ fa-lg> ​{{filehistory:HelloWorld Services.zip|Download Sample Code From This Exercise}} //(1.5 MB)//
  
 =====Setting up the Environment===== =====Setting up the Environment=====
 Let's start with a new Windows Forms project in Microsoft Visual Studio (2010 or newer) and call it HelloWorld (see Figure 1). We can create the project with .NET Framework 4.0 or 4.5. Let's start with a new Windows Forms project in Microsoft Visual Studio (2010 or newer) and call it HelloWorld (see Figure 1). We can create the project with .NET Framework 4.0 or 4.5.
  
-{{Figure|QSG_ServicesEdition2_Img01.jpg|Figure 1. Creating a new project in the Visual Studio.NET 2010 or 2012 IDE.}}+{{servicesedition:​QSG_ServicesEdition2_Img01.jpg}} 
 +\\ 
 +//Figure 1. Creating a new project in the Visual Studio.NET 2010 or 2012 IDE.//
  
 The project HelloWorld is created in a new solution called HelloWorld. The wizard creates a single Windows Form. The project HelloWorld is created in a new solution called HelloWorld. The wizard creates a single Windows Form.
  
-Next, we need to add "​MapSuiteCore.dll"​ to the reference. Right-click the project in solution explorer and select "Add Reference...",​ navigate to the <kbd>C:\Program Files (x86)\ThinkGeo\Map Suite 9.0\Map Suite Services\Current Version\Managed Assemblies</kbd> ​folder and select "​MapSuiteCore.dll"​.+Next, we need to add "​MapSuiteCore.dll"​ to the reference. Right-click the project in solution explorer and select "Add Reference...",​ navigate to the //C:\Program Files (x86)\ThinkGeo\Map Suite 9.0\Map Suite Services\Current Version\Managed Assemblies/folder and select "​MapSuiteCore.dll"​.
  
 **Note: If you are using Map Suite Services Edition version 9.0.0.0 or later, you also need to add "​WindowsBase.dll"​ to the references. WindowsBase can be found on the .NET tab of the Add Reference dialog. ​ If you don't do this, you will get the following error when you compile the project:** **Note: If you are using Map Suite Services Edition version 9.0.0.0 or later, you also need to add "​WindowsBase.dll"​ to the references. WindowsBase can be found on the .NET tab of the Add Reference dialog. ​ If you don't do this, you will get the following error when you compile the project:**
 //"The type '​System.Collections.Specialized.INotifyCollectionChanged'​ is defined in an assembly that is not referenced. You must add a reference to assembly '​WindowsBase,​ Version=3.0.0.0,​ Culture=neutral,​ PublicKeyToken=31bf3856ad364e35'​."//​ //"The type '​System.Collections.Specialized.INotifyCollectionChanged'​ is defined in an assembly that is not referenced. You must add a reference to assembly '​WindowsBase,​ Version=3.0.0.0,​ Culture=neutral,​ PublicKeyToken=31bf3856ad364e35'​."//​
  
-{{Figure|QSG_ServicesEdition2_Img02.jpg}}+{{servicesedition:​QSG_ServicesEdition2_Img02.jpg}}
  
 To make it simple, we will display the map using Map Suite Services Edition in a PictureBox. Draw a PictureBox on the form by clicking on the PictureBox object in the Toolbox and then dragging and dropping (using the left mouse button) to the size you desire. You can leave the name set to pictureBox1. Our map will display in the PictureBox. To make it simple, we will display the map using Map Suite Services Edition in a PictureBox. Draw a PictureBox on the form by clicking on the PictureBox object in the Toolbox and then dragging and dropping (using the left mouse button) to the size you desire. You can leave the name set to pictureBox1. Our map will display in the PictureBox.
  
-{{Figure|QSG_ServicesEdition2_Img03.jpg}}+{{servicesedition:​QSG_ServicesEdition2_Img03.jpg}}
  
 Now that we have our "​MapSuiteCore.dll"​ referenced and a pictureBox added, we are ready to add the code. Now that we have our "​MapSuiteCore.dll"​ referenced and a pictureBox added, we are ready to add the code.
Line 68: Line 70:
 We have provided the 20 most common scales, from ZoomLevel01 to ZoomLevel20,​ at which you may want to change the way your data looks. What is scale? Scale indicates how much the given area has been reduced. If a road is 10,000 inches long in the real world and a map depicts this length as 1 inch on the screen, then we say the scale of this map is 1:10,000. Now let's say ZoomLevel02 uses a scale of 1:500 and ZoomLevel03 uses a scale of 1:1200. This means the map with a current scale of 1:1000 matches ZoomLevel03,​ the ZoomLevel whose scale is the closest to that. We have provided the 20 most common scales, from ZoomLevel01 to ZoomLevel20,​ at which you may want to change the way your data looks. What is scale? Scale indicates how much the given area has been reduced. If a road is 10,000 inches long in the real world and a map depicts this length as 1 inch on the screen, then we say the scale of this map is 1:10,000. Now let's say ZoomLevel02 uses a scale of 1:500 and ZoomLevel03 uses a scale of 1:1200. This means the map with a current scale of 1:1000 matches ZoomLevel03,​ the ZoomLevel whose scale is the closest to that.
  
-PresetZoomLevels has a very useful property called ​<​code>​ZoomLevel.ApplyUntilZoomLevel</​code>​, which you can you can very easily use to extend your ZoomLevels. Let's say you want a particular Style to be visible at ZoomLevel03 through ZoomLevel10. To make that work, we can simply code as follows:+PresetZoomLevels has a very useful property called ​''​ZoomLevel.ApplyUntilZoomLevel''​, which you can you can very easily use to extend your ZoomLevels. Let's say you want a particular Style to be visible at ZoomLevel03 through ZoomLevel10. To make that work, we can simply code as follows:
  
-<source lang="csharp">+<code csharp>
 worldLayer.ZoomLevelSet.ZoomLevel03.DefaultAreaStyle = AreaStyles.Country1;​ worldLayer.ZoomLevelSet.ZoomLevel03.DefaultAreaStyle = AreaStyles.Country1;​
 worldLayer.ZoomLevelSet.ZoomLevel03.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level10;​ worldLayer.ZoomLevelSet.ZoomLevel03.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level10;​
-</source>+</code>
  
 ====Map Suite Services Edition "Hello World"​==== ====Map Suite Services Edition "Hello World"​====
 In creating our "Hello World" sample application,​ our first step is to set a reference to the Map Suite workspace at the very top of our code, before any other code. 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: In creating our "Hello World" sample application,​ our first step is to set a reference to the Map Suite workspace at the very top of our code, before any other code. 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:
  
-<source lang="csharp">+<code csharp>
 using ThinkGeo.MapSuite.Core;​ using ThinkGeo.MapSuite.Core;​
-</source>+</code>
  
 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: 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"​)+  ​* 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 at "​\AppData"​ folder) (**NOTE:** The data used in this sample can be found in the attached sample above at "​\AppData"​ folder)
  
-Our next step is to define and add our layers. Here is the code to use for our example, which includes the <​code>​Form1_Load</​code> ​event of the form as well as one module member.+Our next step is to define and add our layers. Here is the code to use for our example, which includes the ''​Form1_Load'' ​event of the form as well as one module member.
  
-<source lang="csharp">+<code csharp>
 private MapEngine mMapEngine = new MapEngine();​ private MapEngine mMapEngine = new MapEngine();​
     private void Form1_Load(object sender, EventArgs e)     private void Form1_Load(object sender, EventArgs e)
     {     {
-        ​<​nowiki>​//</​nowiki> ​We create a new Layer and pass the path to a Shapefile into its constructor.+        // We create a new Layer and pass the path to a Shapefile into its constructor.
         ShapeFileFeatureLayer worldLayer = new ShapeFileFeatureLayer(@"​../​../​AppData/​Countries02.shp"​);​         ShapeFileFeatureLayer worldLayer = new ShapeFileFeatureLayer(@"​../​../​AppData/​Countries02.shp"​);​
         ​         ​
-        ​<​nowiki>​//</​nowiki> ​Set the worldLayer with a preset Style, as AreaStyles.Country1 has YellowGreen background and black border, our worldLayer will have the same render style. ​+        // Set the worldLayer with a preset Style, as AreaStyles.Country1 has YellowGreen background and black border, our worldLayer will have the same render style. ​
         worldLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = AreaStyles.Country1;​         worldLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = AreaStyles.Country1;​
         ​         ​
-        ​<​nowiki>​//</​nowiki> ​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.+        // 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;​         worldLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;​
         ​         ​
-        ​<​nowiki>​//</​nowiki> ​We need to add the world layer to the mapEngine'​s Static Layer collection.+        // We need to add the world layer to the mapEngine'​s Static Layer collection.
         mMapEngine.StaticLayers.Add(worldLayer);​         mMapEngine.StaticLayers.Add(worldLayer);​
-        ​<​nowiki>​//</​nowiki> ​Set a proper extent for the Map. ExtentHelper.GetDrawingExtent will modify the extent based on the width/​height of the canvas.+        // Set a proper extent for the Map. ExtentHelper.GetDrawingExtent will modify the extent based on the width/​height of the canvas.
         mMapEngine.CurrentExtent = ExtentHelper.GetDrawingExtent(new RectangleShape(0,​ 78, 30, 26), pictureBox1.Width,​ pictureBox1.Height);​         mMapEngine.CurrentExtent = ExtentHelper.GetDrawingExtent(new RectangleShape(0,​ 78, 30, 26), pictureBox1.Width,​ pictureBox1.Height);​
         ​         ​
-        ​<​nowiki>​//</​nowiki> ​Create a bitmap to prepare for drawing on.+        // Create a bitmap to prepare for drawing on.
         Bitmap bitmap = new Bitmap(pictureBox1.Width,​ pictureBox1.Height);​         Bitmap bitmap = new Bitmap(pictureBox1.Width,​ pictureBox1.Height);​
  
-        ​<​nowiki>​//</​nowiki> ​Open the layer and draw it on the bitmap.+        // Open the layer and draw it on the bitmap.
         mMapEngine.OpenAllLayers();​         mMapEngine.OpenAllLayers();​
-        ​<​nowiki>​//</​nowiki> ​We set the unit of measurement to DecimalDegree because this is the inherent unit in the "​Countries02.shp"​ file.+        // We set the unit of measurement to DecimalDegree because this is the inherent unit in the "​Countries02.shp"​ file.
         mMapEngine.DrawStaticLayers(bitmap,​ GeographyUnit.DecimalDegree);​         mMapEngine.DrawStaticLayers(bitmap,​ GeographyUnit.DecimalDegree);​
         mMapEngine.CloseAllLayers();​         mMapEngine.CloseAllLayers();​
  
-        ​<​nowiki>​//</​nowiki> ​Set the bitmap to pictureBox1.+        // Set the bitmap to pictureBox1.
         pictureBox1.Image = bitmap;         pictureBox1.Image = bitmap;
     }     }
-</source>+</code>
  
 If you compile and run what you have now, your map should look like the one below. (see Figure 3). If you compile and run what you have now, your map should look like the one below. (see Figure 3).
  
-{{Figure|QSG_ServicesEdition2_Img05.jpg|Figure 3. A simple map of Europe.}}+{{servicesedition:​QSG_ServicesEdition2_Img05.jpg}} 
 +\\ 
 +//Figure 3. A simple map of Europe.//
  
 So what has occurred here? We have created a layer and added it to the MapEngine, and the MapEngine has rendered it according to its default style parameters. Also, we have used ZoomLevel to display the map the way we want. So what has occurred here? We have created a layer and added it to the MapEngine, and the MapEngine has rendered it according to its default style parameters. Also, we have used ZoomLevel to display the map the way we want.
  
-NOTE: As you can see in the code, MapEngine has a very important method called ​<​code>​DrawStaticLayers</​code>​, which you can use to get the map you want. It is crucial that you correctly set the map's unit of length measurement in that method, since Shapefiles only store binary vector coordinates (that can be in DecimalDegrees,​ feet, etc.) and our MapEngine has no idea what the unit is until we set explicitly. Information on what unit of measurement to use is normally found somewhere in the Shapefile documentation or within its supplemental data file.+NOTE: As you can see in the code, MapEngine has a very important method called ​''​DrawStaticLayers''​, which you can use to get the map you want. It is crucial that you correctly set the map's unit of length measurement in that method, since Shapefiles only store binary vector coordinates (that can be in DecimalDegrees,​ feet, etc.) and our MapEngine has no idea what the unit is until we set explicitly. Information on what unit of measurement to use is normally found somewhere in the Shapefile documentation or within its supplemental data file.
  
 That was easy, wasn't it? Let's add another Shapefile to the sample so that we will have a total of two layers: That was easy, wasn't it? Let's add another Shapefile to the sample so that we will have a total of two layers:
  
-#The borders of every country in the world ("​Countries02.shp"​) +  - The borders of every country in the world ("​Countries02.shp"​) 
-#The capitals of the world countries ("​WorldCapitals.shp"​)+  ​- ​The capitals of the world countries ("​WorldCapitals.shp"​)
  
-<source lang="csharp">+<code csharp>
  
     private void Form1_Load(object sender, EventArgs e)     private void Form1_Load(object sender, EventArgs e)
Line 143: Line 147:
         ​         ​
         ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer(@"​../​../​AppData/​WorldCapitals.shp"​);​         ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer(@"​../​../​AppData/​WorldCapitals.shp"​);​
-        ​<​nowiki>​//</​nowiki> ​Similarly, we use the presetPointStyle for capitals.+        // Similarly, we use the presetPointStyle for capitals.
         capitalLayer.ZoomLevelSet.ZoomLevel01.DefaultPointStyle = PointStyles.Capital3;​         capitalLayer.ZoomLevelSet.ZoomLevel01.DefaultPointStyle = PointStyles.Capital3;​
-        ​<​nowiki>​//</​nowiki> ​This setting also applies from ZoomLevel01 to ZoomLevel20,​ which means we can see capital symbols the same style with ZoomLevel01 all the time.+        // This setting also applies from ZoomLevel01 to ZoomLevel20,​ which means we can see capital symbols the same style with ZoomLevel01 all the time.
         capitalLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;​         capitalLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;​
         ​         ​
Line 154: Line 158:
         ​         ​
         ​         ​
-        ​<​nowiki>​//</​nowiki> ​Display the map.+        // Display the map.
         Bitmap bitmap = new Bitmap(pictureBox1.Width,​ pictureBox1.Height);​         Bitmap bitmap = new Bitmap(pictureBox1.Width,​ pictureBox1.Height);​
         mMapEngine.OpenAllLayers();​         mMapEngine.OpenAllLayers();​
Line 161: Line 165:
         pictureBox1.Image = bitmap;         pictureBox1.Image = bitmap;
     }     }
-</source>+</code>
  
 The result is as follows (Figure 4): The result is as follows (Figure 4):
  
-{{Figure|QSG_ServicesEdition2_Img06.jpg|Figure 4. Europe map with 2 layers.}}+{{servicesedition:​QSG_ServicesEdition2_Img06.jpg}} 
 +\\ 
 +//Figure 4. Europe map with 2 layers.//
  
 =====How to Use TextStyle===== =====How to Use TextStyle=====
Line 171: Line 177:
 TextStyle are used to label items on map. As every Shapefile has a relative .dbf file, which 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. TextStyle are used to label items on map. As every Shapefile has a relative .dbf file, which 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.
  
-{{Figure|QSG_ServicesEdition2_Img07.jpg}}+{{servicesedition:​QSG_ServicesEdition2_Img07.jpg}}
  
 Map Suite has many TextStyles built in, which will 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, which will help us quickly design attractive labels for the cities on our map. We can just pick the TextStyle we like and use it.
  
-<source lang="csharp">+<code csharp>
     private void Form1_Load(object sender, EventArgs e)     private void Form1_Load(object sender, EventArgs e)
     {     {
Line 186: Line 192:
         capitalLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;​         capitalLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;​
         ​         ​
-        ​<​nowiki>​//</​nowiki> ​We create a new Layer for labeling the capitals.+        // We create a new Layer for labeling the capitals.
         ShapeFileFeatureLayer capitalLabelLayer = new ShapeFileFeatureLayer(@"​../​../​AppData/​WorldCapitals.shp"​);​         ShapeFileFeatureLayer capitalLabelLayer = new ShapeFileFeatureLayer(@"​../​../​AppData/​WorldCapitals.shp"​);​
-        ​<​nowiki>​//</​nowiki> ​We use the preset TextStyle. Here we passed in the “CITY_NAME”,​ which is the name of the field we want to label on map.+        // We use the preset TextStyle. Here we passed in the “CITY_NAME”,​ which is the name of the field we want to label on map.
         capitalLabelLayer.ZoomLevelSet.ZoomLevel01.DefaultTextStyle = TextStyles.Capital3("​CITY_NAME"​);​         capitalLabelLayer.ZoomLevelSet.ZoomLevel01.DefaultTextStyle = TextStyles.Capital3("​CITY_NAME"​);​
         capitalLabelLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;​         capitalLabelLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;​
Line 194: Line 200:
         mMapEngine.StaticLayers.Add(worldLayer);​         mMapEngine.StaticLayers.Add(worldLayer);​
         mMapEngine.StaticLayers.Add(capitalLayer);​         mMapEngine.StaticLayers.Add(capitalLayer);​
-        ​<​nowiki>​//</​nowiki> ​Add the label layer to MapEngine.+        // Add the label layer to MapEngine.
         mMapEngine.StaticLayers.Add(capitalLabelLayer);​         mMapEngine.StaticLayers.Add(capitalLabelLayer);​
         ​         ​
         mMapEngine.CurrentExtent = ExtentHelper.GetDrawingExtent(new RectangleShape(-11,​ 70, 34, 30), pictureBox1.Width,​ pictureBox1.Height);​         mMapEngine.CurrentExtent = ExtentHelper.GetDrawingExtent(new RectangleShape(-11,​ 70, 34, 30), pictureBox1.Width,​ pictureBox1.Height);​
-        ​<​nowiki>​//</​nowiki> ​Set the background brush to color the sea.+        // Set the background brush to color the sea.
         mMapEngine.BackgroundFillBrush = new GeoSolidBrush(GeoColor.GeographicColors.ShallowOcean);​         mMapEngine.BackgroundFillBrush = new GeoSolidBrush(GeoColor.GeographicColors.ShallowOcean);​
         ​         ​
-        ​<​nowiki>​//</​nowiki> ​Display the map.+        // Display the map.
         Bitmap bitmap = new Bitmap(pictureBox1.Width,​ pictureBox1.Height);​         Bitmap bitmap = new Bitmap(pictureBox1.Width,​ pictureBox1.Height);​
         mMapEngine.OpenAllLayers();​         mMapEngine.OpenAllLayers();​
Line 208: Line 214:
         pictureBox1.Image = bitmap;         pictureBox1.Image = bitmap;
     }     }
-</source>+</code>
  
 The result is as follows (Figure 5): The result is as follows (Figure 5):
  
-{{Figure|QSG_ServicesEdition2_Img08.jpg|Figure 5. Europe map with TextStyle.}}+{{servicesedition: ​QSG_ServicesEdition2_Img08.jpg}} 
 +\\ 
 +//Figure 5. Europe map with TextStyle.//
  
 Before we go to the next step, let's first add some navigation capabilities,​ such as zooming in and out, to our map. Before we go to the next step, let's first add some navigation capabilities,​ such as zooming in and out, to our map.
Line 221: Line 229:
 Now that we have our buttons, let's put the appropriate code in the Click events of each button. Below is the code for the Zoom In button. Double-click on the button to add the code. Now that we have our buttons, let's put the appropriate code in the Click events of each button. Below is the code for the Zoom In button. Double-click on the button to add the code.
  
-<source lang="csharp">+<code csharp>
     private void btnZoomIn_Click(object sender, EventArgs e)     private void btnZoomIn_Click(object sender, EventArgs e)
     {     {
-        ​<​nowiki>​//</​nowiki> ​Current Extent Zoom in 30%.+        // Current Extent Zoom in 30%.
         mMapEngine.CurrentExtent = ExtentHelper.ZoomIn(mMapEngine.CurrentExtent,​ 50);         mMapEngine.CurrentExtent = ExtentHelper.ZoomIn(mMapEngine.CurrentExtent,​ 50);
         Bitmap bitmap = new Bitmap(pictureBox1.Width,​ pictureBox1.Height);​         Bitmap bitmap = new Bitmap(pictureBox1.Width,​ pictureBox1.Height);​
         ​         ​
-        ​<​nowiki>​//</​nowiki> ​Draw the layer again with new current extent.+        // Draw the layer again with new current extent.
         mMapEngine.OpenAllLayers();​         mMapEngine.OpenAllLayers();​
         mMapEngine.DrawStaticLayers(bitmap,​ GeographyUnit.DecimalDegree);​         mMapEngine.DrawStaticLayers(bitmap,​ GeographyUnit.DecimalDegree);​
Line 235: Line 243:
         pictureBox1.Image = bitmap;         pictureBox1.Image = bitmap;
     }     }
-</source>+</code>
  
 The above code simply scales down the current extent and redraws the map. This has the effect of making the map seem like it is zooming in. Now add the code for the Zoom Out button: The above code simply scales down the current extent and redraws the map. This has the effect of making the map seem like it is zooming in. Now add the code for the Zoom Out button:
  
-<source lang="csharp">+<code csharp>
     private void btnZoomOut_Click(object sender, EventArgs e)     private void btnZoomOut_Click(object sender, EventArgs e)
     {     {
-        ​<​nowiki>​//</​nowiki> ​Current Extent Zoom out 30%.+        //<​Current Extent Zoom out 30%.
         mMapEngine.CurrentExtent = ExtentHelper.ZoomOut(mMapEngine.CurrentExtent,​ 50);         mMapEngine.CurrentExtent = ExtentHelper.ZoomOut(mMapEngine.CurrentExtent,​ 50);
         Bitmap bitmap = new Bitmap(pictureBox1.Width,​ pictureBox1.Height);​         Bitmap bitmap = new Bitmap(pictureBox1.Width,​ pictureBox1.Height);​
         ​         ​
-        ​<​nowiki>​//</​nowiki> ​Draw the layer again with new current extent.+        // Draw the layer again with new current extent.
         mMapEngine.OpenAllLayers();​         mMapEngine.OpenAllLayers();​
         mMapEngine.DrawStaticLayers(bitmap,​ GeographyUnit.DecimalDegree);​         mMapEngine.DrawStaticLayers(bitmap,​ GeographyUnit.DecimalDegree);​
Line 253: Line 261:
         pictureBox1.Image = bitmap;         pictureBox1.Image = bitmap;
     }     }
-</source>+</code>
  
 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.
  
-<source lang="csharp">+<code csharp>
     private void Form1_Load(object sender, EventArgs e)     private void Form1_Load(object sender, EventArgs e)
     {     {
Line 265: Line 273:
         ​         ​
         ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer(@"​../​../​AppData/​WorldCapitals.shp"​);​         ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer(@"​../​../​AppData/​WorldCapitals.shp"​);​
-        ​<​nowiki>​//</​nowiki> ​We can customize our own Style. Here we passed in a color and a size.+        // We can customize our own Style. Here we passed in a color and a size.
         capitalLayer.ZoomLevelSet.ZoomLevel01.DefaultPointStyle = PointStyles.CreateSimpleCircleStyle(GeoColor.StandardColors.White,​ 7, GeoColor.StandardColors.Brown);​         capitalLayer.ZoomLevelSet.ZoomLevel01.DefaultPointStyle = PointStyles.CreateSimpleCircleStyle(GeoColor.StandardColors.White,​ 7, GeoColor.StandardColors.Brown);​
-        ​<​nowiki>​//</​nowiki> ​The Style we set here is available from ZoomLevel01 to ZoomLevel05. That means if we zoom in a bit more, the appearance we set here will not be visible anymore.+        // The Style we set here is available from ZoomLevel01 to ZoomLevel05. That means if we zoom in a bit more, the appearance we set here will not be visible anymore.
         capitalLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level05;​         capitalLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level05;​
         ​         ​
         capitalLayer.ZoomLevelSet.ZoomLevel06.DefaultPointStyle = PointStyles.Capital3;​         capitalLayer.ZoomLevelSet.ZoomLevel06.DefaultPointStyle = PointStyles.Capital3;​
-        ​<​nowiki>​//</​nowiki> ​The Style we set here is available from ZoomLevel06 to ZoomLevel20. That means if we zoom out a bit more, the appearance we set here will not be visible any more.+        // The Style we set here is available from ZoomLevel06 to ZoomLevel20. That means if we zoom out a bit more, the appearance we set here will not be visible any more.
         capitalLayer.ZoomLevelSet.ZoomLevel06.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;​         capitalLayer.ZoomLevelSet.ZoomLevel06.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;​
         ​         ​
         ShapeFileFeatureLayer capitalLabelLayer = new ShapeFileFeatureLayer(@"​../​../​AppData/​WorldCapitals.shp"​);​         ShapeFileFeatureLayer capitalLabelLayer = new ShapeFileFeatureLayer(@"​../​../​AppData/​WorldCapitals.shp"​);​
-        ​<​nowiki>​//</​nowiki> ​We can customize our own TextStyle. Here we passed in the font, the size, the style and the color.+        // We can customize our own TextStyle. Here we passed in the font, the size, the style and the color.
         capitalLabelLayer.ZoomLevelSet.ZoomLevel01.DefaultTextStyle = TextStyles.CreateSimpleTextStyle("​CITY_NAME",​ "​Arial",​ 8, DrawingFontStyles.Italic,​ GeoColor.StandardColors.Black,​ 3, 3);         capitalLabelLayer.ZoomLevelSet.ZoomLevel01.DefaultTextStyle = TextStyles.CreateSimpleTextStyle("​CITY_NAME",​ "​Arial",​ 8, DrawingFontStyles.Italic,​ GeoColor.StandardColors.Black,​ 3, 3);
-        ​<​nowiki>​//</​nowiki> ​The TextStyle we set here is available from ZoomLevel01 to ZoomLevel05. ​+        // The TextStyle we set here is available from ZoomLevel01 to ZoomLevel05. ​
         capitalLabelLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level05;​         capitalLabelLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level05;​
         ​         ​
         capitalLabelLayer.ZoomLevelSet.ZoomLevel06.DefaultTextStyle = TextStyles.Capital3("​CITY_NAME"​);​         capitalLabelLayer.ZoomLevelSet.ZoomLevel06.DefaultTextStyle = TextStyles.Capital3("​CITY_NAME"​);​
-        ​<​nowiki>​//</​nowiki> ​The TextStyle we set here is available from ZoomLevel06 to ZoomLevel20. ​+        // The TextStyle we set here is available from ZoomLevel06 to ZoomLevel20. ​
         capitalLabelLayer.ZoomLevelSet.ZoomLevel06.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;​         capitalLabelLayer.ZoomLevelSet.ZoomLevel06.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;​
         ​         ​
Line 291: Line 299:
         mMapEngine.BackgroundFillBrush = new GeoSolidBrush(GeoColor.GeographicColors.ShallowOcean);​         mMapEngine.BackgroundFillBrush = new GeoSolidBrush(GeoColor.GeographicColors.ShallowOcean);​
         ​         ​
-        ​<​nowiki>​//</​nowiki> ​Display the map.+        // Display the map.
         Bitmap bitmap = new Bitmap(pictureBox1.Width,​ pictureBox1.Height);​         Bitmap bitmap = new Bitmap(pictureBox1.Width,​ pictureBox1.Height);​
         mMapEngine.OpenAllLayers();​         mMapEngine.OpenAllLayers();​
Line 298: Line 306:
         pictureBox1.Image = bitmap;         pictureBox1.Image = bitmap;
     }     }
-</source>+</code>
  
 Can you imagine what the map will look like now? Below is the result. At first it looks the same as it did in Figure 6. Now click the ZoomIn button, and watch the map change to resemble Figure 7 as you zoom in. Can you imagine what the map will look like now? Below is the result. At first it looks the same as it did in Figure 6. Now click the ZoomIn button, and watch the map change to resemble Figure 7 as you zoom in.
  
-{{Figure|QSG_ServicesEdition2_Img09.jpg|Figure 6. European cities with two ZoomLevels, before zooming in.}}+{{servicesedition: ​QSG_ServicesEdition2_Img09.jpg}} 
 +\\ 
 +//Figure 6. European cities with two ZoomLevels, before zooming in.//
  
-{{Figure|QSG_ServicesEdition2_Img10.jpg|Figure 7. European cities with two ZoomLevels, after zooming in.}}+{{servicesedition: ​QSG_ServicesEdition2_Img10.jpg}} 
 +\\ 
 +//Figure 7. European cities with two ZoomLevels, after zooming in.//
  
 =====Summary===== =====Summary=====
 You now know the basics of using Map Suite Services Edition and are able to start adding this functionality into your own applications. Let's recap what we have learned about the object relationships and how the pieces of Map Suite work together: You now know the basics of using Map Suite Services Edition and are able to start adding this functionality into your own applications. Let's recap what we have learned about the object relationships and how the pieces of Map Suite work together:
  
-#It is of the utmost importance that the units of measurement (feet, meters, decimal degrees, etc.) be set properly for the MapEngine, based on the requirements of your data. +  - It is of the utmost importance that the units of measurement (feet, meters, decimal degrees, etc.) be set properly for the MapEngine, based on the requirements of your data. 
-#Shapefiles (and other data sources like Oracle, Postgre, SQL 2008, etc.) provide the data used by Map Suite to render a map. +  ​- ​Shapefiles (and other data sources like Oracle, Postgre, SQL 2008, etc.) provide the data used by Map Suite to render a map. 
-#A MapEngine is the basic class that contains all of the other objects that are used to define how the map will be rendered. +  ​- ​A MapEngine is the basic class that contains all of the other objects that are used to define how the map will be rendered. 
-#A MapEngine has one-to-many Layers. A Layer contains the data (from shapefile or other data sources) for drawing. +  ​- ​A MapEngine has one-to-many Layers. A Layer contains the data (from shapefile or other data sources) for drawing. 
-#A layer can have one-to-many ZoomLevels. ZoomLevels help to define ranges of when a layer should be shown or hidden.+  ​- ​A layer can have one-to-many ZoomLevels. ZoomLevels help to define ranges of when a layer should be shown or hidden.
  
-<br> 
-{{Filelink}}[[:​File:​HelloWorld Services.zip|Download Sample Code From This Exercise]] //(1.5 MB)// 
- 
-[[Category:​Map Suite Services Edition]] [[Category:​Web GIS]] [[Category:​Desktop GIS]] [[Category:​GIS]] [[Category:​.NET]] 
  
 +<faicon fa fa-download ​ fa-lg> ​ {{filehistory:​HelloWorld Services.zip|Download Sample Code From This Exercise}} //(1.5 MB)//
map_suite_services_edition_quick_start_guide.1440040123.txt.gz · Last modified: 2015/09/16 06:54 (external edit)