Differences

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

--- map_suite_web_for_webforms_quick_start_guide [2017/02/21 06:38]
tgwikiupdate [Using the Map in an Update Panel]
+++ map_suite_web_for_webforms_quick_start_guide [2017/03/15 11:20] (current)
tgwikiupdate
@@ Line 2: / Line 2: @@
-<div msgbox>The Map Suite Web QuickStart Guide will guide you through the process of creating a sample application and will help you become familiar with Map Suite.</div>
+<div msgbox>The Map Suite Web Quickstart Guide will guide you through the process of creating a sample application and will help you become familiar with Map Suite.</div>
 Welcome to Map Suite™ Web 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.
@@ Line 16: / Line 16: @@
 \\
 ===== Setting up the Environment =====
-Let's start with a new ASP.NET Web Site in Microsoft Visual Studio (2015 or newer) and call it "HelloWorld" (see Figure 1). Set the Templates to ".NET Framework 4.5" for the project.
+Let's start with a new ASP.NET Web Site in Microsoft Visual Studio (2015 or newer) and call it "QuickstartSample" (see Figure 1). Set the Templates to ".NET Framework 4.5" for the project.We just need to a simple template for our website, let’s select “Empty” template and do not check any other items. Click “OK” button, then a website will be created in a new solution called “QuickstartSample”.
-{{webedition:QSG_WebEdition2_Img01.jpg}}
+{{mapsuite10:webforms:Map_Suite_WebForms_QSG_NewProject.png}}
-{{mapsuite10:web:1.png}}
+{{mapsuite10:webforms:Map_Suite_WebForms_QSG_SetProjectTemplate.png}}
 \\
 //Figure 1. Creating a new project in Visual Studio.//
-We just need to a simple template for our website, let’s select “Empty” template and do not check any other items. (See Figure 2). Click “OK” button, then a website will be created in a new solution called “HelloWorld”.
-The website is created in a new solution called "HelloWorld". The wizard creates several files including a Web form called "Default.aspx".
-{{mapsuite10:web:2.png}}
 \\
-//Figure 2. Select “Empty” project item.//
 \\
-Since we created an empty website, there isn’t any of pages under our project, let’s create our default main page. Right-click the project, select “Add” -> “New Item”. In the popup dialog, we will choose “Web Form” then click “Add” button. (See Figure 3).
-{{mapsuite10:web:3.png}}
-\\
-//Figure 3. Select “Web form” page type.//
-\\
-A page will be created called “WebForm1.aspx”, and there are two class files under the “WebForm.aspx” which names are “WebForm1.aspx.cs” and “WebForm1.aspx.designer.cs”. (See Figure 4).
-{{mapsuite10:web:5.png}}
-//Figure 4. HelloWorld Structure.//
 ===== Installing ThinkGeo Web 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 “MapSuiteWebForWebForms-Standard” package. This package is the full featured package for developing GIS application with web forms. Please refer http://wiki.thinkgeo.com/wiki/map_suite_web_for_webforms#standard for detail.
+  - For the beginner of MapSuite 10.0 products, we recommend to use “MapSuiteWebForWebForms-Standard” package. This package is the full featured package for developing GIS application with web forms. Please refer http://wiki.thinkgeo.com/wiki/map_suite_web_for_webforms#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 “MapSuiteWebForWebForms-BareBone” package. It only depends on required packages that a basic web forms application needs. Please refer http://wiki.thinkgeo.com/wiki/map_suite_web_for_webforms#barebonefor detail.
-.	 For the advanced user of MapSuite 10.0 products and want to include the least set of reference, we recommend to use “MapSuiteWebForWebForms-BareBone” package. It only depends on required packages that a basic web forms application needs. Please refer http://wiki.thinkgeo.com/wiki/map_suite_web_for_webforms#barebone for detail.
+In this sample, we choose an beginner way. To build this sample, we are going to reference the "MapSuiteWebForWebForms-Standard"  package.
-In this sample, we choose an advanced way. To build this sample, we are going to reference the following packages.
-.	MapSuiteWebForWebForms-BareBone
-.	ThinkGeo.MapSuite.Layers.ShapeFile
-.	ThinkGeo.MapSuite.Layers.Background
 Right-click on “References” in Solution Explorer and select “Manage NuGet Packages…”
