map_suite_web_for_mvc_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_web_for_mvc_quick_start_guide [2017/02/24 22:04] bradrollins |
map_suite_web_for_mvc_quick_start_guide [2017/03/15 08:30] (current) tgwikiupdate [Parameters] |
||
|---|---|---|---|
| Line 2: | Line 2: | ||
| <div msgbox> | <div msgbox> | ||
| - | The Map Suite MVC QuickStart Guide will guide you through the process of creating a sample application and will help you become familiar with Map Suite. The QuickStart Guide supports Map Suite 10.0.0.0 and higher and will show you how to create an ASP.NET MVC application. | + | The Map Suite MVC Quickstart Guide will guide you through the process of creating a sample application and will help you become familiar with Map Suite. The Quickstart Guide supports Map Suite Web for Mvc 10.0.0 and higher and will show you how to create an ASP.NET MVC application. |
| \\ | \\ | ||
| \\ | \\ | ||
| - | If you want to build a WebForms application, please see the [[map_suite_web_for_webforms_quick_start_guide|WebForms QuickStart Guide]] instead. | + | If you want to build a WebForms application, please see the [[map_suite_web_for_webforms_quick_start_guide|WebForms Quickstart Guide]] instead. |
| </div> | </div> | ||
| Line 20: | Line 20: | ||
| \\ | \\ | ||
| ===== Setting up the Environment ===== | ===== Setting up the Environment ===== | ||
| - | Let's start with a new ASP.NET MVC 4 web application in Visual Studio.NET 2015 IDE and call it “HelloWorld” (see Figure 1). (NOTE: Map Suite MVC Edition supports both the Razor and ASPX view engines. In this guide we are just using Razor as an example.) | + | Let's start with a new ASP.NET MVC 4 web application in Visual Studio.NET 2015 IDE and call it “QuickstartSample” (see Figure 1). (NOTE: Map Suite MVC Edition supports both the Razor and ASPX view engines. In this guide we are just using Razor as an example.) |
| In this sample, we are going to implement following six items: | In this sample, we are going to implement following six items: | ||
| Line 30: | Line 30: | ||
| - Compared to Map Suite Web, MVC provides many more client APIs which are used to operate the map and easily communicate with the server side. | - Compared to Map Suite Web, MVC provides many more client APIs which are used to operate the map and easily communicate with the server side. | ||
| - | This Quick Start Guide uses an ASP.NET MVC 4 web application as an example, so you will need to have the ASP.NET MVC framework installed in order to follow along. The MVC 4 framework can be downloaded from [[http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=1491|ASP.NET MVC 4 Tools Update]]. | + | This Quickstart Guide uses an ASP.NET MVC 4 web application as an example, so you will need to have the ASP.NET MVC framework installed in order to follow along. The MVC 4 framework can be downloaded from [[http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=1491|ASP.NET MVC 4 Tools Update]]. |
| - | {{mapsuite10:mvc:1.png}} | + | {{mapsuite10:mvc:Map_Suite_Mvc_QSG_NewProject.png}} |
| - | {{mapsuite10:mvc:2.png}} | + | {{mapsuite10:mvc:Map_Suite_Mvc_QSG_SetProjectTemplate.png}} |
| - | {{mapsuite10:mvc:3.png}} | + | |
| \\ | \\ | ||
| //Figure 1. Creating a new project in Visual Studio.NET 2015 IDE.// | //Figure 1. Creating a new project in Visual Studio.NET 2015 IDE.// | ||
| Line 42: | Line 41: | ||
| To build this sample, we need to reference several packages from NuGet manager. There are two options for you. | To build this sample, we need to reference several packages from NuGet manager. There are two options for you. | ||
| - For a beginner of MapSuite 10.0 products, we recommend using “MapSuiteWebForMvc-Standard” package. This package is the full featured package for developing GIS applications with MVC. Please refer to [[http://wiki.thinkgeo.com/wiki/map_suite_web_for_mvc#standard|MapSuite Mvc Standard]] for detail. | - For a beginner of MapSuite 10.0 products, we recommend using “MapSuiteWebForMvc-Standard” package. This package is the full featured package for developing GIS applications with MVC. Please refer to [[http://wiki.thinkgeo.com/wiki/map_suite_web_for_mvc#standard|MapSuite Mvc Standard]] for detail. | ||
| - | - For the advanced user of MapSuite 10.0 products who wants to include the smallest set of references, we recommend to use “MapSuiteWebForMvc-Standard” package. It only depends on required packages that a basic MVC application needs. Please refer to [[http://wiki.thinkgeo.com/wiki/map_suite_web_for_mvc#standard| MapSuite Mvc Standard]] for detail. | + | - For the advanced user of MapSuite 10.0 products who wants to include the smallest set of references, we recommend to use “MapSuiteWebForMvc-BareBone” package. It only depends on required packages that a basic MVC application needs. Please refer to [[http://wiki.thinkgeo.com/wiki/map_suite_web_for_mvc#barebone| MapSuite Mvc Standard]] for detail. |
| - | In this sample, we choose option 2 (It also compatible with option 1, the difference is that, the other packages will be installed by default when installing the MapSuiteWebForMvc-Standard package). To build this sample, we need to reference the following packages. | + | In this sample, we choose option 1. The other packages will be installed by default when installing the MapSuiteWebForMvc-Standard package. To build this sample, we need to reference the "MapSuiteWebForMvc-Standard" package. |
| - | - MapSuiteWebForMvc-Standard | + | |
| - | - ThinkGeo.MapSuite.Layers.ShapeFile | + | |
| - | - ThinkGeo.MapSuite.Layers.Background | + | |
| Right-click on “References” in Solution Explorer and select “Manage NuGet Packages…” (See Figure 1) | Right-click on “References” in Solution Explorer and select “Manage NuGet Packages…” (See Figure 1) | ||
| \\ | \\ | ||
| - | {{mapsuite10:mvc:screenshots:mapsuite_mvc_helloworld_nugetmanager.png}} | + | {{mapsuite10:mvc:Map_Suite_Mvc_QSG_NuGetManager.png}} |
| \\ | \\ | ||
| //Figure 1.// | //Figure 1.// | ||
| Line 58: | Line 54: | ||
| Search the packages list above and install them. (See Figure 2). | Search the packages list above and install them. (See Figure 2). | ||
| \\ | \\ | ||
| - | {{:mvcedition:mvcstandard.png}} | + | {{mapsuite10:mvc:Map_Suite_Mvc_QSG_InstallMvcPackage.png}} |
| \\ | \\ | ||
| //Figure 2. Install the ThinkGeo MVC NuGet packages.// | //Figure 2. Install the ThinkGeo MVC NuGet packages.// | ||
| Now the package is installing into the project. | Now the package is installing into the project. | ||
| + | Click “OK” if the message box like the following pops up. | ||
| + | \\ | ||
| + | {{mapsuite10:mvc:Map_Suite_Mvc_QSG_ReferenceRreview.png}} | ||
| + | \\ | ||
| - | The “NetTopologySuite” is a third part assembly, so the license acceptance is required. You can click “I Accept” to agree to the license. | + | The “NetTopologySuite” is the third part assembly, so the license acceptance is required. You can click “I Accept” to agree the license. |
| - | + | \\ | |
| - | {{mapsuite10:mvc:screenshots:licenseAcceptance.png}} | + | {{mapsuite10:mvc:Map_Suite_Mvc_QSG_PackageLicenseAcceptance.png}} |
| + | \\ | ||
| + | \\ | ||
| Now, we have all the references set. NuGet brings us a flexible way and pleasant experience to manage our references. | Now, we have all the references set. NuGet brings us a flexible way and pleasant experience to manage our references. | ||
| Line 72: | Line 74: | ||
| 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: | ||
| - | {{mapsuite10:mvc:screenshots:QST_Mvc_Edition_51.png}} | + | {{mapsuite10:mvc:Map_Suite_Mvc_QSG_AddController.png}} |
| + | {{mapsuite10:mvc:Map_Suite_Mvc_QSG_AddScaffold.png}} | ||
| 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: | 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: | ||
| - | {{mapsuite10:mvc:screenshots:QST_Mvc_Edition_52.png}} | + | {{mapsuite10:mvc:Map_Suite_Mvc_QSG_AddView.png}} |
| - | ===== Map Suite MVC "Hello World" ===== | + | ===== Map Suite MVC "Quickstart" ===== |
| (**NOTE:** Map Suite MVC provides two places where we can add our code for defining the ShapeFileFeatureLayer. One is in the action of the controller, and the other is in the View page. Here we will use the “ViewPage” for this example.) | (**NOTE:** Map Suite MVC provides two places where we can add our code for defining the ShapeFileFeatureLayer. One is in the action of the controller, and the other is in the View page. Here we will use the “ViewPage” for this example.) | ||
| Line 100: | Line 103: | ||
| Then, we can add the map and shape file reference code as below: | Then, we can add the map and shape file reference code as below: | ||
| <code csharp> | <code csharp> | ||
| - | @{Html.ThinkGeo().Map("Map1", 600, 500) | + | @{Html.ThinkGeo().Map("Map1", 800, 600) |
| .MapBackground(new GeoSolidBrush(GeoColor.FromHtml("#E5E3DF"))) | .MapBackground(new GeoSolidBrush(GeoColor.FromHtml("#E5E3DF"))) | ||
| .CurrentExtent(-131.22, 55.05, -54.03, 16.91) | .CurrentExtent(-131.22, 55.05, -54.03, 16.91) | ||
| Line 125: | Line 128: | ||
| Once the developer license is ready, run the application. Your map should look like the one below: (See Figure 3) | Once the developer license is ready, run the application. Your map should look like the one below: (See Figure 3) | ||
| \\ | \\ | ||
| - | {{mapsuite10:mvc:screenshots:mapsuite_mvc_helloworld_maprender.png}}\\ | + | {{mapsuite10:mvc:Map_Suite_Mvc_QSG_ShowAreaStyle.png}}\\ |
| //Figure 3. A sample map of United States.// | //Figure 3. A sample map of United States.// | ||
| \\ | \\ | ||
| Line 144: | Line 147: | ||
| <code csharp> | <code csharp> | ||
| - | @{Html.ThinkGeo().Map("Map1", 600, 500) | + | @{Html.ThinkGeo().Map("Map1", 800, 600) |
| .MapBackground(new GeoSolidBrush(GeoColor.FromHtml("#E5E3DF"))) | .MapBackground(new GeoSolidBrush(GeoColor.FromHtml("#E5E3DF"))) | ||
| - | .CurrentExtent(5, 78, 30, 26) | + | .CurrentExtent(-131.22, 55.05, -54.03, 16.91) |
| .MapUnit(GeographyUnit.DecimalDegree) | .MapUnit(GeographyUnit.DecimalDegree) | ||
| .StaticOverlay(overlay => | .StaticOverlay(overlay => | ||
| Line 183: | Line 186: | ||
| The result is as follows (Figure 4): | The result is as follows (Figure 4): | ||
| - | {{mapsuite10:mvc:screenshots:mapsuite_mvc_helloworld_addlayers.png}} | + | {{mapsuite10:mvc:Map_Suite_Mvc_QSG_ShowPointStyle.png}} |
| \\ | \\ | ||
| //Figure 4. Map of Europe with 2 layers.// | //Figure 4. Map of Europe with 2 layers.// | ||
| Line 190: | Line 193: | ||
| A TextStyle is used to label items on map. As every ShapeFile has a related .dbf file that includes descriptions for each record, the most common way to use the TextStyle is for labeling features. For example, the ShapeFile containing capitals of the world has a corresponding .dbf file contains the field “CITY_NAME”. We can use this field to label the cities on our map. | A TextStyle is used to label items on map. As every ShapeFile has a related .dbf file that includes descriptions for each record, the most common way to use the TextStyle is for labeling features. For example, the ShapeFile containing capitals of the world has a corresponding .dbf file contains the field “CITY_NAME”. We can use this field to label the cities on our map. | ||
| - | {{mapsuite10:mvc:5.png}} | + | {{mapsuite10:mvc:Map_Suite_Mvc_QSG_DBFDetails.png}} |
| Map Suite has many TextStyles built in to help us quickly design attractive labels for the cities on our map. We can just pick the TextStyle we like and use it. | Map Suite has many TextStyles built in to help us quickly design attractive labels for the cities on our map. We can just pick the TextStyle we like and use it. | ||
| <code csharp> | <code csharp> | ||
| - | @{Html.ThinkGeo().Map("Map1", 600, 500) | + | @{Html.ThinkGeo().Map("Map1", 800, 600) |
| .MapBackground(new GeoSolidBrush(GeoColor.FromHtml("#E5E3DF"))) | .MapBackground(new GeoSolidBrush(GeoColor.FromHtml("#E5E3DF"))) | ||
| - | .CurrentExtent(5, 78, 30, 26) | + | .CurrentExtent(-131.22, 55.05, -54.03, 16.91) |
| .MapUnit(GeographyUnit.DecimalDegree) | .MapUnit(GeographyUnit.DecimalDegree) | ||
| .StaticOverlay(overlay => | .StaticOverlay(overlay => | ||
| Line 239: | Line 242: | ||
| The result is as follows (Figure 5): | The result is as follows (Figure 5): | ||
| - | {{mapsuite10:mvc:6.png}} | + | {{mapsuite10:mvc:Map_Suite_Mvc_QSG_ShowTextStyle.png}} |
| \\ | \\ | ||
| //Figure 5. Map of Europe with a TextStyle.// | //Figure 5. Map of Europe with a TextStyle.// | ||
| Line 246: | Line 249: | ||
| <code csharp> | <code csharp> | ||
| - | @{Html.ThinkGeo().Map("Map1", 600, 500) | + | @{Html.ThinkGeo().Map("Map1", 800, 600) |
| .MapBackground(new GeoSolidBrush(GeoColor.GeographicColors.ShallowOcean)) | .MapBackground(new GeoSolidBrush(GeoColor.GeographicColors.ShallowOcean)) | ||
| - | .CurrentExtent(5, 78, 30, 26) | + | .CurrentExtent(-131.22, 55.05, -54.03, 16.91) |
| .MapUnit(GeographyUnit.DecimalDegree) | .MapUnit(GeographyUnit.DecimalDegree) | ||
| .StaticOverlay(overlay => | .StaticOverlay(overlay => | ||
| Line 306: | Line 309: | ||
| 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 7 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 7 as you do. | ||
| - | {{mapsuite10:mvc:screenshots:mapsuite_mvc_helloworld_lowerzoomlevel.png}} | + | {{mapsuite10:mvc:Map_Suite_Mvc_QSG_ShowLowZoomLevel.png}} |
| \\ | \\ | ||
| //Figure 6. A map of European cities with two ZoomLevels, before zooming in.// | //Figure 6. A map of European cities with two ZoomLevels, before zooming in.// | ||
| - | {{mapsuite10:mvc:screenshots:mapsuite_mvc_helloworld_highterzoomlevel.png}} | + | {{mapsuite10:mvc:Map_Suite_Mvc_QSG_ShowHighZoomLevel.png}} |
| \\ | \\ | ||
| //Figure 7. The same map with two ZoomLevels, after zooming in.// | //Figure 7. The same map with two ZoomLevels, after zooming in.// | ||
| Line 347: | Line 350: | ||
| </script> | </script> | ||
| <div> | <div> | ||
| - | @{Html.ThinkGeo().Map("Map1", 600, 500) | + | @{Html.ThinkGeo().Map("Map1", 800, 600) |
| .MapBackground(new GeoSolidBrush(GeoColor.FromHtml("#E5E3DF"))) | .MapBackground(new GeoSolidBrush(GeoColor.FromHtml("#E5E3DF"))) | ||
| .CurrentExtent(-131.22, 55.05, -54.03, 16.91) | .CurrentExtent(-131.22, 55.05, -54.03, 16.91) | ||
| Line 409: | Line 412: | ||
| GeoFont font = new GeoFont("Arial", 9, DrawingFontStyles.Bold); | GeoFont font = new GeoFont("Arial", 9, DrawingFontStyles.Bold); | ||
| GeoSolidBrush txtBrush = new GeoSolidBrush(GeoColor.StandardColors.Maroon); | GeoSolidBrush txtBrush = new GeoSolidBrush(GeoColor.StandardColors.Maroon); | ||
| - | TextStyle textStyle = new TextStyle("NAME", font, txtBrush); | + | TextStyle textStyle = new TextStyle("AREANAME", font, txtBrush); |
| textStyle.XOffsetInPixel = 0; | textStyle.XOffsetInPixel = 0; | ||
| textStyle.YOffsetInPixel = -6; | textStyle.YOffsetInPixel = -6; | ||
| Line 423: | Line 426: | ||
| If we compile and run the application now, it should look like the screenshot below: | If we compile and run the application now, it should look like the screenshot below: | ||
| - | {{mapsuite10:mvc:screenshots:mapsuite_mvc_helloworld_result.png}} | + | {{mapsuite10:mvc:Map_Suite_Mvc_QSG_ShowUSStates.png}} |
| You can click the checkboxes for "Show US States" or "Show US Cities" to load different layers to the map. For example, if you check the "Show US States" box, the map should look like this: | You can click the checkboxes for "Show US States" or "Show US Cities" to load different layers to the map. For example, if you check the "Show US States" box, the map should look like this: | ||
| - | {{mapsuite10:mvc:screenshots:mapsuite_mvc_helloworld_showusstatus.png}} | + | {{mapsuite10:mvc:Map_Suite_Mvc_QSG_ShowUSCities.png}} |
map_suite_web_for_mvc_quick_start_guide.1487973865.txt.gz · Last modified: 2017/02/24 22:04 (external edit)