map_suite_mobile_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_mobile_quick_start_guide [2015/09/01 03:31] admin [Display a Simple map] |
map_suite_mobile_quick_start_guide [2017/03/17 05:03] (current) tgwikiupdate |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ====== Map Suite Mobile Quick Start Guide ====== | ====== Map Suite Mobile Quick Start Guide ====== | ||
| + | {{section>upgrade_map_suite_to_10.0}} | ||
| <div msgbox>The Map Suite MVC Mobile-Based QuickStart Guide will guide you through the process of creating a sample application and will help you become familiar with using Map Suite to create mobile-friendly applications. This edition of the QuickStart Guide supports Map Suite MVC Edition 6.0 and higher, and will show you how to create a mobile-centric ASP.NET MVC application.</div> | <div msgbox>The Map Suite MVC Mobile-Based QuickStart Guide will guide you through the process of creating a sample application and will help you become familiar with using Map Suite to create mobile-friendly applications. This edition of the QuickStart Guide supports Map Suite MVC Edition 6.0 and higher, and will show you how to create a mobile-centric ASP.NET MVC application.</div> | ||
| Line 12: | Line 13: | ||
| ===== Download the Sample ===== | ===== Download the Sample ===== | ||
| - | <faicon fa fa-download> [[:File:HelloWorld Mobile.zip|Download Sample Code From This Exercise]] //(5.04 MB)// | + | <faicon fa fa-download fa-lg> {{filehistory:HelloWorld Mobile.zip|Download Sample Code From This Exercise}} //(5.04 MB)// |
| ===== Setting up the Environment ===== | ===== Setting up the Environment ===== | ||
| Line 103: | Line 104: | ||
| In Header.cshtml, add the following code: | In Header.cshtml, add the following code: | ||
| - | <code lang="asp"> | + | <code asp> |
| <div data-role="header"> | <div data-role="header"> | ||
| <h1> | <h1> | ||
| Line 113: | Line 114: | ||
| We can add a Footer in same way. Create a cshtml file called Footer.cshtml in the ///Views/Shared// folder and add the code below: | We can add a Footer in same way. Create a cshtml file called Footer.cshtml in the ///Views/Shared// folder and add the code below: | ||
| - | <code lang="asp"> | + | <code asp> |
| <div data-role="footer"> | <div data-role="footer"> | ||
| </div> | </div> | ||
| - | </code > | + | </code> |
| Now, we need to change the code in _Layout.cshtml to match the following: | Now, we need to change the code in _Layout.cshtml to match the following: | ||
| - | <code lang="asp"> | + | <code asp> |
| <div data-role="page" data-theme="b"> | <div data-role="page" data-theme="b"> | ||
| @Html.Partial("Header") | @Html.Partial("Header") | ||
| Line 137: | Line 138: | ||
| 1. Change the view page code as follows: | 1. Change the view page code as follows: | ||
| - | <code lang="asp"> | + | <code asp> |
| <div data-role="content"> | <div data-role="content"> | ||
| @{ | @{ | ||
| Line 156: | Line 157: | ||
| 2. In order for the jQuery Mobile framework to change the size of the container automatically, we need to add a client page load event to resize the map and make sure it can fully fill the content DIV. In _Layout.cshtml, add the following function: | 2. In order for the jQuery Mobile framework to change the size of the container automatically, we need to add a client page load event to resize the map and make sure it can fully fill the content DIV. In _Layout.cshtml, add the following function: | ||
| - | <code lang="javascript"> | + | <code javascript> |
| function addLoadEvent(func) { | function addLoadEvent(func) { | ||
| var oldonload = window.onload; | var oldonload = window.onload; | ||
| Line 173: | Line 174: | ||
| In the view page itself, we add the following JavaScript: | In the view page itself, we add the following JavaScript: | ||
| - | <code lang="javascript"> | + | <code javascript> |
| addLoadEvent(function () { | addLoadEvent(function () { | ||
| Map1.updateSize(); | Map1.updateSize(); | ||
| Line 181: | Line 182: | ||
| 3. You may notice that the content DIV might exceed the available screen area once we have applied the Header and Footer view to the application. To resolve this, try adding the code below to _Layout.cshtml: | 3. You may notice that the content DIV might exceed the available screen area once we have applied the Header and Footer view to the application. To resolve this, try adding the code below to _Layout.cshtml: | ||
| - | <code lang="javascript"> | + | <code javascript> |
| $(document).ready(function () { | $(document).ready(function () { | ||
| // fix height of content to allow for header & footer | // fix height of content to allow for header & footer | ||
| Line 202: | Line 203: | ||
| And then apply the following CSS (Cascading Style Sheet) script to the page: | And then apply the following CSS (Cascading Style Sheet) script to the page: | ||
| - | <code lang="css"> | + | <code css> |
| <style type="text/css"> | <style type="text/css"> | ||
| .ui-content | .ui-content | ||
| Line 221: | Line 222: | ||
| For this example, we need to change the code in the view page as follows: | For this example, we need to change the code in the view page as follows: | ||
| - | <code lang="csharp"> | + | <code csharp> |
| @{ | @{ | ||
| Html.ThinkGeo().Map("Map1", new System.Web.UI.WebControls.Unit(100, System.Web.UI.WebControls.UnitType.Percentage), | Html.ThinkGeo().Map("Map1", new System.Web.UI.WebControls.Unit(100, System.Web.UI.WebControls.UnitType.Percentage), | ||
| Line 263: | Line 264: | ||
| Now we will show you how to perform a spatial query with a specified shapefile. For this example, we will use the Shapefile **cities_a.shp**, which can be found in the //\App_Data// folder of this guide's downloadable sample project.) | Now we will show you how to perform a spatial query with a specified shapefile. For this example, we will use the Shapefile **cities_a.shp**, which can be found in the //\App_Data// folder of this guide's downloadable sample project.) | ||
| - | <faicon fa fa-download> [[:File:HelloWorld Mobile.zip|Download Sample Code From This Exercise]] //(5.04 MB)// | + | <faicon fa fa-download> {{filehistory:HelloWorld Mobile.zip|Download Sample Code From This Exercise}} //(5.04 MB)// |
| {{mvcedition:Mobile_Img13.jpg}} | {{mvcedition:Mobile_Img13.jpg}} | ||
| Line 271: | Line 272: | ||
| 1. We add a method named ''GetPlaces'' to HomeController, which will return a RectangleShape type result. You'll want to use the code below: | 1. We add a method named ''GetPlaces'' to HomeController, which will return a RectangleShape type result. You'll want to use the code below: | ||
| - | <code lang="csharp"> | + | <code csharp> |
| [MapActionFilter] | [MapActionFilter] | ||
| public RectangleShape GetPlaces(Map map, GeoCollection<object> args) | public RectangleShape GetPlaces(Map map, GeoCollection<object> args) | ||
| Line 327: | Line 328: | ||
| 2. Add a client side function "findPlaces" | 2. Add a client side function "findPlaces" | ||
| - | <code lang="asp"> | + | <code asp> |
| function findPlaces(value, markerImagesIndex) { | function findPlaces(value, markerImagesIndex) { | ||
| if (value == //) { | if (value == //) { | ||
| Line 360: | Line 361: | ||
| -MVC Edition provides many client APIs which can operate the map and easily communicate with the server side. | -MVC Edition provides many client APIs which can operate the map and easily communicate with the server side. | ||
| -To display a map that is optimized for mobile devices with the jQuery Mobile Framework (or another mobile UI framework of your preference), we need to control the layout when the page is loaded and resize the map accordingly. | -To display a map that is optimized for mobile devices with the jQuery Mobile Framework (or another mobile UI framework of your preference), we need to control the layout when the page is loaded and resize the map accordingly. | ||
| - | |||
map_suite_mobile_quick_start_guide.1441078271.txt.gz · Last modified: 2015/09/01 03:31 by admin