Blog

Introduction to Infragistics Geographic Map

[Infragistics] Mihail Mateev / Monday, November 7, 2011

In the new NetAdvantage for Silverlight Data Visualization 11.2 Release you could have the advantage to use the outstanding  XamGeographicMap (CTP) component.  This is a new high-performance control predicted to work with a huge amount of spatial data. It is based on the fast XamDataChart in you could use the work experience from data chart control (XamDataChart). XamGeographicMap control has a lot of exciting features like:

  • Map Progression - Display multiple shape series in the Geographic Map control to show progression of the values in the different places.
  • Series Drilldown - Load and display different shape files based on zoom distance in Geographic Map control.
  • Overview Pane – Use the map overview pane to navigate the maps in an intuitive and easy to use display.
  • Imagery Tile Source (including OpenStreetMap, Bing Maps, etc.)
  • Many Geographic Series – You could use

    - GeographicShapeSeries
    - GeographicPolylineSeries
    - GeographicSymbolSeries
    - GeographicShapeControlSeries
    - GeographicContourLineSeries
    - GeographicScatterAreaSeries

This blog is about how to start with Infragistics Geographic Map. In the article is shown a walkthrough how to create simple Silverlight application using XamGeographicMap to display data from OpenStreetMap and shapefiles (XamGeographicMap CTP for now is available only for Silverlight).

Requirements:

  • Visual Studio 2010
  • Latest Silverlight 4  Tools for Visual Studio 2010
  • NetAdvantage for Silverlight Data Visualization Vol.2011.2

Steps to Reproduce:

  • Create a Silverlight application
  • Add XamGeographicMap control
  • Configure settings to display properly Imagery Tile Source and shapefiles.

Create a Silverlight application

 

 

Add XamGeographicMap control

Add Geospatial Map in the XAML

 1: <UserControl x:Class="XamGeographicMapDemo.MainPage"
 2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 5:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 6:     mc:Ignorable="d"
 7:     d:DesignHeight="300" d:DesignWidth="400" xmlns:ig="http://schemas.infragistics.com/xaml">
 8:  
 9:     <Grid x:Name="LayoutRoot" Background="White">
 10:         <ig:XamGeographicMap HorizontalAlignment="Stretch" Margin="20" Name="xamGeographicMap1" VerticalAlignment="Stretch" />
 11:     Grid>
 12: UserControl>

 

Run the application. You could see Imagery Tile Source from OpenStreetMap. It is the default imagery source and could be set via XamGeographicMap.BackgroundContent property.

 

Configure settings to display properly Imagery Tile Source and shapefiles.

First you must add your shapefiles in an appropriate place in the web project (“/ClientBin/ShapeFiles/Cntry00” in this case)

 

Before you make the setting to read shapefiles in the your application check the shapefile structure using application like “MapWindow GIS”.

 

 

  • Add a style selector from type RandomFileStyleSelector, that will be used to create thematic map.
  • Create ShapefileConverter, used to read shapefiles. Set ShapefileSource property  to point to your *.shp file and DatabaseSource for your *.dbf file.
  • Add GeographicShapeSeries and set ItemsSource to use your ShapefileConverter

 

 1: <Grid x:Name="LayoutRoot" Background="White">
 2:      <Grid.Resources>
 3:          <RadialGradientBrush x:Key="mapBackground">
 4:              <GradientStop Color="#FFD4D4D4" Offset="1" />
 5:              <GradientStop Color="White" />
 6:          RadialGradientBrush>
 7:          
 8:          <ig:BrushCollection x:Key="shapeBrushes">
 9:              <SolidColorBrush Color="#FF38A3D6" />
 10:              <SolidColorBrush Color="#FF134157" />
 11:          ig:BrushCollection>
 12:          <ig:RandomFillStyleSelector x:Key="shapeStyleSelector" Brushes="{StaticResource shapeBrushes}" />
 13:          <ig:ShapefileConverter x:Key="shapeFileSource" 
 14:                                  ImportCompleted="OnShapefileImportCompleted"
 15:                                 ShapefileSource="/ClientBin/ShapeFiles/Cntry00/cntry00.shp" 
 16:                                 DatabaseSource="/ClientBin/ShapeFiles/Cntry00/cntry00.dbf" />
 17:      Grid.Resources>
 18:      <ig:XamGeographicMap HorizontalAlignment="Stretch" Margin="20" Name="xamGeographicMap1" Background="{StaticResource mapBackground}"  VerticalAlignment="Stretch" 
 19:           OverviewPlusDetailPaneVisibility="Visible"                 >
 20:          <ig:XamGeographicMap.Series>
 21:              <ig:GeographicShapeSeries ItemsSource="{StaticResource shapeFileSource}" 
 22:                                            ShapeStyleSelector="{StaticResource shapeStyleSelector}" 
 23:                                        ShapeMemberPath="Points" >
 24:                  <ig:GeographicShapeSeries.MarkerTemplate>
 25:                      <DataTemplate>
 26:                          <TextBlock Text="{Binding Item.Fields[CNTRY_NAME]}" Foreground="White"  />
 27:                      DataTemplate>
 28:                  ig:GeographicShapeSeries.MarkerTemplate>
 29:  
 30:              ig:GeographicShapeSeries>
 31:          ig:XamGeographicMap.Series>
 32:      ig:XamGeographicMap>
 33:  Grid>

 

 

