Introduction to Infragistics Geographic Map

In the new Silverlight Data Visualization 11.2 Release you could have the advantage to use the outstanding  new XamGeographicMap CTP.  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
    –  GeographicContourShapeSeries
    – GeographicContourLineSeries
    – GeographicScatterAreaSeries
    – GeographicXYTriangularySeries
    – GeographicSymbolSeries

 

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 (XamGeospatialMap 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

IntroXamGeographicMap_Pic01

 

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.

IntroXamGeographicMap_Pic05

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)

IntroXamGeographicMap_Pic02

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

IntroXamGeographicMap_Pic04

IntroXamGeographicMap_Pic03

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

 

IntroXamGeographicMap_Pic06

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 .

IntroXamGeographicMap_Pic07

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.

IntroXamGeographicMap_Pic08a

IntroXamGeographicMap_Pic08

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.

IntroXamGeographicMap_Pic09

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.

About Mihail Mateev

am a Microsoft Regional Director currently living in Sofia, Bulgaria. My interests range from technology to entrepreneurship. I am also interested in programming, web development, and education. Technical Consultant, Community enthusiast, PASS Regional Mentor for Central Eastern Europe, chapter lead, Microsoft MVP – Microsoft Azure. Organizer of SQLSaturday, Azure Bootcamp, IoT and JavaScript conferences. My experience is in various areas related to Microsoft technologies, including Windows Platform, ASP.Net MVC, MS SQL Server and Microsoft Azure. I have a PhD in cloud computing and am a university lecturer on Smart Homes and Smart Energy IoT Solutions
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s