MapWrapper Reference Guide

Map

Methods

constructor
Parameters:
A JavaScript object containing the following:
provider:
string | the provider of the wrapped map (see MapWrapper.Provider)
elementId:
string | the id of the DOM element the map will be attached to
center:
MapWrapper.Point or a point literal (e.g. { latitude: 0, longitude: 0 }) | the center point of the map
zoom:
number | zoom level for the map
markers:
An array of JavaScript objects (used to create instances of MapWrapper.Marker), of the following format:
position:
MapWrapper.Point or a point literal (e.g. { latitude: 0, longitude: 0 }) | the position of the marker
data:
A JavaScript object | optional | arbitrary data to be stored with the marker
color:
hex color string | optional | color
icon:
(optional) A JavaScript object containing the following:
icon:
string | url for the image
width:
number | width of the specified image
height:
number | height of the specified image
infoWindow:
HTML string or Element | the content of the info window

or

A JavaScript object containing the following:
openOn:
string or array of strings | optional | the events that will open the info window. Options are: MapWrapper.Event.MOUSEOVER or MapWrapper.Event.CLICK (default is both)
content:
HTML string or Element | the content of the info window
orientation:
string | optional | the orientation of the info window relative to the marker (see MapWrapper.InfoWindowOrientation )
optional if center and zoom are specified; required otherwise; specifying this parameter without specifying center and zoom should initialize the map such that all markers are in view
tileSource:
string | optional | the name of the tile source to use (see MapWrapper.TileSource); required if the provider is MapWrapper.Provider.OPENLAYERS
tileKey:
string | required if the tileSource specified requires an API key (handled automatically if tileSource is set to MapWrapper.Provider.NETTOOLKIT)

addEventListener
Parameters:
string | name of the event to listen to
function | the function to be invoked when the event is triggered
Return Value:
number | listener id (this is needed to remove the listener)

addMarker
Parameters:
MapWrapper.Marker or a JavaScript object containing the following:
position:
MapWrapper.Point or a point literal (e.g. { latitude: 0, longitude: 0 }) | the position of the marker
data:
A JavaScript object | optional | arbitrary data to be stored with the marker
color:
hex color string | optional | color
icon:
(optional) A JavaScript object containing the following:
icon:
string | url for the image
width:
number | width of the specified image
height:
number | height of the specified image
infoWindow:
HTML string or Element | the content of the info window

or

A JavaScript object containing the following:
openOn:
string or array of strings | optional | the events that will open the info window. Options are: MapWrapper.Event.MOUSEOVER or MapWrapper.Event.CLICK (default is both)
content:
HTML string or Element | the content of the info window
orientation:
string | optional | the orientation of the info window relative to the marker (see MapWrapper.InfoWindowOrientation )
Return Value:
MapWrapper.Marker | the added Marker object

fitMarkersToMap
Parameters:
(optional) Array of MapWrapper.Marker instances | markers to fit to the map (if none specified, the markers on the map will be used)
Return Value:
A JavaScript object containing the following:
zoom:
number | the zoom level
center:
MapWrapper.Point | the center of the map

Finds a center point and zoom level that will fit all the markers on the map at its current size

getBoundary
Parameters:
none
Return Value:
A JavaScript object containing the following:
northeast:
MapWrapper.Point | the northeast boundary of the map
southwest:
MapWrapper.Point | the southwest boundary of the map
zoom:
number | zoom level of the map

getCenter
Parameters:
none
Return Value:
MapWrapper.Point | the center of the map

getDomElement
Parameters:
none
Return Value:
Element | DOM element that the map is anchored to

getId
Parameters:
none
Return Value:
string | the id of the DOM element that the map is attached to

getMarkers
Parameters:
none
Return Value:
array of MapWrapper.Marker instances | the markers that are currently on the map

getProvider
Parameters:
none
Return Value:
string | the name of the provider for the wrapped map

getWrappedMap
Parameters:
none
Return Value:
the wrapped map

IMPORTANT: this should only be used if there is some functionality that is needed but not provided by MapWrapper. you should expect to have to update any related code if you decide to change providers.

getZoom
Parameters:
none
Return Value:
number | current zoom of the map

removeEventListener
Parameters:
string | event name
number | listener id
Return Value:
none