To be sure that map limits are the same like the limits from shapefile attach to ShapefileImportCompleted event in your converter event handler where to set XamGeographicMap.WorldRect from shapefile

 1: private void OnShapefileImportCompleted(object sender, System.ComponentModel.AsyncCompletedEventArgs e)
 2:  {
 3:  
 4:      // show and set bounds of geo-map world 
 5:      ShapefileConverter shapeFileConverter = (ShapefileConverter)this.LayoutRoot.Resources["shapeFileSource"];
 6:      this.xamGeographicMap1.WorldRect = shapeFileConverter.WorldRect;
 7:  }

 

Run the application. Now you could be sure that the limits of the map are the same as the limits of  your spatial data .

 

Sometimes it is much better to show on the map only most meaningful data.  You could use for the world shapefiles longitude from –180 to 180 degrees and latitude from –75 to 75 degrees:

 1: #region GetRecForLatitudeLongitude
 2: private Rect GetRecForLatitudeLongitude(double topLeftX, double topLeftY, double bottomRightX, double bottomRightY)
 3: {
 4:     return new Rect(Math.Min(topLeftX, bottomRightX),
 5:     Math.Min(topLeftY, bottomRightY),
 6:     Math.Abs(topLeftX - bottomRightX),
 7:     Math.Abs(topLeftY - bottomRightY));            
 8: }
 9: #endregion //GetRecForLatitudeLongitude
 10:  
 11:  
 12:  
 13: #region OnShapefileImportCompleted
 14: private void OnShapefileImportCompleted(object sender, System.ComponentModel.AsyncCompletedEventArgs e)
 15: {
 16:     this.xamGeographicMap1.WorldRect = GetRecForLatitudeLongitude(-180, 75, 180, -75);
 17: }
 18: #endregion //OnShapefileImportCompleted

 

Run the application. Now you have specific rectangle that Geographic Map visualize. It is possible to see the difference between imagery tile source limits and XamGeographicMap limits.

 

 

If you don’t want to see the difference between imagery tile source and your custom limits set OpenStreetMapImagery.Opacity = 0.

 1: <ig:XamGeographicMap HorizontalAlignment="Stretch" Margin="20" Name="xamGeographicMap1" Background="{StaticResource mapBackground}"  VerticalAlignment="Stretch" 
 2:       OverviewPlusDetailPaneVisibility="Visible" >
 3:      <ig:XamGeographicMap.BackgroundContent>
 4:          <ig:OpenStreetMapImagery Opacity="0" />
 5:      ig:XamGeographicMap.BackgroundContent>
 6:      <ig:XamGeographicMap.Series>
 7:          <ig:GeographicShapeSeries ItemsSource="{StaticResource shapeFileSource}" 
 8:                                        ShapeStyleSelector="{StaticResource shapeStyleSelector}" 
 9:                                    ShapeMemberPath="Points" >
 10:              <ig:GeographicShapeSeries.MarkerTemplate>
 11:                  <DataTemplate>
 12:                      <TextBlock Text="{Binding Item.Fields[CNTRY_NAME]}" Foreground="White"  />
 13:                  DataTemplate>
 14:              ig:GeographicShapeSeries.MarkerTemplate>
 15:  
 16:          ig:GeographicShapeSeries>
 17:      ig:XamGeographicMap.Series>
 18:  ig:XamGeographicMap>

 

Run again the application. Now you have a perfect map using XamGeographicMap.

 

 

This sample demonstrate how to start with the new Infragistics Geographic Map. Expect next blogs with more details about other XamGeographicMap features.

Sample application you could download here:

Infragistics Geographic Map CTP is an exciting new component in  NetAdvantage Data Visualization 11.2 for Silverlight. You can try it a few days. Follow news from Infragistics in http://infragistics.com/ and twitter: @infragistics for more information about new Infragistics products.