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.

Recommended