-{{mapsuite10:web:4.png}}
+{{mapsuite10:webforms:Map_Suite_WebForms_QSG_NuGetManager.png}}
-Now that we open NuGet dialog and install the three Nuget packages (See Figure 5).
+Now that we open NuGet dialog and install the three Nuget packages (See Figure 2).
-{{mapsuite10:web:6.png}}
+{{mapsuite10:webforms:Map_Suite_WebForms_QSG_InstallMvcPackage.png}}
-//Figure 5. Install NuGet package.//
+//Figure 2. Install NuGet package.//
 Now the package is installing into the project.
+Click “OK” if the message box like the following pops up.
+\\
+{{mapsuite10:webforms:Map_Suite_WebForms_QSG_ReferenceRreview.png}}
+\\
 The “NetTopologySuite” is the third part assembly, so the license acceptance is required. You can click “I Accept” to agree the license.
-{{mapsuite10:web:licenseacceptance.png}}
+{{mapsuite10:webforms:Map_Suite_WebForms_QSG_PackageLicenseAcceptance.png}}
+\\
+Since we created an empty website, there isn’t any of pages under our project, let’s create our default main page. Right-click the project, select “Add” -> “Web Form”. Created a new page called “WebForm1.aspx”.(See Figure 3)
+{{mapsuite10:webforms:Map_Suite_WebForms_QSG_AddForm.png}}
+\\
+//Figure 3. Create Web Form.//
+\\
 Now, we have all the reference set. In the next chapter, we are going to talk about the real coding part.
@@ Line 83: / Line 69: @@
 	The capitals of the world countries (“~/AppData/WorldCapitals.shp”)
-===== Adding the Map Control to the Visual Studio Toolbox =====
-**1.** When you first open Microsoft Visual Studio after installing Map Suite, you may not see the control in the Toolbox. You will need to follow these steps to add the control.
-Hover over the Toolbox and right click anywhere on the list of controls. You will get a pop-up menu. Select "Choose Items..."
-{{webedition:QSG_WebEdition2_Img03.jpg}}
-**2.** The Choose Toolbox Items dialogue will appear. You will need to select the ".NET Framework Components" tab and then click the "Browse..." button. Finally, navigate to the //MapSuiteWebForWebForms-BareBone 10.0.0 NuGet package// installation folder and select the "ThinkGeo.MapSuite.WebForms.dll“ file.
-{{webedition:QSG_WebEdition2_Img04b.jpg}}
-**3.** You should now have the Map Control available in your Toolbox as shown below.
-{{webedition:QSG_WebEdition2_Img05.jpg}}
 ===== Adding the Map Control to your Web Form =====
+When you first open Microsoft Visual Studio after installing Map Suite, you may not see the control in the Toolbox. You will need to follow these steps to add the control.
-Draw the Map control on the web form by clicking on the Map Control object in the Toolbox and then dragging and dropping (using the left mouse button) to the form. You can resize the map if you desire. You can leave the name of the Map control as "Map1". Our map will display in this object.
+**1.** Open “…/QuickstartSample/packages/MapSuiteWebForWebForms-Standard.10.0.0/designtime” package folder and drag “ThinkGeo.MapSuite.WebForms.dll” assembly to the Toolbox of Visual Studio.(See Figure 4)
-{{webedition:QSG_WebEdition2_Img07b.jpg}}
+{{mapsuite10:webforms:Map_Suite_WebForms_QSG_ControlDesigntime.png}}
+\\
+//Figure 4. Add Map Control To Toolbox.//
+\\
+**2.** Draw the Map control on the web form by clicking on the Map Control object in the Toolbox and then dragging and dropping (using the left mouse button) to the form. You can resize the map if you desire. You can leave the name of the Map control as "Map1". Our map will display in this object.(See Figure 5)
+{{mapsuite10:webforms:Map_Suite_WebForms_QSG_AddMapControl.png}}
+\\
+//Figure 5. Add Map Control To The Web From.//
+\\
 We can also add some codes to use a map:
 <code asp>
