Pushpin LE API Documentation

Pushpin™ LE API Documentation (Version 0.9)

Getting a Map
Adding a Pin to the Map
Adding Controls
Opening an Info Window
Adding Overlays
Handling Clicks
Attaching Events
Opening an Info Window above a Marker
Creating Custom Icons
Getting Multiple Maps on One Page
Address to Point (Geocoding)
Creating a Map in Demo Mode

Dynamic Layers API Examples

Toggling Map Layers Off
Creating a Custom Map Type
Adding Thematic Variables
Changing Thematic Colors on the Map
Changing the Number of Thematic Breaks
Merging Map Layers on the Client Side

Widgets

Adding a Widget
Adding Predefined Widgets

Class Reference

PMap
PMarker
PPolyline
PIcon
PEvent
PGeocoder
PAddress
PPoint
PSize
PBounds
PLargeMapControl
PSmallMapControl
PSmallZoomControl
PMapTypeControl
PGetVersion

Extended Class Reference

PMapType
PMapLayer
PIndicatorLoader
PIndicator
PLegend
PColor
PColorRamp
PWidget

Legal Notices

View Documentation for Version 1.3 Version 1.2 Version 1.1 Version 1.0 Version 0.8
If you're unsure which version of the API you're using, use the global function PGetVersion().

Getting Started

Placebase's Pushpin LE provides an easy to use JavaScript Application Programming Interface (API) for embedding scrollable maps into your website. The following code example shows how to create a 500x300 pixel scrollable map centered on Los Angeles:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:v="urn:schemas-microsoft-com:vml" >
  <head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

	<title>Pushpin LE JavaScript API Example: Getting Started</title>
	<script src="http://api.pushpin.com/js?key=3629F803B6952D65EFBF534F9AE6F8C9"
			type="text/javascript">
	</script>

	<script type="text/javascript">
	//<![CDATA[

	function onLoad() {
		// Creates a map and centers it on Los Angeles.

		var map = new PMap(document.getElementById("map"));
		map.centerAndZoom(new PPoint(-118.055, 33.952), 3);
	}

	//]]>
	</script>
  </head>

  <body onload="onLoad()">
	<div id="map" style="position: relative;
		width: 500px; height: 300px; border: 1px solid #979797"></div>
  </body>
</html>

Here is a link to a page where you can view this example in action (start.html).

The URL in the example above, http://api.pushpin.com/js?key=3629F803B6952D65EFBF534F9AE6F8C9, is the location of the pushpin code. In order for that URL to work, you will need a valid key value. Upon subscribing to Pushpin LE you will receive a key. This key will only work for web pages served from your site.

More Examples

Getting a Map

As shown in the Getting Started example above, getting a map consists primarily of two lines of JavaScript code, one to construct the PMap object, and another to center and zoom the map at a particular geographic coordinate (-118.055, 33.952) at zoom level 3:

var map = new PMap(document.getElementById("map"));
map.centerAndZoom(new PPoint(-118.055, 33.952), 3);

View example (start.html)

Adding a Pin to the Map

The PMarker object is used to add a Pushpin to a point on the map.

View example (addpin.html).

The example above uses the same method as the Getting A Map example to center and zoom the map to a geographic coordinate (-118.099, 33.95), but also adds a point to the map. The PMarker constructor takes a PPoint object. Once created, the marker is added to the map using the map.addOverlay() method. The following two lines of code from this example creates a marker at a given point, and overlays that marker on the map:

var marker1 = new PMarker(point1);
map.addOverlay(marker1);

Adding Controls to the Map

The map object offers methods that overlay a variety of controls on the map. The following example shows how to add simple zoom in / zoom out and pan controls to the map. Use 'View Source' in your browser when viewing this example to see how it is coded using the Pushpin LE API.

View example (smallmapcontrol.html).

The example above shows how to add a small map control (PSmallMapControl) to the map. The control allows users to zoom and pan. The following line of code adds the control to the map:

map.addControl(new PSmallMapControl());

Other types of controls can also be added to the map, such as PLargeMapControl and PSmallZoomControl. Click here for all controls supported by the API.

Opening an Info Window

Information windows that appear as cartoon-like bubbles can be overlain on the map. In their simplest version, these windows contain text. Click on the pin in the following example to open an Information Window.

