Pushpin LE API Documentation

Pushpin™ LE API Documentation (Version 1.0)

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
Tabbed Info Windows
Creating Custom Icons
Getting Multiple Maps on One Page
Geocoding (Converting an Address to a Point)
Using XML *NEW
Managing Markers *NEW
Printing Map Images *NEW

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
Customizing Widget Styles

Overlay Sets and Filtering *NEW

Adding Overlay Sets
Adding Attributes and Filters
Displaying Filters

Class Reference

PMap
PInfoWindow
PInfoWindowTab
PMarker
PPolyline
POverlaySet *NEW
PIcon
PEvent
PClientGeocoder
PAddress
PMarkerManager *NEW
PPoint
PSize
PBounds
PLatLng
PLatLngBounds
PAttribute *NEW
PAttributeFilter *NEW
PXmlHttp *NEW
PXml *NEW
PXslt *NEW
PLargeMapControl
PSmallMapControl
PSmallZoomControl
PMapTypeControl
PDownloadUrl *NEW
PGetVersion

Extended Class Reference

PMapType
PMapLayer
PIndicatorLoader
PIndicator
PLegend
PColor
PColorRamp
PWidget

View the Pushpin LE API Blog for the latest updates.

View Documentation for Version 1.3 Version 1.2 Version 1.1 Version 0.9 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=394BB4FB40F012221A829EF2EC5A3A43"
			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.setCenter(new PLatLng(34.045, -118.235), 13);
	}

	//]]>
	</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=394BB4FB40F012221A829EF2EC5A3A43, 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 (34.045, -118.235) at zoom level 13:

var map = new PMap(document.getElementById("map"));
map.setCenter(new PLatLng(34.045, -118.235), 13);

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 (34.045, -118.235), but also adds a point to the map. The PMarker constructor takes a PLatLng 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.

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 displayed on the map. In their simplest version, these windows contain text.

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.getCenter(),
		   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 addListener function is used to add a listener to a specific PMarker object called marker.

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

The following example adds info windows above multiple markers.

View example (infowinmarkers.html).

Tabbed Info Windows

Multiple tabs can be created for info windows. The following example shows how to open an info window with 2 tabs above a marker.

View example (tabs.html).

// Create tabs
var infoTabs = [
  new PInfoWindowTab("Tab 1", "This is content for Tab 1"),
  new PInfoWindowTab("Tab 2", "This is content for Tab 2")
];

// Add marker and open info window
var marker = new PMarker(map.getCenter());
PEvent.addListener(marker, "click", function() {
  marker.openInfoWindowTabsHtml(infoTabs);
});
map.addOverlay(marker);
marker.openInfoWindowTabsHtml(infoTabs);

Creating Custom Icons

You can use your own custom icons on the maps using Pushpin LE. Setting the PIcon properties like image and (optionally) shadow to a URL pointing to the image to use will enable overlay of custom images on the map. Click here for a list of predefined 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.setCenter(new PLatLng(33.952, -118.155), 6);

Geocoding (Converting an Address to a Point)

The process of taking an address and converting it to a geographical point is called Geocoding. As shown in the example below, the showAddress function takes an address and adds a marker to that point. Geocoding is an inherently messy process and often addresses will not resolve to specific coordinates. Therefore showAddress checks to see if the point returned is valid. The getLatLng function needs to be passed a callback function to be called after the response comes back.

View example (geocode.html).

Using XML

The Pushpin LE API contains classes and methods that load and parse XML files in the latest browsers. For example, PXmlHttp.create() creates a new instance of a browser independent XmlHttpRequest. The following example shows how to download a static XML file (data.xml), parse it and create markers and info windows with the information.

View example (xml.html).

The function PDownloadUrl is used to download the data asynchronously and PXml is used to parse the XML.


// Download the data in data.xml and load it on the map.
PDownloadUrl("data.xml", function(data, responseCode) {
	var xml = PXml.parse(data);
	var markers = xml.documentElement.getElementsByTagName("marker");
	for (var i = 0; i < markers.length; i++) {
		var point = new PLatLng(parseFloat(markers[i].getAttribute("lat")),
								parseFloat(markers[i].getAttribute("lng")));
		var html = PXml.value(markers[i].getElementsByTagName("label")[0]);
		html += "<br>" + PXml.value(markers[i].getElementsByTagName("description")[0]);
		map.addOverlay(createMarker(point, html));
	}
});