-<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="HelloWorld.WebForm1" %>
+<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="QuickstartSample.WebForm1" %>
 <%@ Register Assembly="ThinkGeo.MapSuite.WebForms" Namespace="ThinkGeo.MapSuite.WebForms" TagPrefix="cc1" %>
 <!DOCTYPE html>
@@ Line 114: / Line 93: @@
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
-    <title>Hello World</title>
+    <title>Quickstart</title>
 </head>
 <body>
@@ Line 121: / Line 100: @@
         <asp:ScriptManager ID="ScriptManager1" runat="server">
         </asp:ScriptManager>
-        <cc1:Map ID="Map1" runat="server" Height="480px" Width="640px">
+        <cc1:Map ID="Map1" runat="server" Height="600px" Width="800px">
         </cc1:Map>
     </div>
@@ Line 131: / Line 110: @@
 Now that we have "ThinkGeo.MapSuite.dll" referenced and a Map Control added. We are ready for adding the code.
-===== Map Suite Web "Hello World" Sample =====
+===== Map Suite Web "Quickstart" Sample =====
-After this section, you will be able to draw a map with Map Suite Web Edition using your own data. At the very beginning, let's have a look at the data and the important objects we will use.
+After this section, you will be able to draw a map with Map Suite Web for WebForms using your own data. At the very beginning, let's have a look at the data and the important objects we will use.
-==== Map Suite Web "Hello World" ====
+==== Map Suite Web "QuickstartSample" ====
-In creating your "Hello World" sample application, your first step is to set some references at the very top of your code, as you will use many classes within that. We do this so that we do not have to use the fully qualified name of the Map Suite classes throughout your code. Setting a reference to the Map Suite workspace can be done in the "code-behind" of the form by selecting the form and hitting the F7 function key. Add the references like this:
+In creating your "QuickstartSample" application, your first step is to set some references at the very top of your code, as you will use many classes within that. We do this so that we do not have to use the fully qualified name of the Map Suite classes throughout your code. Setting a reference to the Map Suite workspace can be done in the "code-behind" of the form by selecting the form and hitting the F7 function key. Add the references like this:
 <code csharp>
@@ Line 173: / Line 152: @@
             Map1.StaticOverlay.Layers.Add(worldLayer);
             // Set the default map extent, the unit is Decimal Degree.
-            Map1.CurrentExtent = new RectangleShape(5, 78, 30, 26);
+            Map1.CurrentExtent = new RectangleShape(-134, 70, -56, 7);
             // Set the background color.
             Map1.MapBackground = new GeoSolidBrush(GeoColor.GeographicColors.ShallowOcean);
@@ Line 182: / Line 161: @@
 If you compile and run what you have now, your map should look like the one below. (See Figure 6).
-{{mapsuite10:web:sample1.png}}
+{{mapsuite10:webforms:Map_Suite_WebForms_QSG_ShowAreaStyle.png}}
 \\
 //Figure 6. A sample map of Europe.//
@@ Line 239: / Line 218: @@
         // Set the default map extent, the unit is Decimal Degree.
-        Map1.CurrentExtent = new RectangleShape(5, 78, 30, 26);
+        Map1.CurrentExtent = new RectangleShape(-134, 70, -56, 7);
         Map1.MapBackground = new GeoSolidBrush(GeoColor.GeographicColors.ShallowOcean);
     }
@@ Line 247: / Line 226: @@
 The result is as follows(Figure 7):
-{{mapsuite10:web:sample2.png}}
+{{mapsuite10:webforms:Map_Suite_WebForms_QSG_ShowPointStyle.png}}
 \\
 //Figure 7. Map of Europe with 2 layers.//
@@ Line 255: / Line 234: @@
 A TextStyle is used to label items on map. As every ShapeFile has a related .dbf file that includes descriptions for every record, the most common way to use TextStyle is for labeling. For example, WorldCapital ShapeFile's corresponding .dbf file contains the field "CITY_NAME". We can use this field to label the cities on our map.
