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 Quick Start Guide For MVC ======

<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.
\\
\\
If you want to build a WebForms application, please see the [[map_suite_web_for_webforms_quick_start_guide|WebForms QuickStart Guide]] instead.
</div>

Welcome to Map Suite™ MVC 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.

===== Download the Sample =====
<faicon fa fa-download  fa-lg>  {{https://github.com/ThinkGeo/QuickstartSample-ForMvc|Download Sample Code From GitHub}} 
\\
\\
===== 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.)

In this sample, we are going to implement following six items:
  - 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, 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]].

{{mapsuite10:mvc:1.png}}
{{mapsuite10:mvc:2.png}}
{{mapsuite10:mvc:3.png}}
\\
//Figure 1. Creating a new project in Visual Studio.NET 2015 IDE.//
\\
\\
===== Installing ThinkGeo MVC NuGet packages =====
To build this sample, we need to reference several packages from NuGet manager. There are two options for you.
  - For the beginner of MapSuite 10.0 products, we recommend to use “MapSuiteWebForMvc-Standard” package. This package is the full featured package for developing GIS application with MVC. Please refer [[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 and want to include the least set of reference, we recommend to use “MapSuiteWebForMvc-BareBone” package. It only depends on required packages that a basic MVC application needs. Please refer [[http://wiki.thinkgeo.com/wiki/map_suite_web_for_mvc#barebone| MapSuite Mvc BareBone]] 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.
  - MapSuiteWebForMvc-BareBone
  - ThinkGeo.MapSuite.Layers.ShapeFile
  - ThinkGeo.MapSuite.Layers.Background

Right-click on “References” in Solution Explorer and select “Manage NuGet Packages…” 
\\
{{mapsuite10:mvc:screenshots:mapsuite_mvc_helloworld_nugetmanager.png}}

Search the packages list above and install them. (See Figure 2).
\\
{{mapsuite10:mvc:screenshots:mapsuite_mvc_helloworld_installmvc.png}}
//Figure 2. Install ThinkGeo MVC NuGet packages.//

Now the package is installing into the project. 

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}}

Now, we have all the reference set. NuGet brings us a flexible way and experience to manage our references. In the next chapter, we are going to talk about the real coding part.

===== 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:

{{mapsuite10:mvc:screenshots:QST_Mvc_Edition_51.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:

{{mvcedition:QST_Mvc_Edition_52.jpg}}

===== Map Suite MVC "Hello World" =====
(**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.)

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 (Countries02.shp) 

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

Our next step is to define and add our ShapeFile layers to the map. All of the following code can be placed in the view page “Views/Home/Index.cshtml”.

As we will use many classes within this sample. We do this so that we do not have to use the fully qualified name of the Map Suite classes throughout our code. Add namespaces like this:
<code csharp>
@using ThinkGeo.MapSuite;
@using ThinkGeo.MapSuite.Drawing;
@using ThinkGeo.MapSuite.Layers;
@using ThinkGeo.MapSuite.Mvc;
@using ThinkGeo.MapSuite.Styles;
</code>

Then, we can add the map and shape file reference code as below:
<code csharp>
@{Html.ThinkGeo().Map("Map1", 600, 500)
  .MapBackground(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(Server.MapPath("~/App_Data/Countries02.shp"));
    // Set the worldLayer to use a preset Style.
    AreaStyle areaStyle = new AreaStyle();
    areaStyle.FillSolidBrush = new GeoSolidBrush(GeoColor.FromArgb(255, 233, 232, 214));
    areaStyle.OutlinePen = new GeoPen(GeoColor.FromArgb(255, 118, 138, 69), 1);
    areaStyle.OutlinePen.DashStyle = LineDashStyle.Solid;
    worldLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = areaStyle;
    // 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>

Now it is time to press F5 to start the application. If you have not setup a developer license, the Map Suite Product Center will pop up. You need to generate your developer license. For more details, please refer to (http://wiki.thinkgeo.com/wiki/map_suite_developer_license_guide).

Once the developer license is ready, run the application. Your map should look like the one below: (See Figure 3)
\\
{{mapsuite10:mvc:mapsuite_mvc_helloworld_maprender.png}}\\
//Figure 3. A sample map of United States.//
\\

So what has occurred here? We have created a layer and added it to the map and the map has rendered according to its default style parameters. Also, we have used ZoomLevel to display the map the way that 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 DecimalDegrees, feet, meters, or numerous other unit systems. Our map has no idea about what the unit of measurement is until we set it. This information is normally found somewhere in the documentation or within the supplemental data file as discussed in the section on ShapeFiles.

==== Navigate the Map ====
With the above code, you can both display a map and 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 ("countries02.shp")
  - The capitals of the world countries ("WorldCapitals.shp")

Change the code in your View page following the example below. You don't need to make any changes to the controller. 

<code csharp>
@{Html.ThinkGeo().Map("Map1", 600, 500)
    .MapBackground(new GeoSolidBrush(GeoColor.FromHtml("#E5E3DF")))
    .CurrentExtent(5, 78, 30, 26)
    .MapUnit(GeographyUnit.DecimalDegree)
    .StaticOverlay(overlay =>
    {
       // World layer
       ShapeFileFeatureLayer worldLayer = new ShapeFileFeatureLayer(Server.MapPath("~/App_Data/Countries02.shp"));
       AreaStyle areaStyle = new AreaStyle();
       areaStyle.FillSolidBrush = new GeoSolidBrush(GeoColor.FromArgb(255, 233, 232, 214));
       areaStyle.OutlinePen = new GeoPen(GeoColor.FromArgb(255, 118, 138, 69), 1);
       areaStyle.OutlinePen.DashStyle = LineDashStyle.Solid;
       worldLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = areaStyle;
       worldLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
       overlay.Layer(worldLayer);

      // Capital layer
      ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer(Server.MapPath("~/App_Data/WorldCapitals.shp"));
      PointStyle pointStyle = new PointStyle();
      pointStyle.SymbolType = PointSymbolType.Square;
      pointStyle.SymbolSolidBrush = new GeoSolidBrush(GeoColor.StandardColors.White);
      pointStyle.SymbolPen = new GeoPen(GeoColor.StandardColors.Black, 1);
      pointStyle.SymbolSize = 6;
      PointStyle stackStyle = new PointStyle();
      stackStyle.SymbolType = PointSymbolType.Square;
      stackStyle.SymbolSolidBrush = new GeoSolidBrush(GeoColor.StandardColors.Maroon);
      stackStyle.SymbolPen = new GeoPen(GeoColor.StandardColors.Transparent, 0);
      stackStyle.SymbolSize = 2;
      pointStyle.CustomPointStyles.Add(stackStyle);
      capitalLayer.ZoomLevelSet.ZoomLevel01.DefaultPointStyle = pointStyle;
      capitalLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
      overlay.Layer(capitalLayer);
    })
    .Render();
}
</code>

The result is as follows (Figure 4):

{{mapsuite10:mvc:screenshots:mapsuite_mvc_helloworld_addlayers.png}}
\\
//Figure 4. Map of Europe with 2 layers.//

==== How to Use the TextStyle ====
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}}

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>
@{Html.ThinkGeo().Map("Map1", 600, 500)
  .MapBackground(new GeoSolidBrush(GeoColor.FromHtml("#E5E3DF")))
  .CurrentExtent(5, 78, 30, 26)
  .MapUnit(GeographyUnit.DecimalDegree)
  .StaticOverlay(overlay =>
  {
    // World layer
    ShapeFileFeatureLayer worldLayer = new ShapeFileFeatureLayer(Server.MapPath("~/App_Data/Countries02.shp"));
    AreaStyle areaStyle = new AreaStyle();
    areaStyle.FillSolidBrush = new GeoSolidBrush(GeoColor.FromArgb(255, 233, 232, 214));
    areaStyle.OutlinePen = new GeoPen(GeoColor.FromArgb(255, 118, 138, 69), 1);
    areaStyle.OutlinePen.DashStyle = LineDashStyle.Solid;
    worldLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = areaStyle;
    worldLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
    overlay.Layer(worldLayer);
    // Capital layer
    ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer(Server.MapPath("~/App_Data/WorldCapitals.shp"));
    PointStyle pointStyle = new PointStyle();
    pointStyle.SymbolType = PointSymbolType.Square;
    pointStyle.SymbolSolidBrush = new GeoSolidBrush(GeoColor.StandardColors.White);
    pointStyle.SymbolPen = new GeoPen(GeoColor.StandardColors.Black, 1);
    pointStyle.SymbolSize = 6;
    PointStyle stackStyle = new PointStyle();
    stackStyle.SymbolType = PointSymbolType.Square;
    stackStyle.SymbolSolidBrush = new GeoSolidBrush(GeoColor.StandardColors.Maroon);
    stackStyle.SymbolPen = new GeoPen(GeoColor.StandardColors.Transparent, 0);
    stackStyle.SymbolSize = 2;
    pointStyle.CustomPointStyles.Add(stackStyle);
    capitalLayer.ZoomLevelSet.ZoomLevel01.DefaultPointStyle = pointStyle;
    GeoFont font = new GeoFont("Arial", 9, DrawingFontStyles.Bold);
    GeoSolidBrush txtBrush = new GeoSolidBrush(GeoColor.StandardColors.Maroon);
    TextStyle textStyle = new TextStyle("CITY_NAME", font, txtBrush);
    textStyle.XOffsetInPixel = 0;
    textStyle.YOffsetInPixel = -6;
    capitalLayer.ZoomLevelSet.ZoomLevel01.DefaultTextStyle = textStyle;
    capitalLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
    overlay.Layer(capitalLayer);
  })
  .Render();
}
</code>

The result is as follows (Figure 5):

{{mapsuite10:mvc:6.png}}
\\
//Figure 5. Map of Europe with a 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 csharp>
@{Html.ThinkGeo().Map("Map1", 600, 500)
  .MapBackground(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/Countries02.shp"));
    AreaStyle areaStyle = new AreaStyle();
    areaStyle.FillSolidBrush = new GeoSolidBrush(GeoColor.FromArgb(255, 233, 232, 214));
    areaStyle.OutlinePen = new GeoPen(GeoColor.FromArgb(255, 118, 138, 69), 1);
    areaStyle.OutlinePen.DashStyle = LineDashStyle.Solid;
    worldLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = areaStyle;
    worldLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
    overlay.Layer(worldLayer);
    // Capital layer
    ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer(Server.MapPath("~/App_Data/WorldCapitals.shp"));
    // We can customize our own Style. Here we pass in a color and a size.
    PointStyle pointStyle = new PointStyle();
    pointStyle.SymbolType = PointSymbolType.Square;
    pointStyle.SymbolSolidBrush = new GeoSolidBrush(GeoColor.StandardColors.White);
    pointStyle.SymbolPen = new GeoPen(GeoColor.StandardColors.Black, 1);
    pointStyle.SymbolSize = 6;
    PointStyle stackStyle = new PointStyle();
    stackStyle.SymbolType = PointSymbolType.Square;
    stackStyle.SymbolSolidBrush = new GeoSolidBrush(GeoColor.StandardColors.Maroon);
    stackStyle.SymbolPen = new GeoPen(GeoColor.StandardColors.Transparent, 0);
    stackStyle.SymbolSize = 2;
    pointStyle.CustomPointStyles.Add(stackStyle);
    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 = pointStyle;
    // 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/WorldCapitals.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;
    GeoFont font = new GeoFont("Arial", 9, DrawingFontStyles.Bold);
    GeoSolidBrush txtBrush = new GeoSolidBrush(GeoColor.StandardColors.Maroon);
    TextStyle textStyle = new TextStyle("CITY_NAME", font, txtBrush);
    textStyle.XOffsetInPixel = 0;
    textStyle.YOffsetInPixel = -6;
    capitalLabelLayer.ZoomLevelSet.ZoomLevel06.DefaultTextStyle = textStyle;
    // The TextStyle we set here is applied from ZoomLevel06 to ZoomLevel20.
    capitalLabelLayer.ZoomLevelSet.ZoomLevel06.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
    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 7 as you do.

{{mapsuite10:mvc:screenshots:mapsuite_mvc_helloworld_lowerzoomlevel.png}}
\\
//Figure 6. A map of European cities with two ZoomLevels, before zooming in.//

{{mapsuite10:mvc:screenshots:mapsuite_mvc_helloworld_highterzoomlevel.png}}
\\
//Figure 7. The same map 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 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>
       [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/USStates.SHP"));
        ShapeFileFeatureLayer worldLayer = new ShapeFileFeatureLayer(Server.MapPath("~/App_Data/USStates.SHP"));
        AreaStyle areaStyle = new AreaStyle();
        areaStyle.FillSolidBrush = new GeoSolidBrush(GeoColor.FromArgb(255, 233, 232, 214));
        areaStyle.OutlinePen = new GeoPen(GeoColor.FromArgb(255, 156, 155, 154), 2);
        areaStyle.OutlinePen.DashStyle = LineDashStyle.Solid;
        worldLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = areaStyle;
        worldLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;        
        overlay.Layers.Add(worldLayer);
    }
    else
    {
       // Cities layer
       ShapeFileFeatureLayer countyLayer = new ShapeFileFeatureLayer(Server.MapPath("~/App_Data/cities_e.shp"));
       PointStyle pointStyle = new PointStyle();
       pointStyle.SymbolType = PointSymbolType.Square;
       pointStyle.SymbolSolidBrush = new GeoSolidBrush(GeoColor.StandardColors.White);
       pointStyle.SymbolPen = new GeoPen(GeoColor.StandardColors.Black, 1);
       pointStyle.SymbolSize = 6;

       PointStyle stackStyle = new PointStyle();
       stackStyle.SymbolType = PointSymbolType.Square;
       stackStyle.SymbolSolidBrush = new GeoSolidBrush(GeoColor.StandardColors.Maroon);
       stackStyle.SymbolPen = new GeoPen(GeoColor.StandardColors.Transparent, 0);
       stackStyle.SymbolSize = 2;

       pointStyle.CustomPointStyles.Add(stackStyle);
       GeoFont font = new GeoFont("Arial", 9, DrawingFontStyles.Bold);
       GeoSolidBrush txtBrush = new GeoSolidBrush(GeoColor.StandardColors.Maroon);
       TextStyle textStyle = new TextStyle("NAME", font, txtBrush);
       textStyle.XOffsetInPixel = 0;
       textStyle.YOffsetInPixel = -6;
       countyLayer.ZoomLevelSet.ZoomLevel01.DefaultPointStyle = pointStyle;
       countyLayer.ZoomLevelSet.ZoomLevel01.DefaultTextStyle = textStyle;
       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:

{{mapsuite10:mvc:screenshots:mapsuite_mvc_helloworld_result.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:

{{mapsuite10:mvc:screenshots:mapsuite_mvc_helloworld_showusstatus.png}}


This completes this scenario. The next thing you might want to do is to make it run on another machine that does not have a developer license. A runtime license is the one we are looking for. Here is the guide to generate a runtime license, please refer to (http://wiki.thinkgeo.com/wiki/map_suite_runtime_license_guide_for_desktop ) for details.

===== 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 WebForms, MVC provides many more client APIs which are used to operate the map and easily communicate with the server side.
User Tools

Site Tools

Page Tools
