User Tools

Site Tools

Trace: • map_suite_world_map_kit_online_quick_start_guide
map_suite_mobile_quick_start_guide

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
map_suite_mobile_quick_start_guide [2015/08/28 10:10]
admin [Setting up the Environment] 		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 49: Line 50:
 You will also need to add WindowsBase.dll to the reference; it 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: "//The type '​System.Collections.Specialized.INotifyCollectionChanged'​ is defined in an assembly that is not referenced. You must add a reference to assembly '​WindowsBase,​ Version=3.0.0.0,​ Culture=neutral,​ PublicKeyToken=31bf3856ad364e35'​.//"​ You will also need to add WindowsBase.dll to the reference; it 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: "//The type '​System.Collections.Specialized.INotifyCollectionChanged'​ is defined in an assembly that is not referenced. You must add a reference to assembly '​WindowsBase,​ Version=3.0.0.0,​ Culture=neutral,​ PublicKeyToken=31bf3856ad364e35'​.//"​
  
-{{Figure|QSG MVCEdition2 Img06.jpg}}+{{mvcedition:QSG MVCEdition2 Img06.jpg}}
  
 Now that we have the required DLLs referenced, we are ready to add the code needed to display a map. Now that we have the required DLLs referenced, we are ready to add the code needed to display a map.
Line 56: Line 57:
 In Solution Explorer, right-click on the "​Controller"​ folder, then navigate to "​Add"​ and select "​Controller..."​ to add a new controller page named "​HomeController"​. It should look like the screenshot below: In Solution Explorer, right-click on the "​Controller"​ folder, then navigate to "​Add"​ and select "​Controller..."​ to add a new controller page named "​HomeController"​. It should look like the screenshot below:
  
-{{Figure|Mobile_Img07.jpg}}+{{mvcedition:Mobile_Img07.jpg}}
  
-Now move your mouse pointer over the code <​code>​return View()</​code> ​and right-click to add the responding view page. Keep all of the default settings as shown below:+Now move your mouse pointer over the code ''​return View()'' ​and right-click to add the responding view page. Keep all of the default settings as shown below:
  
-{{Figure|Mobile_Img08.jpg}}+{{mvcedition:Mobile_Img08.jpg}}
  
 ===== Map Suite "Hello World" Mobile Sample ===== ===== Map Suite "Hello World" Mobile Sample =====
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:
  
-<source lang="asp">+<code asp>
 @using ThinkGeo.MapSuite.MvcEdition @using ThinkGeo.MapSuite.MvcEdition
 @using ThinkGeo.MapSuite.Core @using ThinkGeo.MapSuite.Core
-</source>+</code>
  
 Then, just add the following code to Index.cshtml:​ Then, just add the following code to Index.cshtml:​
  
-<source lang="asp">+<code asp>
 <div> <div>
     @{     @{
Line 88: Line 89:
     }     }
 </​div>​ </​div>​
-</source>+</code>
  
 If you run your project now and view it on a mobile device, such as an Apple iPad&​reg;,​ you will see it looks like this: If you run your project now and view it on a mobile device, such as an Apple iPad&​reg;,​ you will see it looks like this:
  
-{{Figure|Mobile_Img09.jpg}}+{{mvcedition:Mobile_Img09.jpg}}
  
 ==== Mobile UI ==== ==== Mobile UI ====
Line 99: Line 100:
 Let's begin by adding a new cshtml file named Header.cshtml in the project'​s ///​Views/​Shared//​ folder. Let's begin by adding a new cshtml file named Header.cshtml in the project'​s ///​Views/​Shared//​ folder.
  
-{{Figure|Mobile_Img10.jpg}}+{{mvcedition:Mobile_Img10.jpg}}
  
 In Header.cshtml,​ add the following code: In Header.cshtml,​ add the following code:
  
-<source lang="asp">+<code asp>
 <div data-role="​header">​ <div data-role="​header">​
     <h1>     <h1>
Line 109: Line 110:
     </h1>     </h1>
 </​div>​ </​div>​
-</source>+</code>
  
 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:
  
