Release NotesMapWrapper Beta-1.0.0

Backwards incompatible changes:

MapWrapper.Map
MapWrapper.Marker
Miscellaneous

Backwards compatible changes:

MapWrapper.Map
MapOptions
Miscellaneous

Map

Methods

constructor(options, [callback])

Parameters:
optionsMapOptions(required)
callbackfunction(optional)

A function to be called after the map has been initialized. Customizations such as adding markers must be done after the map has been constructed; this callback is called after the map is ready, avoiding potential race conditions.

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. The function will receive an Eventobject as an argument.
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.location
    });

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

addFeatures(features, [options])  experimental

Parameters:
featuresA GeoJSON object(required)

the features to add

optionsFeatureOptions(optional)
Return Value:
featuresarray of MapWrapper.Feature

the features that were added

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

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 location and zoom level such that all the markers on the map will be shown

getBounds()

Parameters:
none
Return Value:
boundsBounds

getCenter()

Parameters:
none
Return Value:

the center of the map

getDomElement()

Parameters:
none
Return Value:
elementElement

DOM element that the map is anchored to

getFeatures()  experimental

Parameters:
none
Return Value:
featuresarray of MapWrapper.Feature

the features that are currently on the map

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.location
    });

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

removeFeatures(features)  experimental

Parameters:
featuresarray of MapWrapper.Feature(required)

the features be removed

Return Value:
none

removeMarker(marker)

Parameters:
markerMapWrapper.Marker(required)

the marker to be removed

Return Value:
none

setBounds(bounds)

Parameters:
boundsBounds(required)
Return Value:
none

setCenter(center)

Parameters:

new center of the map

Return Value:
none

Sets the center of the map to the specified location

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. The function will receive an Eventobject as an argument.
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

getLocation()

Parameters:
none
Return Value:

Returns the current latitude and longitude of the marker

getMap()

Parameters:
none
Return Value:

the map object that this marker belongs to

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

setLocation(location)

Parameters:
Return Value:
none

Sets the marker to the specified location

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

MOUSEOUT

Arguments:
eventMapWrapper Event object

Fires when the mouse leaves the marker

MOUSEOVER

Arguments:
eventMapWrapper Event object

Fires when the mouse enters the marker

Location

In most cases MapWrapper.Location and LocationLiteral can be used interchangably.

Fields

latitudenumber
longitudenumber

Methods

constructor(latitude, longitude)

constructor(location)

Parameters:
latitudenumber(required)
longitudenumber(required)
locationLocationLiteral(required)

equals(location, [significantDigits])

Parameters:
significantDigitsnumber(optional)
Return Value:
locationsAreEqualboolean

Returns true if and only if the latitude and longitude of the specified Location are equal (to the specified number of significant digits) to the latitude and longitude of this Location.

Event

Fields

The latitude and longitude where the event occurred. (Only included for mouse events)

providerEventvaries

The event object from the provider

The target that triggered the event

Feature  experimental

Methods

addEventListener(eventName, listener)  experimental

Parameters:
eventNameMapWrapper.Event(required)

name of the event to listen to

listenerfunction(required)
The function to be invoked when the event is triggered. The function will receive an Eventobject as an argument.
Return Value:
idnumber

listener id (this is needed to remove the listener)

Example:
const listenerId = feature.addEventListener(MapWrapper.Event.MOUSEOVER, e => {
    e.target.setStyle({
        strokeWeight: 5,
        strokeColor: "#000",
        fillColor: "#ff0000"
    });

    e.target.removeEventListener(
        MapWrapper.Event.MOUSEOUT,
        listenerId
    );
});)

getProvider()  experimental

Parameters:
none
Return Value:

provider name

getStyle()  experimental

Parameters:
none
Return Value:

the style applied to the feature

getWrappedFeature()  experimental

Parameters:
none
Return Value:
wrappedFeatureDepends on provider

The representation of the feature in 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.

removeEventListener(eventName, id)  experimental

Parameters:
eventNameMapWrapper.Event(required)

event name

idnumber(required)

listener id

