map_suite_web_for_webapi_quick_start_guide
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
|
map_suite_web_for_webapi_quick_start_guide [2017/02/21 06:51] tgwikiupdate [Installing ThinkGeo WebApi NuGet packages] |
map_suite_web_for_webapi_quick_start_guide [2017/02/24 21:53] bradrollins |
||
|---|---|---|---|
| Line 38: | Line 38: | ||
| 1. For the beginner of MapSuite 10.0 products, we recommend to use “MapSuiteWebForWebApi-Standard” package. This package is the full featured package for developing GIS application with web forms. Please refer http://wiki.thinkgeo.com/wiki/map_suite_web_for_webapi#standard for detail. | 1. For the beginner of MapSuite 10.0 products, we recommend to use “MapSuiteWebForWebApi-Standard” package. This package is the full featured package for developing GIS application with web forms. Please refer http://wiki.thinkgeo.com/wiki/map_suite_web_for_webapi#standard for detail. | ||
| - | 2. 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. | + | 2. For the advanced user of MapSuite 10.0 products and want to include the least set of reference, we recommend to use “MapSuiteWebForWebApi-Standard” 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#standard for detail. |
| In this sample, we choose an advanced way. To build this sample, we are going to reference the following packages. | In this sample, we choose an advanced way. To build this sample, we are going to reference the following packages. | ||
| - | 1. MapSuiteWebForWebApi-BareBone\\ | + | 1. MapSuiteWebForWebApi-Standard\\ |
| 2. ThinkGeo.MapSuite.Layers.ShapeFile\\ | 2. 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}} | + | |
| + | {{::webapi.png}} | ||
| + | \\ | ||
| + | \\ | ||
| //Figure 3. Install NuGet package.// | //Figure 3. Install NuGet package.// | ||
| \\ | \\ | ||
| + | \\ | ||
| + | |||
| Now the package is installing into the project. | Now the package is installing into the project. | ||
| The “NetTopologySuite” is the third part assembly, so the license acceptance is required. You can click “I Accept” to agree the license. | 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}} | ||
| ===== Map Suite WebAPI "Hello World" Sample ===== | ===== Map Suite WebAPI "Hello World" Sample ===== | ||
| Line 108: | Line 112: | ||
| - | 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 figure 5: |
| {{mapsuite10:webapi:start.png}} | {{mapsuite10:webapi:start.png}} | ||
| Line 117: | Line 121: | ||
| Now let's look at the code needed to bring this concept to fruition. | Now let's look at the code needed to bring this concept to fruition. | ||
| - | 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: | + | 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) | ||
| Line 208: | Line 212: | ||
| </code> | </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 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 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 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("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: | ||
| Line 258: | Line 262: | ||
| {{mapsuite10:webapi:webapi-area.png}} | {{mapsuite10:webapi:webapi-area.png}} | ||
| \\ | \\ | ||
| - | //Figure 7. A simple map of the world.// | + | //Figure 7. A sample map of the world.// |
| ==== Navigate the Map ==== | ==== Navigate the Map ==== | ||
| - | Now you can display and navigate your map. Pan by dragging the map, zoom in by double-clicking, track zoom in by drawing a rectangle with your left mouse button mouse while holding the shift key, or zoom in and out with the mouse wheel. Very powerful for just couple lines of code, isn't it? | + | With the above code, you can both display a map and navigate it. You can pan by dragging the map, zoom in by double-clicking, track zoom in by drawing a rectangle with your left mouse button mouse while holding the shift key, or zoom in and out by using the mouse wheel. Very powerful for just couple lines of code, isn't it? |
| - | That was an easy start! Now let's add a second Shapefile to the sample, so we'll have a total of two layers: | + | 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") | ||
| Line 274: | Line 278: | ||
| 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. | + | // 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")); | ||
| Proj4Projection proj4 = new Proj4Projection(); | Proj4Projection proj4 = new Proj4Projection(); | ||
| Line 344: | Line 348: | ||
| ===== How to Use TextStyle ===== | ===== 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}} | {{webapiedition:QSG_WebEdition2_Img11.jpg}} | ||
| Line 450: | Line 454: | ||
| {{mapsuite10:webapi:webapi-text.png}} | {{mapsuite10:webapi:webapi-text.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> | <code csharp> | ||
| Line 551: | Line 555: | ||
| {{mapsuite10:webapi:webapi-pointtext.png}} | {{mapsuite10:webapi:webapi-pointtext.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:webapi-pointchange.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 ===== | ===== Perform an AJAX HTTP request to the Action of the Controller ===== | ||
| Line 703: | Line 707: | ||
| \\ | \\ | ||
| //Figure 15. Map with cities layer shown.// | //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 ===== | ===== 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: | 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: | ||
map_suite_web_for_webapi_quick_start_guide.txt · Last modified: 2017/03/15 07:15 by tgwikiupdate