User Tools

Site Tools


map_suite_web_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_web_edition_quick_start_guide [2015/08/20 03:08]
127.0.0.1 external edit
map_suite_web_edition_quick_start_guide [2017/03/17 05:05] (current)
tgwikiupdate
Line 1: Line 1:
-====== ​Map_Suite_Web_Edition_Quick_Start_Guide ​======+====== ​Map Suite Web Edition Quick Start Guide ======
  
-{{article rating}}+{{section>​upgrade_map_suite_to_10.0}}
  
-{{MsgBox|The Map Suite Web 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 Web Edition 9.0.0.0 and higher.}}+<div msgbox>The Map Suite Web 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 Web Edition 9.0.0.0 and higher.</​div>​
  
 Welcome to Map Suite™ Web Edition 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™ Web Edition 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 Web Edition. ​ By default, this will install the Map Suite Web Edition 9.0 assemblies to <kbd>C:\Program Files (x86)\ThinkGeo\Map Suite 9.0\Map Suite Web</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 Web Edition. ​ By default, this will install the Map Suite Web Edition 9.0 assemblies to //C:\Program Files (x86)\ThinkGeo\Map Suite 9.0\Map Suite Web//
  
 ===== Download the Sample ===== ===== Download the Sample =====
-{{Filelink}}[[:​File:HelloWorld Web.zip|Download Sample Code From This Exercise]] //(1.62 MB)//+<faicon fa fa-download ​ fa-lg>  ​{{filehistory:HelloWorld Web.zip|Download Sample Code From This Exercise}} //(1.62 MB)//
  
 ===== Setting up the Environment ===== ===== Setting up the Environment =====
 Let's start with a new ASP.NET Web Site in Microsoft Visual Studio (2010 or newer) and call it "​HelloWorld"​ (see Figure 1). Set the Templates to ".NET Framework 4.0" for the project. Let's start with a new ASP.NET Web Site in Microsoft Visual Studio (2010 or newer) and call it "​HelloWorld"​ (see Figure 1). Set the Templates to ".NET Framework 4.0" for the project.
  
-{{Figure|QSG_WebEdition2_Img01.jpg}}+{{webedition:QSG_WebEdition2_Img01.jpg}}
  
-{{Figure|QSG_WebEdition2_Img002.jpg|Figure 1. Creating a new project in Visual Studio.}}+{{webedition:QSG_WebEdition2_Img002.jpg}} 
 +\\ 
 +//Figure 1. Creating a new project in Visual Studio.//
  
 The website is created in a new solution called "​HelloWorld"​. The wizard creates several files including a Web form called "​Default.aspx"​. The website is created in a new solution called "​HelloWorld"​. The wizard creates several files including a Web form called "​Default.aspx"​.
Line 30: Line 32:
 Hover over the Toolbox and right click anywhere on the list of controls. You will get a pop-up menu. Select "​Choose Items..."​ Hover over the Toolbox and right click anywhere on the list of controls. You will get a pop-up menu. Select "​Choose Items..."​
  
-{{Figure|QSG_WebEdition2_Img03.jpg}}+{{webedition:QSG_WebEdition2_Img03.jpg}}
  
-**2.** The Choose Toolbox Items dialogue will appear. You will need to select the ".NET Framework Components"​ tab and then click the "​Browse..."​ button. Finally, navigate to the <kbd>C:\Program Files (x86)\ThinkGeo\Map Suite 9.0\Map Suite Web\Current Version\Managed Assemblies</kbd> ​folder and select the "​WebEdition.dll"​ file. +**2.** The Choose Toolbox Items dialogue will appear. You will need to select the ".NET Framework Components"​ tab and then click the "​Browse..."​ button. Finally, navigate to the //C:\Program Files (x86)\ThinkGeo\Map Suite 9.0\Map Suite Web\Current Version\Managed Assemblies/folder and select the "​WebEdition.dll"​ file. 
  
-{{Figure|QSG_WebEdition2_Img04b.jpg}}+{{webedition:QSG_WebEdition2_Img04b.jpg}}
  
 **3.** You should now have the Map Control available in your Toolbox as shown in Figure 2 below. **3.** You should now have the Map Control available in your Toolbox as shown in Figure 2 below.
  
-{{Figure|QSG_WebEdition2_Img05.jpg|Figure 2. The Map Control in the Toolbox window.}}+{{webedition:QSG_WebEdition2_Img05.jpg}} 
 +\\ 
 +//Figure 2. The Map Control in the Toolbox window.//
  
 ===== Adding the Map Control to your Web Form ===== ===== Adding the Map Control to your Web Form =====