removeMarker
Parameters:
MapWrapper.Marker | the marker to be removed
Return Value:
none

setBoundary
Parameters:
A JavaScript object containing the following:
northeast:
MapWrapper.Point or a point literal (e.g. { latitude: 0, longitude: 0 }) | the northeast boundary
southwest:
MapWrapper.Point or a point literal (e.g. { latitude: 0, longitude: 0 }) | the southwest boundary
Return Value:
none

setCenter
Parameters:
MapWrapper.Point or a point literal (e.g. { latitude: 0, longitude: 0 }) | new center of the map
Return Value:
none

Sets the center of the map to the specified point

setMarkers
Parameters:
An array of MapWrapper.Marker instances or an array of JavaScript objects, each containing the following:
position:
MapWrapper.Point or a point literal (e.g. { latitude: 0, longitude: 0 }) | the position of the marker
data:
A JavaScript object | optional | arbitrary data to be stored with the marker
color:
hex color string | optional | color
icon:
(optional) A JavaScript object containing the following:
icon:
string | url for the image
width:
number | width of the specified image
height:
number | height of the specified image
infoWindow:
HTML string or Element | the content of the info window

or

A JavaScript object containing the following:
openOn:
string or array of strings | optional | the events that will open the info window. Options are: MapWrapper.Event.MOUSEOVER or MapWrapper.Event.CLICK (default is both)
content:
HTML string or Element | the content of the info window
orientation:
string | optional | the orientation of the info window relative to the marker (see MapWrapper.InfoWindowOrientation )
Return Value:
none

Removes all markers currently on the map, adds the specified markers to the map

setScrollWheelZoomEnabled
Parameters:
boolean | scrollwheel zoom enabled
Return Value:
none

Enables/disables scrollwheel zoom

setZoom
Parameters:
number | new zoom for the map
Return Value:
none

Sets the zoom of the map to the specified zoom

setZoomControlPosition
Parameters:
string | position for the zoom control (see MapWrapper.PositionRelativeToMap)
Return Value:
none

Not currently supported by Bing

Events

BOUNDS_CHANGED
Arguments:
MapWrapper Event object

Fired when the map bounds change

CENTER_CHANGED
Arguments:
MapWrapper Event object

Fired when the map center changes

CLICK
Arguments:
MapWrapper Event object

Fired when a user clicks on the map

DRAG
Arguments:
MapWrapper Event object

Fired repeatedly while the map is being dragged

RIGHT_CLICK
Arguments:
MapWrapper Event object

Fired when a user right clicks on the map

ZOOM_CHANGED
Arguments:
MapWrapper Event object

Fired when the map zoom changes

Marker

Methods

constructor
Parameters:
A JavaScript object containing the following:
provider:
string | the provider of the wrapped map (see MapWrapper.Provider)
position:
MapWrapper.Point or a point literal (e.g. { latitude: 0, longitude: 0 }) | the position of the marker
map:
MapWrapper.Map | the map the point belongs to
data:
A JavaScript object | optional | arbitrary data to be stored with the marker
color:
hex color string | optional | color
icon:
(optional) A JavaScript object containing the following:
icon:
string | url for the image
width:
number | width of the specified image
height:
number | height of the specified image
infoWindow:
HTML string or Element | the content of the info window

or

A JavaScript object containing the following:
openOn:
string or array of strings | optional | the events that will open the info window. Options are: MapWrapper.Event.MOUSEOVER or MapWrapper.Event.CLICK (default is both)
content:
HTML string or Element | the content of the info window
orientation:
string | optional | the orientation of the info window relative to the marker (see MapWrapper.InfoWindowOrientation )

addEventListener
Parameters:
string | name of the event to listen to
function | the function to be invoked when the event is triggered
Return Value:
number | listener id (this is needed to remove the listener)

addFeatures
Parameters:
A GeoJSON object | the features to add
A JavaScript object containing the following:
strokeColor:
hex color string | optional | stroke color for the features
strokeWeight:
number | optional | stroke weight for the features
fillColor:
hex color string | optional | fill color for the features
Return Value:
An array of feature ids for the features that were added

We currently support GeoJSON of type "Feature" or "FeatureCollection", with the following geometries: "Point", "LineString", "MulitLineString", "Polygon" and "MultiPolygon"

