ThinkGeo Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Map Suite MVC Edition Quick Start Guide ======

<div msgbox>
The Map Suite MVC Edition 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 MVC Edition 9.0.0.0 and higher, and will show you how to create an ASP.NET MVC application using Map Suite MVC Edition.
\\
\\
If you want to build a Webforms application using the standard Map Suite Web Edition product, please see the [[Map Suite Web Edition Quick Start Guide|Web Edition QuickStart Guide]] instead.
</div>

Welcome to Map Suite™ MVC Edition from ThinkGeo, a full-featured mapping control that makes it easy for any Microsoft .NET developer to add mapping functionality to a Microsoft .NET application quickly and efficiently. Using the intuitive object model, even developers inexperienced in Geographic Information Systems (GIS) can have fully functional maps working in minutes.

The purpose of this guide is to help you quickly get started building your own spatially aware applications. Like any new software, there is some learning to be done along the way.

How do we start to learn how to take advantage of the power of Map Suite? The best way is to make a sample application with it.

Before we get started, make sure that you have installed the [[ThinkGeo Product Center]] and that you have either started an evaluation or activated a full license of Map Suite MVC Edition.  By default, this will install the Map Suite MVC Edition 9.0 assemblies to __C:\Program Files (x86)\ThinkGeo\Map Suite 9.0\Map Suite MVC__.

===== Download the Sample =====
<faicon fa fa-download  fa-lg>  {{filehistory:HelloWorld MVC.zip|Download Sample Code From This Exercise}} //(4.18 MB)//

===== Setting up the Environment =====
Let's start with a new ASP.NET MVC 4 web application in Visual Studio.NET 2010 IDE and call it "HelloWorld" (see Figure 1). Set the Templates to ".NET Framework 4.0" for the project. And in next wizard page select the "Empty" template; this means that your sample project won't have any built-in pages or functionalities, such as forms authentication. Finally, select "Razor" as the view engine.  (**NOTE**: Map Suite MVC Edition supports both the Razor and ASPX view engines.  In this guide we are just using Razor as an example.)

If you are using Visual Studio.NET 2010, you need to install [[http://www.microsoft.com/downloads/details.aspx?FamilyID=ca9d90fa-e8c9-42e3-aa19-08e2c027f5d6&displaylang=en|VS2010 SP1]], and then create an ASP.NET MVC Web Application.

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]].

{{mvcedition:QSG_MVCEdition2_Img01.jpg}}

{{mvcedition:QSG_MVCEdition2_Img02.jpg}}

{{mvcedition:MVCEdition2 Img021.jpg}}
\\
//Figure 1. Creating a new project in Visual Studio.NET 2010 IDE.//

===== Adding Map Suite MVC Edition to your MVC Application =====
We need to add two Map Suite files, "MvcEdition.dll" and "MapSuiteCore.dll", to the reference. Right-click on "References" in Solution Explorer and select "Add Reference...", navigate to the //C:\Program Files (x86)\ThinkGeo\Map Suite 9.0\Map Suite MVC\Current Version\Managed Assemblies// folder and select both "MvcEdition.dll" and "MapSuiteCore.dll".

**Note: Although it is not a ThinkGeo assembly, you also need to add "WindowsBase.dll" to the references. WindowsBase 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'."//

