How to Use Different Background Content in the Infragistics jQuery Map

[Infragistics] Mihail Mateev / Friday, August 24, 2012

When you publish spatial data in WEB applications you often need to use public imagery services such as Bing Maps, OpenStreetMap, CloudMade Maps and others. Last years jQuery is probably the most popular JavaScript framework, used from WEB developers. Despite the popularity of jQuery still has relatively few components for displaying spatial data (map controls) for this framework. This article will help you to use different types of imagery services with one of the new map controls for jQuery - igMap

CodeProject

Introduction

The igMap control allows you to display data that contains geographic locations from view models or geospatial data loaded from spatial data formats and geographic imagery maps.

Geographic Imagery Maps

Geographic imagery is a detailed representation of the world from a top view perspective. It can consist of an aerial-satellite map or road maps in a multi-scale imagery tiles structure. The Infragistics jQuery Map control can display geographic imagery in order to provide end-users with rich and interactive world maps and geographic context for geospatial data.

Infragistics jQuery control can display geographic imagery tiles from three supported mapping services (Bing Maps Open Street Maps, and CloudMade Map) or from other mapping services that can be easily implemented in an application.

Map Background Content

The igMap control’s "backgroundContent" property is used to display all supported types of geographic imagery sources. For each geographic imagery source, there is an imagery class used for rendering corresponding geographic imagery tiles.

By default, the backgroundContent property is set to Open Street Maps Imagery object and the igMap control displays geographic imagery tiles from the Open Street Maps service. In order to display different types of geographic imagery tiles, the Infragistics jQuery Map control must be re-configured.

Background

In this article you will learn how to change on the fly igMap background, using all supported imagery services: Bing Maps, OpenStreetMap, CloudMade Maps. Some Services like OpenStreetMap don’t require developer key and registration. Other imagery services like OpenStreetMap, CloudMade Maps need a special key.

Bing Maps

You can create two Bing Maps Keys. Go to the Bing Maps Account Center at https://www.bingmapsportal.com. If you have a Bing Maps Account, sign in with the Windows Live ID that you used to create the account. Follow the instructions in Creating a Bing Maps Account.

CloudMade Maps

Sign-up for a CloudMade API key, by following this link

Requirements

To understand the example you need a basic knowledge of HTML5, JavaScript and jQuery. You need also to refer jQuery (jQuery core library 1.4.4 version or above) , jQuery UI ( jQuery UI library 1.8.11 or above) and NetAdvantage for jQuery vol. 12.1 scripts (it is recommended to use the latest service release).

Using the code

Before you start:

This is a pure HTML/JavaScript/jQuery example. You have no need to implement a server-side logic. You just need to have script references.

To start you need to have references to Infragistics NetAdvantage for jQuery scripts and styles. The easiest approach is to use Infragistics Content Delivery Network (CDN) for NetAdvantage for jQuery. The files on the CDN are arranged with the same folder structure as is installed locally on a development machine. The best approach is add only Infragistics Loader (igLoader) as reference and after that to use this component to load references in the proper order.

Layout

Demo application has a simple layout with two HTML text elements for Bing Maps and CloudMade Maps keys. In the HTML are add also elements for igCombo and igMap

<label id="lblBing">BingMaps Key:label>

<input id="txtBing" type="text" value="">input>

<label id="lblCloudMade">CloudMade Maps Key:label>

<input id="txtCloudMade" type="text" value="">input>

<br/>

<span id="imageryService">span>

<div id="map">div>

Script Loader

The Infragistics Loader resolves all the Infragistics resources (styles and scripts) for you. You just need to provide the path to required CSS and JavaScript files and declare which resources the loader will fetch for the page.

$.ig.loader({

    scriptPath: "http://cdn-na.infragistics.com/jquery/20121/2049/js/",

    cssPath: "http://cdn-na.infragistics.com/jquery/20121/2049/css/",

    resources: "igMap,igCombo,igShared"

});

jQuery Controls

Create igMap instance. If you have no “backgroundContent” option by default will be used Open Street Maps as an imagery service. This property can not be set to null.

