Lab 7: Silverlight API Due Date: 02/07/2014 Overview Microsoft Silverlight is a development platform for creating engaging, interactive user experiences for Web, desktop, and mobile applications when online or offline. It is compatible with multiple web browsers used on Microsoft Windows and Mac OS X. Silverlight applications have features and purposes similar to those of Adobe Flash. The ArcGIS API for Microsoft Silverlight allows users to integrate ArcGIS Server, ESRI MapIt, and Bing Maps services and capabilities in a Silverlight application. You can create RIAs that utilize the powerful mapping, geocoding, and geoprocessing capabilities provided by ArcGIS Server. This lab assignment is designed to help you become familiar with different options for developing Web GIS applications based on Silverlight. Specifically, this assignment is divided into three parts: Part I: ArcGIS API for Silverlight Part II: ArcGIS Viewer for Silverlight Part I: ArcGIS API for Silverlight With ArcGIS API for Silverlight, you can integrate interactive maps and tasks in the web applications. To learn more details, check out this link - http://resources.arcgis.com/en/help/silverlightapi/concepts/index.html#/arcgis_api_for_silverlight_overview To develop a Silverlight application, there are a few software need to be installed first. 1. Visual Studio or Visual Web Developer 2013 Express http://www.visualstudio.com/en-us/products/visual-studio-express-vs You can get the trial version that can be used for free for 90 days. Or, you can get a free copy of Visual Studio (Professional version) as a student from here (https://www.dreamspark.com/product/product.aspx?productid=72&cmpid=w_ MSS_DSV_DS_HP1216_Hero) using your UMD email as verification. 2. ArcGIS API for Microsoft Silverlight Download V3.2 from this page - https://developers.arcgis.com/silverlight/ The downloading and installation process may take a lot of time to complete. You should install the software in specific sequence (see above) to avoid any potential issues. 1
The general steps of creating a web application using the ArcGIS API for Silverlight: 1. Install the prerequisite Microsoft software packages. 2. Install ArcGIS API for Silverlight. 3. In Visual Studio or Web Developer Express, create a Silverlight application project 4. Add a reference to one or more of the ArcGIS API for Silverlight assemblies in your Silverlight application project. 5. In the Silverlight application, open a Silverlight user control in XAML view and add code to access and display an ArcGIS Server map service. There are many samples (examples) that are available for you to use and modify the codes from this Web site: https://developers.arcgis.com/silverlight/samplecode/start.htm 6. Compile the code and run your application. 7. Deploy the project to a web server Here below is an example to illustrate the steps and also share some tips and tricks when creating the ArcGIS API for Silverlight application. http://www.terpconnect.umd.edu/~jma3/geog677/w2013/silverlight/api_demo/silverlight_d emo1testpage.html 2
Now, suppose that you have already installed Visual Studio and also ArcGIS API for Silverlight. Start Visual Studio or Visual Web Developer Express. (I use the latter for demonstrations here.) Create a new project. (We can choose the installed template Visual C#.) If you are creating a new Silverlight application, in the New Silverlight Application dialog box, choose Host the Silverlight application in a new website with and a New Web project type setting of ASP.NET Web Application Project. By default, the MainPage.xaml file should be displayed. 3
Now, add a reference to one or more of the ArcGIS Silverlight API assemblies in your Silverlight application project. Open Solution Explorer and locate the Silverlight application project. Right click on the References node and select "Add Reference...". Under the tab Assemblies > Extensions, you will check the small box in front of the ESRI.ArcGIS.Client assembly. (See the screen shot below) 4
In your Silverlight application, open a Silverlight User Control in XAML view (i.e. MainPage.xaml). Copy and paste the code from the sample page. The simplest example is this one - http://resources.arcgis.com/en/help/silverlight-api/samples/start.htm#map You can copy/paste the XAML code (below) from this web site and then replace the code in the MainPage.xaml file. <UserControl x:class="arcgissilverlightsdk.map" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:esri="http://schemas.esri.com/arcgis/client/2009"> <Grid x:name="layoutroot" > <esri:map WrapAround="True" x:name="mymap"> <esri:arcgistiledmapservicelayer ID="MyLayer" Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer" /> </esri:map> </Grid> </UserControl> Then, I did a few customizations: I changed the project name in the first line of XAML (UserControl x:class=" ") to the name of your project. In this case, the project name is Silverlight_Demo1. Obviously, your project name will be different depending on how you named your own project. Make sure that you add.mainpage after the project name. (see the screenshot below) I also used my own map service to replace the one in the sample code. o Make sure that the map service type (dynamic or tiled) matches the code. 5
Save the project. In this case, you doon t need to customize the.xaml.cc file. Compile the code and run your application by clicking on the debug button or from the menu Debug Start Debugging. 6
Your Silverlight application should be hosted in an html or aspx page on a Web server and accessed in a browser. The Visual Studio's internal Web Development Server will work. So, if there is no error, the application will be displayed in a web browser as below. http://localhost:57253/silverlight_demo1testpage.aspx Note: Every time you need to make new changes to the code, you must stop the debugging first. This is a rather simple application. Now, we can add more tools or features to make it more sophisticated. There are many samples to borrow and customize - http://resources.arcgis.com/en/help/silverlight-api/samples/start.htm For example, we can try this sample - http://resources.arcgis.com/en/help/silverlightapi/samples/start.htm#swipemap This control provides a way to see what's underneath a layer. It can be used as a good comparison tool. To implement this feature on a map layer, coding in C# is needed, because, just like ASP, Silverlight is not about function. Instead, it is about presentation. First, I copied/pasted the XAML code to replace that of my project file. Then, I made necessary changes (highlighted in yellow). 7
<UserControl x:class="silverlight_demo1.mainpage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:esri="http://schemas.esri.com/arcgis/client/2009"> <Grid x:name="layoutroot" Background="White"> <esri:map x:name="belowmap" Visibility="Collapsed" WrapAround="True" > <esri:arcgistiledmapservicelayer Url="http://129.2.24.54:6080/arcgis/rest/services/Geog677/LauraTrauth_Lab4/MapServer"/> </esri:map> <esri:map x:name="abovemap" WrapAround="True" ExtentChanging="AboveMap_ExtentChanging"> <esri:arcgistiledmapservicelayer Url="http://129.2.24.54:6080/arcgis/rest/services/Temp/Map_Caching_demo/MapServer"/> </esri:map> <Canvas x:name="rootcanvas" SizeChanged="canvas_SizeChanged"> <Rectangle x:name="slider" MouseLeftButtonDown="Handle_MouseDown" MouseMove="Handle_MouseMove" MouseLeftButtonUp="Handle_MouseUp" Width="5" Fill="Red"/> </Canvas> <Border BorderBrush="Black" VerticalAlignment="Top" BorderThickness="1" Margin="15" Background="White" HorizontalAlignment="Right"> <TextBlock TextAlignment="Center" Text="Mouse down on red rectangle and drag to swipe" Height="16" Margin="15,5,15,5" /> </Border> </Grid> </UserControl> Now, it s necessary to customize the C# file MainPage.xaml.cs which can be opened by double-clicking on its name in Solution Explorer Panel on the right. (This is because I created this project using the C# template.) I copied/pasted the Code Behind C# from the sample to replace the code in MainPage.xaml.cs of my project. Then, I customized the code. The specific changes to the code can be seen below (highlighted in yellow). using System.Windows; using System.Windows.Controls; using System.Windows.Input; using System.Windows.Media; using System.Windows.Shapes; using ESRI.ArcGIS.Client; 8
namespace Silverlight_Demo1 { public partial class MainPage : UserControl { bool ismousecaptured; double mousehorizontalposition; public MainPage() { InitializeComponent(); The rest of the code remain unchanged from the original sample code. Debug and Run the application. Now that I have created this project, I would like to publish it to a web server. The procedures are very simple: 1. Use WinSCP to connect to the Terpconnect server 2. Create a folder on the server (For example, Silverlight\API_Demo in my case) 3. On your local computer, navigate to the Silverlight project folder In my case, all the files for this specific project are saved under this folder - C:\WorkSpace\Geog677\W2013\Demos\Silverlight\Silverlight_Demo1 4. Further navigate to the sub-folder \Silverlight_Demo1\Bin\Debug 5. Transfer the following two files from this subfolder to the folder on Terpconnect. Silverlight_Demo1.xap Silverlight_Demo1TestPage.html The file names will be different in your case depending on how you named your project. The bottom line is that you just need to upload the XAP and HTML files to the server. The URL of my Silverlight web application is - http://www.terpconnect.umd.edu/~jma3/geog677/w2013/silverlight/api_demo/silverlight_d emo1testpage.html 9
Your tasks: You need to create a Web GIS application using ArcGIS API 3.0 for Silverlight by practicing those steps described earlier. You can use the example above as a reference even though your own application will be different You are encouraged but not required to try other tools/features from the samples. Be creative! 10
Part II: ArcGIS Viewer for Silverlight The ArcGIS Viewer for Silverlight is a ready-to-deploy configurable client application built with the ArcGIS API for Silverlight. Essentially it is a template for ArcGIS API for Silverlight. It allows users to quickly create rich web mapping applications using a fully interactive configuration experience. The idea to reduce as much programming as possible so that users can develop great Silverlight applications without involving much coding. It is designed so users can configure and deploy a web mapping application n easily and quickly. The latest version is 3.2 released December 2013. To learn more about the concepts of ArcGIS Viewer for Silverlight, check out this Web page - http://resources.arcgis.com/en/help/silverlight-viewer/concepts/index.html The first step is to download ArcGIS Viewer for Silverlight 3.2: http://resources.arcgis.com/en/communities/silverlight-viewer/ Before installing the ArcGIS Viewer for Silverlight on Windows 7, you must enable the Windows features as shown below. For more information about Turn Windows features on or off, you can refer to this web page - http://windows.microsoft.com/en-us/windows7/turn- Windows-features-on-or-off 11
The use of ArcGIS Viewer for Silverlight is very straight forward because it is GUI driven and the steps are easy to follow. Refer to this Web page - http://resources.arcgis.com/en/help/silverlightviewer/concepts/index.html#/quick_start_guide_to_the_arcgis_viewer_for_silverlight/01770 000003v000000/ Once you have installed the ArcGIS Viewer for Silverlight, open the Application Builder as follows: 1. Click the Start menu > All Programs > ArcGIS > ArcGIS Viewer for Silverlight 3.2. This opens the Application Builder component of ArcGIS Viewer for Silverlight in your default browser. 2. In the browser window, click Create New Application. 3. To create your Viewer application, you must first choose a map. You can create a New Map, which includes a configurable basemap and options for adding layers, or you can create a map based on an existing Web Map from ArcGIS Online. 12
The rest steps are straightforward and similar to those of ArcGIS Viewer for Flex that you practiced in Lab 6. Therefore, I will not go into details. You will need to customize the following: Title Logo Basemap Operational layers Tools Links Once you have configured your Viewer application by selecting a basemap and adding layers, click the Deploy button in the upper right corner of the Application Builder. Then specify a name for the application on the dialog that appears and click OK. The Viewer application deploys to the location specified during the installation process, for example, c:\inetpub\wwwroot\apps. The new Viewer application automatically opens in a new browser window. To make additional changes, return to the Application Builder window in which you were previously working. After deploying the map for the first time, the Deploy button changes to a Save button. Click Save as necessary while updating your application configuration. Click Save As to create a new version of the Viewer application. Now, you can publish the project to a web browser such as Terpconnect. 13
You need to upload the whole folder of the project to the server. In my case, all the files of this demo project are saved under the folder C:\inetpub\wwwroot\Apps\Demo Jan24-2013\ After I uploading the files to Terpconnect server, I can access the Silverlight web application through a URL - http://www.terpconnect.umd.edu/~jma3/geog677/w2013/silverlight/api_viewer_demo/ Your tasks: You need to create a Web GIS application using ArcGIS Viewer for Silverlight 3.2. You must use an operational layer from your own map services. You must have at least four tools in your web application. (Make sure everything works.) Deploy your application on Terpconnect server. In the lab report, write the URL with a brief description of the map layers, and features/tools. Also screen shots of your Web GIS applications (both Part I and II). Be creative! ----- THE END ----- 14