Configuring the Map Provider (igMap)

Topic Overview

Purpose

This topic demonstrates, with code examples, how to configure the igMap™ control to use the supported map providers and their imagery sets.

Required background

The following topics are prerequisites to understanding this topic:

• igMap Overview:This topic provides conceptual information about the igMap control including its main features, minimum requirements, and user interaction capabilities.

• Adding an igMap: This topic demonstrates how to add a simple map with basic features to a web page.

In this topic

This topic contains the following sections:

• Introduction
• Background Content Configuration
• Map Imagery Reference
  • Map imagery summary
  • Bing Maps imagery sets
• Code Examples
  • Configuring OpenStreetMaps Background Content
  • Configuring Bing Maps Background Content With Imagery Set
• Related Content
  • Topics
  • Samples
  • Resources

Introduction

Map providers for igMap summary

The igMap control can use any of the following map providers:

• OpenStreetMap
• Bing® Maps

The map providers deliver the map images and the map series are plotted as overlays over this background content. The control supports plotting any geographic series on any background content. In addition to being able to select your map provider, you can also select between different imagery sets the providers deliver. An imagery set is a themed set of maps like satellite images, satellite images with name labels or road network.

Note: Bing maps require you to provide your custom access key to access their content.

The table below shows the same map area and geographic symbol series with the three available map providers.

OpenStreetMap	Bing Maps

Background Content Configuration

Control configuration summary chart

The following table lists the configurable aspects of the igMap control related to map providers and imagery sets. Additional details are available after the table.

Map Imagery Reference

Map imagery summary

Some map providers offer multiple imagery sets for their maps. Imagery sets are different map images that provide different content or styling.

Bing Maps imagery sets

The following summarizes the imagery sets for Bing Maps supported by the igMap control. Configure the selected style by assigning a style code to the backgroundContent.imagerySet option.

Aerial

AerialWithLabels

Road

collinsBart

Code Examples

Code examples summary

The following table lists the code examples included in this topic.

Code Example: Configuring OpenStreetMaps Background Content

Description

This example shows how to configure a map control with OpenStreetMaps background.

Code

The following code in JavaScript configures a map control to use OpenStreetMaps. Assign the backgroundContent option to an object with "openStreet" specified for type.

In JavaScript:

$("#map").igMap({
    ...
    backgroundContent: {
        type: "openStreet"
    },
    ...
});

The following code in ASP.NET MVC configures a map control to use OpenStreetMaps. The BackgroundContent() function is passed a lambda expression that executes the BackgroundContentBuilder. OpenStreetMaps() static method. That action instantiates an OpenStreetMaps class instance that generates JavaScript code similar to the example above.

In ASPX:

<%= Html.Infragistics().Map(Model)
        .ID("map")
        ...
        .BackgroundContent(bgr => bgr.OpenStreetMaps())
        ...
        .DataBind()
        .Render()
%>

Code Example: Configuring Bing Maps Background Content With Imagery Set

Description

This example shows how to configure a map control with the Bing Maps background. It also configures the imagery set to display Road.

Code

The following code in JavaScript configures a map control to use Bing Maps. The backgroundContent option is assigned an object with "bing" specified for type and a key specified to enable access to the Bing Maps services. Specify the Road imagery set in the imagerySet option.

In JavaScript:

$("#map").igMap({
    ...
    backgroundContent: {
        type: "bing",
        key: "123456789abcdef",
        imagerySet: "Road"
    },
    ...
});

The following code in ASP.NET MVC configures a map control to use Bing Maps. The BackgroundContent() function is passed a lambda expression which executes the BackgroundContentBuilder.BingMaps() static method with the Bing Maps services access key passed as a parameter. That action instantiates a BingMaps class instance that generates JavaScript code similar to the example above.

In ASPX:

<%= Html.Infragistics().Map(Model)
        .ID("map")
        ...
        .BackgroundContent(bgr => bgr.BingMaps("123456789abcdef")
                .ImagerySet(ImagerySet.Road))
        ...
        .DataBind()
        .Render()
%>

Related Content

Topics

The following topics provide additional information related to this topic.

• Data Binding (igMap): This topic explains how to bind the igMap control to different data sources depending on the map series visualized.

• Configuring Features (igMap): This topic is a landing page linking to the topics explaining how to configure various features of the igMap control.

Samples

The following samples provide additional information related to this topic.

• Bing Maps: This sample demonstrates how to use Bing Maps to render a geographic series with the map control.

Resources

The following material (available outside the Infragistics family of content) provides additional information related to this topic.

• OpenStreetMap:The home page of OpenStreetMap.

• Bing Maps: The home page of Bing Maps.