map_suite_xamarin_forms_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_xamarin_forms_quick_start_guide [2015/09/09 10:02] admin [iOS Platform references and initialization] |
map_suite_xamarin_forms_quick_start_guide [2017/03/17 02:21] (current) tgwikiupdate |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== Map_Suite_Xamarin_Forms_Quick_Start_Guide ====== | + | ====== Map Suite Xamarin Forms Quick Start Guide ====== |
| + | |||
| + | {{section>upgrade_map_suite_to_10.0}} | ||
| <div msgbox>The Map Suite Xamarin.Forms 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 9.0.0.0 and higher, and will show you how to create an Mobile application using Xamarin.Forms for Map Suite iOS or Android Editions. | <div msgbox>The Map Suite Xamarin.Forms 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 9.0.0.0 and higher, and will show you how to create an Mobile application using Xamarin.Forms for Map Suite iOS or Android Editions. | ||
| Line 13: | Line 15: | ||
| ===== Download the Sample ===== | ===== Download the Sample ===== | ||
| - | <faicon fa fa-download fa-lg> [[:File:HelloWorld iOS.zip|Download Sample Code From This Exercise]] //(1.5 MB)// | + | <faicon fa fa-download fa-lg> {{filehistory:HelloWorld iOS.zip|Download Sample Code From This Exercise}} //(1.5 MB)// |
| ===== Setting up the Environment ===== | ===== Setting up the Environment ===== | ||
| Line 20: | Line 22: | ||
| Let's start by creating a new Forms blank app in Microsoft Visual Studio (2012 or newer) named HelloWorld (see Figure 1). We can create the project with .NET Framework 4.5 or higher. | Let's start by creating a new Forms blank app in Microsoft Visual Studio (2012 or newer) named HelloWorld (see Figure 1). We can create the project with .NET Framework 4.5 or higher. | ||
| - | {{Figure|xamarin_forms_quickStart_Screenshot1.png|Figure 1. Creating a new project in the Visual Studio IDE.}} | + | {{iosedition:xamarin_forms_quickStart_Screenshot1.png|Figure 1. Creating a new project in the Visual Studio IDE.}} |
| The project HelloWorld is created in a new solution called HelloWorld. The wizard creates a single blank Application(Xamarin.Forms.Portable). | The project HelloWorld is created in a new solution called HelloWorld. The wizard creates a single blank Application(Xamarin.Forms.Portable). | ||
| Line 26: | Line 28: | ||
| After you created a HelloWorld project, we will see three projects in the solution, please see Figure 2. | After you created a HelloWorld project, we will see three projects in the solution, please see Figure 2. | ||
| - | {{Figure|xamarin_forms_quickStart_Screenshot2.png|Figure 2. A new project for Mobile App.}} | + | {{iosedition:xamarin_forms_quickStart_Screenshot2.png}} |
| + | \\ | ||
| + | //Figure 2. A new project for Mobile App.// | ||
| ===== Adding the Map View to our App ===== | ===== Adding the Map View to our App ===== | ||
| - | We need to add MapSuiteProtableCore.dll and MapSuiteFormsEdition.dll to the “HelloWorld” project which we will work mainly. Right-click the Reference in Solution Explorer and select "Add Reference", we can find **"MapSuitePortableCore.dll"** in two products(iOS or Android) at //C:\Program Files (x86)\ThinkGeo\Map Suite 9.0\Map Suite Android[[Map|Suite iOS]]\Current Version\Managed Assemblies//. then navigate to the //C:\Program Files (x86)\ThinkGeo\Map Suite 9.0\Map Suite Xamarin Forms\Current Version\Managed Assemblies// folder and select **"MapSuiteFormsEdition.dll"**. | + | We need to add MapSuiteProtableCore.dll and MapSuiteFormsEdition.dll to the “HelloWorld” project which we will work mainly. Right-click the Reference in Solution Explorer and select "Add Reference", we can find **"MapSuitePortableCore.dll"** in two products(iOS or Android) at //C:\Program Files (x86)\ThinkGeo\Map Suite 9.0\Map Suite Android[Map Suite iOS]\Current Version\Managed Assemblies//. then navigate to the //C:\Program Files (x86)\ThinkGeo\Map Suite 9.0\Map Suite Xamarin Forms\Current Version\Managed Assemblies// folder and select **"MapSuiteFormsEdition.dll"**. |
| - | {{Figure|xamarin_forms_quickStart_Screenshot3.png|Figure 3. Add Reference to HelloWorld.}} | + | {{iosedition:xamarin_forms_quickStart_Screenshot3.png}} |
| + | \\ | ||
| + | //Figure 3. Add Reference to HelloWorld.// | ||
| ==== Android Platform references and initialization ==== | ==== Android Platform references and initialization ==== | ||
| For android platform, we need to add AndroidEdition.dll, MapSuiteFormsEdition.dll and MapSuiteFormsEdition.Android.dll to “HelloWorld.Droid” project. Right-click the Reference in Solution Explorer and select "Add Reference", navigate to the //C:\Program Files (x86)\ThinkGeo\Map Suite 9.0\Map Suite Xamarin Forms\Current Version\Managed Assemblies// folder and select **"MapSuiteFormsEdition.Android.dll"** and **"MapSuiteFormsEdition.dll"**, navigate to the //C:\Program Files (x86)\ThinkGeo\Map Suite 9.0\Map Suite Android\Current Version\Managed Assemblies// folder and select **"AndroidEdition.dll"**. | For android platform, we need to add AndroidEdition.dll, MapSuiteFormsEdition.dll and MapSuiteFormsEdition.Android.dll to “HelloWorld.Droid” project. Right-click the Reference in Solution Explorer and select "Add Reference", navigate to the //C:\Program Files (x86)\ThinkGeo\Map Suite 9.0\Map Suite Xamarin Forms\Current Version\Managed Assemblies// folder and select **"MapSuiteFormsEdition.Android.dll"** and **"MapSuiteFormsEdition.dll"**, navigate to the //C:\Program Files (x86)\ThinkGeo\Map Suite 9.0\Map Suite Android\Current Version\Managed Assemblies// folder and select **"AndroidEdition.dll"**. | ||
| - | {{Figure|xamarin_forms_quickStart_Screenshot4.png|Figure 4. Add Reference to HelloWorld.Droid.}} | + | {{iosedition:xamarin_forms_quickStart_Screenshot4.png}} |
| + | \\ | ||
| + | //Figure 4. Add Reference to HelloWorld.Droid.// | ||
| The next step is to Initialize MapSuiteForms, MainActivity.cs: | The next step is to Initialize MapSuiteForms, MainActivity.cs: | ||
| Line 58: | Line 66: | ||
| For iOS platform, we need to add iOSEdition.dll, MapSuiteFormsEdition.dll and MapSuiteFormsEdition.iOS.dll to “HelloWorld.iOS” project. Right-click the Reference in Solution Explorer and select "Add Reference", navigate to the //C:\Program Files (x86)\ThinkGeo\Map Suite 9.0\Map Suite Xamarin Forms\Current Version\Managed Assemblies// folder and select **"MapSuiteFormsEdition.dll"** and **"MapSuiteFormsEdition.iOS.dll"**, navigate to the //C:\Program Files (x86)\ThinkGeo\Map Suite 9.0\Map Suite iOS\Current Version\Managed Assemblies// folder and select **"iOSEdition.dll"**. | For iOS platform, we need to add iOSEdition.dll, MapSuiteFormsEdition.dll and MapSuiteFormsEdition.iOS.dll to “HelloWorld.iOS” project. Right-click the Reference in Solution Explorer and select "Add Reference", navigate to the //C:\Program Files (x86)\ThinkGeo\Map Suite 9.0\Map Suite Xamarin Forms\Current Version\Managed Assemblies// folder and select **"MapSuiteFormsEdition.dll"** and **"MapSuiteFormsEdition.iOS.dll"**, navigate to the //C:\Program Files (x86)\ThinkGeo\Map Suite 9.0\Map Suite iOS\Current Version\Managed Assemblies// folder and select **"iOSEdition.dll"**. | ||
| - | {{Figure|xamarin_forms_quickStart_Screenshot5.png|Figure 5. Add Reference to HelloWorld.iOS.}} | + | {{iosedition:xamarin_forms_quickStart_Screenshot5.png}} |
| + | \\ | ||
| + | //Figure 5. Add Reference to HelloWorld.iOS.// | ||
| The next step is to Initialize MapSuiteForms, AppDeleagte.cs: | The next step is to Initialize MapSuiteForms, AppDeleagte.cs: | ||
| <code csharp> | <code csharp> | ||
| - | [[Register("AppDelegate")]] | + | [Register("AppDelegate")] |
| public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate | public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate | ||
| { | { | ||
| Line 80: | Line 90: | ||
| The next step is to create Map view in the constructor of App, and define it as "mapView". | The next step is to create Map view in the constructor of App, and define it as "mapView". | ||
| - | <source lang="csharp"> | + | <code csharp> |
| public App() | public App() | ||
| { | { | ||
| Line 93: | Line 103: | ||
| }; | }; | ||
| } | } | ||
| - | </source> | + | </code> |
| ===== Map Suite Forms "Hello World" Sample ===== | ===== Map Suite Forms "Hello World" Sample ===== | ||
| Line 99: | Line 109: | ||
| ==== Map Suite Forms "Hello World" ==== | ==== Map Suite Forms "Hello World" ==== | ||
| - | The first step in creating our "Hello World" sample application is to set references to the <code>ThinkGeo.MapSuite.Core</code> and <code>ThinkGeo.MapSuite.FormsEdition</code> workspaces at the very top of our code, since we'll use many classes within them. Set the reference like this: | + | The first step in creating our "Hello World" sample application is to set references to the ''ThinkGeo.MapSuite.Core'' and ''ThinkGeo.MapSuite.FormsEdition'' workspaces at the very top of our code, since we'll use many classes within them. Set the reference like this: |
| - | <source lang="csharp"> | + | <code csharp> |
| using ThinkGeo.MapSuite.Core; | using ThinkGeo.MapSuite.Core; | ||
| using ThinkGeo.MapSuite.FormsEdition; | using ThinkGeo.MapSuite.FormsEdition; | ||
| - | </source> | + | </code> |
| ==== Display World Map ==== | ==== Display World Map ==== | ||
| Now, let's add a base overlay to display the world map witch called "WorldMapKitOverlay". | Now, let's add a base overlay to display the world map witch called "WorldMapKitOverlay". | ||
| - | <source lang="csharp"> | + | <code csharp> |
| public App() | public App() | ||
| { | { | ||
| MapView mapView = new MapView(); | MapView mapView = new MapView(); | ||
| - | <nowiki>//</nowiki> Set the Map Unit to DecimalDegrees, the Shapefile’s unit of measure. | + | // Set the Map Unit to DecimalDegrees, the Shapefile’s unit of measure. |
| mapView.MapUnit = GeographyUnit.DecimalDegree; | mapView.MapUnit = GeographyUnit.DecimalDegree; | ||
| - | <nowiki>//</nowiki> Create a WorldMapKitOverlay. | + | // Create a WorldMapKitOverlay. |
| WorldMapKitOverlay worldMapKitOverlay = new WorldMapKitOverlay(); | WorldMapKitOverlay worldMapKitOverlay = new WorldMapKitOverlay(); | ||
| - | <nowiki>//</nowiki> Add a WorldMapKitOverlay. | + | // Add a WorldMapKitOverlay. |
| mapView.Overlays.Add("WorldMapKit", worldMapKitOverlay); | mapView.Overlays.Add("WorldMapKit", worldMapKitOverlay); | ||
| - | <nowiki>//</nowiki> Set a proper extent for the map. The extent is the geographical area you want it to display. | + | // Set a proper extent for the map. The extent is the geographical area you want it to display. |
| mapView.CurrentExtent = new RectangleShape(5, 78, 30, 26); | mapView.CurrentExtent = new RectangleShape(5, 78, 30, 26); | ||
| Line 134: | Line 144: | ||
| }; | }; | ||
| } | } | ||
| - | </source> | + | </code> |
| If we compile and run what we have now, our map should look like the one below (see Figure 6). | If we compile and run what we have now, our map should look like the one below (see Figure 6). | ||
| - | {{Figure|xamarin_forms_quickStart_Screenshot6.png|Figure 6. A simple map of Europe (Android left, iOS right).}} | + | {{iosedition:xamarin_forms_quickStart_Screenshot6.png}} |
| + | \\ | ||
| + | //Figure 6. A simple map of Europe (Android left, iOS right).// | ||
| ==== Shapefiles ==== | ==== Shapefiles ==== | ||
| Line 174: | Line 186: | ||
| - | PresetZoomLevels has a very useful property called <code>ZoomLevel.ApplyUntilZoomLevel</code>, 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> |
| 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); | ||
| capitalLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level05; | capitalLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level05; | ||
| - | </source> | + | </code> |
| ==== Using Shape file ==== | ==== Using Shape file ==== | ||
| Now let's look at a code sample to bring this concept to fruition. We'll look at Shapefiles relating to the entire world. In our example, we have one such Shapefile: | Now let's look at a code sample to bring this concept to fruition. We'll look at Shapefiles relating to the entire world. In our example, we have one such Shapefile: | ||
| - | *worldwide country borders (Countries02.shp) | + | * worldwide country borders (Countries02.shp) |
| **Android** The data used here can be found in the attached sample above in the "\AppData" folder. And we has copy data to sdcard. Please check data, and make sure we can find it in sdcard (“/mnt/sdcard/Android.Sample/”). | **Android** The data used here can be found in the attached sample above in the "\AppData" folder. And we has copy data to sdcard. Please check data, and make sure we can find it in sdcard (“/mnt/sdcard/Android.Sample/”). | ||
| Line 192: | Line 204: | ||
| Our next step is to define and add our Layers. Here is the code to use for our example. All of the following code can be placed in the the constructor of App. | Our next step is to define and add our Layers. Here is the code to use for our example. All of the following code can be placed in the the constructor of App. | ||
| - | <source lang="csharp"> | + | <code csharp> |
| public App() | public App() | ||
| { | { | ||
| MapView mapView = new MapView(); | MapView mapView = new MapView(); | ||
| - | <nowiki>//</nowiki> Set the Map Unit to DecimalDegrees, the Shapefile’s unit of measure. | + | // Set the Map Unit to DecimalDegrees, the Shapefile’s unit of measure. |
| mapView.MapUnit = GeographyUnit.DecimalDegree; | mapView.MapUnit = GeographyUnit.DecimalDegree; | ||
| - | <nowiki>//</nowiki> Get the base data location on different platform. | + | // Get the base data location on different platform. |
| string baseDataPath = Device.OnPlatform<string>("", "/mnt/sdcard/Android.Sample/", ""); | string baseDataPath = Device.OnPlatform<string>("", "/mnt/sdcard/Android.Sample/", ""); | ||
| - | <nowiki>//</nowiki> Set the Map Unit to DecimalDegrees, the Shapefile’s unit of measure. | + | // Set the Map Unit to DecimalDegrees, the Shapefile’s unit of measure. |
| mapView.MapUnit = GeographyUnit.DecimalDegree; | mapView.MapUnit = GeographyUnit.DecimalDegree; | ||
| Line 209: | Line 221: | ||
| mapView.Overlays.Add("WorldMapKit", worldMapKitOverlay); | mapView.Overlays.Add("WorldMapKit", worldMapKitOverlay); | ||
| - | <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(baseDataPath + @"AppData/Countries02.shp"); | ShapeFileFeatureLayer worldLayer = new ShapeFileFeatureLayer(baseDataPath + @"AppData/Countries02.shp"); | ||
| Line 215: | Line 227: | ||
| 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> Create a new Layer Overlay to hold the layer we just created | + | // Create a new Layer Overlay to hold the layer we just created |
| LayerOverlay layerOverlay = new LayerOverlay(); | LayerOverlay layerOverlay = new LayerOverlay(); | ||
| - | <nowiki>//</nowiki> Add the shapefile layer to the layer overlay | + | // Add the shapefile layer to the layer overlay |
| layerOverlay.Layers.Add(worldLayer); | layerOverlay.Layers.Add(worldLayer); | ||
| - | <nowiki>//</nowiki> Add the layerOverlay to map. | + | // Add the layerOverlay to map. |
| mapView.Overlays.Add(layerOverlay); | mapView.Overlays.Add(layerOverlay); | ||
| - | <nowiki>//</nowiki> Set a proper extent for the map. The extent is the geographical area you want it to display. | + | // Set a proper extent for the map. The extent is the geographical area you want it to display. |
| mapView.CurrentExtent = new RectangleShape(5, 78, 30, 26); | mapView.CurrentExtent = new RectangleShape(5, 78, 30, 26); | ||
| Line 238: | Line 250: | ||
| }; | }; | ||
| } | } | ||
| - | </source> | + | </code> |
| If you compile and run, your map should look like the one below. (see Figure 7). | If you compile and run, your map should look like the one below. (see Figure 7). | ||
| - | {{Figure|xamarin_forms_quickStart_Screenshot7.png|Figure 7. A Simple map of Europe (Android left, iOS right).}} | + | {{iosedition:xamarin_forms_quickStart_Screenshot7.png}} |
| + | \\ | ||
| + | //Figure 7. A Simple map of Europe (Android left, iOS right).// | ||
| 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 253: | Line 267: | ||
| That was an easy start! Now let's add a second Shapefile to the sample, so we'll have a total of two layers: | That was an easy start! Now let's add a second Shapefile to the sample, so we'll have a total of two layers: | ||
| - | #World country borders ("Countries02.shp") | + | - World country borders ("Countries02.shp") |
| - | #World capitals ("WorldCapitals.shp") | + | - World capitals ("WorldCapitals.shp") |
| - | <source lang="csharp"> | + | <code csharp> |
| public App() | public App() | ||
| { | { | ||
| Line 272: | Line 286: | ||
| ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer(baseDataPath + @"AppData/WorldCapitals.shp"); | ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer(baseDataPath + @"AppData/WorldCapitals.shp"); | ||
| - | <nowiki>//</nowiki> Similarly, we use the presetPointStyle for cities. | + | // Similarly, we use the presetPointStyle for cities. |
| capitalLayer.ZoomLevelSet.ZoomLevel01.DefaultPointStyle = PointStyles.Capital3; | capitalLayer.ZoomLevelSet.ZoomLevel01.DefaultPointStyle = PointStyles.Capital3; | ||
| - | <nowiki>//</nowiki> This setting also applies from ZoomLevel01 to ZoomLevel20, so city symbols will be rendered in the same style, no matter how far we zoom in or out. | + | // This setting also applies from ZoomLevel01 to ZoomLevel20, so city symbols will be rendered in the same style, no matter how far we zoom in or out. |
| capitalLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20; | capitalLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20; | ||
| LayerOverlay layerOverlay = new LayerOverlay(); | LayerOverlay layerOverlay = new LayerOverlay(); | ||
| layerOverlay.Layers.Add(worldLayer); | layerOverlay.Layers.Add(worldLayer); | ||
| - | <nowiki>//</nowiki> We need to add both of the new layers to the Layer OverLay. | + | // We need to add both of the new layers to the Layer OverLay. |
| layerOverlay.Layers.Add(capitalLayer); | layerOverlay.Layers.Add(capitalLayer); | ||
| Line 293: | Line 307: | ||
| }; | }; | ||
| } | } | ||
| - | </source> | + | </code> |
| If you compile and run, your map should look like the one below. (see Figure 8). | If you compile and run, your map should look like the one below. (see Figure 8). | ||
| - | {{Figure|xamarin_forms_quickStart_Screenshot8.png|Figure 8. A map of Europe with the additional borders and capitals layers displayed (Android left, iOS right).}} | + | {{iosedition:xamarin_forms_quickStart_Screenshot8.png}} |
| + | \\ | ||
| + | //Figure 8. A map of Europe with the additional borders and capitals layers displayed (Android left, iOS right).// | ||
| ===== How to Use TextStyle ===== | ===== How to Use TextStyle ===== | ||
| TextStyle is used to label items on map. While the features themselves are drawn from information in the Shapefile, they're labeled with feature names or other attributes contained in the .dbf file. For example, the Shapefile containing capitals of the world has a corresponding .dbf file with the field "CITY_NAME". We can use this field to label the cities on our map. | TextStyle is used to label items on map. While the features themselves are drawn from information in the Shapefile, they're labeled with feature names or other attributes contained in the .dbf file. For example, the Shapefile containing capitals of the world has a corresponding .dbf file with the field "CITY_NAME". We can use this field to label the cities on our map. | ||
| - | {{Figure|QSG_WPFDesktop_Img10.png}} | + | {{iosedition:QSG_WPFDesktop_Img10.png}} |
| 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> |
| public App() | public App() | ||
| { | { | ||
| Line 322: | Line 338: | ||
| ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer(baseDataPath + @"AppData/WorldCapitals.shp"); | ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer(baseDataPath + @"AppData/WorldCapitals.shp"); | ||
| - | <nowiki>//</nowiki> Similarly, we use the presetPointStyle for cities. | + | // Similarly, we use the presetPointStyle for cities. |
| capitalLayer.ZoomLevelSet.ZoomLevel01.DefaultPointStyle = PointStyles.Capital3; | capitalLayer.ZoomLevelSet.ZoomLevel01.DefaultPointStyle = PointStyles.Capital3; | ||
| - | <nowiki>//</nowiki> This setting also applies from ZoomLevel01 to ZoomLevel20, which means city symbols will be rendered in the same style no matter how far we | + | // This setting also applies from ZoomLevel01 to ZoomLevel20, which means city symbols will be rendered in the same style no matter how far we |
| - | <nowiki>//</nowiki>zoom in or out. | + | //zoom in or out. |
| capitalLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20; | capitalLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20; | ||
| - | <nowiki>//</nowiki> We create a new Layer for labeling the capitals. | + | // We create a new Layer for labeling the capitals. |
| ShapeFileFeatureLayer capitalLabelLayer = new ShapeFileFeatureLayer(baseDataPath + @"AppData/WorldCapitals.shp"); | ShapeFileFeatureLayer capitalLabelLayer = new ShapeFileFeatureLayer(baseDataPath + @"AppData/WorldCapitals.shp"); | ||
| - | <nowiki>//</nowiki> We use the preset TextStyle. Here we pass in "CITY_NAME", the name of the field containing the values we want to label the map with. | + | // We use the 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 353: | Line 369: | ||
| }; | }; | ||
| } | } | ||
| - | </source> | + | </code> |
| If you compile and run, your map should look like the one below. (see Figure 9). | If you compile and run, your map should look like the one below. (see Figure 9). | ||
| - | {{Figure|xamarin_forms_quickStart_Screenshot9.png|Figure 9. Europe map with TextStyle applied (Android left, iOS right).}} | + | {{iosedition:xamarin_forms_quickStart_Screenshot9.png}} |
| + | \\ | ||
| + | //Figure 9. Europe map with TextStyle applied (Android left, iOS right).// | ||
| 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> |
| public App() | public App() | ||
| { | { | ||
| Line 377: | Line 395: | ||
| ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer(baseDataPath + @"AppData/WorldCapitals.shp"); | ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer(baseDataPath + @"AppData/WorldCapitals.shp"); | ||
| - | <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 available from ZoomLevel01 to ZoomLevel05. That means if we zoom in a bit more, it will no longer be visible. | + | // The Style we set here is available from ZoomLevel01 to ZoomLevel05. That means if we zoom in a bit more, it 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 available from ZoomLevel06 to ZoomLevel20. That means if we zoom out a bit more, it will no longer be visible. | + | // The Style we set here is available from ZoomLevel06 to ZoomLevel20. That means if we zoom out a bit more, it will no longer be visible. |
| capitalLayer.ZoomLevelSet.ZoomLevel06.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20; | capitalLayer.ZoomLevelSet.ZoomLevel06.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20; | ||
| ShapeFileFeatureLayer capitalLabelLayer = new ShapeFileFeatureLayer(baseDataPath + @"AppData/WorldCapitals.shp"); | ShapeFileFeatureLayer capitalLabelLayer = new ShapeFileFeatureLayer(baseDataPath + @"AppData/WorldCapitals.shp"); | ||
| - | <nowiki>//</nowiki> We can customize our own TextStyle. Here we pass in the font, size, style and color. | + | // We can customize our own TextStyle. Here we pass in the font, size, style and 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 available from ZoomLevel01 to ZoomLevel05. | + | // The TextStyle we set here is available 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 available from ZoomLevel06 to ZoomLevel20. | + | // The TextStyle we set here is available from ZoomLevel06 to ZoomLevel20. |
| capitalLabelLayer.ZoomLevelSet.ZoomLevel06.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20; | capitalLabelLayer.ZoomLevelSet.ZoomLevel06.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20; | ||
| capitalLabelLayer.DrawingMarginPercentage = 50; | capitalLabelLayer.DrawingMarginPercentage = 50; | ||
| Line 413: | Line 431: | ||
| }; | }; | ||
| } | } | ||
| - | </source> | + | </code> |
| Can you imagine what the map will look like now? Below is the result. If you compile and run, at first it looks like Figure 14, then like Figure 15 as you zoom in further. | Can you imagine what the map will look like now? Below is the result. If you compile and run, at first it looks like Figure 14, then like Figure 15 as you zoom in further. | ||
| - | {{Figure|xamarin_forms_quickStart_Screenshot10.png|Figure 10. Map of Europe before zooming in (Android left, iOS right).}} | + | {{iosedition:xamarin_forms_quickStart_Screenshot10.png}} |
| + | \\ | ||
| + | //Figure 10. Map of Europe before zooming in (Android left, iOS right).// | ||
| - | {{Figure|xamarin_forms_quickStart_Screenshot11.png|Figure 11. Map of Europe after zooming in (Android left, iOS right).}} | + | {{iosedition:xamarin_forms_quickStart_Screenshot11.png}} |
| + | \\ | ||
| + | //Figure 11. Map of Europe after zooming in (Android left, iOS right).// | ||
| ===== Summary ===== | ===== Summary ===== | ||
| You now know the basics of using the Map Suite Map control and can start adding this functionality to your own applications. Let's recap what we've learned about the object relationships and how the pieces of Map Suite work together: | You now know the basics of using the Map Suite Map control and can start adding this functionality to your own applications. Let's recap what we've learned about the object relationships and how the pieces of Map Suite work together: | ||
| - | #It is of the utmost importance that the units (feet, meters, decimal degrees, etc.) be set properly for the Map control, based on the requirements of your data. | + | - It is of the utmost importance that the units (feet, meters, decimal degrees, etc.) be set properly for the Map control, based on the requirements of your data. |
| - | #Shapefiles provide the data used by a Map control to render a map. | + | - Shapefiles provide the data used by a Map control to render a map. |
| - | #A Map is the basic control that contains all the other objects used to indicate how the map should be rendered. | + | - A Map is the basic control that contains all the other objects used to indicate how the map should be rendered. |
| - | #A Map has one-to-many Layers. A Layer correlates one-to-one with a Shapefile (.shp). | + | - A Map has one-to-many Layers. A Layer correlates one-to-one with a Shapefile (.shp). |
| - | #A Layer can have one-to-many ZoomLevels. ZoomLevels help to define ranges (upper and lower scales) of when a Layer should be shown or hidden. | + | - A Layer can have one-to-many ZoomLevels. ZoomLevels help to define ranges (upper and lower scales) of when a Layer should be shown or hidden. |
| - | <br> | ||
| - | {{Filelink}}[[:File:HelloWorld iOS.zip|Download Sample Code From This Exercise]] //(1.5 MB)// | + | <faicon fa fa-download fa-lg> {{filehistory:HelloWorld iOS.zip|Download Sample Code From This Exercise}} //(1.5 MB)// |
| - | [[Category:Map Suite iOS Edition]] [[Category:iOS]] [[Category:GIS]] [[Category:.NET]] | ||
map_suite_xamarin_forms_quick_start_guide.1441792921.txt.gz · Last modified: 2015/09/09 10:02 by admin