-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 Web\Current Version\Managed Assemblies</kbd> ​folder and select "​MapSuiteCore.dll"​.+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 Web\Current Version\Managed Assemblies/folder and select "​MapSuiteCore.dll"​.
  
 **Note: Although it is not a ThinkGeo assembly, 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: Although it is not a ThinkGeo assembly, 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_WebEdition2_Img06.jpg}}+{{webedition:QSG_WebEdition2_Img06.jpg}}
  
 Draw the Map control on the web form by clicking on the Map Control object in the Toolbox and then dragging and dropping (using the left mouse button) to the size you desire. You can leave the name of the Map control set to "​Map1"​. This is the control in which our map will display. Draw the Map control on the web form by clicking on the Map Control object in the Toolbox and then dragging and dropping (using the left mouse button) to the size you desire. You can leave the name of the Map control set to "​Map1"​. This is the control in which our map will display.
  
-{{Figure|QSG_WebEdition2_Img07b.jpg}}+{{webedition:QSG_WebEdition2_Img07b.jpg}}
  
 Now that we have "​MapSuiteCore.dll"​ referenced and a Map Control added. We are ready for adding the code. Now that we have "​MapSuiteCore.dll"​ referenced and a Map Control added. We are ready for adding the code.
Line 86: Line 90:
 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 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 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 Web "Hello World" ==== ==== Map Suite Web "Hello World" ====
 In creating our "Hello World" sample application,​ our first step is to set a reference to the Map Suite Core workspace at the very top of our code, as we will use many classes within that. 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 Core workspace at the very top of our code, as we will use many classes within that. 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 ("​cntry02.shp"​)+  ​*The borders of every country in the world ("​cntry02.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)
Line 108: Line 112:
 Our next step is to define and add our layers. All of our sample code is placed in the Page_Load event of the web form. We also will want to put in a check for whether the page is posting back. This is so our Map control can load and render the data only once, during initial load, instead of repeatedly every time a post back to the web server is made. For the sample application we are making here, this check is not actually needed, as there will not be any PostBack in this application. Still, this is a good coding habit for a Web project, so let's put in the code to check for post backs in first. Then, we'll put our other code inside that structure. Our next step is to define and add our layers. All of our sample code is placed in the Page_Load event of the web form. We also will want to put in a check for whether the page is posting back. This is so our Map control can load and render the data only once, during initial load, instead of repeatedly every time a post back to the web server is made. For the sample application we are making here, this check is not actually needed, as there will not be any PostBack in this application. Still, this is a good coding habit for a Web project, so let's put in the code to check for post backs in first. Then, we'll put our other code inside that structure.
  
-<source lang="csharp">+<code csharp>
 protected void Page_Load(object sender, EventArgs e) protected void Page_Load(object sender, EventArgs e)
     {     {
         if (!IsPostBack)         if (!IsPostBack)
         {         {
-            ​<​nowiki>​//</​nowiki> ​Set the Map Unit. The reason for setting it to DecimalDegrees is that is what the shapefile'​s unit of measure is inherently in.+            // 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;​             Map1.MapUnit = GeographyUnit.DecimalDegree;​
  
-            ​<​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(MapPath("​~/​App_Data/​Countries02.shp"​));​             ShapeFileFeatureLayer worldLayer = new ShapeFileFeatureLayer(MapPath("​~/​App_Data/​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 map's Static Overlay.+            // We need to add the world layer to map's Static Overlay.
             Map1.StaticOverlay.Layers.Add(worldLayer);​             Map1.StaticOverlay.Layers.Add(worldLayer);​
             ​             ​
-            ​<​nowiki>​//</​nowiki> ​Set a proper extent for the map, that's the place you want it to display.+            // Set a proper extent for the map, that's the place you want it to display.
             Map1.CurrentExtent = new RectangleShape(5,​ 78, 30, 26);             Map1.CurrentExtent = new RectangleShape(5,​ 78, 30, 26);
         }         }
     }     }
-</source>+</code>
  
 If you compile and run what you have now, your map should look like the one below. (See Figure 4). If you compile and run what you have now, your map should look like the one below. (See Figure 4).
  
-{{Figure|QSG_WebEdition2_Img09.jpg|Figure 4. A simple map of Europe.}}+{{webedition:QSG_WebEdition2_Img09.jpg}} 
 +\\ 
 +//Figure 4. A simple map of Europe.//
  
 So what has occurred here? We have created a layer and added it to the Map, and the Map 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 Map, and the Map has rendered it according to its default style parameters. Also, we have used ZoomLevel to display the map the way we want.
  
-**NOTE:** It is important that the <​code>​MapUnit</​code> ​property of a Map object be set using the <​code>​GeographyUnit</​code> ​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.+**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.
  
 ==== Navigate the Map ==== ==== Navigate the Map ====
Line 147: Line 153:
 That was an easy start! Now, let's add another Shapefile to the sample so that we will have a total of two layers: That was an easy start! Now, 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 ("​cntry02.shp"​) +  - The borders of every country in the world ("​cntry02.shp"​) 
-#The capitals of the world countries ("​capital.shp"​)+  ​- ​The capitals of the world countries ("​capital.shp"​)
  
-<source lang="csharp">+<code csharp>
 protected void Page_Load(object sender, EventArgs e) protected void Page_Load(object sender, EventArgs e)
     {     {
Line 162: Line 168:
             ​             ​
              ​ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer(MapPath("​~/​App_Data/​WorldCapitals.shp"​));​              ​ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer(MapPath("​~/​App_Data/​WorldCapitals.shp"​));​
-             <​nowiki>​//</​nowiki> ​Similarly, we use the presetPointStyle for cities.+             // Similarly, we use the presetPointStyle for cities.
              ​capitalLayer.ZoomLevelSet.ZoomLevel01.DefaultPointStyle = PointStyles.Capital3;​              ​capitalLayer.ZoomLevelSet.ZoomLevel01.DefaultPointStyle = PointStyles.Capital3;​
-             <​nowiki>​//</​nowiki> ​These settings will apply from ZoonLevel01 to ZoomLevel20,​ that means we can see city symbols the same style with ZoomLevel01 all the time no matter how far we zoom out/in.+             // These settings will apply from ZoonLevel01 to ZoomLevel20,​ that means we can see city symbols the same style with ZoomLevel01 all the time no matter how far we zoom out/in.
              ​capitalLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;​              ​capitalLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;​
             ​             ​
-             <​nowiki>​//</​nowiki> ​We need to add both of the new layers to the Map's Static Overlay.+             // We need to add both of the new layers to the Map's Static Overlay.
              ​Map1.StaticOverlay.Layers.Add(worldLayer);​              ​Map1.StaticOverlay.Layers.Add(worldLayer);​
              ​Map1.StaticOverlay.Layers.Add(capitalLayer);​              ​Map1.StaticOverlay.Layers.Add(capitalLayer);​
Line 174: Line 180:
         }         }
     }     }
-</source>+</code>
  
 The result is as follows(Figure 5): The result is as follows(Figure 5):
  
-{{Figure|QSG_WebEdition2_Img10.jpg|Figure 5. Europe map with 2 layers.}}+{{webedition:QSG_WebEdition2_Img10.jpg}} 
 +\\ 
 +//Figure 5. Europe map with 2 layers.//
  
 ===== How to Use the TextStyle ===== ===== How to Use the TextStyle =====
Line 184: Line 192:
 The TextStyle is used to label items on map. As every Shapefile has a related .dbf file, which includes descriptions for every record, the most common way to use the TextStyle is for labeling. For example, the Shapefile containing capitals of the world has a corresponding .dbf file that contains the field "​CITY_NAME"​. We can use this field to label the cities on our map. The TextStyle is used to label items on map. As every Shapefile has a related .dbf file, which includes descriptions for every record, the most common way to use the TextStyle is for labeling. For example, the Shapefile containing capitals of the world has a corresponding .dbf file that contains the field "​CITY_NAME"​. We can use this field to label the cities on our map.
  
-{{Figure|QSG_WebEdition2_Img11.jpg}}+{{webedition:QSG_WebEdition2_Img11.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>
 protected void Page_Load(object sender, EventArgs e) protected void Page_Load(object sender, EventArgs e)
     {     {
Line 203: Line 211:
             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(MapPath("​~/​App_Data/​WorldCapitals.shp"​));​             ShapeFileFeatureLayer capitalLabelLayer = new ShapeFileFeatureLayer(MapPath("​~/​App_Data/​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;​
-            ​<​nowiki>​//</​nowiki> ​As the map is drawn by tiles, it needs to draw on the margin to make sure the text is complete after we joining the tiles together. +            // As the map is drawn by tiles, it needs to draw on the margin to make sure the text is complete after we joining the tiles together. 
-            ​<​nowiki>/​/</nowiki> ​Change the number to another one (for example 0) and you can see the difference.+            // Change the number to another one (for example 0) and you can see the difference.
             capitalLabelLayer.DrawingMarginPercentage = 50;             capitalLabelLayer.DrawingMarginPercentage = 50;
             ​             ​
             Map1.StaticOverlay.Layers.Add(worldLayer);​             Map1.StaticOverlay.Layers.Add(worldLayer);​
             Map1.StaticOverlay.Layers.Add(capitalLayer);​             Map1.StaticOverlay.Layers.Add(capitalLayer);​
-            ​<​nowiki>​//</​nowiki> ​Add the label layer to Map.+            // Add the label layer to Map.
             Map1.StaticOverlay.Layers.Add(capitalLabelLayer);​             Map1.StaticOverlay.Layers.Add(capitalLabelLayer);​
             ​             ​
             Map1.CurrentExtent = new RectangleShape(5,​ 78, 30, 26);             Map1.CurrentExtent = new RectangleShape(5,​ 78, 30, 26);
             ​             ​
-            ​<​nowiki>​//</​nowiki> ​Set the background color to make the map beautiful.+            // Set the background color to make the map beautiful.
             Map1.MapBackground.BackgroundBrush = new GeoSolidBrush(GeoColor.GeographicColors.ShallowOcean);​             Map1.MapBackground.BackgroundBrush = new GeoSolidBrush(GeoColor.GeographicColors.ShallowOcean);​
         }         }
     }     }
-</source>+</code>
  
 The result is as follows (Figure 6): The result is as follows (Figure 6):
  
-{{Figure|QSG_WebEdition2_Img12.jpg|Figure 6. Europe map with TextStyle.}}+{{webedition:QSG_WebEdition2_Img12.jpg}} 
 +\\ 
 +//Figure 6. Europe map with 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.
  
-<source lang="csharp">+<code csharp>
 protected void Page_Load(object sender, EventArgs e) protected void Page_Load(object sender, EventArgs e)
     {     {
Line 243: Line 253:
             ​             ​
             ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer(MapPath("​~/​App_Data/​WorldCapitals.shp"​));​             ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer(MapPath("​~/​App_Data/​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(MapPath("​~/​App_Data/​WorldCapitals.shp"​));​             ShapeFileFeatureLayer capitalLabelLayer = new ShapeFileFeatureLayer(MapPath("​~/​App_Data/​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 270: Line 280:
             Map1.CurrentExtent = new RectangleShape(5,​ 78, 30, 26);             Map1.CurrentExtent = new RectangleShape(5,​ 78, 30, 26);
             ​             ​
-            ​<​nowiki>​//</​nowiki> ​Set the background color to make the map beautiful.+            // Set the background color to make the map beautiful.
             Map1.MapBackground.BackgroundBrush = new GeoSolidBrush(GeoColor.GeographicColors.ShallowOcean);​             Map1.MapBackground.BackgroundBrush = new GeoSolidBrush(GeoColor.GeographicColors.ShallowOcean);​
         }         }
     }     }
-</source>+</code>
  
 Can you imagine what the map will look like now? Figure 7 below is the result. At first it looks the same as it did in Figure 6. Now zoom in, and watch the map change to resemble Figure 8 as you do. Can you imagine what the map will look like now? Figure 7 below is the result. At first it looks the same as it did in Figure 6. Now zoom in, and watch the map change to resemble Figure 8 as you do.
  
-{{Figure|QSG_WebEdition2_Img13.jpg|Figure 7. European cities with two ZoomLevels, before zooming in.}}+{{webedition:QSG_WebEdition2_Img13.jpg}} 
 +\\ 
 +//Figure 7. European cities with two ZoomLevels, before zooming in.//
  
-{{Figure|QSG_WebEdition2_Img14.jpg|Figure 8. European cities with two ZoomLevels, after zooming in.}}+{{webedition:QSG_WebEdition2_Img14.jpg}} 
 +\\ 
 +//Figure 8. European cities with two ZoomLevels, after zooming in.//
  
 ==== Using the Map in an Update Panel ==== ==== Using the Map in an Update Panel ====
 If you put the map within an update panel, you can take advantage of AJAX. To make this clearer, we will walk you through a sample. If you put the map within an update panel, you can take advantage of AJAX. To make this clearer, we will walk you through a sample.
  
-First, let's add a marker on the map. Our first step is to add a reference to the <​code>​MapSuite.WebEdition</​code> ​namespace at the very top of our code:+First, let's add a marker on the map. Our first step is to add a reference to the ''​MapSuite.WebEdition'' ​namespace at the very top of our code:
  
-<source lang="csharp">+<code csharp>
 using ThinkGeo.MapSuite.WebEdition;​ using ThinkGeo.MapSuite.WebEdition;​
-</source>+</code>
  
-Next, drag a button to the page and leave the name set to the default "​Button1"​. Double-click that button and write the following code in the <​code>​Button1_Click</​code> ​method:+Next, drag a button to the page and leave the name set to the default "​Button1"​. Double-click that button and write the following code in the ''​Button1_Click'' ​method:
  
-<source lang="csharp">+<code csharp>
 protected void Button1_Click(object sender, EventArgs e) protected void Button1_Click(object sender, EventArgs e)
 { {
     if (!Map1.MarkerOverlay.FeatureSource.InternalFeatures.Contains("​Marker"​))     if (!Map1.MarkerOverlay.FeatureSource.InternalFeatures.Contains("​Marker"​))
     {     {
-        ​<​nowiki>​//</​nowiki> ​Add a new feature as a marker+        // Add a new feature as a marker
         Map1.MarkerOverlay.FeatureSource.InternalFeatures.Add("​Marker",​ new Feature(0, 52));         Map1.MarkerOverlay.FeatureSource.InternalFeatures.Add("​Marker",​ new Feature(0, 52));
  
-        ​<​nowiki>​//</​nowiki> ​Set the marker style, and make it available all over the zoomlevels.+        // Set the marker style, and make it available all over the zoomlevels.
         Map1.MarkerOverlay.ZoomLevelSet.ZoomLevel01.DefaultMarkerStyle.WebImage = new WebImage("​../​../​theme/​default/​img/​marker_blue.gif",​ 21, 25);         Map1.MarkerOverlay.ZoomLevelSet.ZoomLevel01.DefaultMarkerStyle.WebImage = new WebImage("​../​../​theme/​default/​img/​marker_blue.gif",​ 21, 25);
         Map1.MarkerOverlay.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;​         Map1.MarkerOverlay.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;​
     }     }
 } }
-</source>+</code>
  
 Let's run the application and click the button. You will see a marker appear near London. (Figure 9) Let's run the application and click the button. You will see a marker appear near London. (Figure 9)
  
-{{Figure|QSG_WebEdition2_Img15.jpg|Figure 9. Add a marker to the map.}}+{{webedition:QSG_WebEdition2_Img15.jpg}} 
 +\\ 
 +//Figure 9. Add a marker to the map.//
  
 We have now added a marker to the map; however, you will find that the map flickers every time you click the button. We have now added a marker to the map; however, you will find that the map flickers every time you click the button.
Line 318: Line 334:
 **Aspx code 1: Put both the map control and button into the update panel.** **Aspx code 1: Put both the map control and button into the update panel.**
  
-<source lang="​html4strict"​>+<code asp.net>
 <​body>​ <​body>​
     <form id="​form1"​ runat="​server">​     <form id="​form1"​ runat="​server">​
Line 332: Line 348:
     </​form>​     </​form>​
 </​body>​ </​body>​
-</source>+</code>
  
  
 **Aspx code 2: Put only map in an update panel.** **Aspx code 2: Put only map in an update panel.**
  
-<source lang="​html4strict"​>+<code asp.net>
 <​body>​ <​body>​
     <form id="​form1"​ runat="​server">​     <form id="​form1"​ runat="​server">​
Line 354: Line 370:
     </​form>​     </​form>​
 </​body>​ </​body>​
-</source>+</code>
  
 ===== Summary ===== ===== Summary =====
 You now know the basics of using Map Suite Web 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 Web 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 map, 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 map, 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 Map is the basic class that contains all of the other objects that are used to define how the map will be rendered. +  ​- ​A Map is the basic class that contains all of the other objects that are used to define how the map will be rendered. 
-#A Map has one-to-many Layers. A Layer contains the data (from shapefile or other data sources) for drawing. +  ​- ​A Map 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 Web.zip|Download Sample Code From This Exercise]] //(1.62 MB)// 
  
-[[Category:Map Suite Web Edition]] [[Category:​Web GIS]] [[Category:​ASP.NET]] [[Category:​GIS]] [[Category:.NET]]+<faicon fa fa-download ​ fa-lg> ​ {{filehistory:HelloWorld ​Web.zip|Download Sample Code From This Exercise}} //(1.62 MB)// 
  
map_suite_web_edition_quick_start_guide.1440040124.txt.gz · Last modified: 2015/09/09 01:48 (external edit)