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.
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.
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.
Sign-up for a CloudMade API key, by following this link
Using the code
Before you start:
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.
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
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.
To select different imagery source you could use different elements. In this sample is implemented selection with Infragistics jQuery Combo component.
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.
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.
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
Set Bing Maps as imagery service
Change the background content to use CloudMade maps
For this demo you do not need to install anything. Sample is placed in JS FIDDLE (http://jsfiddle.net ).
Open Street Maps imagery source
CloudMade Maps imagery source
Bing Maps imagery source
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.