This shows you the differences between two versions of the page.
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. | ||
Line 17: | Line 17: | ||
===== 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 ===== | ||
Line 54: | Line 54: | ||
//Figure 3. Adding Default.htm.// | //Figure 3. Adding Default.htm.// | ||
- | <source lang="asp"> | + | <code asp> |
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
Line 79: | 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: | ||
Line 119: | 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 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 WebAPI "Hello World" ==== | ==== Map Suite WebAPI "Hello World" ==== | ||
Line 148: | Line 148: | ||
Then add the following code to HelloWorldController: | Then add the following code to HelloWorldController: | ||
- | <source lang="csharp"> | + | <code csharp> |
using System.Drawing; | using System.Drawing; | ||
using System.Drawing.Imaging; | using System.Drawing.Imaging; | ||
Line 162: | Line 162: | ||
namespace HelloWorld.Controllers | namespace HelloWorld.Controllers | ||
{ | { | ||
- | [[RoutePrefix("HelloWorld")]] | + | [RoutePrefix("HelloWorld")] |
public class HelloWorldController : ApiController | 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) | public HttpResponseMessage GetTile(int z, int x, int y) | ||
{ | { | ||
Line 178: | Line 178: | ||
worldLayer.FeatureSource.Projection = proj4; | 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; | 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; | worldLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20; | ||
Line 209: | 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 217: | 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 lang="csharp"> | + | <code csharp> |
public static void Register(HttpConfiguration config) | public static void Register(HttpConfiguration config) | ||
{ | { | ||
- | <nowiki>//</nowiki> Web API routes | + | // Web API routes |
config.MapHttpAttributeRoutes(); | config.MapHttpAttributeRoutes(); | ||
Line 231: | 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 lang="csharp"> | + | <code csharp> |
L.tileLayer('/HelloWorld/Tile/{z}/{x}/{y}').addTo(map); | L.tileLayer('/HelloWorld/Tile/{z}/{x}/{y}').addTo(map); | ||
</source> | </source> | ||
Line 241: | Line 241: | ||
After adding, it will look like as following: | After adding, it will look like as following: | ||
- | <source lang="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); | ||
- | <nowiki>//</nowiki> 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']], | ||
Line 257: | 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). | ||
Line 274: | 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 lang="csharp"> | + | <code csharp> |
- | [[Route("tile/{z}/{x}/{y}")]] | + | [Route("tile/{z}/{x}/{y}")] |
[HttpGet] | [HttpGet] | ||
public HttpResponseMessage GetTile(int z, int x, int y) | 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")); | ShapeFileFeatureLayer worldLayer = new ShapeFileFeatureLayer(HttpContext.Current.Server.MapPath(@"~/App_Data/cntry02.shp")); | ||
ManagedProj4Projection proj4 = new ManagedProj4Projection(); | ManagedProj4Projection proj4 = new ManagedProj4Projection(); | ||
Line 288: | Line 288: | ||
worldLayer.FeatureSource.Projection = proj4; | 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; | 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; | worldLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20; | ||
- | <nowiki>//</nowiki> Capital layer | + | // Capital layer |
ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer(HttpContext.Current.Server.MapPath("~/App_Data/capital.shp")); | ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer(HttpContext.Current.Server.MapPath("~/App_Data/capital.shp")); | ||
capitalLayer.FeatureSource.Projection = proj4; | capitalLayer.FeatureSource.Projection = proj4; | ||
Line 322: | Line 323: | ||
} | } | ||
} | } | ||
- | </source> | + | </code> |
The result is as follows (Figure 8): | The result is as follows (Figure 8): | ||
Line 339: | Line 340: | ||
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 lang="csharp"> | + | <code csharp> |
- | [[Route("tile/{z}/{x}/{y}")]] | + | [Route("tile/{z}/{x}/{y}")] |
[HttpGet] | [HttpGet] | ||
public HttpResponseMessage GetTile(int z, int x, int y) | 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")); | ShapeFileFeatureLayer worldLayer = new ShapeFileFeatureLayer(HttpContext.Current.Server.MapPath(@"~/App_Data/cntry02.shp")); | ||
ManagedProj4Projection proj4 = new ManagedProj4Projection(); | ManagedProj4Projection proj4 = new ManagedProj4Projection(); | ||
Line 353: | Line 354: | ||
worldLayer.FeatureSource.Projection = proj4; | 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; | 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; | worldLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20; | ||
- | <nowiki>//</nowiki> Capital layer | + | // Capital layer |
ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer(HttpContext.Current.Server.MapPath("~/App_Data/capital.shp")); | ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer(HttpContext.Current.Server.MapPath("~/App_Data/capital.shp")); | ||
capitalLayer.FeatureSource.Projection = proj4; | capitalLayer.FeatureSource.Projection = proj4; | ||
Line 365: | Line 366: | ||
capitalLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20; | capitalLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20; | ||
- | <nowiki>//</nowiki> Label layer | + | // Label layer |
ShapeFileFeatureLayer capitalLabelLayer = new ShapeFileFeatureLayer(HttpContext.Current.Server.MapPath("~/App_Data/capital.shp")); | ShapeFileFeatureLayer capitalLabelLayer = new ShapeFileFeatureLayer(HttpContext.Current.Server.MapPath("~/App_Data/capital.shp")); | ||
capitalLabelLayer.FeatureSource.Projection = proj4; | 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.DefaultTextStyle = TextStyles.Capital3("CITY_NAME"); | ||
capitalLabelLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20; | 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; | capitalLabelLayer.DrawingMarginPercentage = 50; | ||
Line 398: | Line 399: | ||
} | } | ||
} | } | ||
- | </source> | + | </code> |
The result is as follows (Figure 10): | The result is as follows (Figure 10): | ||
Line 408: | Line 409: | ||
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 lang="csharp"> | + | <code csharp> |
- | [[Route("tile/{z}/{x}/{y}")]] | + | [Route("tile/{z}/{x}/{y}")] |
[HttpGet] | [HttpGet] | ||
public HttpResponseMessage GetTile(int z, int x, int y) | 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")); | ShapeFileFeatureLayer worldLayer = new ShapeFileFeatureLayer(HttpContext.Current.Server.MapPath(@"~/App_Data/cntry02.shp")); | ||
ManagedProj4Projection proj4 = new ManagedProj4Projection(); | ManagedProj4Projection proj4 = new ManagedProj4Projection(); | ||
Line 422: | Line 423: | ||
worldLayer.FeatureSource.Projection = proj4; | 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; | 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; | worldLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20; | ||
- | <nowiki>//</nowiki> Capital layer | + | // Capital layer |
ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer(HttpContext.Current.Server.MapPath("~/App_Data/capital.shp")); | ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer(HttpContext.Current.Server.MapPath("~/App_Data/capital.shp")); | ||
capitalLayer.FeatureSource.Projection = proj4; | 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); | 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.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level05; | ||
capitalLayer.ZoomLevelSet.ZoomLevel06.DefaultPointStyle = PointStyles.Capital3; | 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; | capitalLayer.ZoomLevelSet.ZoomLevel06.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20; | ||
- | <nowiki>//</nowiki> Label layer | + | // Label layer |
ShapeFileFeatureLayer capitalLabelLayer = new ShapeFileFeatureLayer(HttpContext.Current.Server.MapPath("~/App_Data/capital.shp")); | ShapeFileFeatureLayer capitalLabelLayer = new ShapeFileFeatureLayer(HttpContext.Current.Server.MapPath("~/App_Data/capital.shp")); | ||
capitalLabelLayer.FeatureSource.Projection = proj4; | 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); | 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.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 applied from ZoomLevel06 to ZoomLevel20. | + | // The TextStyle we set here is applied from ZoomLevel06 to ZoomLevel20. |
capitalLabelLayer.ZoomLevelSet.ZoomLevel06.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20; | 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; | capitalLabelLayer.DrawingMarginPercentage = 50; | ||
Line 477: | 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. | ||
Line 498: | Line 499: | ||
The code in your client side should look like this: | The code in your client side should look like this: | ||
- | <source lang="asp"> | + | <code asp> |
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
Line 520: | Line 521: | ||
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); | ||
- | <nowiki>//</nowiki> 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']], | ||
Line 539: | 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 lang="csharp"> | + | <code csharp> |
- | [[Route("tile/{layerId}/{z}/{x}/{y}")]] | + | [Route("tile/{layerId}/{z}/{x}/{y}")] |
[HttpGet] | [HttpGet] | ||
public HttpResponseMessage GetTile(string layerId, int z, int x, int y) | public HttpResponseMessage GetTile(string layerId, int z, int x, int y) | ||
Line 557: | Line 558: | ||
if (layerId.ToLowerInvariant() == "usstates") | if (layerId.ToLowerInvariant() == "usstates") | ||
{ | { | ||
- | <nowiki>//</nowiki> States layer | + | // States layer |
ShapeFileFeatureLayer statesLayer = new ShapeFileFeatureLayer(HttpContext.Current.Server.MapPath("~/App_Data/USStates.shp")); | ShapeFileFeatureLayer statesLayer = new ShapeFileFeatureLayer(HttpContext.Current.Server.MapPath("~/App_Data/USStates.shp")); | ||
statesLayer.FeatureSource.Projection = proj4; | statesLayer.FeatureSource.Projection = proj4; | ||
Line 567: | Line 568: | ||
else if (layerId.ToLowerInvariant() == "uscities") | else if (layerId.ToLowerInvariant() == "uscities") | ||
{ | { | ||
- | <nowiki>//</nowiki> Cities layer | + | // Cities layer |
ShapeFileFeatureLayer countyLayer = new ShapeFileFeatureLayer(HttpContext.Current.Server.MapPath("~/App_Data/cities_a.shp")); | ShapeFileFeatureLayer countyLayer = new ShapeFileFeatureLayer(HttpContext.Current.Server.MapPath("~/App_Data/cities_a.shp")); | ||
countyLayer.FeatureSource.Projection = proj4; | countyLayer.FeatureSource.Projection = proj4; | ||
Line 594: | 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: | ||
Line 620: | 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)// |