User Tools

Site Tools


map_suite_webapi_edition_quick_start_guide

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
map_suite_webapi_edition_quick_start_guide [2015/09/10 02:12]
admin
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. <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.
  
  
-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>​+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. 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 14: 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. 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 //​C:​\Program Files (x86)\ThinkGeo\Map Suite 9.0\Map Suite WebAPI//.+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 ===== ===== Download the Sample =====
-<faicon fa fa-download>​ {{: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 ===== ===== Setting up the Environment =====
 Let's start by creating a new WebAPI application in Visual Studio.NET 2012 IDE named "​HelloWorld"​ (see Figure 1). Set the Templates to ".NET Framework 4.5" for the project. In next wizard page, select the "​Empty"​ template; this means that your sample project won't have any built-in pages or functionalities. Let's start by creating a new WebAPI application in Visual Studio.NET 2012 IDE named "​HelloWorld"​ (see Figure 1). Set the Templates to ".NET Framework 4.5" for the project. In next wizard page, select the "​Empty"​ template; this means that your sample project won't have any built-in pages or functionalities.
  
-If you are using Visual Studio.NET 2010, you need to install [http://​www.microsoft.com/​downloads/​details.aspx?​FamilyID=ca9d90fa-e8c9-42e3-aa19-08e2c027f5d6&​displaylang=en|VS2010 SP1], and then create an ASP.NET MVC Web Application.+If you are using Visual Studio.NET 2010, you need to install ​[[http://​www.microsoft.com/​downloads/​details.aspx?​FamilyID=ca9d90fa-e8c9-42e3-aa19-08e2c027f5d6&​displaylang=en|VS2010 SP1]], and then create an ASP.NET MVC Web Application.
  
-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].+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]].
  
 {{webapiedition:​QSG_WebAPIEdition_Img1.png}} {{webapiedition:​QSG_WebAPIEdition_Img1.png}}
Line 31: Line 31:
  
 {{webapiedition:​QSG_WebAPIEdition_Img22.png}} {{webapiedition:​QSG_WebAPIEdition_Img22.png}}
- +\\
 //Figure 1. Creating a new project in Visual Studio.NET 2012 IDE.// //Figure 1. Creating a new project in Visual Studio.NET 2012 IDE.//
  
Line 40: Line 39:
  
 {{webapiedition:​QSG_WebAPIEdition_Img7.png}} {{webapiedition:​QSG_WebAPIEdition_Img7.png}}
- +\\
 //Figure 2. Installing the WebAPI DLLs.// //Figure 2. Installing the WebAPI DLLs.//
  
Line 53: Line 51:
  
 {{webapiedition:​QSG_WebAPIEdition_Img8.png}} {{webapiedition:​QSG_WebAPIEdition_Img8.png}}
- +\\
 //Figure 3. Adding Default.htm.//​ //Figure 3. Adding Default.htm.//​
  
-<source ​asp">+<code asp>
 <​!DOCTYPE html> <​!DOCTYPE html>
 <​html>​ <​html>​
Line 69: Line 66:
 <script src="​http://​cdn.leafletjs.com/​leaflet-0.7.3/​leaflet.js"></​script>​ <script src="​http://​cdn.leafletjs.com/​leaflet-0.7.3/​leaflet.js"></​script>​
 <​script>​ <​script>​
-    var map = L.map('​map',​ { zoomAnimation:​ false }).setView([39.6948,​|-96.8150],​ 4);+    var map = L.map('​map',​ { zoomAnimation:​ false }).setView([[39.6948,​|-96.8150]], 4);
  