View example (infowindow.html).

The above example shows how to add a simple info window to the map. The following line opens the window.

map.openInfoWindow(map.getCenterLatLng(),
                   document.createTextNode("Hello, world!"));

Adding Overlays to the Map

Many overlays can be added to the same map. The following example loops through and adds 10 random pins and 4 lines to the map.

View example (overlay.html).

Handling clicks

Points can be added to the map via clicks using event listening. The following example shows how to support adding markers to the map at whatever point a user clicks.

View example (click.html).

The addListener function waits for a user click, at which point a new PMarker is added to the map.

PEvent.addListener(map, 'click', function(overlay, point) {
    if (overlay) {
        map.removeOverlay(overlay);
    } else if (point) {
        map.addOverlay(new PMarker(point));
    }
});

Attaching Events

In addition to clicks, other events can also be attached and handled with the event listener. The following example prints out several events as they occur. Click here for a list events that can be attached to PMap.

View example (events.html).

Opening an Info Window above a Marker

Info windows can be added to markers themselves in order to annotate the pins.

View example (infowinmarkup.html).

The addListner function is used to add a listener to a specific PMarker object called marker.

PEvent.addListener(marker, 'click', function() {
	marker.openInfoWindowHtml(html);
});

Creating Custom Icons

You can use your own custom icons on the maps using Pushpin LE. Setting the icon.image attribute and (optionally) the icon.shadow attribute to a URL pointing to the image to use will enable overlay of custom images on the map. Click here for a list of icons from Pushpin.

View example (icon.html).

Getting Multiple Maps on One Page

Multiple maps can be configured to appear on the same page as in the following example:

View example (multimap.html).

Each map is declared as a separate variable (in this case map and map2), and each can be controlled distinctly by its handle.

var map2 = new PMap(document.getElementById("map2"));
map2.centerAndZoom(new PPoint(-118.055, 33.952), 3);

Converting an Address to a Point (Geocoding)

The process of taking address information and converting it to a location in space is called Geocoding. Pushpin LE supports geocoding of addresses in order to get points from addresses. As shown in the example below, the onLoad function must call a separate function that can create the map page with the results. Geocoding is an inherently messy process and often addresses will not resolve to specific coordinates. Therefore the example below uses error handling for cases where the address cannot be geocoded successfully.

View example (geocode.html).

Creating a Map in Demo Mode

Demo Mode creates a map that pans and zooms itself, showing off some of the features of Pushpin LE.

The startDemo function kicks off the attract mode mapping at the point specified.

map.startDemo(new PPoint(-118.234095, 34.044271), 3);

View example (demo.html).

Dynamic Layers API - Examples

Pushpin LE map images are constituted of familiar map elements such as parks, streets, and labels that are known as GIS layers. The Pushpin LE Dynamic Layers extension has functions that support control over the layers that make up the basemap image. By default, GIS layers are merged on the server-side before being handed over as a single set of tiles (though they can be sent to the client as separate layers as well).

The Dynamic Layers API extension supports mapping, toggling on and off standard layers, and reordering layers in the stack. As such several, new classes are available through the API (such as PMapLayer -- see class reference below), and new functions have been added to some existing classes (such as PMap).

Toggling Map Layers Off

The following example shows how to toggle a layer within the stack of GIS layers that make up the image. In this example the P_MAPLAYER_POLY, which contains polygons like parks and water bodies, is switched off. Click here for a list of available layers.

// Turn off poly layer
map.P_MAPLAYER_POLY.off();

You can also access the PMapLayer objects in a PMapType to see what they are.

// Get the array of PMapLayer objects in the current PMapType and display
var layers = map.getCurrentMapType().getMapLayers();
var layerlist = "";
for (var i=0; i<layers.length; i++)
	layerlist += layers[i].getTitle() + ": " + layers[i].isOn() + "\n";
alert (layerlist);

View example (layers.html).

Creating a Custom Map Type

The following example shows how to create a custom map type using predefined layers and add it to the map. Custom layers can be created with Rendermap and the layer object made accessible. Click here for a list of currently available layers.

// Create custom map layers and map types
var base = new PMapLayer(map.P_MAPLAYER_BASE);
var pointline = new PMapLayer(map.P_MAPLAYER_POINTLINE);
var maptype = new PMapType([base,pointline]);