addInfoWindow
Parameters:
HTML string or Element | the content of the info window

or

A JavaScript object containing the following:
openOn:
string or array of strings | optional | the events that will open the info window. Options are: MapWrapper.Event.MOUSEOVER or MapWrapper.Event.CLICK (default is both)
content:
HTML string or Element | the content of the info window
orientation:
string | optional | the orientation of the info window relative to the marker (see MapWrapper.InfoWindowOrientation )
Return Value:
none

closeInfoWindow
Parameters:
none
Return Value:
none

Closes the info window associated with the marker

getData
Parameters:
none
Return Value:
A JavaScript object | arbitrary data set previously

Returns the data object that was set on the marker

getMap
Parameters:
none
Return Value:
MapWrapper.Map| the map object that this marker belongs to

getPosition
Parameters:
none
Return Value:
MapWrapper.Point | position

Returns the current latitude and longitude of the marker

getProvider
Parameters:
none
Return Value:
string | provider name

getWrappedMarker
Parameters:
none
Return Value:
Google Marker, Bing Pushpin or OpenLayers Feature, depending on the provider | wrapped marker

IMPORTANT: this should only be used if there is some functionality that is needed but not provided by MapWrapper. You should expect to have to update any related code if you decide to change providers.

isDraggable
Parameters:
none
Return Value:
boolean | draggable

openInfoWindow
Parameters:
none
Return Value:
none

Opens the info window associated with the marker

removeEventListener
Parameters:
string | event name
number | listener id
Return Value:
none

removeFeatures
Parameters:
An array of feature ids | the ids of the features to be removed
Return Value:
none

setColor
Parameters:
hex color string | color
Return Value:
none

Sets the color of the marker

setData
Parameters:
A JavaScript object | arbitrary data
Return Value:
none

Stores arbitrary data with the marker

setDraggable
Parameters:
boolean | draggable
Return Value:
none

setIcon
Parameters:
A JavaScript object containing the following:
icon:
string | url for the image
width:
number | width of the specified image
height:
number | height of the specified image
Return Value:
none

Attaches the specified image to the marker

setPosition
Parameters:
MapWrapper.Point or a point literal (e.g. { latitude: 0, longitude: 0 }) | position
Return Value:
none

Sets the marker to the specified position

setZIndex
Parameters:
number | zIndex
Return Value:
none

Sets the marker to the specified zIndex (not currently supported by Bing)

updateInfoWindow
Parameters:
HTML string or Element | the content of the info window

or

A JavaScript object containing the following:
openOn:
string or array of strings | optional | the events that will open the info window. Options are: MapWrapper.Event.MOUSEOVER or MapWrapper.Event.CLICK (default is both)
content:
HTML string or Element | the content of the info window
orientation:
string | optional | the orientation of the info window relative to the marker (see MapWrapper.InfoWindowOrientation )
Return Value:
none

Events

CLICK
Arguments:
MapWrapper Event object

Fires when the marker is clicked on

DOUBLE_CLICK
Arguments:
MapWrapper Event object

DRAG
Arguments:
MapWrapper Event object

Fired repeatedly while the marker is being dragged

DRAG_END
Arguments:
MapWrapper Event object

Fires when the marker has finished being dragged

DRAG_START
Arguments:
MapWrapper Event object

Fires when the marker starts being dragged

MOUSEOVER
Arguments:
MapWrapper Event object

Fires when the mouse enters the marker

Point

In most cases Point and Point literal (e.g. { latitude: 0, longitude: 0}) can be used interchangably.

Methods

constructor
Parameters:
number | latitude, number | longitude or a JavaScript object with latitude and longitude

Constants

Event

RIGHT_CLICK

DRAG

CLICK

ZOOM_CHANGED

CENTER_CHANGED

BOUNDS_CHANGED

MOUSEOVER

DRAG_START

DRAG_END

DOUBLE_CLICK

InfoWindowOrientation

TOP

BOTTOM

LEFT

RIGHT

PositionRelativeToMap

TOP_LEFT

BOTTOM_LEFT

TOP_RIGHT

BOTTOM_RIGHT

Provider

GOOGLE

BING

OPENLAYERS

TileSource

NETTOOLKIT

OPENSTREETMAP

MAPBOX