$("#map").igMap({

        width: "700px",

        height: "500px",

        panModifier: "control",

        horizontalZoomable: true,

        verticalZoomable: true,

        windowResponse: "immediate",

        overviewPlusDetailPaneVisibility: "visible",

        seriesMouseLeftButtonUp: function(ui, args) {

        var tets = args;

    }

});

To select different imagery source you could use different elements. In this sample is implemented selection with Infragistics jQuery Combo component.

$("#imageryService").igCombo({

    width: '300px',

    valueKey: 'ID',

    textKey: 'Name',

    mode: 'dropdown',

    selectedItems: [{ value: "openStreet"}],

    dataSource: [

        { "Name": "OpenStreet Maps", "ID": "openStreet" },

        { "Name": "CloudMade Maps", "ID": "cloudMade" },                   

        { "Name": "Bing Maps", "ID": "bing" }

    ]

});

To maintain igMap background content is used igCombo selectionChanged live() event (As of jQuery 1.7, the .live() method is deprecated. It is better to use .on() to attach event handlers).

Background content is an object where you need to set different properties for different imagery service providers.

$('#imageryService').live('igcomboselectionchanged', function (event, ui) {

if(ui.items != null)

{

  

   var imagery = ui.items[0];

   var bgrCont = { type: "openStreet" }; 

   switch (imagery.value)

   {

   case "openStreet":

     bgrCont = { type: "openStreet" }; 

     break;

   case "cloudMade":

     var val = $("#txtCloudMade").val()

     bgrCont = { type: "cloudMade", key: val, parameter: 1};

     break;

   case "bing":

     var val = $("#txtBing").val()

     bgrCont = { type: "bing", key: val};

     break;

   default:

     bgrCont = { type: "openStreet" }; 

   }

   setBackgroundContent(bgrCont);

}                 

});

The current of igMap version doesn’t support backgroundContent change “on the fly” You need to destroy the current map instance and create the new one.

function setBackgroundContent(bgr)

   {

       $("#map").igMap("destroy");

       $("#map").igMap({

               width: "700px",

               height: "500px",

               panModifier: "control",

               horizontalZoomable: true,

               verticalZoomable: true,

               windowResponse: "immediate",

               overviewPlusDetailPaneVisibility: "visible", 

               backgroundContent: bgr,

               windowRect: {

                   left: 0.15,

                   top: 0.10,

                   width: 0.7,

                   height: 0.7

               }

       });

   

   }

Alternative approach

In NetAdvantage for jQuery vol.12.1 jQuery Map is CTP and you could expect many improvement for the new 12.2 release. Some of the new features are:

Set the “backgroundContent” option to null (with this value you could use only vector data in your map without imagery services)
Change the “backgroundContent” “on the fly” without need to recreate your map instance.

In the new igMap version you could maintain the background content more simpler.

Use Open Street Maps as imagery service

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

Set Bing Maps as imagery service

$("#map").igMap("option", "backgroundContent", { 

    type: "bing", 

    key: "[Your BingMaps Key]"

});

Change the background content to use CloudMade maps

$("#map").igMap("option", "backgroundContent", { 

    type: "cloudMade",

    key: "[Your CloudMadeMaps Key]",

    parameter: 1

});

Application

For this demo you do not need to install anything. Sample is placed in JS FIDDLE (http://jsfiddle.net ).
JsFiddle is a playground for web developers, a tool which may be used in many ways. One can use it as an online editor for snippets build from HTML, CSS and JavaScript. The live sample is available here.

Open Street Maps imagery source

CloudMade Maps imagery source

Bing Maps imagery source

Conclusions

Modern WEB applications often use jQuery based UI components. Spatial data visualization is an area where developers recently proposed MAP components. To be successful, these components should provide visualization of vector data using different imagery services. In this article we explain at how igMap work with different imagery sources. I hope that the information will be useful for those of you who want to use effectively this component. I guess examples would be useful to those who compare different jQuery map widgets to make the right choice.

Source code is available here. As always, you can follow us on Twitter @mihailmateev and @Infragistics and stay in touch on Facebook, Google+ and LinkedIn!