Custom scales for a map type can also be defined (in descending order). The following shows how this is done. Click here for a list of currently available scales.

// Create custom scales
maptype.setScales([4608000, 2304000, 1152000, 576000, 288000, 144000, 72000, 36000, 18000]);

The following sets the map to view the custom map type.

// Set map type
map.setMapType(maptype);

The following shows how to add a layer after a map type has been created.

// Add another map layer (predefined) on top
maptype.addMapLayer(map.P_MAPLAYER_CITIES);

View example (maptype.html).

Adding Thematic Variables to the Map

Thematic mapping refers to color-coding of the map by region. Variables can be added to maps using the PIndicatorLoader class. A variety of themes from the 2000 Census can be added to the maps at no additional cost -- click here for available indicators. Value-added market information data can be purchased separately in transaction bundles. The following example is a quick way to underlay a thematic variable on a map.

// Add indicator to map with ID
map.setIndicatorById(5);

View example (thematic.html).

Another way to add indicators is by loading the indicators first using PIndicatorLoader. The following example shows how to do this.

function onLoad() {
	// Load indicator
	PIndicatorLoader.load([1,3,5],loadIndicators);
}

function loadIndicators(indicators) {
	...

	// Add indicator to map
	map.setIndicator(indicators[1]);
}

View example (thematic2.html).

Changing Thematic Colors on the Map

The thematic shading colors or color ramp can be changed. The default is a predefined green color ramp. Click here for a list of predefined color ramps. The following example shows how to create a custom color ramp and apply it to the map.

// Create custom color ramp
var mycolorramp = new PColorRamp('mine',
	[new PColor('F26522'), new PColor('F68E56'), new PColor('FBAF5D'), new PColor('FFF200'),
	new PColor('ACD373'), new PColor('A3D39C'), new PColor('7ACCC8'), new PColor('6DCFF6')]);

// Set map's legend to new color ramp
map.getLegend().setColorRamp(mycolorramp);

View example (colorramp.html).

Changing the Number of Thematic Breaks

The number of breaks or ranges can be changed for thematic layers. The default is 8. Valid values are from 3 to 8. The following example shows how to change the number of breaks on the map.

// Set map's legend with new number of breaks
map.getLegend().setNumberOfBreaks(4);

View example (breaks.html).

Merging Map Layers on the Client Side

By default, map layers are merged on the server side into a single tileset before being handed over to the browser. This is usually the best method for typical maps. Occasionally, it will make more sense to do certain overlays on the client side Some applications may involve users frequently toggling map layers on and off at a single location, which would see performance advantages because individual tiled map layers get stored on the client. However, the more layers that get merged on the client side will cause slower map loads and dragging. This example shows how to change the default behavior, by making all the map layers in the current map type merge on the client side. Notice that the toggling of layers is much faster, and doesn't cause the tiles to be reloaded.

// Merge all layers in current map type on client side
map.getCurrentMapType().mergeClient();

A similar method can be used to set individual layers to be merged client or server side and can be combined to create a hybrid of client / server side merged layers, e.g. map.P_MAPLAYER_CITIES.mergeClient().

View example (mergeclient.html).

Widgets

The Pushpin LE API provides the ability to add and embed custom and predefined widgets that control the map. Click here for a list of predefined widgets. These widgets can be dragged, collapsed and closed like standard windows. As well, the content in these widgets will update appropriately when certain functions are called.

Adding a Widget

Adding a widget is similar to embedding a map. The following example shows how to add a custom widget next to the map.


<script type="text/javascript">
//<![CDATA[

var map;

function onLoad() {
	// Creates a map
	map = new PMap(document.getElementById("map"));

	// Creates a new draggable widget
	var widget = new PWidget(map, document.getElementById("widget"));
	widget.setTitle("Custom Widget");
	var sampleHTML = "<br>This is a customizable and draggable widget.<br><br>";
	sampleHTML += "For example, you can add a link to place a pin on the map:<br><br>";
	sampleHTML += "<a href='javascript:map.addOverlay(new PMarker(new PPoint(-87.6902,41.8218)))'>Add pin</a><br><br>";
	widget.setBody(sampleHTML);
	widget.enableDragging();

	// Initialize map -- center and zoom and add control
	map.centerAndZoom(new PPoint(-87.6902,41.8218), 8);
	map.addControl(new PLargeMapControl());
}