-<source lang="asp">+<code asp>
 <div data-role="​footer"> ​   ​ <div data-role="​footer"> ​   ​
 </​div>​ </​div>​
-</source>+</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:
  
-<source 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 126: Line 127:
     @Html.Partial("​Footer"​)     @Html.Partial("​Footer"​)
  </​div>​  </​div>​
-</source>+</code>
  
 Run your application again. ​ Now the result looks like this: Run your application again. ​ Now the result looks like this:
  
-{{Figure|Mobile_Img11.jpg}}+{{mvcedition:Mobile_Img11.jpg}}
  
 === Fitting the UI to the Screen === === Fitting the UI to the Screen ===
Line 137: Line 138:
 1. Change the view page code as follows: 1. Change the view page code as follows:
  
-<source lang="asp">+<code asp>
 <​div ​ data-role="​content">​ <​div ​ data-role="​content">​
  @{  @{
Line 150: Line 151:
  }  }
 <div> <div>
-</source>+</code>
  
 The code above sets the width and height of the map to 100%, and also adds the data-role "​content"​ to the container. The code above sets the width and height of the map to 100%, and also adds the data-role "​content"​ to the container.
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:
  
-<source lang="javascript">+<code javascript>​
 function addLoadEvent(func) { function addLoadEvent(func) {
        var oldonload = window.onload;​        var oldonload = window.onload;​
Line 169: Line 170:
     }     }
 } }
-</source>+</code>
  
 In the view page itself, we add the following JavaScript: In the view page itself, we add the following JavaScript:
  
-<source lang="javascript">+<code javascript>​
 addLoadEvent(function () { addLoadEvent(function () {
     Map1.updateSize();​     Map1.updateSize();​
 }); });
-</source>+</code>
  
 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:​
  
-<source lang="javascript">+<code javascript>​
 $(document).ready(function () { $(document).ready(function () {
-          ​<​nowiki>​//</​nowiki> ​fix height of content to allow for header & footer+          // fix height of content to allow for header & footer
           function fixContentHeight() {           function fixContentHeight() {
               var header = $("​div[[data-role='​header'​]]:​visible"​);​               var header = $("​div[[data-role='​header'​]]:​visible"​);​
Line 198: Line 199:
               fixContentHeight();​               fixContentHeight();​
 }); });
-</source>+</code>
  
 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:
  
-<source lang="css">+<code css>
 <style type="​text/​css">​ <style type="​text/​css">​
   .ui-content   .ui-content
Line 214: Line 215:
   }   }
 </​style>​ </​style>​
-</source>+</code>
  
 ==== Display Your Own Data on the Map ==== ==== Display Your Own Data on the Map ====
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:
  
-<source 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 248: Line 249:
         .Render();         .Render();
 } }
-</source>+</code>
  
 Once you do that, you will see the following result: Once you do that, you will see the following result:
  
-{{Figure|Mobile_Img12.jpg}}+{{mvcedition:Mobile_Img12.jpg}}
  
 You can see that the map extent has been updated to focus in on the United States. You can see that the map extent has been updated to focus in on the United States.
  
-**NOTE**: In this code, we are using <​code>​WorldMapKitWmsWindowsPhoneOverlay</​code> ​as the base map, which renders map data from ThinkGeo'​s mobile-optimized World Map Kit WMS service. ​ As an alternative,​ you can choose to use Bing Maps, Google Maps or OpenStreetMap as well.+**NOTE**: In this code, we are using ''​WorldMapKitWmsWindowsPhoneOverlay'' ​as the base map, which renders map data from ThinkGeo'​s mobile-optimized World Map Kit WMS service. ​ As an alternative,​ you can choose to use Bing Maps, Google Maps or OpenStreetMap as well.
  