-{{mapsuite10:web:sample3.png}}
+{{mapsuite10:webforms:Map_Suite_WebForms_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.
@@ Line 309: / Line 288: @@
         Map1.StaticOverlay.Layers.Add(worldLayer);
         Map1.StaticOverlay.Layers.Add(capitalLayer);
+        Map1.StaticOverlay.Layers.Add(capitalLabelLayer);
         // Set the default map extent, the unit is Decimal Degree.
-        Map1.CurrentExtent = new RectangleShape(5, 78, 30, 26);
+        Map1.CurrentExtent = new RectangleShape(-134, 70, -56, 7);
         // Set the background color.
         Map1.MapBackground = new GeoSolidBrush(GeoColor.GeographicColors.ShallowOcean);
@@ Line 320: / Line 300: @@
 The result is as follows (Figure 8):
-{{webedition:QSG_WebEdition2_Img12.jpg}}
+{{mapsuite10:webforms:Map_Suite_WebForms_QSG_ShowTextStyle.png}}
 \\
 //Figure 8. Map of Europe with a TextStyle.//
@@ Line 385: / Line 365: @@
         Map1.StaticOverlay.Layers.Add(capitalLabelLayer);
-        Map1.CurrentExtent = new RectangleShape(5, 78, 30, 26);
+        Map1.CurrentExtent = new RectangleShape(-134, 70, -56, 7);
         // Set the background color to make the map beautiful.
@@ Line 395: / Line 375: @@
 Can you imagine what the map will look like now? Figure 9 below is the result. At first it looks the same as it did in Figure 8. Now zoom in, and watch the map change to resemble Figure 10 as you do.
-{{webedition:QSG_WebEdition2_Img13.jpg}}
+{{mapsuite10:webforms:Map_Suite_WebForms_QSG_ShowLowZoomLevel.png}}
 \\
 //Figure 9. A map of European cities with two ZoomLevels, before zooming in.//
-{{webedition:QSG_WebEdition2_Img14.jpg}}
+{{mapsuite10:webforms:Map_Suite_WebForms_QSG_ShowHighZoomLevel.png}}
 \\
 //Figure 10. The same map with two ZoomLevels, after zooming in.//
@@ Line 406: / Line 386: @@
 If you put the map within an update panel, you can take advantage of AJAX. To make this clearer, we will walk you through a sample.
-First, let's add a marker on the map. Our first step is to add a reference to the ''MapSuite.WebEdition'' namespace at the very top of our code:
+First, let's add a marker on the map. Our first step is to add a reference to the ''ThinkGeo.MapSuite.WebForms'' namespace at the very top of our code:
 <code csharp>
@@ Line 420: / Line 400: @@
     {
         // Add a new feature as a marker
-        Map1.MarkerOverlay.FeatureSource.InternalFeatures.Add("Marker", new Feature(0, 52));
+        Map1.MarkerOverlay.FeatureSource.InternalFeatures.Add("Marker", new Feature(-100, 40));
         // Set the marker style, and make it available all over the zoomlevels.
@@ Line 431: / Line 411: @@
 Let's run the application and click the button. You will see a marker appear near London. (Figure 11)
-{{webedition:QSG_WebEdition2_Img15.jpg}}
+{{mapsuite10:webforms:Map_Suite_WebForms_QSG_ShowMarkerFeature.png}}
 \\
 //Figure 11. Add a marker to the map.//
@@ Line 479: / Line 459: @@
 </code>
 \\
-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: http://wiki.thinkgeo.com/wiki/map_suite_runtime_license_guide_for_web.
+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: http://wiki.thinkgeo.com/wiki/map_suite_deployment_license_guide_for_web.
+\\
+\\
 ===== Summary =====
 You now know the basics of using Map Suite Web 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:
@@ Line 488: / Line 470: @@
   - 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.
-<faicon fa fa-download  fa-lg>  {{filehistory:HelloWorld Web.zip|Download Sample Code From This Exercise}} //(1.62 MB)//

User Tools

Site Tools

Differences

Page Tools