Fishing in Indiana with the ArcGIS API for Silverlight / WPF. Create the application. Add layers. Change the basemaps

Transcription

1 Fishing in Indiana with the ArcGIS API for Silverlight / WPF Create the application Start Blend New Standard Mapping Application Build the project and run. o Show major parts of the app Add layers Show objects and timeline Show properties of the map Click Layers o Show the existing layer o Add a new Dynamic layer Start a browser and navigate to (Normally this is how you would find a service). Copy the URL from the browser In Blend, click the Arrow next to URL. Explore ArcGIS Online and show how the Service Browser works. Add the dnr server to the list by pasting it into the Add Server text box and click Add Server. Add the ProgramMaps > Trails DNR OutRec and click OK. Change the visible layers to 0. o Add a new FeatureLayer For URL choose ProgramMaps > FishingSites2 > AccessSites. For Where enter OBJECTID > 0 (We have to do this at the state because the default query would be 1 = 1 which is blocked by the states firewall) For ID enter fishing o Add a new Graphics Layer ID graphics o Click OK to the Layers Collection Editor. Run the application to show the features Change the basemaps Edit the layers of the map o Changed the Tiled map service to World StreetMap. o Copy the URL. o Save the URL as a New Resource named StreetMapURL. Select the streets radio button In the Objects and Timeline select the SetLayerUrlAction under the RadioButton Set the URL to the StreetMapURL resource.

2 Paste the URL into a browser. Navigate into the World_Topo_Map map service and copy the URL. In the Objects and Timeline select the SetLayerUrlAction under the Topo RadioButton Paste the URL into the URL property. Save the URL as a resource named TopoMapURL. In the browser navigate to Navigate into the Imagery_Basemap service. Copy the URL. In the Objects and Timeline select the SetLayerUrlAction under the Imagery RadioButton Paste the URL into the URL property. Save the URL as a resource named ImageryURL. Test the app. Notice that the overview and magnifier tools don t work. Set the extent to Indiana In Blend select the map and expand Map Settings on the Properties tab. Set the extent as follows (I got these by drawing a box in ArcMap after adding the basemap from AGO). (spaces in the numbers are just for readability) o SR WKID: o XMax: o XMin: o YMAX: o YMin: Save the map extent to a new resource named INFullExtent. Set the URL for the Magnifying glass to the ImageryURL resource. Set the URL for the OverviewMap to the StreetMapURL resource. In the Overview map properties set the MaximumExtent to INFullExtent. Test the application. Add a new symbol In the Projects window Right click Styles and click Add New Item. Choose Resource Dictionary and for file name enter MySymbols.xaml and click OK. Open a browser and go to the symbol gallery. Choose Custom Marker Symbols. Click on the CustomStrobeMarkerSymbol. Click Resource Dictionary XAML and copy the entire first line. Paste it over the ResourceDictionary element in MySymbols.xaml. From the Symbol Gallery, copy all the Symbol XAML. Paste it into your resource gallery. Show that this has some animation defined in the visual state group CommonStates.

