• North American Sales: 1-800-231-8588
  • Global Contacts
  • My Account
Infragistics Infragistics
Menu
  • North American Sales: 1-800-321-8588
  • My Account
    • Sign In/Register
  • Design & DevelopmentDesign & Develop
    • Best Value
      Infragistics Ultimate The complete toolkit for building high performing web, mobile and desktop apps.
      Indigo.Design Use a unified platform for visual design, UX prototyping, code generation and application development.
    • Web
      Ignite UI for Angular Ignite UI for JavaScript Ignite UI for React Ultimate UI for ASP.NET Indigo.Design
    • Desktop
      Ultimate UI for Windows Forms Ultimate UI for WPF
      Prototyping
      Indigo.Design
    • Mobile
      Ultimate UI for Xamarin Ultimate UI for iOS Ultimate UI for Android
    • Automated Testing Tools
      Test Automation for Micro Focus UFT: Windows Forms Test Automation for Micro Focus UFT: WPF Test Automation for IBM RFT: Windows Forms
  • UX
    • Indigo.Design Desktop Collaborative prototyping and remote usability testing for UX & usability professionals
    • Indigo.Design A Unified Platform for Visual Design, UX Prototyping, Code Generation, and App Development
  • Business Intelligence
    • Reveal Embedded Accelerate your time to market with powerful, beautiful dashboards into your apps
    • Reveal App Empower everyone in your organization to use data to make smarter business decisions
  • Team Productivity
  • Learn & Support Support
    • Help & Support Documents
    • Blogs
    • Forums
    • Product Ideas
    • Reference Applications
    • Customer Stories
    • Webinars
    • eBook & Whitepapers
    • Events
  • Free Trials
  • Pricing
    • Product Pricing / Buy Online
    • Renew Existing License
    • Contact Us
Silverlight
  • Product Platforms
  • More
Silverlight
Silverlight Auto-Detail Zoom with MapLayers
  • Blog
  • Files
  • Wiki
  • Mentions
  • Tags
  • More
  • Cancel
  • New
Silverlight requires membership for participation - click to join
  • Silverlight
  • Auto-Detail Zoom with MapLayers
  • Building the oMovies Browser: Netflix oData using Infragistics NetAdvantage Silverlight Controls
  • Conditional Formatting With The XamWebGrid
  • Custom Commands with Infragistics Silverlight Commanding Framework
  • +Data Display using xamWebMap
  • Displaying AutoCAD drawings using xamWebMap
  • Extension Methods for Navigating the xamDataChart
  • faceOut - A Silverlight Reference Implementation
  • Red vs. Blue: Conditional Formatting in xamWebMap
  • Styling the xamWebGrid Group By Area
  • Using the VirtualCollection for Server-Side xamWebGrid Paging

Auto-Detail Zoom with MapLayers

Introduction

Showing data in a visual manner such as a map, can make the data much easier to understand.  However, in many scenarios showing too much data in a map will lead to information overload, and result in a confused user.  Instead, data can be revealed to the user as they progressively zoom in on the map.  Mirroring the real world, the closer the user gets the more details he or she will see.  Setting this up in the map is incredibly simple, and is outlined in the steps below.

Adding Layers to the Map

In order to achieve the desired result of showing details as we zoom, we need to split up the details into separate map layers.  Let’s think of a classic example of showing state or city boundaries, then roads as the user zooms in.  The XamWebMap can contain any number of individual MapLayers.  Each layer can be loaded from a Shapefile.  As an example, Figure 1 below shows a XamWebMap with 4 separate layers with each layer adds an additional level of detail.

<igMap:XamWebMap>
    <igMap:XamWebMap.Layers>
        <igMap:MapLayer LayerName="statesLayer">
        <igMap:MapLayer.Reader>
            <igMap:ShapeFileReader DataMapping="Name=STATE; Caption=STATE;" 
                                   Uri="Shapefiles/states/statesp020"/>
        </igMap:MapLayer.Reader>
    </igMap:MapLayer>
        <igMap:MapLayer LayerName="countiesLayer" VisibleFromScale="50" >
            <igMap:MapLayer.Reader>
                <igMap:ShapeFileReader Uri="Shapefiles/counties/countyp020"/>
            </igMap:MapLayer.Reader>
        </igMap:MapLayer>
        <igMap:MapLayer LayerName="roadsLayer" VisibleFromScale="95" >
            <igMap:MapLayer.Reader>
                <igMap:ShapeFileReader DataMapping="Name=NAME; Caption=NAME" 
                                       Uri="Shapefiles/roads/roadtrl020"/>
            </igMap:MapLayer.Reader>
        </igMap:MapLayer>
        <igMap:MapLayer LayerName="citiesLayer" VisibleFromScale="500" >
            <igMap:MapLayer.Reader>
                <igMap:ShapeFileReader DataMapping="Name=NAME; Caption=NAME" 
                                       Uri="Shapefiles/cities/citiesx020"/>
            </igMap:MapLayer.Reader>
        </igMap:MapLayer>
    </igMap:XamWebMap.Layers>
</igMap:XamWebMap>

Figure 1: XamWebMap with Multiple Layers

 

Configuring Detail Visibility

Looking back into Figure 1, notice that the layers are setting the “VisibleFromScale” property.  This property indicates the point at which the layer becomes visible on the map.  Once this property is set, the XamWebMap will automatically toggle the visibility of this layer based on the zoom factor.  As the user zooms in and out, the layer will appear and disappear automatically. 

layer1 layer2 layer3 layer4

Figure 2: Zoom progression – from left to right: state boundaries, county boundaries, roads, city names. 

  • xamWebMap
  • Share
  • History
  • More
  • Cancel
Related
Recommended