-Because we are using the <​code>​WorldMapKitWmsWebOverlay</​code> ​in our sample, it was necessary that we set the projection to <​code>​WorldMapKitProjection.SphericalMercator</​code>​. It also is important that the <​code>​MapUnit</​code> ​property of the <​code>​Map</​code> ​object be set to <​code>​GeographyUnit.Meter</​code>​. This is because Shapefiles only store binary vector coordinates,​ which can be in decimal degrees, feet, meters, or numerous other unit systems, and our map has no way to know what the Shapefile'​s unit of measurement is until we tell it. The correct unit to use is typically found somewhere in the Shapefile'​s documentation or within its supplemental data file as discussed in the Map Suite MVC Edition Quick Start Guide'​s [[Map Suite MVC Edition Quick Start Guide#​Shapefiles|Shapefiles section]].+Because we are using the ''​WorldMapKitWmsWebOverlay'' ​in our sample, it was necessary that we set the projection to ''​WorldMapKitProjection.SphericalMercator''​. It also is important that the ''​MapUnit'' ​property of the ''​Map'' ​object be set to ''​GeographyUnit.Meter''​. This is because Shapefiles only store binary vector coordinates,​ which can be in decimal degrees, feet, meters, or numerous other unit systems, and our map has no way to know what the Shapefile'​s unit of measurement is until we tell it. The correct unit to use is typically found somewhere in the Shapefile'​s documentation or within its supplemental data file as discussed in the Map Suite MVC Edition Quick Start Guide'​s [[Map Suite MVC Edition Quick Start Guide#​Shapefiles|Shapefiles section]].
  
 ==== Querying Data ==== ==== Querying Data ====
-Now we will show you how to perform a spatial query with a specified shapefile. For this example, we will use the Shapefile ​<tt>cities_a.shp</tt>, 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.)
  
-{{Filelink}}[[:​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)//
  
-{{Figure|Mobile_Img13.jpg}}+{{mvcedition:Mobile_Img13.jpg}}
  
-To make this work, we use <​code>​ajaxCallAction</​code> ​in the view page to call the controller method. ​ Let's do this step by step:+To make this work, we use ''​ajaxCallAction'' ​in the view page to call the controller method. ​ Let's do this step by step:
  
-1. We add a method named <​code>​GetPlaces</​code> ​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:
  
-<source lang="csharp"> +<code csharp>​ 
-[[MapActionFilter]]+[MapActionFilter]
 public RectangleShape GetPlaces(Map map, GeoCollection<​object>​ args) public RectangleShape GetPlaces(Map map, GeoCollection<​object>​ args)
 { {
Line 321: Line 322:
      ​return null;      ​return null;
  }  }
-</source>+</code>
  
-**Note**: We need to add a <​code>​MapActionFilter</​code> ​attribute to this method to modify the way the action is executed. e.g. Get the necessary parameters, like "​map",​ analyzed based on parameters passed from client side. +**Note**: We need to add a ''​MapActionFilter'' ​attribute to this method to modify the way the action is executed. e.g. Get the necessary parameters, like "​map",​ analyzed based on parameters passed from client side. 
  
 2. Add a client side function "​findPlaces"​ 2. Add a client side function "​findPlaces"​
  
-<source lang="asp">+<code asp>
 function findPlaces(value,​ markerImagesIndex) { function findPlaces(value,​ markerImagesIndex) {
         if (value == //) {         if (value == //) {
Line 344: Line 345:
         });         });
 } }
-</source>+</code>
  
-**Note**: ​ Map Suite MVC Edition provides a large number of client APIs that allow us to easily operate the map on the client side, just as we have done on the server side in the above example code. Here, you would use the <​code>​ajaxCallAction</​code> ​to call the <​code>​GetPlaces</​code> ​method that we just added.+**Note**: ​ Map Suite MVC Edition provides a large number of client APIs that allow us to easily operate the map on the client side, just as we have done on the server side in the above example code. Here, you would use the ''​ajaxCallAction'' ​to call the ''​GetPlaces'' ​method that we just added.
  
 Finally, we will have a project that looks like this on a mobile device or tablet: Finally, we will have a project that looks like this on a mobile device or tablet:
  
-{{Figure|Mobile_Img14.jpg}}+{{mvcedition:Mobile_Img14.jpg}}
  
 ===== Summary ===== ===== Summary =====
 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.1440756610.txt.gz · Last modified: 2015/08/28 10:10 by admin

Page Tools