Differences

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

--- map_suite_webapi_edition_quick_start_guide [2015/09/09 10:12]
admin [Map_Suite_WebAPI_Edition_Quick_Start_Guide]
+++ map_suite_webapi_edition_quick_start_guide [2017/03/17 04:59] (current)
tgwikiupdate
@@ Line 1: / Line 1: @@
-====== Map_Suite_WebAPI_Edition_Quick_Start_Guide ======
+====== Map Suite WebAPI Edition Quick Start Guide ======
+{{section>upgrade_map_suite_to_10.0}}
+<div msgbox>The Map Suite WebAPI 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 Map Suite WebAPI Edition 9.0.0.0 and higher, and will show you how to create a ASP.NET WebAPI application using this product.
-{{MsgBox|The Map Suite WebAPI 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 Map Suite WebAPI Edition 9.0.0.0 and higher, and will show you how to create a ASP.NET WebAPI application using this product.<br/><br/>If you want to build a Web Forms application using the standard Map Suite Web Edition product, please see the [[Map Suite Web Edition Quick Start Guide|Web Edition QuickStart Guide]] instead.}}
+If you want to build a Web Forms application using the standard Map Suite Web Edition product, please see the [[Map Suite Web Edition Quick Start Guide|Web Edition QuickStart Guide]] instead.</div>
 Welcome to Map Suite™ WebAPI 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 create fully functional maps in minutes.
@@ Line 11: / Line 14: @@
 How do we begin taking advantage of the power of Map Suite? The best way to learn is to make a sample application with it.
-Before we get started, make sure you've installed the [[ThinkGeo Product Center]] and that you've either started an evaluation or activated a full license of Map Suite WebAPI Edition.  By default, this will install the Map Suite WebAPI Edition 9.0 assemblies to <kbd>C:\Program Files (x86)\ThinkGeo\Map Suite 9.0\Map Suite WebAPI</kbd>.
+Before we get started, make sure you've installed the [[ThinkGeo Product Center]] and that you've either started an evaluation or activated a full license of Map Suite WebAPI Edition.  By default, this will install the Map Suite WebAPI Edition 9.0 assemblies to //C:\Program Files (x86)\ThinkGeo\Map Suite 9.0\Map Suite WebAPI//.
 ===== Download the Sample =====
-{{Filelink}}[[:File:HelloWorld_WebAPI.zip|Download Sample Code From This Exercise]] //(12.5 MB)//
+<faicon fa fa-download> {{filehistory:HelloWorld_WebAPI.zip|Download Sample Code From This Exercise}} //(12.5 MB)//
 ===== Setting up the Environment =====
@@ Line 23: / Line 26: @@
 This Quick Start Guide uses a WebAPI application as an example, so you will need to have the ASP.NET MVC framework installed in order to follow along.  The MVC 4 framework can be downloaded from [[http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=1491|ASP.NET MVC 4 Tools Update]].
-{{Figure|QSG_WebAPIEdition_Img1.png}}
+{{webapiedition:QSG_WebAPIEdition_Img1.png}}
-{{Figure|QSG_WebAPIEdition_Img2.png}}
+{{webapiedition:QSG_WebAPIEdition_Img2.png}}
-{{Figure|QSG_WebAPIEdition_Img22.png|Figure 1. Creating a new project in Visual Studio.NET 2012 IDE.}}
+{{webapiedition:QSG_WebAPIEdition_Img22.png}}
+\\
+//Figure 1. Creating a new project in Visual Studio.NET 2012 IDE.//
 To take advantage of the Asp.NET WebAPI, please go to "Tools" > "Library Package Manager" > "Package Manager Console", then input "Install-Package Microsoft.AspNet.WebApi -Pre" and press Enter to install the lasted assemblies.
-{{Figure|QSG_WebAPIEdition_Img6.png}}
+{{webapiedition:QSG_WebAPIEdition_Img6.png}}
-{{Figure|QSG_WebAPIEdition_Img7.png|Figure 2. Installing the WebAPI DLLs.}}
+{{webapiedition:QSG_WebAPIEdition_Img7.png}}
+\\
+//Figure 2. Installing the WebAPI DLLs.//
 ===== Map Suite WebAPI "Hello World" Sample =====
