MapWrapper

Map

Methods

constructor(options)

Parameters:
optionsMapOptions(required)

addEventListener(eventName, listener)

Parameters:
eventNameMapWrapper.Event(required)

name of the event to listen to

listenerfunction(required)
the function to be invoked when the event is triggered
Return Value:
idnumber

listener id (this is needed to remove the listener)

Example:
const listenerId = map.addEventListener(MapWrapper.Event.CLICK, event => {
    map.addMarker({
        position: event.point
    });

    if(map.getMarkers().length > 10) {
        map.removeEventListener(MapWrapper.Event.CLICK, listenerId);
    }
})

addFeatures(features, [options])

Parameters:
featuresA GeoJSON object(required)

the features to add

optionsFeatureOptions(optional)
Return Value:
idsarray of number

the features that were added

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

addMarker(marker)

Parameters:
markerMapWrapper.Marker or MarkerOptions(required)
Return Value:

the added Marker object

fitMarkersToMap(markers)

Parameters:
markersarray of MapWrapper.Marker(optional)

markers to fit to the map (if none specified, the markers on the map will be used)

Return Value:
centerAndZoomCenterZoom

Finds a center point and zoom level such that all the markers on the map will be shown

getBoundary()

Parameters:
none
Return Value:
boundaryBoundary

getCenter()

Parameters:
none
Return Value:

the center of the map

getDomElement()

Parameters:
none
Return Value:
elementElement

DOM element that the map is anchored to

getId()

Parameters:
none
Return Value:
idstring

the id of the DOM element that the map is attached to

getMarkers()

Parameters:
none
Return Value:
markersarray of MapWrapper.Marker

the markers that are currently on the map

getProvider()

Parameters:
none
Return Value:

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:
zoomnumber

current zoom of the map

removeEventListener(eventName, id)

Parameters:
eventNameMapWrapper.Event(required)

event name

idnumber(required)

listener id

Return Value:
none
Example:
const listenerId = map.addEventListener(MapWrapper.Event.CLICK, event => {
    map.addMarker({
        position: event.point
    });

    if(map.getMarkers().length > 10) {
        map.removeEventListener(MapWrapper.Event.CLICK, listenerId);
    }
})

removeFeatures(ids)

Parameters:
idsarray of number(required)

the ids of the features to be removed

Return Value:
none

removeMarker(marker)

Parameters:
markerMapWrapper.Marker(required)

the marker to be removed

Return Value:
none

setBoundary(boundary)

Parameters:
boundaryBoundary(required)
Return Value:
none

setCenter(center)

Parameters:
centerMapWrapper.Point or PointLiteral(required)

new center of the map

Return Value:
none

Sets the center of the map to the specified point

setMarkers(markers)

Parameters:
markersarray of MapWrapper.Marker or array of MarkerOptions(required)
Return Value:
none

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

setScrollWheelZoomEnabled(scrollWheelIsEnabled)

Parameters:
scrollWheelIsEnabledboolean(required)
Return Value:
none

Enables/disables scrollwheel zoom

setZoom(zoom)

Parameters:
zoomnumber(required)

new zoom for the map

Return Value:
none

Sets the zoom of the map to the specified zoom

setZoomControlPosition(position)

Parameters:
Return Value:
none

Not currently supported by Bing

Events

BOUNDS_CHANGED

Arguments:
eventMapWrapper Event object

Fired when the map bounds change

CENTER_CHANGED

Arguments:
eventMapWrapper Event object

Fired when the map center changes

CLICK

Arguments:
eventMapWrapper Event object

Fired when a user clicks on the map

DRAG

Arguments:
eventMapWrapper Event object

Fired repeatedly while the map is being dragged

RIGHT_CLICK

Arguments:
eventMapWrapper Event object

Fired when a user right clicks on the map

ZOOM_CHANGED

Arguments:
eventMapWrapper Event object

Fired when the map zoom changes

Marker

Methods

constructor(options)

Parameters:
optionsMarkerOptions(required)

addEventListener(eventName, listener)

Parameters:
eventNameMapWrapper.Event(required)

name of the event to listen to

listenerfunction(required)
the function to be invoked when the event is triggered
Return Value:
idnumber

listener id (this is needed to remove the listener)

addInfoWindow(content)

addInfoWindow(options)

Parameters:
contentHTML string or Element(required)
optionsInfoWindowOptions(required)
Return Value:
none

closeInfoWindow()

Parameters:
none
Return Value:
none

Closes the info window associated with the marker

getData()

Parameters:
none
Return Value:
dataJavaScript object

arbitrary data set previously

Returns the data object that was set on the marker

getMap()

Parameters:
none
Return Value:

the map object that this marker belongs to

getPosition()

Parameters:
none
Return Value:

Returns the current latitude and longitude of the marker

getProvider()

Parameters:
none
Return Value:

provider name

getWrappedMarker()

Parameters:
none
Return Value:
wrappedMarkerGoogle Marker, Bing Pushpin or OpenLayers Feature

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:
isDraggableboolean

draggable

openInfoWindow()

Parameters:
none
Return Value:
none

Opens the info window associated with the marker

removeEventListener(eventName, id)

Parameters:
eventNameMapWrapper.Event(required)
idnumber(required)

listener id

Return Value:
none

setColor(color)

Parameters:
colora hex color string(required)
Return Value:
none

Sets the color of the marker

