MapWrapper Reference Guide

Contents

  • Map
  • Marker
  • Point
  • Constants

    • 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