{{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.

===== Creating the Controller and Required View Page =====
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:

{{mvcedition:QST_Mvc_Edition_51.jpg}}

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:

{{mvcedition:QST_Mvc_Edition_52.jpg}}

===== Map Suite MVC "Hello World" Sample =====
In this section, you'll use Map Suite MVC Edition to display a map that uses your own data. 

To begin, in the View page, let's write a few lines of code that will display a simple map.  Next, we'll have a look at the data and the important objects that we will use.

==== Display a Simple map ====
In creating our "Hello World" sample application, our first step is to set a reference to the Map Suite Core and Map Suite MvcEdition 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 csharp>
@using ThinkGeo.MapSuite.MvcEdition
@using ThinkGeo.MapSuite.Core
</code>

Then, just add the following code to Index.cshtml:

<code asp.net>
<div>
    @{
        Html.ThinkGeo().Map("Map1", 600, 500)
        .MapBackground(new BackgroundLayer(new GeoSolidBrush(GeoColor.FromHtml("#E5E3DF"))))
        .CurrentExtent(-131.22, 55.05, -54.03, 16.91)
        .MapUnit(GeographyUnit.DecimalDegree)
        .CustomOverlays(overlays => overlays.WorldMapKitWmsWebOverlay())
        .Render();
    }
</div>
</code>

Then, add the following xml block into the web.config file.
<code xml>
 <runtime>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
      <dependentAssembly>
        <assemblyIdentity name="System.Web.Mvc" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="1.0.0.0-3.0.0.0" newVersion="4.0.0.0" />
      </dependentAssembly>
    </assemblyBinding>
  </runtime>
</code>

Now press F5 to build and run your application.  It should look like this:

{{mvcedition:QSG_MVCEdition2_Img07.jpg}}

==== Shapefiles ====
Map Suite MVC Edition supports multiple kinds of data sources, such as Shapefiles, TAB files, SQL Server 2008, PostgreSQL, Oracle, etc. Here we will provide an introduction to Shapefiles, which we will use in the next section of this Quick Start Guide.

Simply put, Shapefiles are used by Map Suite to provide data that we will use to draw our map. Shapefiles store binary vector coordinates to be used by the component. They have a .shp extension. Shapefiles also come with two supplementary files that help Map Suite to work with the data.

The first supplementary file is called the .shx file. Its purpose is to provide a simple index of the main Shapefile. It tells the Map Suite component when to start reading binary data and when to stop. It is much like a directory for reading the binary data, sort of a lookup mechanism.

The second supplementary file is the .dbf file. This file holds tabular data associated with the main Shapefile. For example, the Shapefile may have the coordinates for a line to be drawn that represents a road. The .dbf file may have information to tell you what the name of the road is or what type of road it is, such as county road, state road, interstate highway, etc.

All three files need to reside in the same directory as the main Shapefile (.shp), but the Map Suite component only expects you to designate the name and file path of the main Shapefile. Next, when we discuss layer, you will start understanding a little more about how maps are constructed in Map Suite using the shape data.

==== ShapeFileFeatureLayers ====
A ShapeFileFeatureLayer in a map correlates to a single Shapefile, such as networks of roads. You can think of layers much like actual terrain in the real world. The bare earth might be a layer and has either physically defined boundaries, such as a fence around a military installation, or legal boundaries, such as the border of a country. Another layer on top of that might be roads that are built upon the bare earth. It is important to understand this when working with layers, as they need to be added in the logical order you might expect so that they can be visualized correctly from above. In other words, you would not want to lay down roads and then cover them with earth, because they could not be seen or used by vehicles.

How do we create and add layers? First, you should know that there are three types of styles that layers represent. As mentioned above, it follows logically that you would create and add layers based on how they should be viewed, so naturally you might start with some polygons, such as the outline of a country and all of the regions within it. You might then lay down lines that represent rivers and roads and then finally you might lay down points like cities or places of interest. Again, keep in mind that logic will dictate what works best. For instance, laying down roads and then rivers would put rivers on top of roads when it should more than likely be the other way around (the exception here might be a tunnel!).

==== Map ====
A Map object is the highest level object that encompasses layers and some other objects. For now, you can think of a Map as a set of layers, which can render each layer and present you with a map based on actions performed, such as zooming in and out, or panning across the surface to view another part of the map.

==== Styles ====
Shapefiles provide the data, but Styles are the way you color and draw them. You can specify the color of the country, the width of a road, the shape (triangle, circle, cross etc) of a point, and so on.

Map Suite has many preset Styles built in, including predefined Styles for roads, rivers, cities, countries, and more. This makes it easier to create great looking maps without a lot of hassle.

==== PresetZoomLevels ====
Styles define the way we visually represent the data, while ZoomLevels define the situation in which we want to display them. The reason why we need ZoomLevels is because we may want to display a small town when we are zoomed into a state, but we definitely don't want to display that town when we are zoomed out and looking at the entire country.

We have provided the 20 most common scales, from ZoomLevel01 to ZoomLevel20, at which you may want to change the way your data looks. What is scale? Scale indicates how much the given area has been reduced. If a road is 10,000 inches long in the real world and a map depicts this length as 1 inch on the screen, then we say the scale of this map is 1:10,000. Now let's say ZoomLevel02 uses a scale of 1:500 and ZoomLevel03 uses a scale of 1:1200. This means the map with a current scale of 1:1000 matches ZoomLevel03, the ZoomLevel whose scale is the closest to that.

PresetZoomLevels has a very useful property called ''ZoomLevel.ApplyUntilZoomLevel'', which you can very 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, we can simply code as follows:

<code csharp>
worldLayer.ZoomLevelSet.ZoomLevel03.DefaultAreaStyle = AreaStyles.Country1;
worldLayer.ZoomLevelSet.ZoomLevel03.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level10;
</code>
==== Map Suite MVC "Hello World" ====
(**NOTE:** Map Suite MVC Edition 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 latter for our example. For examples of the former, please see the sample applications that were installed along with your copy of Map Suite MVC Edition.)

Now let's look at the code needed to bring this concept to fruition.  For this example, we'll use a Shapefile containing data of the entire world.  We have one such Shapefile available to us:

  *The borders of every country in the world (cntry02.shp)

(**NOTE:** The data used in this sample can be found in the attached sample above at "\AppData" folder)

Our next step is to define and add our Shapefile layers to the map. All of our sample code is placed in the view page "Index.cshtml".

<code asp.net>
    @{Html.ThinkGeo().Map("Map1", 600, 500)
        .MapBackground(new BackgroundLayer(new GeoSolidBrush(GeoColor.FromHtml("#E5E3DF"))))
        .CurrentExtent(-131.22, 55.05, -54.03, 16.91)
        .MapUnit(GeographyUnit.DecimalDegree)
        .StaticOverlay(overlay =>
        {
            // We create a new Layer and pass the path to a Shapefile into its constructor.
            ShapeFileFeatureLayer worldLayer = new ShapeFileFeatureLayer(@"C:\Program Files (x86)\ThinkGeo\Map Suite Mvc Evaluation Edition 9.0\HowDoISamples\CSharp HowDoISamples Razor\App_Data\cntry02.shp");

            // Set the worldLayer to use a preset Style. Since AreaStyles.Country1 has YellowGreen background and Black border, our worldLayer will have the same render style. 
            worldLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = AreaStyles.Country1;

            // This setting will apply from ZoomLevel01 to ZoomLevel20, which means we can see the world the same style all the time no matter how far we zoom in or out.
            worldLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;

            // We need to add the worldLayer to the map's Static Overlay.
            overlay.Layer(worldLayer);
        })
        .Render();
    }
</code>

If you compile and run what you have now, your map should look like the screenshot below. (See Figure 4).

{{mvcedition:QSG_MVCEdition2_Img09.jpg}}
\\
//Figure 4. A simple map of World.//

So what has occurred here? We have created a layer and added it to the Map, and the Map has rendered it according to its default style parameters. Also, we have used ZoomLevel to display the map the way we want.

**NOTE:** It is important that the ''MapUnit'' property of a Map object be set using the ''GeographyUnit'' enumeration. 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. This information is normally found somewhere in the Shapefile's documentation or within its supplemental data file as discussed in the section on Shapefiles.

==== Navigate the Map ====
With the above code, not only can you display a map, but you can also navigate it. You can pan by dragging the map, zoom in by double-clicking, track zoom in by drawing a rectangle with your left mouse button mouse while holding the shift key, or zoom in and out by using the mouse wheel. Very powerful for just couple lines of code, isn't it?

That was an easy start! Now, let's add another Shapefile to the sample so that we will have a total of two layers:

  - The borders of every country in the world ("cntry02.shp")
  - The capitals of the world countries ("capital.shp")

Change the code in your View page following the example below.  You don't need to make any changes to the controller.
<code asp.net>
    @{Html.ThinkGeo().Map("Map1", 600, 500)
        .MapBackground(new BackgroundLayer(new GeoSolidBrush(GeoColor.FromHtml("#E5E3DF"))))
        .CurrentExtent(-131.22, 55.05, -54.03, 16.91)
        .MapUnit(GeographyUnit.DecimalDegree)
        .StaticOverlay(overlay =>
        {
            // World layer
            ShapeFileFeatureLayer worldLayer = new ShapeFileFeatureLayer(Server.MapPath("~/App_Data/cntry02.shp"));
            worldLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = AreaStyles.Country1;
            worldLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
            overlay.Layer(worldLayer);
            
            // Capital layer
            ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer(Server.MapPath("~/App_Data/capital.shp"));
            capitalLayer.ZoomLevelSet.ZoomLevel01.DefaultPointStyle = PointStyles.Capital3;
            capitalLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
            overlay.Layer(capitalLayer);

        })
        .Render();
    }
</code>

The result is as follows (Figure 5):

{{mvcedition:QSG_MVCEdition2_Img10.jpg}}
\\
//Figure 5. Europe map with 2 layers.//

==== How to Use the TextStyle ====
The TextStyle is used to label items on map. As every Shapefile has a related .dbf file, which 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 that contains the field "CITY_NAME". We can use this field to label the cities on our map.

{{mvcedition:QSG_WebEdition2_Img11.jpg}}

Map Suite has many TextStyles built in, which will help us quickly design attractive labels for the cities on our map. We can just pick the TextStyle we like and use it.

<code lang="csharp">
    @{Html.ThinkGeo().Map("Map1", 600, 500)
        .MapBackground(new BackgroundLayer(new GeoSolidBrush(GeoColor.GeographicColors.ShallowOcean)))
        .CurrentExtent(-131.22, 55.05, -54.03, 16.91)
        .MapUnit(GeographyUnit.DecimalDegree)
        .StaticOverlay(overlay =>
        {
            // All of this code can alternatively be placed in the controller.
            // Please reference the sample applications that came with your copy of Map Suite MVC Edition for detail.
            
            // World layer
            ShapeFileFeatureLayer worldLayer = new ShapeFileFeatureLayer(Server.MapPath("~/App_Data/cntry02.shp"));
            worldLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = AreaStyles.Country1;
            worldLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
            overlay.Layer(worldLayer);

            // Capital cities layer
            ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer(Server.MapPath("~/App_Data/capital.shp"));
            capitalLayer.ZoomLevelSet.ZoomLevel01.DefaultPointStyle = PointStyles.Capital3;
            capitalLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
            overlay.Layer(capitalLayer);

            // Label layer
            ShapeFileFeatureLayer capitalLabelLayer = new ShapeFileFeatureLayer(Server.MapPath("~/App_Data/capital.shp"));
            // We'll use a preset TextStyle. Here we pass in the "CITY_NAME", which is the name of the field we want to label on the map.
            capitalLabelLayer.ZoomLevelSet.ZoomLevel01.DefaultTextStyle = TextStyles.Capital3("CITY_NAME");
            capitalLabelLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
            // 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.
            // Change the number below (to 0, for example) and you will be able to see what we mean.
            capitalLabelLayer.DrawingMarginPercentage = 50;
            overlay.Layer(capitalLabelLayer);

        })
        .Render();
    }
</code>

The result is as follows (Figure 6):

{{mvcedition:QSG_MVCEdition2_Img12.jpg}}
\\
//Figure 6. Europe map with TextStyle.//

Now that we know how to render text and render symbols, let's define two different ZoomLevels in one single layer, and create our own custom Style and TextStyle.

<code lang="csharp">
    @{Html.ThinkGeo().Map("Map1", 600, 500)
        .MapBackground(new BackgroundLayer(new GeoSolidBrush(GeoColor.GeographicColors.ShallowOcean)))
        .CurrentExtent(5, 78, 30, 26)
        .MapUnit(GeographyUnit.DecimalDegree)
        .StaticOverlay(overlay =>
        {
            // All of this code can alternatively be placed in the controller.
            // Please reference the sample applications that came with your copy of Map Suite MVC Edition for detail.
            
            // World layer
            ShapeFileFeatureLayer worldLayer = new ShapeFileFeatureLayer(Server.MapPath("~/App_Data/cntry02.shp"));
            worldLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = AreaStyles.Country1;
            worldLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
            overlay.Layer(worldLayer);

            // Capital layer
            ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer(Server.MapPath("~/App_Data/capital.shp"));
            // 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);
            // The Style we set here is applied from ZoomLevel01 to ZoomLevel05. That means if we zoom in a bit more, this particular style will not be visible anymore.
            capitalLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level05;

            capitalLayer.ZoomLevelSet.ZoomLevel06.DefaultPointStyle = PointStyles.Capital3;
            // The Style we set here is applied from ZoomLevel06 to ZoomLevel20. That means if we zoom out a bit more, this particular style will not be visible anymore.
            capitalLayer.ZoomLevelSet.ZoomLevel06.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;

            overlay.Layer(capitalLayer);

            // Label layer
            ShapeFileFeatureLayer capitalLabelLayer = new ShapeFileFeatureLayer(Server.MapPath("~/App_Data/capital.shp"));
            // We can customize our own TextStyle. Here we pass in the font, the size, the style and the color.
            capitalLabelLayer.ZoomLevelSet.ZoomLevel01.DefaultTextStyle = TextStyles.CreateSimpleTextStyle("CITY_NAME", "Arial", 8, DrawingFontStyles.Italic, GeoColor.StandardColors.Black, 3, 3);
            // The TextStyle we set here is applied from ZoomLevel01 to ZoomLevel05. 
            capitalLabelLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level05;

            capitalLabelLayer.ZoomLevelSet.ZoomLevel06.DefaultTextStyle = TextStyles.Capital3("CITY_NAME");
            // The TextStyle we set here is applied from ZoomLevel06 to ZoomLevel20. 
            capitalLabelLayer.ZoomLevelSet.ZoomLevel06.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;

            capitalLabelLayer.DrawingMarginPercentage = 50;
            overlay.Layer(capitalLabelLayer);

        })
        .Render();
    }
</code>

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 8 as you do.

{{mvcedition:QSG_MVCEdition2_Img13.jpg}}
\\
//Figure 7. European cities with two ZoomLevels, before zooming in.//

{{mvcedition:QSG_MVCEdition2_Img14.jpg}}
\\
//Figure 8. European cities with two ZoomLevels, after zooming in.//

===== Perform an AJAX HTTP request to the Action of the Controller =====
Map Suite MVC Edition provides a large number of client APIs that allow us to easily operate the map on client side, just as we have done on the server side in the above example code.  For complete details on the available client APIs, please reference the "JavaScript API Documentation" link in your Map Suite MVC Edition program group, or see [[http://download.thinkgeo.com/docs/MVC/ClientAPI/Default.htm|this page]].

Here we will show you how to perform an AJAX request to update the DynamicOverlay of the map according to the different parameters passed in from the client.

====Client APIs used====
<code javascript>
ajaxCallAction: function (controller, action, params, callback) 
</code>

====Parameters====
  * **controller** {String} - The name of the controller

  * **action** {String} - The name of the action

  * **params** {object} - The parameters in JSON format

  * **callback** {function} - The callback function which is used to process the data sent from the server

We will need to access the parameters passed from here in the action, and apply the MapActionFilterAttribute to the specified action of the controller. 

The code in your View page should look like this:

<code javascript>
[JavaScript]
   function UpdateDynamicOverlay(layerName) {
        Map1.ajaxCallAction("Home", "UpdateOverlay", { layer: layerName }, function (result) {
            // Refresh overlay after callback
            Map1.redrawLayer("ShapeOverlay");
        })
    }
[JavaScript]
<div>
    @{Html.ThinkGeo().Map("Map1", 600, 500)
        .MapBackground(new BackgroundLayer(new GeoSolidBrush(GeoColor.FromHtml("#E5E3DF"))))
        .CurrentExtent(-131.22, 55.05, -54.03, 16.91)
        .MapUnit(GeographyUnit.DecimalDegree)
        .CustomOverlays(overlays =>
        {
            overlays.WorldMapKitWmsWebOverlay();

            overlays.LayerOverlay("ShapeOverlay", false, TileType.MultipleTile);
        })
        .Render();
    }
</div>
<div>
    <input id="chKAddUs" name="group1" type="radio" value="Show US States" onclick="UpdateDynamicOverlay('US')" />
    Show US States
    <br />
    <input id="chKAddCounty" name="group1" type="radio" value="Show US Counties" onclick="UpdateDynamicOverlay('City')" />
    Show US Cities
    <br />
</div>
</code>

Now copy and paste the code below about the accessed action into your "HomeController" page:

<code csharp>
        // Here we set the MapActionFilterAttribute, for which two input parameters are required.
        [MapActionFilter]
        public void UpdateOverlay(Map map, GeoCollection<object> args)
        {
            var layerName = args[["layer"]].ToString();

            LayerOverlay overlay = map.CustomOverlays[["ShapeOverlay"]] as LayerOverlay;
            overlay.Layers.Clear();
            if (layerName.ToLowerInvariant() == "us")
            {
                // States layer
                ShapeFileFeatureLayer worldLayer = new ShapeFileFeatureLayer(Server.MapPath("~/App_Data/STATES.SHP"));
                worldLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = AreaStyles.State1;
                worldLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;

                overlay.Layers.Add(worldLayer);
            }
            else
            {
                // Cities layer
                ShapeFileFeatureLayer countyLayer = new ShapeFileFeatureLayer(Server.MapPath("~/App_Data/cities_a.shp"));
                countyLayer.ZoomLevelSet.ZoomLevel01.DefaultPointStyle = PointStyles.Capital3;
                countyLayer.ZoomLevelSet.ZoomLevel01.DefaultTextStyle = TextStyles.Capital3("AREANAME");
                countyLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;

                overlay.Layers.Add(countyLayer);
            }
        }
</code>

If we compile and  run the application now, it should look like the screenshot below:

{{mvcedition:QST_Mvc_Edition_53.jpg}}

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:

{{mvcedition:QST_Mvc_Edition_54.jpg}}

===== Summary =====
You now know the basics of using Map Suite MVC Edition and are able to start 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 unit of measurement (feet, meters, decimal degrees, etc.) be set properly for the map, based on the requirements of your data.
  -Shapefiles (and other data sources like Oracle, Postgre, SQL 2008, etc.) provide the data used by Map Suite to render a map.
  -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 Layers. A Layer contains the data (from shapefile or other data sources) for drawing.
  -A layer can have one-to-many ZoomLevels. ZoomLevels help to define ranges of when a layer should be shown or hidden.
  -Compared to Map Suite Web Edition, MVC Edition provides many more client APIs which are used to operate the map and easily communicate with the server side.


<faicon fa fa-download  fa-lg> {{filehistory:HelloWorld MVC.zip|Download Sample Code From This Exercise}} //(12.4 MB)//
User Tools

Site Tools

Page Tools
