Differences

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

--- map_suite_web_for_webapi_quick_start_guide [2017/02/21 07:35]
tgwikiupdate [Navigate the Map]
+++ map_suite_web_for_webapi_quick_start_guide [2017/03/15 07:15] (current)
tgwikiupdate
@@ Line 1: / Line 1: @@
 ====== Map Suite Quick Start Guide For  WebAPI ======
-<div msgbox>The Map Suite WebAPI 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 10.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 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 Web for WebAPI 10.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_for_webforms_quick_start_guide|Web Edition QuickStart Guide]] instead.</div>
+If you want to build a Web Forms application using the standard Map Suite Web product, please see the [[map_suite_web_for_webforms_quick_start_guide|Web Edition Quickstart Guide]] instead.</div>
 Welcome to Map Suite™ WebAPI 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 16: / Line 16: @@
 ===== Setting up the Environment =====
-Let's start by creating a new WebAPI application in Visual Studio.NET 2015 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 2015 IDE named "QuickstartSample" (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.
+{{mapsuite10:webapi:Map_Suite_WebApi_QSG_NewProject.png}}
-{{webapiedition:QSG_WebAPIEdition_Img1.png}}
+{{mapsuite10:webapi:Map_Suite_WebApi_QSG_SetProjectTemplate.png}}
-{{mapsuite10:webapi:1.png}}
-{{mapsuite10:webapi:2.png}}
 \\
 //Figure 1. Creating a new project in Visual Studio.NET 2015 IDE.//
@@ Line 30: / Line 27: @@
 To installing Asp.NET WebAPI, please right click "references" > "Manage NuGet packages...".
-{{mapsuite10:webapi:3.png}}
+{{mapsuite10:webapi:Map_Suite_WebApi_QSG_NuGetManager.png}}
 //Figure 2. Reference NuGet packages.//
@@ Line 39: / Line 36: @@
 .	 For the advanced user of MapSuite 10.0 products and want to include the least set of reference, we recommend to use “MapSuiteWebForWebApi-BareBone” package. It only depends on required packages that a basic web forms application needs. Please refer http://wiki.thinkgeo.com/wiki/map_suite_web_for_webapi#barebone for detail.
-In this sample, we choose an advanced way. To build this sample, we are going to reference the following packages.
-.	MapSuiteWebForWebApi-BareBone\\
+In this sample, we choose an advanced way. To build this sample, we are going to reference the "MapSuiteWebForWebApi-Standard" package.
-.	ThinkGeo.MapSuite.Layers.ShapeFile\\
+\\Now that we open NuGet dialog and install the three Nuget packages (See Figure 3).
-Now that we open NuGet dialog and install the three Nuget packages (See Figure 3).
-{{mapsuite10:webapi:5.png}}
+{{mapsuite10:webapi:Map_Suite_WebApi_QSG_InstallWebApiPackage.png}}
+\\
+\\
 //Figure 3. Install NuGet package.//
+\\
 \\
 Now the package is installing into the project.
+Click “OK” if the message box like the following pops up.
+\\
+{{mapsuite10:webapi:Map_Suite_WebApi_QSG_ReferenceRreview.png}}
+\\
 The “NetTopologySuite” is the third part assembly, so the license acceptance is required. You can click “I Accept” to agree the license.
 \\
-{{mapsuite10:webapi:licenseacceptance.png}}
+{{mapsuite10:webapi:Map_Suite_WebApi_QSG_PackageLicenseAcceptance.png}}
+\\
+\\
-===== Map Suite WebAPI "Hello World" Sample =====
+===== Map Suite WebAPI Quickstart Sample =====
-In this section, we'll use Map Suite WebAPI Edition to display a map that uses your own data.
+In this section, we'll use Map Suite Web for WebApi to display a map that uses your own data.
 To begin, in the Default.htm file, let's enter a few lines of code that will display a simple map.  Next, we'll have a look at the data and the important objects we'll use.
 ==== Display a Simple map ====
-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.
+The first step in creating our "QuickstartSample" application is to add a html file named Default.html and include code that similar to the example below.
-{{mapsuite10:webapi:webapi_structure.png}}
+{{mapsuite10:webapi:Map_Suite_WebApi_QSG_HtmlCode.png}}
 \\
-//Figure 4. Adding Default.htm.//
+//Figure 4. Adding Default.html.//
 <code asp>
@@ Line 69: / Line 74: @@
 <html>
 <head>
-    <title>Hello World</title>
+    <title>Quickstart</title>
     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
 </head>
 <body>
     <div id="map" style="height: 800px; width: 1200px"></div>