-    // add thinkgeo map+    ​<​nowiki>​//</​nowiki> ​add thinkgeo map
     L.tileLayer.wms('​http://​{s}.thinkgeo.com/​CachedWMSServer/​WmsServer.axd',​ {     L.tileLayer.wms('​http://​{s}.thinkgeo.com/​CachedWMSServer/​WmsServer.axd',​ {
-        subdomains: ['​worldmapkit1',​|'​worldmapkit2',​ '​worldmapkit3',​ '​worldmapkit4',​ '​worldmapkit5',​ '​worldmapkit6'​],​+        subdomains: ​[['​worldmapkit1',​|'​worldmapkit2',​ '​worldmapkit3',​ '​worldmapkit4',​ '​worldmapkit5',​ '​worldmapkit6'​]],
         layers: '​OSMWorldMapKitLayer',​         layers: '​OSMWorldMapKitLayer',​
         format: '​image/​png',​         format: '​image/​png',​
Line 82: Line 79:
 </​script>​ </​script>​
 </​html>​ </​html>​
-</source>+</code>
  
 Now press F5 to build and run your application. It should look like this: Now press F5 to build and run your application. It should look like this:
  
 {{webapiedition:​QSG_WebAPIEdition_Img9.png}} {{webapiedition:​QSG_WebAPIEdition_Img9.png}}
- +\\
 //Figure 4. The basic map display.// //Figure 4. The basic map display.//
  
Line 123: Line 119:
 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: 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 ​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 WebAPI "Hello World" ==== ==== Map Suite WebAPI "Hello World" ====
Line 134: Line 130:
  
 {{webapiedition:​QSG_WebAPIEdition_Img12.png}} {{webapiedition:​QSG_WebAPIEdition_Img12.png}}
- +\\
 //Figure 5. Adding the references.//​ //Figure 5. Adding the references.//​
  
Line 153: Line 148:
 Then add the following code to HelloWorldController:​ Then add the following code to HelloWorldController:​
  
-<source ​csharp">+<code csharp>
 using System.Drawing;​ using System.Drawing;​
 using System.Drawing.Imaging;​ using System.Drawing.Imaging;​
Line 174: Line 169:
         public HttpResponseMessage GetTile(int z, int x, int y)         public HttpResponseMessage GetTile(int z, int x, int y)
         {         {
-            // We create a new Layer and pass the path to a Shapefile into its constructor.+            ​<​nowiki>​//</​nowiki> ​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"​));​             ShapeFileFeatureLayer worldLayer = new ShapeFileFeatureLayer(HttpContext.Current.Server.MapPath(@"​~/​App_Data/​cntry02.shp"​));​
             ManagedProj4Projection proj4 = new ManagedProj4Projection();​             ManagedProj4Projection proj4 = new ManagedProj4Projection();​
Line 214: 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. 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.
Line 222: Line 217:
 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 ​csharp">+<code csharp>
 public static void Register(HttpConfiguration config) public static void Register(HttpConfiguration config)
 { {
Line 236: Line 231:
      ​config.EnsureInitialized();​      ​config.EnsureInitialized();​
 } }
-</source>+</code>
  
 Now that the server side is ready, let's support it adding the following code to the client side: Now that the server side is ready, let's support it adding the following code to the client side:
  
-<source ​csharp">+<code csharp>
 L.tileLayer('/​HelloWorld/​Tile/​{z}/​{x}/​{y}'​).addTo(map);​ L.tileLayer('/​HelloWorld/​Tile/​{z}/​{x}/​{y}'​).addTo(map);​
 </​source>​ </​source>​
Line 246: Line 241:
 After adding, it will look like as following: After adding, it will look like as following:
  
-<source csharp"​>+<code javascript>
 <​script>​ <​script>​
-    var map = L.map('​map',​ { zoomAnimation:​ false }).setView([39.6948,​|-96.8150],​ 4);+    var map = L.map('​map',​ { zoomAnimation:​ false }).setView([[39.6948,​|-96.8150]], 4);
  
     // add thinkgeo map     // add thinkgeo map
     L.tileLayer.wms('​http://​{s}.thinkgeo.com/​CachedWMSServer/​WmsServer.axd',​ {     L.tileLayer.wms('​http://​{s}.thinkgeo.com/​CachedWMSServer/​WmsServer.axd',​ {
-        subdomains: ['​worldmapkit1',​|'​worldmapkit2',​ '​worldmapkit3',​ '​worldmapkit4',​ '​worldmapkit5',​ '​worldmapkit6'​],​+        subdomains: ​[['​worldmapkit1',​|'​worldmapkit2',​ '​worldmapkit3',​ '​worldmapkit4',​ '​worldmapkit5',​ '​worldmapkit6'​]],
         layers: '​OSMWorldMapKitLayer',​         layers: '​OSMWorldMapKitLayer',​
         format: '​image/​png',​         format: '​image/​png',​
Line 262: Line 257:
     L.tileLayer('/​HelloWorld/​Tile/​{z}/​{x}/​{y}'​).addTo(map);​     L.tileLayer('/​HelloWorld/​Tile/​{z}/​{x}/​{y}'​).addTo(map);​
 </​script>​ </​script>​
-</source>+</code>
  
 If you compile and run what you have now, your map should look like the screenshot below. (See Figure 7). If you compile and run what you have now, your map should look like the screenshot below. (See Figure 7).
  
 {{webapiedition:​QSG_WebAPIEdition_Img13.png}} {{webapiedition:​QSG_WebAPIEdition_Img13.png}}
- +\\
 //Figure 7. A simple map of the world.// //Figure 7. A simple map of the world.//
  
Line 280: Line 274:
  
 Change the code in server side to correspond with the following example. You don't need to make any changes to client side. Change the code in server side to correspond with the following example. You don't need to make any changes to client side.
-<source ​csharp">+<code csharp>
 [Route("​tile/​{z}/​{x}/​{y}"​)] [Route("​tile/​{z}/​{x}/​{y}"​)]
 [HttpGet] [HttpGet]
Line 294: Line 288:
     worldLayer.FeatureSource.Projection = proj4;     worldLayer.FeatureSource.Projection = proj4;
  
-    // 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;​     worldLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = AreaStyles.Country1;​
  
Line 328: Line 323:
     }     }
 } }
-</source>+</code>
  
 The result is as follows (Figure 8): The result is as follows (Figure 8):
  
 {{webapiedition:​QSG_WebAPIEdition_Img14.png}} {{webapiedition:​QSG_WebAPIEdition_Img14.png}}
- +\\
 //Figure 8. A basic map of the Americas with the additional borders and capitals layers displayed.//​ //Figure 8. A basic map of the Americas with the additional borders and capitals layers displayed.//​
  
Line 341: Line 335:
  
 {{webapiedition:​QSG_WebEdition2_Img11.jpg}} {{webapiedition:​QSG_WebEdition2_Img11.jpg}}
- +\\
 //Figure 9. Attribute data from the .dbf file.// //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. 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 ​csharp">+<code csharp>
 [Route("​tile/​{z}/​{x}/​{y}"​)] [Route("​tile/​{z}/​{x}/​{y}"​)]
 [HttpGet] [HttpGet]
Line 406: Line 399:
     }     }
 } }
-</source>+</code>
  
 The result is as follows (Figure 10): The result is as follows (Figure 10):
  
 {{webapiedition:​QSG_WebAPIEdition_Img15.png}} {{webapiedition:​QSG_WebAPIEdition_Img15.png}}
- +\\
 //Figure 10. Map of the Americas with TextStyle applied.// //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. 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 ​csharp">+<code csharp>
 [Route("​tile/​{z}/​{x}/​{y}"​)] [Route("​tile/​{z}/​{x}/​{y}"​)]
 [HttpGet] [HttpGet]
Line 486: 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. 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.
  
 {{webapiedition:​QSG_WebAPIEdition_Img17.png}} {{webapiedition:​QSG_WebAPIEdition_Img17.png}}
- +\\
 //Figure 11. European cities with two ZoomLevels, before zooming in.// //Figure 11. European cities with two ZoomLevels, before zooming in.//
  
 {{webapiedition:​QSG_WebAPIEdition_Img18.png}} {{webapiedition:​QSG_WebAPIEdition_Img18.png}}
- +\\
 //Figure 12. European cities with two ZoomLevels, after zooming in.// //Figure 12. European cities with two ZoomLevels, after zooming in.//
  
Line 509: Line 499:
 The code in your client side should look like this: The code in your client side should look like this:
  
-<source ​asp">+<code asp>
 <​!DOCTYPE html> <​!DOCTYPE html>
 <​html>​ <​html>​
Line 529: Line 519:
 <script src="​http://​cdn.leafletjs.com/​leaflet-0.7.3/​leaflet.js"></​script>​ <script src="​http://​cdn.leafletjs.com/​leaflet-0.7.3/​leaflet.js"></​script>​
 <​script>​ <​script>​
-    var map = L.map('​map',​ { zoomAnimation:​ false }).setView([39.6948,​|-96.8150],​ 4);+    var map = L.map('​map',​ { zoomAnimation:​ false }).setView([[39.6948,​|-96.8150]], 4);
  
     // add thinkgeo map     // add thinkgeo map
     L.tileLayer.wms('​http://​{s}.thinkgeo.com/​CachedWMSServer/​WmsServer.axd',​ {     L.tileLayer.wms('​http://​{s}.thinkgeo.com/​CachedWMSServer/​WmsServer.axd',​ {
-        subdomains: ['​worldmapkit1',​|'​worldmapkit2',​ '​worldmapkit3',​ '​worldmapkit4',​ '​worldmapkit5',​ '​worldmapkit6'​],​+        subdomains: ​[['​worldmapkit1',​|'​worldmapkit2',​ '​worldmapkit3',​ '​worldmapkit4',​ '​worldmapkit5',​ '​worldmapkit6'​]],
         layers: '​OSMWorldMapKitLayer',​         layers: '​OSMWorldMapKitLayer',​
         format: '​image/​png',​         format: '​image/​png',​
Line 541: Line 531:
     }).addTo(map);​     }).addTo(map);​
  
-    var worldLayer = L.tileLayer('/​HelloWorld/​Tile//​{z}/​{x}/​{y}'​).addTo(map);​+    var worldLayer = L.tileLayer('/​HelloWorld/​Tile<​nowiki>​//</​nowiki>​{z}/​{x}/​{y}'​).addTo(map);​
  
     function updateLayer(layerId) {     function updateLayer(layerId) {
Line 550: Line 540:
 </​html>​ </​html>​
  
-</source>+</code>
  
 Now copy and paste the code below about the accessed action into your "​HelloWorldController"​ page: Now copy and paste the code below about the accessed action into your "​HelloWorldController"​ page:
  
-<source ​csharp">+<code csharp>
 [Route("​tile/​{layerId}/​{z}/​{x}/​{y}"​)] [Route("​tile/​{layerId}/​{z}/​{x}/​{y}"​)]
 [HttpGet] [HttpGet]
Line 605: Line 595:
     }     }
 } }
-</source>+</code>
  
 If we compile and run the application now, it should look like the screenshot below: 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: 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:
  
 {{webapiedition:​QSG_WebAPIEdition_Img20.png}} {{webapiedition:​QSG_WebAPIEdition_Img20.png}}
- +\\
 //Figure 14. Map with states layer shown.// //Figure 14. Map with states layer shown.//
  
Line 621: Line 612:
  
 {{webapiedition:​QSG_WebAPIEdition_Img21.png}} {{webapiedition:​QSG_WebAPIEdition_Img21.png}}
- +\\
 //Figure 15. Map with cities layer shown.// //Figure 15. Map with cities layer shown.//
  
Line 633: Line 623:
  
  
-<faicon fa fa-download>​ {{: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)//
map_suite_webapi_edition_quick_start_guide.1441851132.txt.gz · Last modified: 2015/09/10 02:12 by admin