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/08/28 10:23] admin [Querying Data] |
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 70: | Line 71: | ||
| In creating our "Hello World" sample application, our first step is to set a reference to the Map Suite Core and Map Suite MVC Edition 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 MVC Edition 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 asp> |
| @using ThinkGeo.MapSuite.MvcEdition | @using ThinkGeo.MapSuite.MvcEdition | ||
| @using ThinkGeo.MapSuite.Core | @using ThinkGeo.MapSuite.Core | ||
| Line 77: | Line 78: | ||
| Then, just add the following code to Index.cshtml: | Then, just add the following code to Index.cshtml: | ||
| - | <code lang="asp"> | + | <code asp> |
| <div> | <div> | ||
| @{ | @{ | ||
| 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 355: | Line 356: | ||
| We have introduced the basics of using Map Suite MVC Edition's mobile-friendly UI and a way of adding this functionality into your own applications. Let's recap what we have learned about the object relationships and how the pieces of Map Suite work together: | We have introduced the basics of using Map Suite MVC Edition's mobile-friendly UI and a way of adding this functionality into your own applications. Let's recap what we have learned about the object relationships and how the pieces of Map Suite work together: | ||
| - | #It is of the utmost importance that the units of measurement (feet, meters, decimal degrees, etc.) be set properly for the map, based on the requirements of your data. | + | -It is of the utmost importance that the units of measurement (feet, meters, decimal degrees, etc.) be set properly for the map, based on the requirements of your data. |
| - | #A Map is the basic class that contains all of the other objects that are used to define how the map will be rendered. | + | -A Map is the basic class that contains all of the other objects that are used to define how the map will be rendered. |
| - | #A Map has one-to-many Overlays. An Overlay contains one-to-many Layers. A Layer contains the data (from Shape files or other data source) for drawing. | + | -A Map has one-to-many Overlays. An Overlay contains one-to-many Layers. A Layer contains the data (from Shape files or other data source) for drawing. |
| - | #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.1440757434.txt.gz · Last modified: 2015/08/28 10:23 by admin