-   <!-- <div>
+    <!-- <div>
-        <input id="chKAddStates" name="group1" type="radio" value="Show US States" onclick="updateLayer('usstates')" />
+         <input id="chKAddStates" name="group1" type="radio" value="Show US States" onclick="updateLayer('usstates')" />
-        Show US States
+         Show US States
-    <br />
+     <br />
-        <input id="chKAddCites" name="group1" type="radio" value="Show US Counties" onclick="updateLayer('uscities')" />
+         <input id="chKAddCites" name="group1" type="radio" value="Show US Counties" onclick="updateLayer('uscities')" />
-        Show US Cities
+         Show US Cities
-    <br />
+     <br />
-    </div>-->
+     </div>-->
 </body>
 <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
@@ Line 97: / Line 102: @@
     }).addTo(map);
-    var worldLayer = L.tileLayer('/HelloWorld/Tile//{z}/{x}/{y}').addTo(map);
+    var worldLayer = L.tileLayer('/Quickstart/Tile//{z}/{x}/{y}').addTo(map);
     //function updateLayer(layerId) {
-    //    worldLayer.setUrl('/HelloWorld/Tile/' + layerId + '/{z}/{x}/{y}');
+    //    worldLayer.setUrl('/Quickstart/Tile/' + layerId + '/{z}/{x}/{y}');
     //    worldLayer.redraw();
     //}
@@ Line 110: / Line 115: @@
 Now press F5 to build and run your application. It should look like figure 5:
-{{mapsuite10:webapi:start.png}}
+{{mapsuite10:webapi:Map_Suite_WebApi_QSG_ShowBaseMap.png}}
 \\
 //Figure 5. The basic map display.//
-==== Map Suite WebAPI "Hello World" ====
+==== Map Suite WebAPI "Quickstart" ====
 Now let's look at the code needed to bring this concept to fruition.
@@ Line 123: / Line 128: @@
 (**NOTE:** The data used in this sample can be found in the attached sample above in the "\App_Data" folder.)
-Let's add a controller named "HelloWorldController", like this:
+Let's add a controller named "HomeController", like this:
-{{webapiedition:QSG_WebAPIEdition_Img10.png}}
+{{mapsuite10:webapi:Map_Suite_WebApi_QSG_AddController.png}}
-{{mapsuite10:webapi:webapi-controller.png}}
+{{mapsuite10:webapi:Map_Suite_WebApi_QSG_AddScaffold.png}}
-{{mapsuite10:webapi:webapi-controller1.png|Figure 6. Adding the "HelloWorldController".}}
+{{mapsuite10:webapi:Map_Suite_WebApi_QSG_ShowHomeController.png|Figure 6. Adding the "HomeController".}}
-//Figure 6. Adding the "HelloWorldController".//
+//Figure 6. Adding the "HomeController".//
-Then add the following code to HelloWorldController:
+Then add the following code to HomeController:
 <code csharp>
@@ Line 151: / Line 156: @@
 using ThinkGeo.MapSuite.WebApi;