//]]>
</script>

<body onload="onLoad()">
	<div id="map" style="float: left; position: relative; width: 450px; height: 300px; border: 1px solid #ccc"></div>
	<div style="float: left; padding-left: 10px; width: 250px">
		<div id="widget" style="float: left; position: relative; width: 250px"></div>
	</div>
</body>

View example (widget.html).

Adding Predefined Widgets

The Pushpin LE API has a library of predefined widget IDs. The following example adds the map layer widget. This widget allows you to toggle the map layers in the current map type.

// Creates a map layer widget
var widget1 = new PWidget(map, document.getElementById("widget1"), P_WIDGET_LAYER_ID);

The following example demonstrates how to add the thematic widget for choosing indicators. A list of indicators should be set when creating the widget. Click here for a list of available indicators. This widget will update the indicator, color ramp and breaks automatically if they are changed.

// Creates an indicator chooser widget for displaying thematic data
map.setIndicatorListByIds([1,3,5]);
var widget2 = new PWidget(map, document.getElementById("widget2"), P_WIDGET_INDICATOR_ID);

View example (widgets.html).

Class Reference

The following tables list the classes and methods currently available through the Pushpin LE API. Classes or methods that are only available as part of the Dynamic Layers API extension have a light green background.

`Class: PMap`
Method	Description	Example
`new PMap(container)`	The constructor. Creates a new map object within the HTML container, normally a `div` element.	start.html
`enableDragging()`	Enables dynamic dragging of the map (enabled by default).
`disableDragging()`	Disables dynamic dragging of the map.
`draggingEnabled()`	Returns `true` if dragging is enabled, `false` if dragging is disabled.
`enableInfoWindow()`	Enables display of the info window on the map (enabled by default).
`disableInfoWindow()`	Disables display of the info window on the map.
`infoWindowEnabled()`	Returns `true` is info window is enabled, `false` if info window is disabled.
`addControl(control)`	Adds a control to the map, such as a `PSmallMapControl`. Click here for a list of available controls.	smallmapcontrol.html
`removeControl(control)`	Removes the given control from the map.
`getCenterLatLng()`	Returns a `PPoint` object that represents the center point of the current map view in latitude/longitude.	infowindow.html
`getBoundsLatLng()`	Returns a `PBounds` object that represents the bounding box of the current map view in latitude/longitude.	overlay.html
`getSpanLatLng()`	Returns a `PSize` object that represents the width and height of the current map view in latitude/longitude.
`getZoomLevel()`	Returns the zoom level of the current map.
`centerAtLatLng(point)`	Centers the map at the given `PPoint` object.
`recenterOrPanToLatLng(point)`	Centers the map at the given `PPoint` object. If the point is within the current map view, the map will pan smoothly to the point.
`zoomTo(zoomLevel)`	Zooms to the given zoom level. If the zoom level is not valid, the request is ignored.
`centerAndZoom(point, zoomlevel)`	Centers and zooms the map at the given `PPoint` object and zoom level.	start.html
`addOverlay(overlay)`	Adds the given `PMarker` overlay to the map.	overlay.html
`removeOverlay(overlay)`	Removes the given overlay (`PMarker`) from the map.	click.html
`openInfoWindow(point, htmlElem)`	Displays an info window at the given `PPoint` with the given HTML DOM element.	infowindow.html
`openInfoWindowHtml(point, htmlString)`	Displays an info window at the given `PPoint` with the given HTML string.
`closeInfoWindow()`	Closes the info window if it is displayed on the map.
`startDemo(point, zoomLevel, interval)`	Starts the map in demo mode, centering on the given `PPoint` and zoom level. If an interval is specified (in milliseconds), this sets the time between actions in the demo, otherwise a default of 2000ms is used.	demo.html
`stopDemo()`	Stops the demo mode in the map.	demo.html
`setMapType(maptype)`	Sets the map type for the map. Click here for a list of predefined map types.	maptype.html
`getCurrentMapType()`	Returns the currently selected map type for the map.	mergeclient.html
`setLegend(legend)`	Sets the `PLegend` for the map.
`getLegend()`	Returns the `PLegend` for the map.	colorramp.html
`setIndicator(indicator)`	Sets and displays the given indicator on the map. The indicator has to first be loaded using `PIndicatorLoader`. Click here for a list of available indicators.	thematic2.html
`setIndicatorById(id)`	Sets and displays the indicator with the given id on the map. This is a quick way to add an indicator to the map that does not require `PIndicatorLoader`. However, the properties of the indicator will not be available within the same function. Click here for a list of available indicators.	thematic.html
`removeIndicator()`	Removes the current indicator from the map.
`getIndicator()`	Returns the current indicator on the map.
`setIndicatorList(indicators)`	Sets the array of `PIndicator` objects to be used with the indicator widget. The indicators have to first be loaded using `PIndicatorLoader`.
`setIndicatorListByIds(ids)`	Sets the array of `PIndicator` objects to be used with the indicator widget with the given array of ids. This is a quick way to add indicators to the widget that does not require loading indicators with `PIndicatorLoader`.	widgets.html
`getIndicatorList()`	Returns the array of `PIndicator` objects used with the indicator widget.

