POIs and InfoWindows

POIs

POI support is built into the basic API download. To place a POI on a map use the following code where map is a reference to MQA.TileMap.

Basic POI

   1  	
   2  	var basic=new MQA.Poi( {lat:39.743943, lng:-105.020089} );
   3  	basic.setBias({x:-50,y:-50});		
   4  	map.addShape(basic);
   5

Line 2: An example of using the MQA.Poi constructor. You will need to pass in an object containing the a lat (Latitude) and lng (Longitude) property defining where to place the POI on the map.

Line 3: The MQA.Poi.setBias function will off set the icon marking the spot with the actual spot. When setting a bias a leader line will automatically be drawn from the POI to the offsetting icon to show the relationship.

Line 4: This will add the POI to the map in the maps default shape collection.

Below is an example of this code in action.

Run this sample stand-alone

Custom POI

In addition to the provided POI star icon, it is possible to use custom images instead. 

   1  	
   2  	var custom=new MQA.Poi( {lat:39.743943, lng:-105.020089} );
   3  	custom.setBias({x:-50,y:-50});
   4  	var icon = new MQA.Icon("images/smiley.png",32,32);
   5  	custom.setIcon(icon);
   6  	map.addShape(custom);
   7

Line 2: An example of using the MQA.Poi constructor. You will need to pass in an object containing the a lat (Latitude) and lng (Longitude) property defining where to place the POI on the map.

Line 3: The MQA.Poi.setBias function will off set the icon marking the spot with the actual spot. When setting a bias a leader line will automatically be drawn from the POI to the offsetting icon to show the relationship.

Line 4: An example of using the MQA.Icon constructor. This constructor takes a URL to an image, and the image's height and width.

Line 5: This line tells the poi to use the Icon object that wasc reated rather than the default POI icon.

Line 6: This will add the POI to the map in the maps default shape collection.

Below is an example of this code in action.

Run this sample stand-alone

InfoWindow

InfoWindow support is not included in the basic API download. You must use MQA.withModule mechanism to download it and initialize prior to use. NOTE: the module in the following sample "dotcomwindowmanager" will be changed in the near future, please use this code simply as a reference. 

   1   
   2  	MQA.withModule('dotcomwindowmanager', function() {
   3  		var info=new MQA.Poi({lat:39.743943, lng:-105.020089});
   4  		info.setBias({x:50,y:-50});
   5  		info.setInfoTitleHTML('Invesco Field');
   6  		info.setInfoContentHTML('Home of the Denver Broncos');
   7  		map.addShape(info);
   8  	}
   9

Line 2: This uses the MQA.withModule support to download and initialize the InfoWindow support module. When the module is ready for use the function passed as the last parameter will be executed.

Line 3: The MQA.Poi.setBias function will offset the icon marking the spot with the actual spot. When setting a bias a leader line will automatically be drawn from the POI to the offsetting icon to show the relationship.

Line 4: An example of using the MQA.Poi constructor. You will need to pass in an object containing a lat (Latitude) and lng (Longitude) property defining where to place the POI on the map.

Line 5: Sets the title of the POI. By default when the poi receives a mouse over event a title will popup with the html passed in to MQA.POI.InfoTitleHTML method.

Line 6: Sets the InfoWindow contents for the POI. By default when the poi receives a mouse click event the InfoWindow will be displayed with the html passed in to MQA.POI.setInfoContentHTML method.

Line 7: This will add the POI to the map in the maps default shape collection.

Below is this code in action, notice the difference between the mouse over and click actions on this POI opposed to the example above

Run this sample stand-alone

Learn how to add draggable routes to a map