-namespace HelloWorld.Controllers
+namespace QuickstartSample.Controllers
 {
-    [RoutePrefix("HelloWorld")]
+    [RoutePrefix("Quickstart")]
-    public class HelloWorldController : ApiController
+    public class HomeController : ApiController
     {
         [Route("tile/{z}/{x}/{y}")]
@@ Line 210: / Line 215: @@
 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 that we want.
-**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 DecimalDegrees (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 set it. This information is normally found somewhere in the ShapeFile's documentation (also referred to as its metadata), or within the 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 DecimalDegrees (a format of latitude and longitude), feet, meters, or another unit system. Our map has no way to know what the ShapeFile's unit of measurement is until we set it. This information is normally found somewhere in the ShapeFile's documentation (also referred to as its metadata), or within the 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("Quickstart")] and [Route("tile/{z}/{x}/{y}")] are for custom route, we can easily access it by '/Quickstart/tile/{z}/{x}/{y}'. To make it work, we need to modify the WebApiConfig.cs, like this:
 <code csharp>
@@ Line 232: / Line 237: @@
 Now that the server side is ready, let's support it adding the following code to the client side:
-L.tileLayer('/HelloWorld/Tile/{z}/{x}/{y}').addTo(map);
+L.tileLayer('/Quickstart/Tile/{z}/{x}/{y}').addTo(map);
 After adding, it will look like as following:
@@ Line 250: / Line 255: @@
     }).addTo(map);
-    L.tileLayer('/HelloWorld/Tile/{z}/{x}/{y}').addTo(map);
+    L.tileLayer('/Quickstart/Tile/{z}/{x}/{y}').addTo(map);
 </script>
 </code>
@@ Line 256: / Line 261: @@
 If you compile and run what you have now, your map should look like the screenshot below. (See Figure 7).
-{{mapsuite10:webapi:webapi-area.png}}
+{{mapsuite10:webapi:Map_Suite_WebApi_QSG_ShowAreaStyle.png}}
 \\
 //Figure 7. A sample map of the world.//
@@ Line 339: / Line 344: @@
 The result is as follows (Figure 8):
-{{mapsuite10:webapi:webapi-point.png}}
+{{mapsuite10:webapi:Map_Suite_WebApi_QSG_ShowPointStyle.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.
+A TextStyle is used to label items on map. As every ShapeFile has a relative .dbf file that includes descriptions for every record, the most common way to use TextStyles is for labeling. For example, Capital ShapeFile's corresponding .dbf file contains the field "CITY_NAME". We can use this field to label the cities on our map.
-{{webapiedition:QSG_WebEdition2_Img11.jpg}}
+{{mapsuite10:webapi:Map_Suite_WebApi_QSG_DBFDetails.png}}
 \\
 //Figure 9. Attribute data from the .dbf file.//
@@ Line 448: / Line 453: @@
 The result is as follows (Figure 10):
-{{mapsuite10:webapi:webapi-text.png}}
+{{mapsuite10:webapi:Map_Suite_WebApi_QSG_ShowTextStyle.png}}
 \\
-//Figure 10. Map of the Americas with TextStyle applied.//
+//Figure 10. Map of the Americas with a 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 customized Styles and TextStyles. We'll also specify different ranges of ZoomLevels, and apply varying customized Styles and TextStyles to the same layer at different ZoomLevel ranges.
 <code csharp>
@@ Line 549: / Line 554: @@
 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.
-{{mapsuite10:webapi:webapi-pointtext.png}}
+{{mapsuite10:webapi:Map_Suite_WebApi_QSG_ShowLowZoomLevel.png}}
 \\
-//Figure 11. European cities with two ZoomLevels, before zooming in.//
+//Figure 11. A map of European cities with two ZoomLevels, before zooming in.//
-{{mapsuite10:webapi:webapi-pointchange.png}}
+{{mapsuite10:webapi:Map_Suite_WebApi_QSG_ShowHighZoomLevel.png}}
 \\
-//Figure 12. European cities with two ZoomLevels, after zooming in.//
+//Figure 12. The same map with two ZoomLevels, after zooming in.//
 ===== Perform an AJAX HTTP request to the Action of the Controller =====
@@ Line 570: / Line 575: @@
 <html>
 <head>
-    <title>Hello World</title>
+    <title>Quickstart</title>
     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
 </head>
@@ Line 578: / Line 583: @@
          <input id="chKAddStates" name="group1" type="radio" value="Show US States" onclick="updateLayer('usstates')" />
          Show US States
-         <br />
+     <br />
-             <input id="chKAddCites" name="group1" type="radio" value="Show US Counties" onclick="updateLayer('uscities')" />
+         <input id="chKAddCites" name="group1" type="radio" value="Show US Counties" onclick="updateLayer('uscities')" />
-             Show US Cities
+         Show US Cities
-         <br />
+     <br />
-    </div>
+     </div>
 </body>
 <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
@@ Line 598: / Line 603: @@
     }).addTo(map);
-    var worldLayer = L.tileLayer('/HelloWorld/Tile/{z}/{x}/{y}').addTo(map);
+    var worldLayer = L.tileLayer('/Quickstart/Tile//{z}/{x}/{y}').addTo(map);
     function updateLayer(layerId) {
-        worldLayer.setUrl('/HelloWorld/Tile/' + layerId + '/{z}/{x}/{y}');
+        worldLayer.setUrl('/Quickstart/Tile/' + layerId + '/{z}/{x}/{y}');
         worldLayer.redraw();
     }
@@ Line 608: / Line 613: @@
 </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 "HomeController" page:
 <code csharp>
@@ Line 694: / Line 699: @@
 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:
-{{mapsuite10:webapi:webapi-interact1.png}}
+{{mapsuite10:webapi:Map_Suite_WebApi_QSG_ShowUSStates.png}}
 \\
 //Figure 14. Map with states layer shown.//
@@ Line 700: / Line 705: @@
 if you check the "Show US Cities" box, the map should look like this:
-{{mapsuite10:webapi:webapi-interact2.png}}
+{{mapsuite10:webapi:Map_Suite_WebApi_QSG_ShowUSCities.png}}
 \\
 //Figure 15. Map with cities layer shown.//
+\\
+\\
+This completes this scenario. The next thing you might want to do is to make it run on another machine that does not have a developer license. A runtime license is the one we are looking for. Here is the guide to generate a runtime license: http://wiki.thinkgeo.com/wiki/map_suite_deployment_license_guide_for_web.
+\\
+\\
 ===== Summary =====
+\\
 You now know the basics of using Map Suite WebAPI 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:

User Tools

Site Tools

Differences

Page Tools