Event	Argument	Description	Example
`click`	`overlay, point`	This event gets triggered when a mouse click happens on the map. The overlay argument will contain a value if the user clicked on a marker. The point argument will contain the latitutde and longtiude of the click if no overlay was clicked	click.html
`movestart`		This event gets triggered when the map view starts changing. This could happen from a pan, drag or a method that changes the map view.	events.html
`move`		This event gets triggered as the map view changes.
`moveend`		This event gets triggered when the map view has finished changing.	events.html
`zoomend`	`oldLevel, newLevel`	This event gets triggered when the zoom level of the map has changed.	events.html
`mousemove`		This event gets triggered when the mouse is moved inside the map.
`dragstart`		This event gets triggered when the map starts getting dragged.	events.html
`drag`		This event gets triggered as the map gets dragged.
`dragstop`		This event gets triggered when the map stops being dragged.	events.html

`Class: PMarker`
Method	Description	Example
`new PMarker(point, icon)`	The constructor. Creates a new `PMarker` object at the given `point`. A `PIcon` can be specified, otherwise the default Pushpin icon will be used.	addpin.html
`openInfoWindow(htmlElem)`	Displays an info window above the marker with the given HTML DOM element.
`openInfoWindow(htmlString)`	Displays an info window above the marker with the given HTML string.	infowinmarkup.html

Events	Description	Example
`click`	This event gets triggered when a mouse click happens on the map.	infowinmarkup.html

`Class: PPolyline`
Method	Description	Example
`new PPolyline(points, color, weight, opacity)`	The constructor. Creates a new `PPolyline` object from the given points (array of `PPoint` objects). The color (in HTML hex form like "#ff0000"), weight (thickness in pixels), and opacity (float between 0 and 1) can be specified.	overlay.html

`Class: PIcon`
Method	Description	Example
`new PIcon(icon)`	The constructor. Creates a new `PIcon` object. If a `PIcon` is specified, its properties are copied. There are some Pushpin icons that can be added by specifying a string instead of a `PIcon`. Click here for a list of Pushpin icons.	icon.html

Property	Type	Description	Example
`image`	String	Sets the URL of the icon image to be used.	icon.html
`shadow`	String	Sets the URL of the icon's shadow image to be used.	icon.html
`iconSize`	PSize	Sets the size of the icon image in pixels using the `PSize` object with pixels.	icon.html
`shadowSize`	PSize	Sets the size of the icon's shadow image in pixels using the `PSize` object with pixels.	icon.html
`iconAnchor`	PPoint	Sets an offset for the icon, using the `PPoint` object with pixels, to anchor the icon to the marker's point.	icon.html
`shadowAnchor`	PPoint	Sets an offset for the shadow, using the `PPoint` object with pixels, to anchor the shadow to the marker's point.	icon.html
`infoWindowAnchor`	PPoint	Sets an offset for the info window, using the `PPoint` object with pixels, to anchor the info window to the marker's point.	icon.html

`Class: PEvent`
Method	Description	Example
`addListener(source, eventName, function)`	A static method that calls the given function when the given event happens on the source object.	infowinmarkup.html

