BpMarkerList Reference

Introduction

new BpMarkerList()

Code:

var list = new BpMarkerList(div,tag,highlightClass,lowlightClass);

Remarks:

div is the div which will hold the sidear.
tag is the unique name given to this sidebar. This is useful if you have more than one sidebar.
highlightClass is the className to use for the div of the currently-highlighted marker. The default is BpMarkerListHighlight.
lowlightClass is the className to apply to all other divs. The default is BpMarkerListLowlight.

Notes:

• You can only have one highlighted marker at a time.

Examples:

• basic
• custom
• template

add()

Code:

list.add(marker);

Remarks:

Adds a marker to the list. If the marker already has a sidebar div for this sidebar, that will be reused.
To see how to manage how a marker is represented in the list, see the examples below.

Notes:

• The first marker added to the list must already have been added to the map.
• If the marker is already in the list, it will not be re-added.
• If you want to maintain the sort of the list, you will need to re-sort after calling add().

Examples:

• basic
• custom
• template

clear()

Code:

list.clear();

Remarks:

Removes all markers from the list.

contains()

Code:

var bool = list.contains(marker);

Remarks:

Lets you know if a marker is in the list.

getContainer()

Code:

var div = list.getContainer();

Remarks:

Returns the first argument passed to the constructor.

getDivs()

Code:

var array = list.getDivs();

Remarks:

Returns the sorted list of all divs which represent markers.

getHighlightedMarker()

Code:

var marker = list.getHighlightedMarker();

Remarks:

Returns the highlighted marker, or null if no marker is currently highlighted.

Examples:

• basic
• custom
• template

get/setHtmlTemplate()

Code:

list.setHtmlTemplate(tmpl);
var tmpl = list.getHtmlTemplate();

Remarks:

It's easy to define how a marker will be represented in the list using an HTML template.

The HTML template contains the innerHTML of the div to be created. It is populated with marker-specific information using a special syntax, with information coming from the object returned from marker.getUserData().

If you add "[propertyName]" to your template, it will be replaced with the value of marker.getUserData().propertyName.
If marker.getUserData().propertyName is a function, the return value of that function (called as a method of the marker, with propertyName as the only argument) will be the replacement value. To use square brakets without having their contents interpolated, just put at least one space character between them. Only square brackets without spaces inside them will be interpolated, so "markers[ [index] ]" will become (perhaps) "markers[ 42 ]".

If you want more control over the events embedded in the sidebar, use list.loadDiv().

Examples:

• template

getMarkerById()

Code:

var marker = list.getMarkerById(id,userDataId?,userDataFieldName?);

Remarks:

This will return a marker from the list, based on its id.
The first argument, if true, should be the id value returned from marker.getId().
If the first argument is false, the following arguments will be used to find the marker. The second argument represents the value of marker.getUserData().id. If there is a third argument, it is used to find the correct property in marker.getUserData() to test.

list.getMarkerById(42) will return the marker where marker.getId() == 42.
list.getMarkerById(false,42) will return the marker where marker.getUserData().id == 42.
list.getMarkerById(false,42,'location_id') will return the marker where marker.getUserData().location_id == 42.

getMarkers()

Code:

var array = list.getMarkers();

Remarks:

Returns the sorted list of markers in the list.

getTag()

Code:

var tag = list.getTag();

Remarks:

Returns the (hopefully!) unique tag of this list. This is the second argument passed to new BpMarkerList().

Notes:

• You can use this tag to get the marker's sidebar div by calling marker.getSidebarDiv(tag).

highlight()

Code:

list.highlight(marker,noScroll?);

Remarks:

Highlights a marker in the list. What this means is that the marker's div's className attribute will be set to highlightClass, the third argument to new BpMarkerList(). noScroll is optional and defaults to false. If present and true, the marker will not be scrolled into view. This is useful for pages which can be scrolled, since scrolling of the page will happen unexpectedly when the marker is scrolled into view.

Notes:

• A list can only have one highlighted marker at a time.
• Use noScroll when the page can be scrolled, or the page may scroll unexpectedly.

Examples:

• basic
• custom
• template

isUnderPagePixel()

Code:

var bool = list.isUnderPagePixel(GPoint);

Remarks:

Lets you know if the list's container is under the given page pixel.

Notes:

• This is useful for implementing droppable carts.

loadDiv()

Code:

list.loadDiv(div,marker);

Remarks:

If a marker is added to the list and there is no HTML template defined, this method will be called from within the class.
That means that you will need to write this method in a subclass. A div is passed in, along with the marker. Populate the div with whatever HTML you like. There's no need to return anything. Don't overwrite the previous contents of the div! since that information is used internally by the class.

Notes:

• This is quite a bit more difficult than using list.setHtmlTemplate().
• Don't overwrite the previous contents of the div!

Examples:

• custom

lowlight()

Code:

list.lowlight(marker?);

Remarks:

If no marker is passed in, every marker in the list will be lowlighted.
This means that the marker's div's className attribute will be set to lowlightClass, the fourth argument to new BpMarkerList().

Examples:

• basic
• custom
• template

remove()

Code:

list.remove(marker);

Remarks:

Removes a marker from the list.

setMap()

Code:

list.setMap(map);

Remarks:

The first time you call list.add(marker), the marker must be on the map, or you will need to call list.setMap(map) before adding any markers to the list.

Notes:

• Add a mapped marker to the list first, or set the map by calling this method before adding any markers to the list.

sort()

Code:

list.sort(field?,desc?,noScroll?);

Remarks:

This will sort the list according to the values found in each marker's getUserData()[field] property.
If the property is a function, the function will be called as a method of its marker, with the field name passed as the only argument. The return value will be used for sorting.
If desc is true, the list will be sorted in descending order.
If noScroll is true, any highlighted marker will not be scrolled into view. This is generally helpful on Opera, which behaves badly with automatic scrolling in general.
If no arguments are passed in, the list will be sorted using the same parameters as the previous sort.