Managing Markers

Displaying hundreds of markers on a map can cause slow downs. To make these maps more efficient, use PMarkerManager to manage markers on a map. PMarkerManager automatically groups markers into clusters depending on the number of markers currently in the map view and only draws markers that are located within the map view. The following example demonstrates this. You will see that some of the markers are clustered. Clicking on the clustered markers will display an info window stating how many markers it represents. Zoom in to see the individual markers. You can also zoom out until all markers are represented by one cluster marker.

View example (markermanager.html).

Create a new PMarkerManager.

var markerManager = new PMarkerManager(map);

Add markers to the map using the addMarker() function.

markerManager.addMarker(createMarker(point, i + 1));

Printing Map Images

The Pushpin LE API allows you to save a map as one image for printing purposes. The following example provides a link that opens an image of the current map in a new window, with the specified size of 500x500 pixels. If the size is not specified, the current map view size will be used. Optional center and / or zoom level parameters can be added too, otherwise the current zoom level and center of the map will be used.

View example (printmap.html).

The following code returns the URL of the image.

map.printImage(new PSize(500,500));

The window.open function opens this URL in a new window.

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 PMapLayer.POLY, which contains polygons like parks and water bodies, is switched off. Click here for a list of available layers.

// Turn off poly layer
PMapLayer.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].getLabel() + ": " + 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(PMapLayer.BASE);
var pointline = new PMapLayer(PMapLayer.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 (the first scale in the array is zoom level 0). 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(PMapLayer.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 the city map layer merge on the client side. Notice that the toggling of the city layer is much faster, and doesn't cause the tiles to be reloaded.

// Merge city layer on client side
PMapLayer.CITIES.mergeClient();

A similar method can be used to set all map layers in a maptype to be merged client or server side, e.g. PMapType.NORMAL.mergeClient(). Layers can be set differently to create a hybrid of client / server side merged layers.

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. For widgets to work, the map object must first be declared globally, outside of the onLoad function e.g. var map = null.

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 = null;

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.setLabel("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 PLatLng(34.045, -118.235)))'>";
  sampleHTML += "Add pin</a><br><br>";
  widget.setContentHtml(sampleHTML);
  widget.enableDragging();

  // Initialize map -- center and zoom and add control
  map.setCenter(new PLatLng(34.045, -118.235), 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).

Customizing Widget Styles

You can customize the look and feel of a widget by modifying CSS style objects for different parts of the widget. Click here for a list of properties that are customizable. The following example shows a widget with a different style and added on top of the map.

// Modify widget style
widget.background.style.backgroundColor = "#EFB500";
widget.background.style.border = "1px solid #333";
widget.box.style.border = "1px solid #cc6600";
widget.heading.style.backgroundColor = "#E78418";
widget.heading.style.border = "1px solid #cc6600";

View example (widgetstyle.html).

Overlay Sets and Filtering

The Pushpin LE API provides the ability to group overlays, such as markers and polylines, into sets which can then be turned on and off like layers. As well, markers and polylines can have attributes and when added to a set, filters can be applied which query by these attributes.

Adding Overlay Sets

The following example adds a set of random markers and a set of random polylines to the map, and adds the predefined overlay sets widget to control them.

// Create overlay sets and set labels
var markerSet = new POverlaySet(markers);
markerSet.setLabel("Markers");
var polylineSet = new POverlaySet(polylines);
polylineSet.setLabel("Lines");

// Turn polyline set off by default
polylineSet.off();

// Add sets to the map
map.setOverlaySets([markerSet,polylineSet]);

// Display sets in widget
var widget = new PWidget(map, document.getElementById("widget"), P_WIDGET_OVERLAY_ID);

View example (addset.html).

Adding Attributes and Filters

The following example assigns an attribute to random markers and adds it to a set. It also defines some filters to be called on the set. Click here for types of attributes and filters available.

View example (addfilter.html).

Displaying Filters

The following example creates two random marker sets and sets some filters for display in the overlay set widget.

View example (addfilterdisplay.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	Return	Description	Example
`new PMap(container, logo)`	`PMap`	The constructor. Creates a new map object within the HTML container, normally a `div` element. An optional logo (HTML DOM node) can be specified, which appears on the bottom right of the map, otherwise the default Pushpin logo will be used. Use a blank node as an argument if no logo is desired.	start.html
`enableDragging()`	`none`	Enables dynamic dragging of the map (enabled by default).	enabledragging.html
`disableDragging()`	`none`	Disables dynamic dragging of the map.	mergeclient.html
`draggingEnabled()`	`Boolean`	Returns `true` if dragging is enabled, `false` if dragging is disabled.	enabledragging.html
`enableInfoWindow()`	`none`	Enables display of the info window on the map (enabled by default).
`disableInfoWindow()`	`none`	Disables display of the info window on the map.
`infoWindowEnabled()`	`Boolean`	Returns `true` is info window is enabled, `false` if info window is disabled.
`enableDoubleClickZoom()`	`none`	Enables double click to zoom in (disabled by default). Double right mouse click zooms out. The default double click recenters the map on the point.	doubleclickzoom.html
`disableDoubleClickZoom()`	`none`	Disables double click to zoom in and out.	doubleclickzoom.html
`doubleClickZoomEnabled()`	`Boolean`	Returns `true` if double click to zoom is enabled, `false` otherwise.	doubleclickzoom.html
`addControl(control)`	`none`	Adds a control to the map, such as a `PSmallMapControl`. Click here for a list of available controls.	smallmapcontrol.html
`removeControl(control)`	`none`	Removes the given control from the map.
`getContainer()`	`Node`	Returns the DOM object (normally a `div` element) that contains the map.
`getCenter()`	`PLatLng`	Returns a `PLatLng` object that represents the center point of the current map view in latitude/longitude.	infowindow.html
`getBounds()`	`PLatLngBounds`	Returns a `PLatLngBounds` object that represents the rectangular bounding box of the current map view in latitude/longitude.	overlay.html
`getBoundsZoomLevel(bounds)`	`Number`	Returns the maximum zoom level at which the given rectangular bounds can fit in the map view, for the current map type.
`getSize()`	`PSize`	Returns the size of the map view in pixels.
`getZoom()`	`Number`	Returns the zoom level of the current map.	zoom.html
`setCenter(center, zoom)`	`none`	Centers the map at the given `center`. If the `zoom` is specified, map zooms to the given zoom level. This method (or `setCenterBounds`) should be called first, right after a new `PMap` is declared, to set the initial map view.	start.html
`setCenterBounds(bounds)`	`none`	Centers the map at the maximum zoom level which the given rectangular bounds can fit in the map view.
`panTo(center)`	`none`	Centers the map at the given `center`. If the point is within the current map view, the map will pan smoothly to the point.	panto.html
`panBy(distance)`	`none`	Pans smoothly by the given `PSize` distance in pixels. Negative width moves the map to the right (like dragging the map left), negative height moves the map down (like dragging the map up).	panby.html
`panDirection(dx, dy)`	`none`	Similar to `panBy` but pans smoothly by half the width and height of the map using -1, 0 or 1 as direction values for `dx` and `dy`. Negative direction (-1) moves the map to the right (dx) or down (dy).	pandirection.html
`setZoom(level)`	`none`	Zooms to the given `level`. If the zoom level is not valid, the request is ignored.	zoom.html
`zoomIn()`	`none`	Zooms in by one zoom level (+1).
`zoomOut()`	`none`	Zooms out by one zoom level (-1).
`printImage(size, center, zoom)`	`String`	Returns the URL of a single image of the current map type with the current size, center and zoom level of the map, unless the optional parameters are specified.	printmap.html
`savePosition()`	`none`	Stores the current map view (coordinates and zoom level). This can later be used by `returnToSavedPosition` to return to this view.	saveposition.html
`returnToSavedPosition()`	`none`	Returns to the map view that was saved by `savePosition`. Returns to the last result if no position was saved.	saveposition.html
`addOverlay(overlay)`	`none`	Adds the given `PMarker` or `PPolyline` `overlay` to the map.	overlay.html
`removeOverlay(overlay)`	`none`	Removes the given overlay (`PMarker` or `PPolyline`) from the map.	click.html
`clearOverlays()`	`none`	Removes all overlays from the map.
`openInfoWindow(point, node)`	`none`	Displays an info window at the given point with the given HTML DOM node.	infowindow.html
`openInfoWindowHtml(point, html)`	`none`	Displays an info window at the given point with the given HTML string.
`openInfoWindowTabs(point, tabs)`	`none`	Displays an info window at the given point with the given tabs (DOM nodes are used for the contents).
`openInfoWindowTabsHtml(point, tabs)`	`none`	Displays an info window at the given point with the given tabs (HTML strings are used for the contents).
`closeInfoWindow()`	`none`	Closes the info window if it is displayed on the map.
`getInfoWindow()`	`PInfoWindow`	Returns the info window.
`fromLatLngToDivPixel(latlng)`	`PPoint`	Converts the given geographical point in the map's DOM element into pixel coordinates, with (0,0) being the top left corner of the map view.	latlngtopixel.html
`fromDivPixelToLatLng(pixel)`	`PLatLng`	Converts the given pixel point in the map's DOM element into geographical coordinates, with (0,0) being the top left corner of the map view.	latlngtopixel.html
`addOverlaySet(overlayset)`	`none`	Adds the given `POverlaySet` to the map.	addfilter.html
`removeOverlaySet(overlayset)`	`none`	Removes the given `POverlaySet` from the map.
`clearOverlaySets()`	`none`	Removes all overlay sets from the map.
`setOverlaySets(overlaysets)`	`none`	Sets the array of overlay sets for the map.	addset.html
`getOverlaySets()`	`Array of POverlaySet`	Returns the array of overlay sets from the map.
`setMapType(maptype)`	`none`	Sets the map type for the map. Click here for a list of predefined map types.	maptype.html
`getCurrentMapType()`	`PMapType`	Returns the currently selected map type for the map.	mergeclient.html
`setLegend(legend)`	`none`	Sets the `PLegend` for the map.
`getLegend()`	`PLegend`	Returns the `PLegend` for the map.	colorramp.html
`setIndicator(indicator)`	`none`	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)`	`none`	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()`	`none`	Removes the current indicator from the map.
`getIndicator()`	`PIndicator`	Returns the current indicator on the map.
`setIndicatorList(indicators)`	`none`	Sets the array of `PIndicator` objects to be used with the indicator widget. The indicators have to first be loaded using `PIndicatorLoader`.
`setIndicatorListByIds(ids)`	`none`	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()`	`Array of PIndicator`	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 and will be passed to the event handler. The latitude and longtiude of the click will be passed as a `PLatLng` if no overlay was clicked.	click.html
`movestart`	`none`	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`	`none`	This event gets triggered as the map view changes.
`moveend`	`none`	This event gets triggered when the map view has finished changing.	events.html
`zoomend`	`none`	This event gets triggered when the zoom level of the map has changed.	events.html
`infowindowopen`	`none`	This event gets triggered when the info window opens.
`infowindowclose`	`none`	This event gets triggered when the info window closes. This includes the info window automatically closing when another window is opened.
`addoverlay`	`overlay`	This event gets triggered when an overlay gets added to the map with `addOverlay()`. The overlay is passed as an argument to the event handler.
`removeoverlay`	`overlay`	This event gets triggered when an overlay is removed from the the map with `removeOverlay()`. The overlay is passed as an argument to the event handler.
`clearoverlays`	`none`	This event gets triggered when all overlays are removed from the the map with `clearOverlays()`. The `removeoverlay` event does not get triggered in this case.
`mousemove`	`none`	This event gets triggered when the mouse is moved inside the map.
`dragstart`	`none`	This event gets triggered when the map starts getting dragged.	events.html
`drag`	`none`	This event gets triggered as the map gets dragged.
`dragstop`	`none`	This event gets triggered when the map stops being dragged.	events.html

`Class: PInfoWindow`
Method	Return	Description	Example
`selectTab(index)`	`none`	Selects the given index of the tab array. 0 is the index of the first tab.
`hide()`	`none`	Hides the info window.
`show()`	`none`	Shows the info window.
`isHidden()`	`Boolean`	Returns true if the info window is hidden, else returns false.
`getPoint()`	`PLatLng`	Returns the point where the info window is anchored.
`getSelectedTab()`	`Number`	Returns the index of the currently selected info window tab.
`getTabs()`	`Array of PInfoWindowTab`	Returns the array of info window tabs.

`Class: PInfoWindowTab`
Method	Return	Description	Example
`new PInfoWindowTab(label, content)`	`PInfoWindowTab`	Creates a new info window tab with the given label and content. The content can be an HTML string or a DOM element.	tabs.html

`Class: PMarker`
Method	Return	Description	Example
`new PMarker(point, icon)`	`PMarker`	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 changeicon.html
`openInfoWindow(content)`	`none`	Displays an info window above the marker with the given HTML DOM element.
`openInfoWindowHtml(content)`	`none`	Displays an info window above the marker with the given HTML string.	infowinmarkup.html
`openInfoWindowTabs(tabs)`	`none`	Displays an info window above the marker with the given tabs (DOM nodes are used for the contents).
`openInfoWindowTabsHtml(tabs)`	`none`	Displays an info window above the marker with the given tabs (HTML strings are used for the contents).	tabs.html
`getIcon()`	`PIcon`	Returns the icon for this marker.
`getPoint()`	`PLatLng`	Returns the point where this marker is anchored.
`setPoint(point)`	`none`	Sets the point where this marker is to be anchored.
`addAttribute(attribute)`	`none`	Adds the given attribute to this marker.	addfilter.html
`removeAttribute(name)`	`none`	Removes the attribute with the given name from this marker.
`getAttribute(name)`	`PAttribute`	Returns the attribute with the given name from this marker.
`setAttributes(attributes)`	`none`	Sets the given array of attributes to this marker.	addfilterdisplay.html
`getAttributes()`	`Array of PAttribute`	Returns the array attributes for this marker.

Event	Argument	Description	Example
`click`	`none`	This event gets triggered when a mouse click happens on the marker.	infowinmarkup.html

`Class: PPolyline`
Method	Return	Description	Example
`new PPolyline(points, color, weight, opacity)`	`PPolyline`	The constructor. Creates a new `PPolyline` object from the given points (array of `PLatLng` objects). The color (in HTML hex form like "#ff0000"), weight (thickness in pixels), and opacity (value between 0 and 1) can be specified.	overlay.html
`addAttribute(attribute)`	`none`	Adds the given attribute to this polyline.
`removeAttribute(name)`	`none`	Removes the attribute with the given name from this polyline.
`getAttribute(name)`	`PAttribute`	Returns the attribute with the given name from this polyline.
`setAttributes(attributes)`	`none`	Sets the given array of attributes to this polyline.
`getAttributes()`	`Array of PAttribute`	Returns the array of attributes for this polyline.

`Class: POverlaySet`
Method	Return	Description	Example
`new POverlaySet(overlays, manager)`	`POverlaySet`	Creates an overlay set containing the given array of overlays. Marker operations will be handled by a marker manager if specified (this means the overlays must only contain markers).	addset.html
`setLabel(label)`	`none`	Sets the label for this overlay set.	addset.html
`getLabel()`	`String`	Returns the label for this overlay set.
`addOverlay(overlay)`	`none`	Adds the given `overlay` to this overlay set. If the set is turned on, then the overlay gets added to the map.
`removeOverlay(overlay)`	`none`	Removes the given `overlay` from this overlay set. If the set is turned on, then the overlay gets removed from the map.
`getOverlays()`	`Array of PMarker or PPolyline`	Returns the array of overlays in this overlay set. If filters are set, this returns the filtered overlays.
`getOverlayCount()`	`Number`	Returns the number of overlays in this overlay set. If filters are set, this returns the number of filtered overlays.
`on()`	`none`	Turns on this overlay set. This adds the overlays on the map.
`off()`	`none`	Turns off this overlay set. This removes the overlays from the map.	addset.html
`isOn()`	`Boolean`	Returns `true` if this overlay set is on, `false` otherwise.
`addFilter(filter)`	`none`	Adds the given filter to this overlay set and refreshes and displays the filtered overlays on the map if this set is turned on.	addfilter.html
`removeFilter(filter)`	`none`	Removes the given filter from this overlay set and refreshes the overlays on the map if this set is turned on.
`clearFilters()`	`none`	Removes all filters from this overlay set and refreshes the overlays on the map if this set is turned on.	addfilter.html
`setFilters(filters)`	`none`	Sets the given array of filters to this overlay set and refreshes the overlays on the map if this set is turned on.
`getFilters()`	`Array of PAttributeFilter`	Returns the array of filters for this overlay set.
`setDisplayFilters(filters)`	`none`	Sets the array of filters to be displayed for choosing if the overlay widget is used. The array order is the order of display.	addfilterdisplay.html

`Class: PIcon`
Method	Return	Description	Example
`new PIcon(icon)`	`PIcon`	The constructor. Creates a new `PIcon` object. If a `PIcon` is specified, its properties are copied. Click here for a list of predefined Pushpin icons.	icon.html

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

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

`Class: PClientGeocoder`
Method	Return	Description	Example
`new PClientGeocoder()`	`PClientGeocoder`	The constructor. Creates an object that can convert address strings into a latitude and longitude coordinates.	geocode.html
`getLatLng(address, callback)`	`none`	Calls the Pushpin geocoder to geocode an address and return the result via the callback function. If the address is found, the result returned is a `PLatLng`, otherwise `null` is returned.	geocode.html
`getLocations(address, callback)`	`none`	Calls the Pushpin geocoder to geocode an address and return the result via the callback function. The result returned is a `PAddress`.	geocode2.html

`Class: PAddress`
Method	Return	Description	Example
`new PAddress(addr, x, y, errorMsg, errorCode)`	`PAddress`	The constructor. Creates an object that stores an address and its coordinates if it was geocoded. See the `PGeocoder` class.	geocode2.html
`wasFound()`	`Boolean`	Returns `true` if the address was geocoded successfully (i.e. the `x` and `y` properties of the object have values); `false` otherwise.	geocode2.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.	geocode2.html
`x`	`Number`	The longitudinal coordinate of the address.	geocode2.html
`y`	`Number`	The latitudinal coordinate of the address.	geocode2.html
`errorMsg`	`String`	User-friendly text describing why an error ocurred in geocoding the address.	geocode2.html
`errorCode`	`Number`	A number indicating the type of error that occurred when geocoding the address.	geocode2.html

`Class: PMarkerManager`
Method	Return	Description	Example
`new PMarkerManager(map, icon)`	`PMarkerManager`	The constructor. Creates a new `PMarkerManager` object to control the number of markers visible at one time in the given map by grouping markers into clusters. If an `icon` is specified, that icon is used for the cluster of markers, otherwise the default icon is used. Click here for a list of predefined icons.	markermanager.html
`addMarkers(markers)`	`none`	Adds the given array of markers to the map.
`addMarker(marker)`	`none`	Adds the given marker to the map.	markermanager.html
`removeMarker(marker)`	`none`	Removes the given marker from the map.
`clearMarkers()`	`none`	Removes all markers added by this marker manager from the map.	clearmarkers.html
`getIcon()`	`PIcon`	Returns the cluster icon used by this marker manager.
`setMaxVisibleMarkers(number)`	`none`	Sets the maximum number of visible markers to be displayed on the map view at one time. The default is 150.
`setMinMarkersPerCluster(number)`	`none`	Sets the minimum number of markers that is required to be grouped into a cluster. The default is 5.

`Class: PPoint`
Method	Return	Description	Example
`new PPoint(x, y)`	`PPoint`	The constructor. Creates a new `PPoint` object with the `x` and `y` coordinates in pixels.	icon.html
`equals(other)`	`Boolean`	Returns `true` if the given point has equal coordinates, `false` otherwise.
`toString()`	`String`	Returns a string representation of this point with the x and y values separated by a comma and surrounded by parentheses.

Property	Type	Description	Example
`x`	`Number`	The x coordinate value in pixels.
`y`	`Number`	The y coordinate value in pixels.

`Class: PSize`
Method	Return	Description	Example
`new PSize(width, height)`	`PSize`	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.	icon.html
`equals(other)`	`Boolean`	Returns `true` if the given `PSize` is equal, `false` otherwise.
`toString()`	`String`	Returns a string representation with the width and height values separated by a comma and surrounded by parentheses.

Property	Type	Description	Example
`width`	`Number`	The width value.
`height`	`Number`	The height value.

`Class: PBounds`
Method	Return	Description	Example
`new PBounds(minX, minY, maxX, maxY)`	`PBounds`	The constructor. Creates a new `PBounds` object with the given coordinates in pixels that represent a rectangle. `minX, minY` represent the top left coordinates of the rectangle and `maxX, maxY` represent the bottom right coordinates.	overlay.html
`toString()`	`String`	Returns a string representation with the top left and bottom right coordinates separated by a comma and surrounded by parentheses.
`min()`	`PPoint`	Returns a `PPoint` of the top left coordinate.
`max()`	`PPoint`	Returns a `PPoint` of the bottom right coordinate.
`containsBounds(other)`	`Boolean`	Returns `true` if the given `PBounds` rectangle is contained within this rectangle, `false` otherwise.
`extend(point)`	`none`	Enlarges this `PBounds` rectangle to contain the given point, if the point lies outside the bounds.

Property	Type	Description
`minX`	`Number`	The x coordinate value of the left point of the rectangle in pixels.
`minY`	`Number`	The y coordinate value of the top point of the rectangle in pixels.
`maxX`	`Number`	The x coordinate value of the right point of the rectangle in pixels.
`maxY`	`Number`	The y coordinate value of the bottom point of the rectangle in pixels.

`Class: PLatLng`
Method	Return	Description	Example
`new PLatLng(lat, lng)`	`PLatLng`	The constructor. Creates a new `PLatLng` object with the `lat` and `lng` coordinates in degrees.	start.html
`lat()`	`Number`	Returns the latitude coordinate in degrees.	overlay.html
`lng()`	`Number`	Returns the longitude coordinate in degrees.	overlay.html
`latRadians()`	`Number`	Returns the latitude coordinate in radians.
`lngRadians()`	`Number`	Returns the longitude coordinate in radians.
`equals(other)`	`Boolean`	Returns true if the coordinates of two points are identical.
`distanceFrom(other)`	`Number`	Returns the estimated distance in meters from this point to the `other` one. The number returned is always positive.	distance.html
`toString()`	`String`	Returns a string representation of this point with the lat and lng values separated by a comma and surrounded by parentheses.

`Class: PLatLngBounds`
Method	Return	Description	Example
`new PLatLngBounds(sw, ne)`	`PLatLngBounds`	A constructor. Creates a new `PLatLngBounds` object with the given south-west and north-east points that represent a rectangle.	overlay.html
`new PLatLngBounds(center, radius)`	`PLatLngBounds`	A constructor. Creates the smallest `PLatLngBounds` object that covers the dimensions of the circle defined by the parameters. The bounds rectangle is centered on the `center` parameter. The radius parameter should be a distance in meters from the center to the edge of the circle.	distancezoom.html
`contains(latlng)`	`Boolean`	Returns true if the point lies within the rectangle, false otherwise.
`containsBounds(other)`	`Boolean`	Returns `true` if the given `PLatLngBounds` rectangle is contained within this rectangle, `false` otherwise.
`extend(latlng)`	`none`	Enlarges this `PLatLngBounds` rectangle to contain the given point, if the point lies outside the bounds.
`getSouthWest()`	`PLatLng`	Returns the south-west point of the rectangle.	overlay.html
`getNorthEast()`	`PLatLng`	Returns the north-east point of the rectangle.	overlay.html
`toSpan()`	`PLatLng`	Returns a `PLatLng` that represents the size of the rectangle.
`isEmpty()`	`Boolean`	Returns `true` if this `PLatLngBounds` rectangle is empty, `false` otherwise.
`getCenter()`	`PLatLng`	Returns the center point of the rectangle.
`toString()`	`String`	Returns a string representation with the south-west and north-east coordinates separated by a comma and surrounded by parentheses.

`Class: PAttribute`
Method	Return	Description	Example
`new PAttribute(name, value, type)`	`PAttribute`	The constructor. Creates a new `PAttribute` object with the given name, value and type. The `value` argument must be of the type given in the `type` argument. Click here for a list of supported types.	addfilter.html

Property	Type	Description	Example
`name`	`String`	The name of this attribute.
`value`	`Variable`	The value for this attribute.	addfilter.html
`type`	`Number`	The type for this attribute, e.g. PAttribute.NUMBER. The `value` property must be of this type. Click here for a list of supported types.

`Class: PAttributeFilter`
Method	Return	Description	Example
`new PAttributeFilter(name, values, type)`	`PAttributeFilter`	The constructor. Creates a new `PAttributeFilter` object with the given name of the attribute, values and type. The values in the `values` array must be of the type of the attribute.	addfilter.html

Property	Type	Description
`name`	`String`	The name of the attribute to filter.
`values`	`Array of Variable`	The value(s) to filter the attribute by.
`type`	`Number`	The filter type to apply on the attribute with the value(s), e.g. PAttributeFilter.EQUAL. Click here for a list of supported types.

`Class: PXmlHttp`
Method	Return	Description	Example
`create()`	`PXmlHttp`	A static method that creates a new instance of a browser independent `XmlHttpRequest` object.

`Class: PXml`
Method	Return	Description	Example
`parse(xmltext)`	`Node`	A static method that parses the given XML text and returns a DOM node.	xml.html
`value(xmlnode)`	`String`	A static method that returns the text of the XML document fragment given as a DOM node.	xml.html

`Class: PXslt`
Method	Return	Description	Example
`new PXslt(xsltnode)`	`PXslt`	The constructor. Creates a `PXslt` object from the XSLT stylesheet given as a DOM node.
`transformToHtml(xmlnode, htmlnode)`	`Boolean`	Returns `true` and applies the XSLT stylesheet from this `PXslt` object to the the given XML document given as a DOM node and appends the resulting HTML document element to the given HTML node, if this is supported in the browser. If not, the function will do nothing and return `false`.

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

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

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

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

`Function: PDownloadUrl`
Function	Return	Description	Example
`PDownloadUrl(url, onload)`	`none`	A global function that asynchronously retrieves the XML file from `url` and calls the `onload` function with the text of the file as the first argument and the HTTP status response code (e.g. 200 for success) as the second argument. This uses `PXmlHttp` to create an `XmlHttpRequest` object which means `url` must refer to the same server as the URL of the current document (it's better to use an absolute or relative path for `url`).	xml.html

`Function: PGetVersion`
Function	Return	Description	Example
`PGetVersion()`	`String`	A global function that 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	Return	Description	Example
`new PMapType(mapLayers)`	`PMapType`	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
`setLabel()`	`none`	Sets the label for this map type.
`getLabel()`	`String`	Returns the label for this map type.
`getMapLayers()`	`Array of PMapLayer`	Returns the array of `PMapLayer` objects in this map type.
`addMapLayer(mapLayer, position)`	`none`	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)`	`none`	Removes the given `PMapLayer` from this map type.
`setScales(scales)`	`none`	Sets the given array of scales (in descending order) for this map type.	maptype.html
`getScales()`	`Array of Number`	Returns the array of scales (in descending order) for this map type.
`mergeClient()`	`none`	Merges all map layers in this map type on the client side.
`mergeServer()`	`none`	Merges all map layers in this map type on the server side (default).

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

`Class: PIndicatorLoader`
Method	Return	Description	Example
`load(ids, callback)`	`none`	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`	`Number`	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`	`Number`	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	Return	Description	Example
`new PLegend(colorRamp,numBreaks)`	`PLegend`	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)`	`none`	Sets the given `PIndicator` to the legend. If the legend is attached to a `PMap`, the indicator will show up on the map.
`removeIndicator()`	`none`	Removes the current `PIndicator` from the legend. If the legend is attached to a `PMap`, the indicator will be removed from the map.
`getIndicator()`	`PIndicator`	Returns the current `PIndicator` associated to this legend.
`setColorRamp(colorramp)`	`none`	Sets the `PColorRamp` for this legend, and refreshes the map if attached. Click here for a list of predefined color ramps.	colorramp.html
`getColorRamp()`	`PColorRamp`	Returns the current `PColorRamp` associated to this legend.
`setNumberOfBreaks(breaks)`	`none`	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()`	`Number`	Returns the current number of breaks associated to this legend.
`getFormattedBreaks()`	`Array of String`	Returns an array representing the breaks formatted with commas, decimals, and the right units.

`Class: PColor`
Method	Return	Description	Example
`new PColor(color)`	`PColor`	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	Return	Description	Example
`new PColorRamp(name, colors)`	`PColorRamp`	The constructor. Creates a new `PColorRamp` with a name and an array of `PColor` objects.	colorramp.html
`getName()`	`String`	Returns the name of this color ramp.
`getColors()`	`Array of PColor`	Returns an array of `PColor` objects from this color ramp.

`Class: PWidget`
Method	Return	Description	Example
`new PWidget(map, container, id)`	`PWidget`	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
`setLabel(html)`	`none`	Sets the label (title) of the widget with the given HTML string.	widget.html
`setContent(node)`	`none`	Sets the body content of the widget with the given DOM node.
`setContentHtml(html)`	`none`	Sets the body content of the widget with the given HTML string.	widget.html
`maximize()`	`none`	Maximiz