setData(data)

Parameters:
dataJavaScript object(required)

arbitrary data

Return Value:
none

Stores arbitrary data with the marker

setDraggable(isDraggable)

Parameters:
isDraggableboolean(required)

draggable

Return Value:
none

setIcon(options)

Parameters:
optionsIconOptions(required)
Return Value:
none

Attaches the specified image to the marker

setPosition(position)

Parameters:
positionMapWrapper.Point or PointLiteral(required)

position of the marker

Return Value:
none

Sets the marker to the specified position

setZIndex(zIndex)

Parameters:
zIndexnumber(required)

z index

Return Value:
none

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

updateInfoWindow(content)

updateInfoWindow(options)

Parameters:
contentHTML string or Element(required)

the content of the info window

optionsInfoWindowOptions(required)
Return Value:
none

Events

CLICK

Arguments:
eventMapWrapper Event object

Fires when the marker is clicked on

DOUBLE_CLICK

Arguments:
eventMapWrapper Event object

Fires when the marker is double clicked

DRAG

Arguments:
eventMapWrapper Event object

Fired repeatedly while the marker is being dragged

DRAG_END

Arguments:
eventMapWrapper Event object

Fires when the marker has finished being dragged

DRAG_START

Arguments:
eventMapWrapper Event object

Fires when the marker starts being dragged

MOUSEOVER

Arguments:
eventMapWrapper Event object

Fires when the mouse enters the marker

Point

In most cases Point and PointLiteral can be used interchangably.

Fields

latitudenumber
longitudenumber

Methods

constructor(latitude, longitude)

constructor(point)

Parameters:
latitudenumber(required)
longitudenumber(required)
pointPointLiteral(required)

Other types

Boundary

{
    northeast: {
        latitude: 37.4258,
        longitude: -121.8855
    },
    southwest: {
        latitude: 37.4122,
        longitude: -121.9199
    }
}

Attributes

northeastMapWrapper.Point or PointLiteral(required)

the northeast boundary

southwestMapWrapper.Point or PointLiteral(required)

the southwest boundary

CenterZoom

{
    center: {
        latitude: 37.4258,
        longitude: -121.8855
    },
    zoom: 12
}

Attributes

centerMapWrapper.Point(required)

the center of the map

zoomnumber(required)

the zoom level

FeatureOptions

{
    strokeColor: "darkred",
    fillColor: "#6f252599",
    strokeWeight: 2.5
}

Attributes

fillColora hex color string(optional)

fill color for the features

strokeColora hex color string(optional)

stroke color for the features

strokeWeightnumber(optional)

stroke weight for the features

IconOptions

{
    icon: "./test_image.png",
    height: 32,
    width: 32
}

Attributes

heightnumber(required)

height of the specified image

iconstring(required)

url for the image

widthnumber(required)

width of the specified image

InfoWindowOptions

{
    content: `<div>
        <h4>Name of location</h4>
        <p>Some information about the location.</p>
    </div>`,
    openOn: Mapwrapper.Event.CLICK,
}

Attributes

contentstring, HTML string or Element(required)

the content of the info window

openOnMapWrapper.Event or array of MapWrapper.Event(optional)
the events that will open the info window. Options are: MapWrapper.Event.MOUSEOVER or MapWrapper.Event.CLICK
default value: [ MapWrapper.Event.MOUSEOVER, MapWrapper.Event.CLICK ]

the orientation of the info window relative to the marker

MapOptions

{
    provider: MapWrapper.Provider.OPENLAYERS,
    elementId: "map",
    center: {
        latitude: 37.37500010085405,
        longitude: -121.98420524597164
    },
    zoom: 12,
}

Attributes

elementIdstring(required)

The id of the DOM element the map will be attached to.

providerMapWrapper.Provider(required)

The provider of the wrapped map.

centerMapWrapper.Point or PointLiteral(required*)

The center point of the map.

* Required if markers are not specified.
markersarray of MapWrapper.Marker or array of MarkerOptions(required*)
* Required if center and zoom are not specified. Specifying this parameter without specifying center and zoom should initialize the map such that all markers are in view
tileKeystring(required*)
* Required if the tileSource specified requires an API key (handled automatically if tileSource is set to MapWrapper.Provider.NETTOOLKIT)
tileSourceMapWrapper.TileSource(required*)

The name of the tile source to use

* Required if the provider is MapWrapper.Provider.OPENLAYERS
zoomnumber(required*)

Zoom level for the map

* Required if markers are not specified.
disableScrollWheelZoomboolean(optional)

MarkerOptions

{
    provider: MapWrapper.Provider.GOOGLE,
    position: {
        latitude: 37.3791,
        longitude: -121.9834
    },
    color: "cyan",
    map: "map",
}

Attributes

mapMapWrapper.Map(required)

the map the marker belongs to

positionMapWrapper.Point or PointLiteral(required)

the position of the marker

providerMapWrapper.Provider(required)

the provider of the wrapped marker

colora hex color string(optional)

color

dataJavaScript object(optional)

arbitrary data to be stored with the marker

iconIconOptions(optional)

options for an icon to use for this marker

infoWindowHTML string, Element or InfoWindowOptions(optional)

the content of the info window

PointLiteral

{
    latitude: 37.4258,
    longitude: -121.8855
}

Attributes

latitudenumber(required)
longitudenumber(required)

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