`Class: PGeocoder`
Method	Description	Example
`new PGeocoder()`	The constructor. Creates an object that can convert address strings into a latitude and longitude coordinates.	geocode.html
`geocode(address, callback)`	Calls the pushpin geocoder to geocode the address and return the result via `callback`. The `address` argument must be a `PAddress` object. The `callback` argument mustbe a `Function` that accepts a `PAddress` as its first argument.

`Class: PAddress`
Method	Description	Example
`new PAddress(addr, x, y, errorMsg, errorCode)`	The constructor. Creates an object that stores an address and its coordinates if it was geocoded. See the `PGeocoder` class.	geocode.html
`wasFound()`	Returns `true` if the address was geocoded successfully (i.e. the `x` and `y` properties of the object have values); `false` otherwise.	geocode.html

Property	Type	Description	Example
`addr`	String	Calls the pushpin geocoder to geocode the address and return the result via `callback`. The `address` argument must be a `PAddress` object. The `callback` argument must be a `Function` that accepts a `PAddress` as its first argument.	geocode.html
`x`	decimal	the longitudinal coordinate of the address.	geocode.html
`y`	decimal	the latitudinal coordinate of the address.	geocode.html
`errorMsg`	String	User-friendly text describing why an error ocurred in geocoding the address.	geocode.html
`errorCode`	integer	A number indicating the type of error that occurred when geocoding the address.	geocode.html

`Class: PPoint`
Method	Description	Example
`new PPoint(x, y)`	The constructor. Creates a new `PPoint` object with the `x` and `y` geographic longitude latitude coordinates. Can also be in pixels.	start.html

Property	Type	Description	Example
x	decimal	Contains either the longitudinal or x-axis value depending on how the object is initialized	start.html
y	decimal	Contains either the latitudinal or y-axis value depending on how the object is intialized	start.html

`Class: PSize`
Method	Description	Example
`new PSize(width, height)`	The constructor. Creates a new `PSize` object with the given width and height measurement values. This could be in longitude (width) or latitude (height) or in pixels.	start.html

`Class: PBounds`
Method	Description	Example
`new PBounds(minX, minY, maxX, maxY)`	The constructor. Creates a new `PBounds` object with the given coordinates. This could be in longitude / latitude or in pixels. `minX, minY` represent the top left coordinates of the box and `maxX, maxY` represent the bottom right coordinates.	overlay.html

`Class: PLargeMapControl`
Method	Description	Example
`new PLargeMapControl()`	The constructor. Creates large zoom and pan controls on the map, including the zoom slider.	largecontrol.html

`Class: PSmallMapControl`
Method	Description	Example
`new PSmallMapControl()`	The constructor. Creates small zoom and pan controls on the map.	smallmapcontrol.html

`Class: PSmallZoomControl`
Method	Description	Example
`new PSmallZoomControl()`	The constructor. Creates only a small zoom control..	smallcontrol.html

`Class: PMapTypeControl`
Method	Description	Example
`new PMapTypeControl()`	The constructor. Creates a map type control on the map for toggling between the normal map (map.P_MAPTYPE_NORMAL) and satellite (map.P_MAPTYPE_SATELLITE)..

`Function: PGetVersion`
Method	Return	Description	Example
`PGetVersion()`	`String`	This global function returns the version number of the API.

Dynamic Layers Extended API Class Reference

The following classes are unique to the Pushpin LE Dynamic Layers API extension.

`Class: PMapType`
Method	Description	Example
`new PMapType(mapLayers)`	The constructor. Creates a new PMapType object with the given array of `PMapLayer` objects. The map layers are stacked according to the order of the array, the bottom map layer being the 0 element of the array. Click here for a list of available map layers.	maptype.html
`getMapLayers()`	Returns the array of `PMapLayer` objects in this map type.
`addMapLayer(mapLayer, position)`	Adds the given `PMapLayer` to this map type. If the position is specified, the map layer is added to that position in the array, otherwise it adds it to the end (map layer displays on top).	maptype.html
`removeMapLayer(mapLayer)`	Removes the given `PMapLayer` from this map type.
`setScales(scales)`	Sets the given array of scales (in descending order) for this map type.	maptype.html
`getScales()`	Returns the array of scales (in descending order) for this map type.
`mergeClient()`	Merges all map layers in this map type on the client side.	mergeclient.html
`mergeServer()`	Merges all map layers in this map type on the server side (default).