@@ Line 43: / Line 50: @@
 The first step in creating our "Hello World" sample application is to add a html file named Default.htm and include code that similar to the example below.
-{{Figure|QSG_WebAPIEdition_Img8.png|Figure 3. Adding Default.htm.}}
+{{webapiedition:QSG_WebAPIEdition_Img8.png}}
+\\
+//Figure 3. Adding Default.htm.//
-<source lang="asp">
+<code asp>
 <!DOCTYPE html>
 <html>
@@ Line 70: / Line 79: @@
 </script>
 </html>
-</source>
+</code>
 Now press F5 to build and run your application. It should look like this:
-{{Figure|QSG_WebAPIEdition_Img9.png|Figure 4. The basic map display.}}
+{{webapiedition:QSG_WebAPIEdition_Img9.png}}
+\\
+//Figure 4. The basic map display.//
 ==== Shapefiles ====
@@ Line 106: / Line 117: @@
 Map Suite offers the 20 most common scales, from ZoomLevel01 to ZoomLevel20, at which you may want to change your display. What is scale? Scale is a ratio between the distance represented on the map and the corresponding distance on the ground, when measured in the same units. 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. In this situation a map with a scale of 1:1000 will match ZoomLevel03 - the ZoomLevel with the closest scale.
-PresetZoomLevels has a very useful property called <code>ZoomLevel.ApplyUntilZoomLevel</code>, which you can 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, simply code as follows:
+PresetZoomLevels has a very useful property called ''ZoomLevel.ApplyUntilZoomLevel'', which you can 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, simply code as follows:
-<source lang="csharp">
+<code csharp>
 worldLayer.ZoomLevelSet.ZoomLevel03.DefaultAreaStyle = AreaStyles.Country1;
 worldLayer.ZoomLevelSet.ZoomLevel03.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level10;
-</source>
+</code>
 ==== Map Suite WebAPI "Hello World" ====
@@ Line 118: / Line 129: @@
 We need to add two Map Suite files, "WebApiEdition.dll" and "MapSuiteCore.dll", to the reference. Right-click on "References" in Solution Explorer and select "Add Reference...", navigate to the C:\Program Files (x86)\ThinkGeo\Map Suite 9.0\Map Suite WebAPI\Current Version\Managed Assemblies folder, and select both "WebApiEdition.dll" and "MapSuiteCore.dll".
-{{Figure|QSG_WebAPIEdition_Img12.png|Figure 5. Adding the references.}}
+{{webapiedition:QSG_WebAPIEdition_Img12.png}}
+\\
+//Figure 5. Adding the references.//
 Our next step is to add our Shapefile layers to the map. For this example, we'll use a Shapefile containing worldwide country borders.  We have one such Shapefile available to us:
-*Worldwide country borders (cntry02.shp)
+  * Worldwide country borders (cntry02.shp)
 (**NOTE:** The data used in this sample can be found in the attached sample above in the "\AppData" folder.)
@@ Line 128: / Line 141: @@
 Let's add a controller named "HelloWorldController", like this:
-{{Figure|QSG_WebAPIEdition_Img10.png}}
+{{webapiedition:QSG_WebAPIEdition_Img10.png}}
-{{Figure|QSG_WebAPIEdition_Img11.png|Figure 6. Adding the "HelloWorldController".}}
+{{webapiedition:QSG_WebAPIEdition_Img11.png|Figure 6. Adding the "HelloWorldController".}}
 Then add the following code to HelloWorldController:
-<source lang="csharp">
+<code csharp>
 using System.Drawing;
 using System.Drawing.Imaging;