Return Value:
none
Example:
const listenerId = feature.addEventListener(MapWrapper.Event.MOUSEOVER, e => {
    e.target.setStyle({
        strokeWeight: 5,
        strokeColor: "#000",
        fillColor: "#ff0000"
    });

    e.target.removeEventListener(
        MapWrapper.Event.MOUSEOUT,
        listenerId
    );
});)

setStyle(style)  experimental

Parameters:
styleFeatureStyle(required)
Return Value:
none
Example:
const polygon = map.addFeatures({
    "type": "Feature",
    "geometry": {
        "type": "Polygon",
        "coordinates": [[
            [ 60.0, 5.0 ],
            [ 65.0, 5.0 ],
            [ 65.0, 10.0 ],
            [ 60.0, 10.0 ],
            [ 60.0, 5.0 ]
        ]]
    }
})[0];

polygon.setStyle({
    strokeWeight: 1.5,
    strokeColor: "#333",
    fillColor: "#3e2e8e66"
})

Events

MOUSEOUT

Arguments:
eventMapWrapper Event object

Fires when the mouse leaves the feature

MOUSEOVER

Arguments:
eventMapWrapper Event object

Fires when the mouse enters the feature

Other types

Bounds

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

Attributes

northeastMapWrapper.Location or LocationLiteral(required)

the northeast boundary

southwestMapWrapper.Location or LocationLiteral(required)

the southwest boundary

CenterZoom

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

Attributes

the center of the map

zoomnumber(required)

the zoom level

FeatureOptions  experimental

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

Attributes

styleFeatureStyle(optional)

FeatureStyle  experimental

{
    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 place</h4>
        <p>Some information about the place.</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)
default value: [ MapWrapper.Event.MOUSEOVER, MapWrapper.Event.CLICK ]
the events that will open the info window. Options are: MapWrapper.Event.MOUSEOVER or MapWrapper.Event.CLICK

the orientation of the info window relative to the marker

LocationLiteral

{
    latitude: 37.4258,
    longitude: -121.8855
}

Attributes

latitudenumber(required)
longitudenumber(required)

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.

The center 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
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.
attributionPositionMapWrapper.PositionRelativeToMap(optional)

NOTE: this option is only available when provider is either MapWrapper.Provider.OPENLAYERS or MapWrapper.Provider.MAPBOX_GL_JS

customAttributionHTML string(optional)
Additional attribution(s) to be shown on the map
NOTE: this option is only available when provider is either MapWrapper.Provider.OPENLAYERS or MapWrapper.Provider.MAPBOX_GL_JS
disableScrollWheelZoomboolean(optional)
maxZoomnumber(optional)

Maximum zoom level for the map

rasterTileSourceXYZ URL template string or array of XYZ URL template string(optional)
default value: https://api.nettoolkit.com/v1/geo/tiles/{z}/{x}/{y}?key=your_api_key_here
XYZ URL template string to a rasterTileSource. The URL should contain "{x}", "{y}", "{z}"
NOTE: at this time rasterTileSource is only supported for maps with provider set to MapWrapper.Provider.OPENLAYERS
showNetToolKitAttributionboolean(optional)
determines if an attribution is shown for NetToolKit
NOTE: this option only applies when the provider is set to MapWrapper.Provider.MAPBOX_GL_JS and NetToolKit tiles are being used.
vectorTileStyleURL string(optional)
default value: https://api.nettoolkit.com/geo/tiles/style/bright/style.json?key=your_api_key_here
URL string to a Mapbox style spefication document.
NOTE: at this time vectorTileStyle is only supported for maps with provider set to MapWrapper.Provider.MAPBOX_GL_JS

MarkerOptions

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

Attributes

the location of the marker

mapMapWrapper.Map(required)

the map the marker belongs to

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

Constants

Event

BOUNDS_CHANGED

CENTER_CHANGED

CLICK

DOUBLE_CLICK

DRAG

DRAG_END

DRAG_START

MOUSEOUT

MOUSEOVER

RIGHT_CLICK

ZOOM_CHANGED

InfoWindowOrientation

BOTTOM

LEFT

RIGHT

TOP

PositionRelativeToMap

BOTTOM_LEFT

BOTTOM_RIGHT

TOP_LEFT

TOP_RIGHT

Provider

BING

GOOGLE

MAPBOX_GL_JS

OPENLAYERS