3 Change CommonStates to SelectionStates and change MouseOver to Selected. See the Remarks section of the Control Template property of the Markersymbol in the API reference ( Open the Layers Collection for the map. Set the symbol for the FeatureLayer to the CustomStrobeMarkerSymbol local resource. Show attributes for the fishing locations with a Feature Data Grid Add a reference to C:\Program Files (x86)\microsoft SDKs\Silverlight\v3.0\Libraries\Client\ System.Windows.Controls.Data. From Assets, Add a WindowPanel to the page. Edit the properties of the WindowPanel o Name: fishingdata o HorizontalContentAlignment: Stretch o VerticalContentAlignment: Stretch Add a FeatureDataGrid inside the windowpanel. Edit the properties of the FeatureDataGrid. o Margin: 5,5,5,8 o HorizontalAlignment: Stretch o VerticalAlignment: Stretch o Height/Wdith: Auto o Map: Data Binding > Element Property > Map o GraphicsLayer Data Binding > Element Property > Map > Layers[2] (use a custom path expression) Open the properties for the feature layer. Add fields to the FeatureDataGrid (OutFields) o Add a string of value SITE_NAME,LAND_TYPE,WATERBODY,LOCATION,ADA_ACCESS,BOAT_RAMP,SHORELI NE,TYPE_OF_LA,FEE,MOTOR,MOTOR_REST (* causes a scripting error) Demo feature data grid o Select multiple o Select all Behaviors Change the name of the menu items o Zoom to IN o Toggle Fishing o Delete menu item #3 Drag ZoomToLayerAction onto the Zoom to IN menu o Set the TargetName to the Map (using the selector) o Set its layer ID to fishing Drag ToggleLayerAction onto the Toggle Fishing menu

4 o o Set Targetname to the Map For LayerID enter fishing Drag ToggleVisibilityAction onto the Toggle Fishing menu o Set the Target name by clicking the elipses and navigating to the datagrid window (fishingdata). Test the application Make a toolbar Add a border o Background: Local Resource CommonBackgroundBrush o Border: Local Resource CommonBorderBrush o CornerRadius: 10 o Effect: Local Resource dropshadow. o HorrizaontalAlignment: Left o VerticalAlignment: Top Add a grid inside the border (in objects and timeline because the border is now so small) o Margin: 5,5,5,8 o Two rows Add textblock to top row o Forground: white o Text: Redlining tools o Margin: Reset o HorrizontalAlignment: Middle o VerticleAlignment: Middle Add a stack panel to the second row o Margin: Reset o Orientation: Horizontal Add 5 buttons to the stack panel Make the buttons/border/grid/and stack panel width and height Auto Add MouseDragElementBehavior to the border Test the application o Show that the new toolbar can be dragged around Change the text for the buttons o Point, Line, Polygon, Freehand, Clear Add the RedlineAction to the Point o DrawMode Point o TargetName: Map (use the Artboard element picker) o GraphicsLayerID: graphics Copy the RedlineAction to the other buttons Change the DrawMode on each of the other buttons Add ClearGraphicsAction to the Clear button

5 o TargetName: Map o GraphicsLayerID: graphics Test the application Changing the look and feel of the app Edit Styles.xml CommonBackgroundBrush o 0% break: White o 10% break: Black o 100% break: Dark Grey (or any other dark color) Set feature data grid window to the CommonBackgroundBrush Edit the template for the first button (in Styles.xaml) o Change background gradient to CommonBackgroundBrush o Foreground to white Change style for other buttons to the style of the first Edit ApplicationTitle and ApplicationSubtitle in the resources o Indianan Fishing o Indiana Department of Natural Resources Optional Fun with feature layers In Blend, Map Properties > Layers FeatureLayer For Clusterer click New. Click OK. Test the application. Map Properties > Layers FeatureLayer For MapTip click New. Select Border and click OK. Set the Background of the border to CommonBackgroundBrush. Set the corner radius to 10. Click OK. Edit in Visual Studio. Open a browser and navigate to the Silverlight Interactive Samples > Feature Layers > MapTips. Show that the MapTips use a converter. Copy the namespace for the converter into the namespace definitions of the app in visual studio. (top of the page) Copy the converter resources into the application in visual studio into UserControl.Resources. Use the Document Outline to find the MapTip.

6 Copy the maptip content into visual studio. Change CITY_NAME to SITE_NAME. Change Population to Waterbody. Change POP1990 to WATERBODY. Change the foreground for the three text boxes to white. Test the app. Optional selecting features Show properties of the map Click Layers o Add another GraphicsLayer to the bottom of the list ID: selection o Select the fishing feature layer Next to the URL property click the Advanced property options and click Convert to new resource Name the resource fishingurl and click OK. o Click OK From Assets, Add a WindowPanel to the page. Edit the properties of the WindowPanel o Name: selectiondata o HorizontalContentAlignment: Stretch o VerticalContentAlignment: Stretch o Background: CommonBackgroundBrush Add a FeatureDataGrid inside the windowpanel. Edit the properties of the FeatureDataGrid. o Margin: 5,5,5,8 o HorizontalAlignment: Stretch o VerticalAlignment: Stretch o Height/Wdith: Auto o Map: Data Binding > Element Property > Map o GraphicsLayer Data Binding > Element Property > Map > Layers[4] (use a custom path expression) Add a border o Background: Local Resource CommonBackgroundBrush o Border: Local Resource CommonBorderBrush o CornerRadius: 10 o Effect: Local Resource dropshadow. o HorrizaontalAlignment: Left o VerticalAlignment: Top Add a grid inside the border (in objects and timeline because the border is now so small)

7 o Margin: 5,5,5,8 o Two rows Add textblock to top row o Forground: white o Text: Selection tools o Margin: Reset o HorrizontalAlignment: Middle o VerticleAlignment: Middle Add a stack panel to the second row o Margin: Reset o Orientation: Horizontal Add 4 buttons to the stack panel Make the buttons/border/grid/and stack panel width and height Auto Add MouseDragElementBehavior to the border Change the text for the buttons o Rectangle, Polygon, Clear, Toggle Attributes Add the SpatialQueryAction to the Rectangle o DrawMode Rectangle o TargetName: Map (use the Artboard element picker) o LayerID: selection o Url: Local Resource > fishingurl. o OutFields: click elipses Click Add another item o For properties enter: SITE_NAME,LAND_TYPE,WATERBODY,LOCATION,ADA_ACCESS,BOAT_ RAMP,SHORELINE,TYPE_OF_LA,FEE,MOTOR,MOTOR_REST (* causes a scripting error) Symbol: Local Resource > CustomStrobeMarkerSymbol Copy the SpatialQueryAction to the Polygon buttons (in the Objects and Timeline) Change the DrawMode to polygon Add ClearGraphicsAction to the Clear button o TargetName: Map o GraphicsLayerID: selection Copy the ClearGraphicsAction to the Rectangle and Polygon buttons (we want the current selection to be removed when we drag a new box or rectangle) Drag a TobbleVisibilityAction onto the Toggle Attributes button. o TargetName: selectiondata (you might need to build the project before the Artboard element picker works properly) Change the visibility of the selectiondata window to Collapsed. Test the application

8 Optional (Make it so the Window Panel can t be canceled) Edit the template for the Window Panel. (Right click on the window in the objects and timeline) Remove imgclose.