class
Circle
Class for creating a circle on the map
new constructor(map, options)
Example:
const circle = new mapgl.Circle(map, {
coordinates: map.getCenter(),
radius: 500,
});
emit(type, data?)
Calls all event listeners with event type
type
type
Event type
data?
Data transferred to events
off(type, listener)
Removes event listener registered with
on
type
Event type
listener
Event handler
on(type, listener)
Registers event listener
type
Event type
listener
Event handler
once(type, listener)
Registers event listener which will be called once
type
Event type
listener
Event handler
CircleMarker
Class for creating a circleMarker on the map
The CircleMarker differs from the Circle in that it has radius in pixels so its instance displays the same on any zoom level
new constructor(map, options)
Example:
const circleMarker = new mapgl.CircleMarker(map, {
coordinates: map.getCenter(),
radius: 500,
});
emit(type, data?)
Calls all event listeners with event type
type
type
Event type
data?
Data transferred to events
off(type, listener)
Removes event listener registered with
on
type
Event type
listener
Event handler
on(type, listener)
Registers event listener
type
Event type
listener
Event handler
once(type, listener)
Registers event listener which will be called once
type
Event type
listener
Event handler
Control
Class for the map's controls creating.
new constructor(map, content, options?)
Example:
const control = new mapgl.Control(
map,
'<button>Some text</button>',
{ position: 'topLeft' },
);
map
The map instance.
content
Control HTML content.
options?
Control options.
DefaultSource
The default data source for the map. It's created automatically while the map initializing.
setFeatureStateMap(featureStateMap)
Sets the feature state map to the source.
Example:
source.setFeatureStateMap({
"70030076195691401": { "height": 300 },
"70030076130722099": { "height": 200 },
});
Evented
Event emitter
emit(type, data?)
Calls all event listeners with event type
type
type
Event type
data?
Data transferred to events
off(type, listener)
Removes event listener registered with
on
type
Event type
listener
Event handler
on(type, listener)
Registers event listener
type
Event type
listener
Event handler
once(type, listener)
Registers event listener which will be called once
type
Event type
listener
Event handler
FloorControl
A control for change floor layer level on the map.
It appears on the map only if you set the
floorControl
option within
GeoJsonSource
Class for creating GeoJSON data source in the map.
new constructor(map, options)
Example:
const source = new GeoJsonSource(map, {
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
type: 'Point',
coordinates: [82.92186, 55.03029],
},
},
],
},
});
map
The map instance
options
Spatial data source options
setData(data)
Sets source data
data
GeoJsonViewportSource
Class for creating GeoJSON viewport data source in the map.
new constructor(map, options)
Example:
const source = new GeoJsonViewportSource(map, {
data: (bbox) => `http://...&outputFormat=application%2Fjson&bbox=${bbox}&srcName=EPSG:4326`,
});
map
The map instance
options
Initialization options
setData(data)
Sets the source data bbox function.
The bbox parameter is automatically calculated based on the visible viewport and the viewportPadding option.
data
setViewportPadding(viewportPadding)
Sets the viewport padding to increase the viewport-based area to get data.
viewportPadding
HtmlMarker
Class for creating an HTML marker on the map.
new constructor(map, options)
Example:
const htmlMarker = new mapgl.HtmlMarker(map, {
coordinates: map.getCenter(),
html: '<div>Some content</div>',
});
getContent
Returns the whole HTMLElement of the marker. Previously specified HTML content is a child of the element.
getCoordinates
Returns current position of the top-left corner of the HTML marker with its anchor in geographical coordinates
[longitude, latitude]
.
getZIndex
Returns the z-index CSS property value of the HTML marker's root DOM element.
setAnchor(anchor)
Sets the anchor relative to the top-left corner of the HTML marker.
anchor
An anchor of the HTML marker in pixels.
setContent(html)
Sets the HTML content of the HTML marker.
html
The content that will replace the current content of the HTML marker.
setCoordinates(coordinates)
Sets the geographical coordinates of the HTML marker.
coordinates
Coordinates
[longitude, latitude]
where the top-left corner of the HTML marker with its anchor should be set.
setZIndex(zIndex)
Sets the z-index CSS property value of the HTML marker's root DOM element.
zIndex
The z-index property value.
Label
Class for creating labels on the map.
new constructor(map, options)
Example:
const label = new mapgl.Label(map, {
coordinates: map.getCenter(),
text: 'There is hope',
color: '#ff0000',
fontSize: 24,
});
emit(type, data?)
Calls all event listeners with event type
type
type
Event type
data?
Data transferred to events
off(type, listener)
Removes event listener registered with
on
type
Event type
listener
Event handler
on(type, listener)
Registers event listener
type
Event type
listener
Event handler
once(type, listener)
Registers event listener which will be called once
type
Event type
listener
Event handler
setCoordinates(coordinates)
Sets geographical coordinates of the label.
coordinates
Coordinates
[longitude, latitude]
where the center of the label with its anchor should be set.
LngLatBoundsClass
A
LngLatBoundsClass
class represents a geographical bounding box (LngLatBounds),
defined by its southwest and northeast points in longitude and latitude
with some additional methods
new constructor(params)
Example:
const lngLatBounds = new mapgl.LngLatBoundsClass({
southWest: [0, 0],
northEast: [1, 1],
});
params
southWest and northEast points
containsBounds(bounds)
Returns true if the geographical bounding box contains the bounds entirely.
Note that two equal bounds contain each other.
Example to check overlapping:
const bounds = new mapgl.LngLatBoundsClass({
southWest: [1, 1],
northEast: [2, 2],
});
const biggerBounds = new mapgl.LngLatBoundsClass({
southWest: [0.9, 0.9],
northEast: [2.1, 2.1],
});
// false: doesn't overlap but intersects (bounds.intersects(biggerBounds) === true)
const res1 = bounds.containsBounds(biggerBounds);
// true: overlaps and intersects (biggerBounds.intersects(bounds) === true)
const res2 = biggerBounds.containsBounds(bounds);
containsPoint(point)
Returns true if the geographical bounding box contains the point.
point
Point to check.
extend(point)
Extend the bounds to include a given point.
point
The geographical coordinates
[lng, lat]
.
intersects(bounds)
Returns true if the geographical bounding box intersects the bounds.
Note that two equal bounds intersect each other.
Map
The main class for map initialization.
new constructor(container, options)
Example:
const map = new mapgl.Map('map', {
center: [55.185346, 25.14226],
zoom: 16,
});
container
The HTML element in which the map appears, or its ID.
options
Map initialization options.
addIcon(name, config)
Adds a config of user icon that will be used in the current style. If an icon with the same name already exists, it won't be added and applied to the current style.
addLayer(layer, beforeId?)
Adds a style layer to the current map style.
layer
Style layer object.
beforeId?
The identifier of an existing layer to insert the new layer before, resulting in the new layer appearing visually beneath the existing layer. If this argument is not specified, the layer will be appended to the end of the layers array and appear visually above all other layers.
Throws an error if:
- the layer with specified id already exists in the current map style;
- the layer with specified beforeId doesn't exist in the current map style;
- one group layer is inserted into another group layer.
emit(type, data?)
Calls all event listeners with event type
type
type
Event type
data?
Data transferred to events
fitBounds(bounds, options?)
Pans and zooms the map to contain its visible area within the specified geographical bounds. This method also resets the map pitch and rotation to 0. But the map rotation can be saved by option considerRotation
bounds
The geographical bounds to fit in
options?
FitBounds options
getBounds(options?)
Returns the geographical bounds visible in the current map view.
options?
getCenter
Returns the current map center in geographical coordinates (
[longitude, latitude]
).
getOption(option)
Gets a value of the map option.
option
Map option name. Only 'disableDragging', 'enableTrackResize' options are available
getProjectionMatrix
Returns the view projection matrix associated with the current state of the map.
hasLayer(layerId)
Checks if a style layer or group with the given identifier exists in the current map style.
layerId
The identifier of a layer or group.
hideLayers(params)
Hides the layer or all layers in a group in the current map style and updates the active layers. If only the id is specified, the corresponding layer or group will be hidden by id. If only the type is specified, all layers with this type will be hidden. If both the layer type and id are specified, layers will be hidden by type, and the id will be ignored.
params
invalidateSize
Updates the map size. This method should be called after any change in the map container size.
off(type, listener)
Removes event listener registered with
on
type
Event type
listener
Event handler
on(type, listener)
Registers event listener
type
Event type
listener
Event handler
once(type, listener)
Registers event listener which will be called once
type
Event type
listener
Event handler
patchStyleState(styleState)
Patches map style global variables. Use this method if you want to change a particular variable and left other ones intact.
project(lngLat)
Returns pixel coordinates
[x, y, z]
, relative to the map's container, that correspond to the specified geographical coordinates.
Z
coordinate is deprecated.
lngLat
The geographical coordinates
[longitude, latitude]
to project.
removeIcon(name)
Removes a specified icon from the current style.
name
An icon name to remove.
removeLayer(layerId)
Removes the layer with the given identifier from the current map style.
layerId
The identifier of the layer to remove.
Throws an error if layer with specified id does not exist in the current map style.
setCenter(center, options?)
Sets the geographical center of the map.
center
The desired coordinates (
[longitude, latitude]
).
options?
Center animation options.
setControlsLayoutPadding(padding)
Sets padding for controls layout.
padding
setFloorPlanLevel(floorPlanId, floorLevelIndex)
Sets a floorLevel of the floorPlan.
floorPlanId
id of the floor plan
floorLevelIndex
floorLevelIndex in floorLevels list
setLanguage(lang)
Sets the desired map language.
lang
short string code 'en', 'ru', ...etc
setLowZoomMaxPitch(pitch, options?)
Sets the maximum map pitch for low zooms (zoom < 16.5).
pitch
The desired maximum pitch in degrees.
options?
Options for animating the pitch in case the current pitch is bigger than the new maximum.
setMaxPitch(pitch, options?)
Sets the maximum map pitch.
pitch
The desired maximum pitch in degrees.
options?
Options for animating the pitch in case the current pitch is more than the new maximum.
setMaxZoom(zoom, options?)
Sets the maximum map zoom.
zoom
The desired maximum zoom.
options?
Options for adjusting map zoom in case the current zoom is more than the new maximum.
setMinPitch(pitch, options?)
Sets the minimum map pitch.
pitch
The desired minimum pitch in degrees.
options?
Options for animating the pitch in case the current pitch is less than the new minimum.
setMinZoom(zoom, options?)
Sets the minimum map zoom.
zoom
The desired minimum zoom.
options?
Options for adjusting map zoom in case the current zoom is less than the new minimum.
setOption(option, value)
Sets a new value for the map option.
option
Map option name. Only 'disableDragging', 'enableTrackResize', 'loopWorld', 'disableHidingPois', or 'enableTwoFingerDragging' options are available.
value
New value of the map option.
setPadding(padding, options?)
Sets the map padding. The padding on each side has a clamp to a positive value no larger than the map canvas size for either side
padding
Padding in pixels from the different sides of the map canvas
options?
Padding animation options.
setPitch(pitch, options?)
Sets the map pitch angle.
pitch
The desired map pitch in degrees.
options?
Pitch animation options.
setRotation(rotation, options?)
Sets the map rotation angle.
rotation
The desired map rotation in degrees.
options?
Rotation animation options.
setSelectedObjects(ids, scope?)
Selects objects on the map by identifiers.
ids
An array of identifiers of objects that should be selected.
scope?
The scope of the identifiers. If not specified default scope is used.
setStyleById(styleId)
Uploads styles object by its id and applies it to the map. Returns a promise that contains param styleId.
styleId
uuid of the style.
setStyleFromUrl(styleUrl, options)
Experimental method. Uploads styles object from URL and applies it to the map. Returns a promise that contains param styleId.
Warning: Setting a style this way might result in an incompatible style being applied. Map styles are constantly evolving in order to display new cartographic data. By storing the style on your own side, you assume the responsibility to update it periodically and take care of its relevance.
Use it only if you know that the style at this url is compatible with your version of mapgl. In other cases it is recommended to use setStyleById to set a style from the Style Editor.
styleUrl
Base URL of the style. It is used to resolve paths provided in the options.
options
Contains paths to styles, icons, fonts, models etc
setStyleState(styleState)
Sets whole map style global variables at once, any previously set variables will be reset or overridden.
showLayers(params)
Shows the layer or all layers in a group in the current map style and updates the active layers. If only the id is specified, the corresponding layer or group will be shown. If only the type is specified, all layers with this type will be shown. If both the layer type and id are specified, layers will be shown by type, and the id will be ignored.
params
unproject(point)
Returns geographical coordinates
[longitude, latitude]
that correspond to the specified pixel coordinates.
point
The pixel coordinates
[x, y]
of the map's container to unproject.
Marker
Class for creating markers on the map.
new constructor(map, options)
Example:
const marker = new mapgl.Marker(map, {
coordinates: map.getCenter()
});
emit(type, data?)
Calls all event listeners with event type
type
type
Event type
data?
Data transferred to events
getCoordinates
Returns current marker center in geographical coordinates
[longitude, latitude]
.
off(type, listener)
Removes event listener registered with
on
type
Event type
listener
Event handler
on(type, listener)
Registers event listener
type
Event type
listener
Event handler
once(type, listener)
Registers event listener which will be called once
type
Event type
listener
Event handler
setCoordinates(coordinates)
Sets the geographical center of the marker.
coordinates
Coordinates
[longitude, latitude]
where the center of the marker should be set.
setHoverIcon(iconOptions?)
Sets the hover icon of the marker. If you pass empty options, the current hover just will be deleted.
setLabel(labelOptions?)
Sets the label of the marker. If you pass an empty label, the current one just will be deleted.
setRotation(angle)
Sets the clockwise rotation of the icon.
angle
Angle in degrees.
Polygon
Class for creating a polygon on the map
new constructor(map, options)
Example:
const polygon = new mapgl.Polygon(map, {
coordinates: [
[
[82.878543, 54.975937],
[82.903049, 54.981333],
[82.929373, 54.973391],
[82.902421, 54.996199],
[82.878543, 54.975937],
],
[
[82.908136, 54.987526],
[82.899028, 54.983494],
[82.897673, 54.988904],
[82.908136, 54.987526],
],
],
color: '#990000',
strokeColor: '#bb0000',
});
emit(type, data?)
Calls all event listeners with event type
type
type
Event type
data?
Data transferred to events
off(type, listener)
Removes event listener registered with
on
type
Event type
listener
Event handler
on(type, listener)
Registers event listener
type
Event type
listener
Event handler
once(type, listener)
Registers event listener which will be called once
type
Event type
listener
Event handler
Polyline
Class for creating a polyline on the map
new constructor(map, options)
Example:
const polyline = new mapgl.Polyline(map, {
coordinates: [
[82.878543, 54.975937],
[82.903049, 54.981333],
[82.929373, 54.973391],
],
});
emit(type, data?)
Calls all event listeners with event type
type
type
Event type
data?
Data transferred to events
off(type, listener)
Removes event listener registered with
on
type
Event type
listener
Event handler
on(type, listener)
Registers event listener
type
Event type
listener
Event handler
once(type, listener)
Registers event listener which will be called once
type
Event type
listener
Event handler
Raster
Class for creating a raster on the map.
new constructor(map, options)
Example:
const raster = new mapgl.Raster(map, {
bounds: map.getBounds(),
image: {
url: 'some/url'
},
});
RasterTileSource
Class for creating raster tile source on the map
new constructor(map, options)
Example:
const source = new RasterTileSource(map, {
url: (x, y, zoom) => `https://tile.openstreetmap.org/${zoom}/${x}/${y}.png`,
attributes: { foo: 'asd' },
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
});
map
The map instance
options
Spatial data source options
ScaleControl
A control that shows the scale line for the current map state.
It appears on the map only if you set the
scaleControl
option within
new constructor(map, options?)
Example:
const control = new mapgl.ScaleControl(
map,
{ position: 'topRight' },
);
TrafficControl
A control for enabling a traffic layer on the map.
It appears on the map only if you set the
trafficControl
option within
new constructor(map, options?)
Example:
const control = new mapgl.TrafficControl(
map,
{ position: 'topRight' },
);
ZenithSource
Class representing Zenith data source.
new constructor(map, options)
Example:
const customZenithSource = new mapgl._J.ZenithSource(map, {
tileTemplateUrl: `${mapgl._J.ZenithSource.tileTemplateUrl}&user_layer_id=${id}`
metatileTemplateUrl: `mapgl._J.ZenithSource.metatileTemplateUrl`
appId: map.state.appId,
tileServer: map.state.tileServer,
tileSet: map.state.tileSet,
tileProtocol: map.state.tileProtocol,
tileKey: map.state.tileKey,
subdomains: map.state.subdomains,
sourceAttributes: {
sourceName: 'zenith-custom-source',
}
});
map.setStyle({
// ...
layers: [
// ...
filter: [
'all',
['match', ['sourceAttr', 'sourceName'], ['zenith-custom-source'], true, false]
// ...
]
]
})
setFeatureStateMap(featureStateMap)
Sets the feature state map to the source.
See DefaultSource.setFeatureStateMap
ZoomControl
A basic control with two buttons for zooming in and out. It is added to the
map by default unless you set its
zoomControl
option to
false
.
new constructor(map, options?)
Example:
const control = new mapgl.ZoomControl(
map,
{ position: 'topRight' },
);