@@ Line 149: / Line 162: @@
 namespace HelloWorld.Controllers
 {
-    [[RoutePrefix("HelloWorld")]]
+    [RoutePrefix("HelloWorld")]
     public class HelloWorldController : ApiController
     {
-        [[Route("tile/{z}/{x}/{y}")]]
+        [Route("tile/{z}/{x}/{y}")]
-        [[HttpGet]]
+        [HttpGet]
         public HttpResponseMessage GetTile(int z, int x, int y)
         {
@@ Line 165: / Line 178: @@
             worldLayer.FeatureSource.Projection = proj4;
-            <nowiki>//</nowiki> Set the worldLayer to use a preset Style. Since AreaStyles.Country1 has a YellowGreen background and Black border, our worldLayer will have the same render style.
+            // Set the worldLayer to use a preset Style. Since AreaStyles.Country1 has a YellowGreen background and Black border, our worldLayer will have the same render style.
             worldLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = AreaStyles.Country1;
-            <nowiki>//</nowiki> This setting will apply from ZoomLevel01 to ZoomLevel20, which means the map will be rendered in the same style, no matter how far we zoom in or out.
+            // This setting will apply from ZoomLevel01 to ZoomLevel20, which means the map will be rendered in the same style, no matter how far we zoom in or out.
             worldLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
@@ Line 196: / Line 209: @@
 }
-</source>
+</code>
 So what has occurred here? We've created a layer and added it to the map, and the map has rendered it according to its default style parameters. We've also used ZoomLevel to display the map the way we want.
-**NOTE:** It is important that the MapUnit property of a Map object be set using the <code>GeographyUnit</code> Enumeration. This is because the coordinates stored in a Shapefile can be in decimal degrees (a format of latitude and longitude), feet, meters, or another unit system, and our map has no way to know what the Shapefile's unit of measurement is until we tell it. This information is normally found somewhere in the Shapefile's documentation (also referred to as its metadata), or within its supplemental data file, as discussed in the section on Shapefiles. It may also come as a separate .txt, .xml, or .html file that begins with the same file name as the main Shapefile.
+**NOTE:** It is important that the MapUnit property of a Map object be set using the ''GeographyUnit'' Enumeration. This is because the coordinates stored in a Shapefile can be in decimal degrees (a format of latitude and longitude), feet, meters, or another unit system, and our map has no way to know what the Shapefile's unit of measurement is until we tell it. This information is normally found somewhere in the Shapefile's documentation (also referred to as its metadata), or within its supplemental data file, as discussed in the section on Shapefiles. It may also come as a separate .txt, .xml, or .html file that begins with the same file name as the main Shapefile.
-The attributes [[RoutePrefix("HelloWorld")]] and [[Route("tile/{z}/{x}/{y}")]] are for custom route, we can easily access it by '/HelloWorld/tile/{z}/{x}/{y}'. To make it work, we need to modify the WebApiConfig.cs, like this:
+The attributes [RoutePrefix("HelloWorld")] and [Route("tile/{z}/{x}/{y}")] are for custom route, we can easily access it by '/HelloWorld/tile/{z}/{x}/{y}'. To make it work, we need to modify the WebApiConfig.cs, like this:
-<source lang="csharp">
+<code csharp>
 public static void Register(HttpConfiguration config)
 {
-     <nowiki>//</nowiki> Web API routes
+     // Web API routes
      config.MapHttpAttributeRoutes();
@@ Line 218: / Line 231: @@
      config.EnsureInitialized();
 }
-</source>
+</code>
 Now that the server side is ready, let's support it adding the following code to the client side:
-<source lang="csharp">
+<code csharp>
 L.tileLayer('/HelloWorld/Tile/{z}/{x}/{y}').addTo(map);
 </source>
@@ Line 228: / Line 241: @@
 After adding, it will look like as following:
-<source lang="csharp">
+<code javascript>
 <script>
     var map = L.map('map', { zoomAnimation: false }).setView([[39.6948,|-96.8150]], 4);
-    <nowiki>//</nowiki> add thinkgeo map
+    // add thinkgeo map
     L.tileLayer.wms('http://{s}.thinkgeo.com/CachedWMSServer/WmsServer.axd', {
         subdomains: [['worldmapkit1',|'worldmapkit2', 'worldmapkit3', 'worldmapkit4', 'worldmapkit5', 'worldmapkit6']],
@@ Line 244: / Line 257: @@
     L.tileLayer('/HelloWorld/Tile/{z}/{x}/{y}').addTo(map);
 </script>
-</source>
+</code>
 If you compile and run what you have now, your map should look like the screenshot below. (See Figure 7).
-{{Figure|QSG_WebAPIEdition_Img13.png|Figure 7. A simple map of the world.}}
+{{webapiedition:QSG_WebAPIEdition_Img13.png}}
+\\
+//Figure 7. A simple map of the world.//
 ==== Navigate the Map ====
@@ Line 255: / Line 270: @@
 That was an easy start! Now let's add a second Shapefile to the sample, so we'll have a total of two layers:
-#World country borders ("cntry02.shp")
+  - World country borders ("cntry02.shp")
-#World capitals ("capital.shp")
+  - World capitals ("capital.shp")
 Change the code in server side to correspond with the following example. You don't need to make any changes to client side.
-<source lang="csharp">
+<code csharp>
-[[Route("tile/{z}/{x}/{y}")]]
+[Route("tile/{z}/{x}/{y}")]
 [HttpGet]
 public HttpResponseMessage GetTile(int z, int x, int y)
 {
-    <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(HttpContext.Current.Server.MapPath(@"~/App_Data/cntry02.shp"));
     ManagedProj4Projection proj4 = new ManagedProj4Projection();
@@ Line 273: / Line 288: @@
     worldLayer.FeatureSource.Projection = proj4;
-    <nowiki>//</nowiki> Set the worldLayer to use a preset style. Since AreaStyles.Country1 has a YellowGreen background and Black border, our worldLayer will have the   <nowiki>//</nowiki>same render style.
+    // Set the worldLayer to use a preset style. Since AreaStyles.Country1 has a YellowGreen background and Black border, our worldLayer will have the
+    //same render style.
     worldLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = AreaStyles.Country1;
-    <nowiki>//</nowiki> This setting will apply to all zoom levels from ZoomLevel01 through ZoomLevel20, so the same style will be rendered no matter how far we zoom in or out.
+    // This setting will apply to all zoom levels from ZoomLevel01 through ZoomLevel20, so the same style will be rendered no matter how far we zoom in or out.
     worldLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
-    <nowiki>//</nowiki> Capital layer
+    // Capital layer
     ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer(HttpContext.Current.Server.MapPath("~/App_Data/capital.shp"));
     capitalLayer.FeatureSource.Projection = proj4;
@@ Line 307: / Line 323: @@
     }
 }
-</source>
+</code>
 The result is as follows (Figure 8):
-{{Figure|QSG_WebAPIEdition_Img14.png|Figure 8. A basic map of the Americas with the additional borders and capitals layers displayed.}}
+{{webapiedition:QSG_WebAPIEdition_Img14.png}}
+\\
+//Figure 8. A basic map of the Americas with the additional borders and capitals layers displayed.//
 ===== How to Use TextStyle =====
 TextStyle is used to label items on map. While the features themselves are drawn from information in the Shapefile, they're labeled with feature names or other attributes contained in the .dbf file. For example, the Shapefile containing capitals of the world has a corresponding .dbf file with the field "CITY_NAME". We can use this field to label the cities on our map.
-{{Figure|QSG_WebEdition2_Img11.jpg|Figure 9. Attribute data from the .dbf file.}}
+{{webapiedition:QSG_WebEdition2_Img11.jpg}}
+\\
+//Figure 9. Attribute data from the .dbf file.//
 Map Suite includes several built-in TextStyles to help us quickly apply attractive city labels. We can simply pick the TextStyle we like and use it.
-<source lang="csharp">
+<code csharp>
-[[Route("tile/{z}/{x}/{y}")]]
+[Route("tile/{z}/{x}/{y}")]
 [HttpGet]
 public HttpResponseMessage GetTile(int z, int x, int y)
 {
-    <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(HttpContext.Current.Server.MapPath(@"~/App_Data/cntry02.shp"));
     ManagedProj4Projection proj4 = new ManagedProj4Projection();
@@ Line 334: / Line 354: @@
     worldLayer.FeatureSource.Projection = proj4;
-    <nowiki>//</nowiki> Set the worldLayer to use a preset style. Since AreaStyles.Country1 has a YellowGreen background and Black border, our worldLayer will have the same render style.
+    // Set the worldLayer to use a preset style. Since AreaStyles.Country1 has a YellowGreen background and Black border, our worldLayer will have the same render style.
     worldLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = AreaStyles.Country1;
-    <nowiki>//</nowiki> This setting will apply from ZoomLevel01 to ZoomLevel20, which means the map will be rendered in the same style, no matter how far we zoom in or out.
+    // This setting will apply from ZoomLevel01 to ZoomLevel20, which means the map will be rendered in the same style, no matter how far we zoom in or out.
     worldLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
-    <nowiki>//</nowiki> Capital layer
+    // Capital layer
     ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer(HttpContext.Current.Server.MapPath("~/App_Data/capital.shp"));
     capitalLayer.FeatureSource.Projection = proj4;
@@ Line 346: / Line 366: @@
     capitalLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
-    <nowiki>//</nowiki> Label layer
+    // Label layer
     ShapeFileFeatureLayer capitalLabelLayer = new ShapeFileFeatureLayer(HttpContext.Current.Server.MapPath("~/App_Data/capital.shp"));
     capitalLabelLayer.FeatureSource.Projection = proj4;
-    <nowiki>//</nowiki> We'll use a preset TextStyle. Here we pass in "CITY_NAME", the name of the field containing the values we want to label the map with.
+    // We'll use a preset TextStyle. Here we pass in "CITY_NAME", the name of the field containing the values we want to label the map with.
     capitalLabelLayer.ZoomLevelSet.ZoomLevel01.DefaultTextStyle = TextStyles.Capital3("CITY_NAME");
     capitalLabelLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
-    <nowiki>//</nowiki> Since the map is drawn with tiles, the label needs to draw on the margin to make sure the text is complete after joining the tiles together.
+    // Since the map is drawn with tiles, the label needs to draw on the margin to make sure the text is complete after joining the tiles together.
-    <nowiki>//</nowiki> Change the number below (to 0, for example) to better understand how this works.
+    // Change the number below (to 0, for example) to better understand how this works.
     capitalLabelLayer.DrawingMarginPercentage = 50;
@@ Line 379: / Line 399: @@
     }
 }
-</source>
+</code>
 The result is as follows (Figure 10):
-{{Figure|QSG_WebAPIEdition_Img15.png|Figure 10. Map of the Americas with TextStyle applied.}}
+{{webapiedition:QSG_WebAPIEdition_Img15.png}}
+\\
+//Figure 10. Map of the Americas with TextStyle applied.//
 Now that we know how to render text and symbols, let's create custom Styles and TextStyles. We'll also specify different ranges of ZoomLevels, and apply varying custom Styles and TextStyles to the same layer at different ZoomLevel ranges.
-<source lang="csharp">
+<code csharp>
-[[Route("tile/{z}/{x}/{y}")]]
+[Route("tile/{z}/{x}/{y}")]
 [HttpGet]
 public HttpResponseMessage GetTile(int z, int x, int y)
 {
-    <nowiki>//</nowiki> Create a new Layer and pass the path to a Shapefile into its constructor.
+    // Create a new Layer and pass the path to a Shapefile into its constructor.
     ShapeFileFeatureLayer worldLayer = new ShapeFileFeatureLayer(HttpContext.Current.Server.MapPath(@"~/App_Data/cntry02.shp"));
     ManagedProj4Projection proj4 = new ManagedProj4Projection();
@@ Line 401: / Line 423: @@
     worldLayer.FeatureSource.Projection = proj4;
-    <nowiki>//</nowiki> Set the worldLayer to use a preset Style. Since AreaStyles.Country1 has a YellowGreen background and Black border, our worldLayer will have the same render style.
+    // Set the worldLayer to use a preset Style. Since AreaStyles.Country1 has a YellowGreen background and Black border, our worldLayer will have the same render style.
     worldLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = AreaStyles.Country1;
-    <nowiki>//</nowiki> This setting will apply from ZoomLevel01 to ZoomLevel20, which means the map will be rendered in the same style, no matter how far we zoom in or out.
+    // This setting will apply from ZoomLevel01 to ZoomLevel20, which means the map will be rendered in the same style, no matter how far we zoom in or out.
     worldLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
-    <nowiki>//</nowiki> Capital layer
+    // Capital layer
     ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer(HttpContext.Current.Server.MapPath("~/App_Data/capital.shp"));
     capitalLayer.FeatureSource.Projection = proj4;
-    <nowiki>//</nowiki> We can customize our own Style. Here we pass in a color and a size.
+    // We can customize our own Style. Here we pass in a color and a size.
     capitalLayer.ZoomLevelSet.ZoomLevel01.DefaultPointStyle = PointStyles.CreateSimpleCircleStyle(GeoColor.StandardColors.White, 7, GeoColor.StandardColors.Brown);
-    <nowiki>//</nowiki> The Style we set here is applied from ZoomLevel01 to ZoomLevel05. That means if we zoom in a bit more, this particular style will no longer be visible.
+    // The Style we set here is applied from ZoomLevel01 to ZoomLevel05. That means if we zoom in a bit more, this particular style will no longer be visible.
     capitalLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level05;
     capitalLayer.ZoomLevelSet.ZoomLevel06.DefaultPointStyle = PointStyles.Capital3;
-    <nowiki>//</nowiki> The Style we set here is applied from ZoomLevel06 to ZoomLevel20. That means if we zoom out a bit more, this particular style will no longer be visible.
+    // The Style we set here is applied from ZoomLevel06 to ZoomLevel20. That means if we zoom out a bit more, this particular style will no longer be visible.
     capitalLayer.ZoomLevelSet.ZoomLevel06.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
-    <nowiki>//</nowiki> Label layer
+    // Label layer
     ShapeFileFeatureLayer capitalLabelLayer = new ShapeFileFeatureLayer(HttpContext.Current.Server.MapPath("~/App_Data/capital.shp"));
     capitalLabelLayer.FeatureSource.Projection = proj4;
-    <nowiki>//</nowiki> We can customize our own TextStyle. Here we pass in the font, the size, the style and the color.
+    // We can customize our own TextStyle. Here we pass 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);
-    <nowiki>//</nowiki> The TextStyle we set here is applied from ZoomLevel01 to ZoomLevel05.
+    // The TextStyle we set here is applied from ZoomLevel01 to ZoomLevel05.
     capitalLabelLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level05;
     capitalLabelLayer.ZoomLevelSet.ZoomLevel06.DefaultTextStyle = TextStyles.Capital3("CITY_NAME");
-    <nowiki>//</nowiki> The TextStyle we set here is applied from ZoomLevel06 to ZoomLevel20.
+    // The TextStyle we set here is applied from ZoomLevel06 to ZoomLevel20.
     capitalLabelLayer.ZoomLevelSet.ZoomLevel06.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
-    <nowiki>//</nowiki> Change the number below (to 0, for example) to better understand how this works.
+    // Change the number below (to 0, for example) to better understand how this works.
     capitalLabelLayer.DrawingMarginPercentage = 50;
@@ Line 456: / Line 478: @@
     }
 }
-</source>
+</code>
 Can you imagine what the map will look like now? Figure 11 below is the result. At first it looks the same as it did in Figure 10. Now zoom in, and watch the map change to resemble Figure 12.
-{{Figure|QSG_WebAPIEdition_Img17.png|Figure 11. European cities with two ZoomLevels, before zooming in.}}
+{{webapiedition:QSG_WebAPIEdition_Img17.png}}
+\\
+//Figure 11. European cities with two ZoomLevels, before zooming in.//
-{{Figure|QSG_WebAPIEdition_Img18.png|Figure 12. European cities with two ZoomLevels, after zooming in.}}
+{{webapiedition:QSG_WebAPIEdition_Img18.png}}
+\\
+//Figure 12. European cities with two ZoomLevels, after zooming in.//
 ===== Perform an AJAX HTTP request to the Action of the Controller =====
@@ Line 473: / Line 499: @@
 The code in your client side should look like this:
-<source lang="asp">
+<code asp>
 <!DOCTYPE html>
 <html>
@@ Line 495: / Line 521: @@
     var map = L.map('map', { zoomAnimation: false }).setView([[39.6948,|-96.8150]], 4);
-    <nowiki>//</nowiki> add thinkgeo map
+    // add thinkgeo map
     L.tileLayer.wms('http://{s}.thinkgeo.com/CachedWMSServer/WmsServer.axd', {
         subdomains: [['worldmapkit1',|'worldmapkit2', 'worldmapkit3', 'worldmapkit4', 'worldmapkit5', 'worldmapkit6']],
@@ Line 514: / Line 540: @@
 </html>
-</source>
+</code>
 Now copy and paste the code below about the accessed action into your "HelloWorldController" page:
-<source lang="csharp">
+<code csharp>
-[[Route("tile/{layerId}/{z}/{x}/{y}")]]
+[Route("tile/{layerId}/{z}/{x}/{y}")]
 [HttpGet]
 public HttpResponseMessage GetTile(string layerId, int z, int x, int y)
@@ Line 532: / Line 558: @@
     if (layerId.ToLowerInvariant() == "usstates")
     {
-        <nowiki>//</nowiki> States layer
+        // States layer
         ShapeFileFeatureLayer statesLayer = new ShapeFileFeatureLayer(HttpContext.Current.Server.MapPath("~/App_Data/USStates.shp"));
         statesLayer.FeatureSource.Projection = proj4;
@@ Line 542: / Line 568: @@
     else if (layerId.ToLowerInvariant() == "uscities")
     {
-        <nowiki>//</nowiki> Cities layer
+        // Cities layer
         ShapeFileFeatureLayer countyLayer = new ShapeFileFeatureLayer(HttpContext.Current.Server.MapPath("~/App_Data/cities_a.shp"));
         countyLayer.FeatureSource.Projection = proj4;
@@ Line 569: / Line 595: @@
     }
 }
-</source>
+</code>
 If we compile and run the application now, it should look like the screenshot below:
-{{Figure|QSG_WebAPIEdition_Img19.png|Figure 13. Note the client side layer display control that now appears below the map.}}
+{{webapiedition:QSG_WebAPIEdition_Img19.png}}
+\\
+//Figure 13. Note the client side layer display control that now appears below the map.//
 You can click the check boxes for "Show US States" or "Show US Cities" to load different layers to the map.  For example, if you check the "Show US States" box, the map should look like this:
-{{Figure|QSG_WebAPIEdition_Img20.png|Figure 14. Map with states layer shown.}}
+{{webapiedition:QSG_WebAPIEdition_Img20.png}}
+\\
+//Figure 14. Map with states layer shown.//
 if you check the "Show US Cities" box, the map should look like this:
-{{Figure|QSG_WebAPIEdition_Img21.png|Figure 15. Map with cities layer shown.}}
+{{webapiedition:QSG_WebAPIEdition_Img21.png}}
+\\
+//Figure 15. Map with cities layer shown.//
 ===== Summary =====
 You now know the basics of using Map Suite WebAPI Edition and can start adding this functionality to your own applications. Let's recap what we've learned about the object relationships and how the pieces of Map Suite work together:
-#It is of the utmost importance that the units (feet, meters, decimal degrees, etc.) be set properly for the Map control, based on the requirements of your data.
+  - It is of the utmost importance that the units (feet, meters, decimal degrees, etc.) be set properly for the Map control, based on the requirements of your data.
-#Shapefiles provide the data used by a Map control to render a map.
+  - Shapefiles provide the data used by a Map control to render a map.
-#A Layer can have one-to-many ZoomLevels. ZoomLevels help to define ranges (upper and lower scales) of when a Layer should be shown or hidden.
+  - A Layer can have one-to-many ZoomLevels. ZoomLevels help to define ranges (upper and lower scales) of when a Layer should be shown or hidden.
-<br>
-{{Filelink}}[[:File:HelloWorld_WebAPI.zip|Download Sample Code From This Exercise]] //(12.5 MB)//
-[[Category:Map Suite WebAPI Edition]] [[Category:Web GIS]] [[Category:ASP.NET]] [[Category:GIS]] [[Category:.NET]]
+<faicon fa fa-download> {{filehistory:HelloWorld_WebAPI.zip|Download Sample Code From This Exercise}} //(12.5 MB)//

User Tools

Site Tools

Differences

Page Tools