map_suite_mvc_edition_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 | ||
|
map_suite_mvc_edition_quick_start_guide [2015/08/28 09:17] admin [Summary] |
map_suite_mvc_edition_quick_start_guide [2017/03/17 05:03] (current) tgwikiupdate |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ====== Map Suite MVC Edition Quick Start Guide ====== | ====== Map Suite MVC Edition Quick Start Guide ====== | ||
| - | >><div> | + | {{section>upgrade_map_suite_to_10.0}} |
| + | |||
| + | <div msgbox> | ||
| The Map Suite MVC 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 MVC Edition 9.0.0.0 and higher, and will show you how to create an ASP.NET MVC application using Map Suite MVC Edition. | The Map Suite MVC 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 MVC Edition 9.0.0.0 and higher, and will show you how to create an ASP.NET MVC application using Map Suite MVC Edition. | ||
| \\ | \\ | ||
| Line 17: | Line 19: | ||
| ===== Download the Sample ===== | ===== Download the Sample ===== | ||
| - | <faicon fa fa-download> [[:File:HelloWorld MVC.zip|Download Sample Code From This Exercise]] //(4.18 MB)// | + | <faicon fa fa-download fa-lg> {{filehistory:HelloWorld MVC.zip|Download Sample Code From This Exercise}} //(4.18 MB)// |
| ===== Setting up the Environment ===== | ===== Setting up the Environment ===== | ||
| Line 30: | Line 32: | ||
| {{mvcedition:QSG_MVCEdition2_Img02.jpg}} | {{mvcedition:QSG_MVCEdition2_Img02.jpg}} | ||
| - | {{mvcedition:MVCEdition2 Img021.jpg|Figure 1. Creating a new project in Visual Studio.NET 2010 IDE.}} | + | {{mvcedition:MVCEdition2 Img021.jpg}} |
| + | \\ | ||
| + | //Figure 1. Creating a new project in Visual Studio.NET 2010 IDE.// | ||
| ===== Adding Map Suite MVC Edition to your MVC Application ===== | ===== Adding Map Suite MVC Edition to your MVC Application ===== | ||
| - | We need to add two Map Suite files, "MvcEdition.dll" and "MapSuiteCore.dll", to the reference. Right-click on "References" in Solution Explorer and select "Add Reference...", navigate to the <kbd>C:\Program Files (x86)\ThinkGeo\Map Suite 9.0\Map Suite MVC\Current Version\Managed Assemblies folder and select both "MvcEdition.dll" and "MapSuiteCore.dll". | + | We need to add two Map Suite files, "MvcEdition.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 MVC\Current Version\Managed Assemblies// folder and select both "MvcEdition.dll" and "MapSuiteCore.dll". |
| **Note: Although it is not a ThinkGeo assembly, you also need to add "WindowsBase.dll" to the references. WindowsBase can be found on the .NET tab of the Add Reference dialog. If you don't do this, you will get the following error when you compile the project:** | **Note: Although it is not a ThinkGeo assembly, you also need to add "WindowsBase.dll" to the references. WindowsBase can be found on the .NET tab of the Add Reference dialog. If you don't do this, you will get the following error when you compile the project:** | ||
| Line 59: | Line 63: | ||
| In creating our "Hello World" sample application, our first step is to set a reference to the Map Suite Core and Map Suite MvcEdition workspaces at the very top of the View page, as we will use many classes within both of these. We do this so that we do not have to use the fully qualified name of the Map Suite classes throughout our code. Set the reference like this: | In creating our "Hello World" sample application, our first step is to set a reference to the Map Suite Core and Map Suite MvcEdition workspaces at the very top of the View page, as we will use many classes within both of these. We do this so that we do not have to use the fully qualified name of the Map Suite classes throughout our code. Set the reference like this: | ||
| - | <code lang="asp"> | + | <code csharp> |
| @using ThinkGeo.MapSuite.MvcEdition | @using ThinkGeo.MapSuite.MvcEdition | ||
| @using ThinkGeo.MapSuite.Core | @using ThinkGeo.MapSuite.Core | ||
| Line 66: | Line 70: | ||
| Then, just add the following code to Index.cshtml: | Then, just add the following code to Index.cshtml: | ||
| - | <code lang="asp"> | + | <code asp.net> |
| <div> | <div> | ||
| @{ | @{ | ||
| Line 80: | Line 84: | ||
| Then, add the following xml block into the web.config file. | Then, add the following xml block into the web.config file. | ||
| - | <code lang="xml"> | + | <code xml> |
| <runtime> | <runtime> | ||
| <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1"> | <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1"> | ||
| Line 126: | Line 130: | ||
| PresetZoomLevels has a very useful property called ''ZoomLevel.ApplyUntilZoomLevel'', which you can very 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, we can simply code as follows: | PresetZoomLevels has a very useful property called ''ZoomLevel.ApplyUntilZoomLevel'', which you can very 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, we can simply code as follows: | ||
| - | <code 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; | ||
| Line 141: | Line 145: | ||
| Our next step is to define and add our Shapefile layers to the map. All of our sample code is placed in the view page "Index.cshtml". | Our next step is to define and add our Shapefile layers to the map. All of our sample code is placed in the view page "Index.cshtml". | ||
| - | <code lang="csharp"> | + | <code asp.net> |
| @{Html.ThinkGeo().Map("Map1", 600, 500) | @{Html.ThinkGeo().Map("Map1", 600, 500) | ||
| .MapBackground(new BackgroundLayer(new GeoSolidBrush(GeoColor.FromHtml("#E5E3DF")))) | .MapBackground(new BackgroundLayer(new GeoSolidBrush(GeoColor.FromHtml("#E5E3DF")))) | ||
| Line 166: | Line 170: | ||
| If you compile and run what you have now, your map should look like the screenshot below. (See Figure 4). | If you compile and run what you have now, your map should look like the screenshot below. (See Figure 4). | ||
| - | {{mvcedition:QSG_MVCEdition2_Img09.jpg|Figure 4. A simple map of World.}} | + | {{mvcedition:QSG_MVCEdition2_Img09.jpg}} |
| + | \\ | ||
| + | //Figure 4. A simple map of World.// | ||
| So what has occurred here? We have created a layer and added it to the Map, and the Map has rendered it according to its default style parameters. Also, we have used ZoomLevel to display the map the way we want. | So what has occurred here? We have created a layer and added it to the Map, and the Map has rendered it according to its default style parameters. Also, we have used ZoomLevel to display the map the way we want. | ||
| Line 181: | Line 187: | ||
| Change the code in your View page following the example below. You don't need to make any changes to the controller. | Change the code in your View page following the example below. You don't need to make any changes to the controller. | ||
| - | <code lang="csharp"> | + | <code asp.net> |
| @{Html.ThinkGeo().Map("Map1", 600, 500) | @{Html.ThinkGeo().Map("Map1", 600, 500) | ||
| .MapBackground(new BackgroundLayer(new GeoSolidBrush(GeoColor.FromHtml("#E5E3DF")))) | .MapBackground(new BackgroundLayer(new GeoSolidBrush(GeoColor.FromHtml("#E5E3DF")))) | ||
| Line 207: | Line 213: | ||
| The result is as follows (Figure 5): | The result is as follows (Figure 5): | ||
| - | {{mvcedition:QSG_MVCEdition2_Img10.jpg|Figure 5. Europe map with 2 layers.}} | + | {{mvcedition:QSG_MVCEdition2_Img10.jpg}} |
| + | \\ | ||
| + | //Figure 5. Europe map with 2 layers.// | ||
| ==== How to Use the TextStyle ==== | ==== How to Use the TextStyle ==== | ||
| Line 255: | Line 263: | ||
| The result is as follows (Figure 6): | The result is as follows (Figure 6): | ||
| - | {{mvcedition:QSG_MVCEdition2_Img12.jpg|Figure 6. Europe map with TextStyle.}} | + | {{mvcedition:QSG_MVCEdition2_Img12.jpg}} |
| + | \\ | ||
| + | //Figure 6. Europe map with TextStyle.// | ||
| Now that we know how to render text and render symbols, let's define two different ZoomLevels in one single layer, and create our own custom Style and TextStyle. | Now that we know how to render text and render symbols, let's define two different ZoomLevels in one single layer, and create our own custom Style and TextStyle. | ||
| Line 309: | Line 319: | ||
| Can you imagine what the map will look like now? Figure 7 below is the result. At first it looks the same as it did in Figure 6. Now zoom in, and watch the map change to resemble Figure 8 as you do. | Can you imagine what the map will look like now? Figure 7 below is the result. At first it looks the same as it did in Figure 6. Now zoom in, and watch the map change to resemble Figure 8 as you do. | ||
| - | {{mvcedition:QSG_MVCEdition2_Img13.jpg|Figure 7. European cities with two ZoomLevels, before zooming in.}} | + | {{mvcedition:QSG_MVCEdition2_Img13.jpg}} |
| + | \\ | ||
| + | //Figure 7. European cities with two ZoomLevels, before zooming in.// | ||
| - | {{mvcedition:QSG_MVCEdition2_Img14.jpg|Figure 8. European cities with two ZoomLevels, after zooming in.}} | + | {{mvcedition:QSG_MVCEdition2_Img14.jpg}} |
| + | \\ | ||
| + | //Figure 8. European cities 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 319: | Line 333: | ||
| ====Client APIs used==== | ====Client APIs used==== | ||
| - | <code lang="asp"> | + | <code javascript> |
| ajaxCallAction: function (controller, action, params, callback) | ajaxCallAction: function (controller, action, params, callback) | ||
| </code> | </code> | ||
| Line 336: | Line 350: | ||
| The code in your View page should look like this: | The code in your View page should look like this: | ||
| - | <code lang="asp"> | + | <code javascript> |
| [JavaScript] | [JavaScript] | ||
| function UpdateDynamicOverlay(layerName) { | function UpdateDynamicOverlay(layerName) { | ||
| Line 371: | Line 385: | ||
| Now copy and paste the code below about the accessed action into your "HomeController" page: | Now copy and paste the code below about the accessed action into your "HomeController" page: | ||
| - | <code lang="csharp"> | + | <code csharp> |
| // Here we set the MapActionFilterAttribute, for which two input parameters are required. | // Here we set the MapActionFilterAttribute, for which two input parameters are required. | ||
| [MapActionFilter] | [MapActionFilter] | ||
| Line 419: | Line 433: | ||
| -A layer can have one-to-many ZoomLevels. ZoomLevels help to define ranges of when a layer should be shown or hidden. | -A layer can have one-to-many ZoomLevels. ZoomLevels help to define ranges of when a layer should be shown or hidden. | ||
| -Compared to Map Suite Web Edition, MVC Edition provides many more client APIs which are used to operate the map and easily communicate with the server side. | -Compared to Map Suite Web Edition, MVC Edition provides many more client APIs which are used to operate the map and easily communicate with the server side. | ||
| - | |||
| - | <br> | ||
| - | [[:File:HelloWorld MVC.zip|Download Sample Code From This Exercise]] //(12.4 MB)// | ||
| + | <faicon fa fa-download fa-lg> {{filehistory:HelloWorld MVC.zip|Download Sample Code From This Exercise}} //(12.4 MB)// | ||
map_suite_mvc_edition_quick_start_guide.1440753441.txt.gz · Last modified: 2015/08/28 09:17 by admin