`Class: PMapLayer`
Method	Description	Example
`new PMapLayer(mapLayer)`	The constructor. Creates a new `PMapLayer` object with the given map layer. Click here for a list of available layers.	maptype.html
`setTitle()`	Sets the title of this map layer.
`getTitle()`	Returns the title of this map layer.	layers.html
`on()`	Turns on the map layer.
`off()`	Turns off the map layer.	layers.html
`isOn()`	Returns `true` if this map layer is turned on, `false` otherwise.	layers.html
`mergeClient()`	Merges this map layer on the client side.
`mergeServer()`	Merges this map layer on the server side (default).
`isMergeClient()`	Returns `true` if this map layer is set to merge on the client side, `false` (default) otherwise.

`Class: PIndicatorLoader`
Method	Description	Example
`load(ids, callback)`	A static method that loads the given array of indicator ids and returns an array of `PIndicator` objects via `callback`. The `callback` argument must be a `Function` that accepts an array as its first argument. Click here for a list of available indicator ids.	thematic2.html

`Class: PIndicator`
Property	Type	Description	Example
`id`	integer	The id of the indicator.
`displayName`	String	The name of the indicator. Displays in the thematic widget.
`description`	String	The description for the indicator.
`year`	integer	The year the indicator was published. Displays in the thematic widget.
`source`	String	The data source of the indicator. Displays in the thematic widget.

`Class: PLegend`
Method	Description	Example
`new PLegend(colorRamp,numBreaks)`	The constructor. Creates a new `PLegend` object. `PLegend` offers control over how indicators are displayed on the map. The `PColorRamp`, and the number of breaks can be specified, otherwise the default green color ramp and 8 breaks will be used. Breaks can only have values of 3 to 8.
`setIndicator(indicator)`	Sets the given `PIndicator` to the legend. If the legend is attached to a `PMap`, the indicator will show up on the map.
`removeIndicator()`	Removes the current `PIndicator` from the legend. If the legend is attached to a `PMap`, the indicator will be removed from the map.
`getIndicator()`	Returns the current `PIndicator` associated to this legend.
`setColorRamp()`	Sets the `PColorRamp` for this legend, and refreshes the map if attached. Click here for a list of predefined color ramps.	colorramp.html
`getColorRamp()`	Returns the current `PColorRamp` associated to this legend.
`setNumberOfBreaks()`	Sets the number of breaks for this legend, and refreshes the map if attached. Valid number of breaks are 3 to 8.	breaks.html
`getNumberOfBreaks()`	Returns the current number of breaks associated to this legend.
`getFormattedBreaks()`	Returns an array representing the breaks formatted with commas, decimals, and the right units.

`Class: PColor`
Method	Description	Example
`new PColor(color)`	The constructor. Creates a new `PColor` with a string in the form of a hex color code, e.g. "ff0000" for red.	colorramp.html

`Class: PColorRamp`
Method	Description	Example
`new PColorRamp(name, colors)`	The constructor. Creates a new `PColorRamp` with a name and an array of `PColor` objects.	colorramp.html
`getName()`	Returns the name of this color ramp.
`getColors()`	Returns an array of `PColor` objects from this color ramp.

`Class: PWidget`
Method	Description	Example
`new PWidget(map, container, id)`	The constructor. Creates a new `PWidget` with the `PMap` it attaches to, within the HTML container, usually a `div` element. An id can be specified if one of the predefined widgets is to be used. Click here for a list of available widget IDs.	widgets.html
`setTitle(html)`	Sets the title of the widget with the given HTML string.	widget.html
`getTitle()`	Returns the title of the widget.
`setBody(html)`	Sets the body of the widget with the given HTML string.	widget.html
`getBody()`	Returns the body of the widget.
`maximize()`	Maximizes the widget (maximized by default).
`minimize()`	Minimizes the widget.
`isMaximized()`	Returns `true` if the widget is maximized, `false` otherwise.
`enableDragging()`	Enables dragging of the widget.	widget.html
`disableDragging()`	Disables dragging of the widget (disabled by default).
`draggingEnabled()`	Returns `true` if dragging is enabled, `false` if disabled.
`close()`	Closes the widget window.