class
Circle
Class for creating a circle on the map
(map, options)Example:
const circle = new mapgl.Circle(map, {
coordinates: map.getCenter(),
radius: 500,
});
Destroys the circle
(type, data?)Calls all event listeners with event type
type
Event type
Data transferred to events
(type, listener)Removes event listener registered with
on
Event type
Event handler
(type, listener)Registers event listener
Event type
Event handler
(type, listener)Registers event listener which will be called once
Event type
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
(map, options)Example:
const circleMarker = new mapgl.CircleMarker(map, {
coordinates: map.getCenter(),
radius: 500,
});
Destroys the circleMarker
(type, data?)Calls all event listeners with event type
type
Event type
Data transferred to events
(type, listener)Removes event listener registered with
on
Event type
Event handler
(type, listener)Registers event listener
Event type
Event handler
(type, listener)Registers event listener which will be called once
Event type
Event handler
Control
Class for the map's controls creating.
(map, content, options?)Example:
const control = new mapgl.Control(
map,
'<button>Some text</button>',
{ position: 'topLeft' },
);
The map instance.
Control HTML content.
Control options.
Destroys the control.
Returns the container of the control.
(position)Sets the position of the control.
DefaultSource
The default data source for the map. It's created automatically while the map initializing.
(map)The map instance
(featureStateMap)Sets the feature state map to the source.
Example:
source.setFeatureStateMap({
"70030076195691401": { "height": 300 },
"70030076130722099": { "height": 200 },
});
Evented
Event emitter
Event emitter class is used internally by the map.
(type, data?)Calls all event listeners with event type
type
Event type
Data transferred to events
(type, listener)Removes event listener registered with
on
Event type
Event handler
(type, listener)Registers event listener
Event type
Event handler
(type, listener)Registers event listener which will be called once
Event type
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
Destroys the control.
Returns the container of the control.
(position)Sets the position of the control.
GeoJsonSource
Class for creating GeoJSON data source in the map.
(map, options)Example:
const source = new GeoJsonSource(map, {
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
type: 'Point',
coordinates: [82.92186, 55.03029],
},
},
],
},
});
The map instance
Spatial data source options
Destroys the source
(data)Sets source data
GeoJsonViewportSource
Class for creating GeoJSON viewport data source in the map.
(map, options)Example:
const source = new GeoJsonViewportSource(map, {
data: (bbox) => `http://...&outputFormat=application%2Fjson&bbox=${bbox}&srcName=EPSG:4326`,
});
The map instance
Initialization options
Destroys the source.
(data)Sets the source data bbox function.
The bbox parameter is automatically calculated based on the visible viewport and the viewportPadding option.
(viewportPadding)Sets the viewport padding to increase the viewport-based area to get data.
HtmlMarker
Class for creating an HTML marker on the map.
(map, options)Example:
const htmlMarker = new mapgl.HtmlMarker(map, {
coordinates: map.getCenter(),
html: '<div>Some content</div>',
});
Destroys the HTML marker.
Returns the HTML marker's anchor in pixels.
Returns the whole HTMLElement of the marker. Previously specified HTML content is a child of the element.
Returns current position of the top-left corner of the HTML marker with its anchor in geographical coordinates
[longitude, latitude]
.
Returns the z-index CSS property value of the HTML marker's root DOM element.
(anchor)Sets the anchor relative to the top-left corner of the HTML marker.
An anchor of the HTML marker in pixels.
(html)Sets the HTML content of the HTML marker.
The content that will replace the current content of the HTML marker.
(coordinates)Sets the geographical coordinates of the HTML marker.
Coordinates
[longitude, latitude]
where the top-left corner of the HTML marker with its anchor should be set.
(zIndex)Sets the z-index CSS property value of the HTML marker's root DOM element.
The z-index property value.
Label
Class for creating labels on the map.
(map, options)Example:
const label = new mapgl.Label(map, {
coordinates: map.getCenter(),
text: 'There is hope',
color: '#ff0000',
fontSize: 24,
});
Destroys the label.
(type, data?)Calls all event listeners with event type
type
Event type
Data transferred to events
Returns geographical coordinates
[longitude, latitude]
of the label.
Hides the label.
(type, listener)Removes event listener registered with
on
Event type
Event handler
(type, listener)Registers event listener
Event type
Event handler
(type, listener)Registers event listener which will be called once
Event type
Event handler
(coordinates)Sets geographical coordinates of the label.
Coordinates
[longitude, latitude]
where the center of the label with its anchor should be set.
Displays hidden label.
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
(params)Example:
const lngLatBounds = new mapgl.LngLatBoundsClass({
southWest: [0, 0],
northEast: [1, 1],
});
southWest and northEast points
(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);
(point)Returns true if the geographical bounding box contains the point.
Point to check.
(point)Extend the bounds to include a given point.
The geographical coordinates
[lng, lat]
.
Returns the center point of the geographical bounding box.
(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.
(container, options)Example:
const map = new mapgl.Map('map', {
center: [55.185346, 25.14226],
zoom: 16,
});
The HTML element in which the map appears, or its ID.
Map initialization options.
(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.
(layer, beforeId?)Adds a style layer to the current map style.
Style layer object.
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.
Destroys the map and frees all related resources.
(type, data?)Calls all event listeners with event type
type
Event type
Data transferred to events
(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
The geographical bounds to fit in
FitBounds options
(options?)Returns the geographical bounds visible in the current map view.
Returns HTMLCanvasElement of the map.
Returns the current map center in geographical coordinates (
[longitude, latitude]
).
Returns HTML-container of the map.
Returns the map default source.
Returns graphics preset descriptor.
Returns the desired map language.
Returns the current maximum map zoom.
Returns the current minimum map zoom.
(option)Gets a value of the map option.
Map option name. Only 'disableDragging', 'enableTrackResize' options are available
Returns the current map pitch in degrees.
Returns the view projection matrix associated with the current state of the map.
Returns the current map rotation in degrees.
Returns the current map size in logical pixels.
Returns the current map style zoom.
Returns the current map zoom.
(layerId)Checks if a style layer or group with the given identifier exists in the current map style.
The identifier of a layer or group.
(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.
Hides the traffic layer from the map.
Updates the map size. This method should be called after any change in the map container size.
Returns true if the map isn't moving and has rendered all the viewport tiles.
Returns true if the traffic layer is currently enabled on the map.
(type, listener)Removes event listener registered with
on
Event type
Event handler
(type, listener)Registers event listener
Event type
Event handler
(type, listener)Registers event listener which will be called once
Event type
Event handler
(styleState)Patches map style global variables. Use this method if you want to change a particular variable and left other ones intact.
(lngLat)Returns pixel coordinates
[x, y, z]
, relative to the map's container, that correspond to the specified geographical coordinates.
Z
coordinate is deprecated.
The geographical coordinates
[longitude, latitude]
to project.
(name)Removes a specified icon from the current style.
An icon name to remove.
(layerId)Removes the layer with the given identifier from the current map style.
The identifier of the layer to remove.
Throws an error if layer with specified id does not exist in the current map style.
(center, options?)Sets the geographical center of the map.
The desired coordinates (
[longitude, latitude]
).
Center animation options.
(padding)Sets padding for controls layout.
(floorPlanId, floorLevelIndex)Sets a floorLevel of the floorPlan.
id of the floor plan
floorLevelIndex in floorLevels list
(lang)Sets the desired map language.
short string code 'en', 'ru', ...etc
(pitch, options?)Sets the maximum map pitch for low zooms (zoom < 16.5).
The desired maximum pitch in degrees.
Options for animating the pitch in case the current pitch is bigger than the new maximum.
(bounds)Sets a bound to limit movings on map
(pitch, options?)Sets the maximum map pitch.
The desired maximum pitch in degrees.
Options for animating the pitch in case the current pitch is more than the new maximum.
(zoom, options?)Sets the maximum map zoom.
The desired maximum zoom.
Options for adjusting map zoom in case the current zoom is more than the new maximum.
(pitch, options?)Sets the minimum map pitch.
The desired minimum pitch in degrees.
Options for animating the pitch in case the current pitch is less than the new minimum.
(zoom, options?)Sets the minimum map zoom.
The desired minimum zoom.
Options for adjusting map zoom in case the current zoom is less than the new minimum.
(option, value)Sets a new value for the map option.
Map option name. Only 'disableDragging', 'enableTrackResize', 'loopWorld', 'disableHidingPois', or 'enableTwoFingerDragging' options are available.
New value of the map option.
(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 in pixels from the different sides of the map canvas
Padding animation options.
(pitch, options?)Sets the map pitch angle.
The desired map pitch in degrees.
Pitch animation options.
(rotation, options?)Sets the map rotation angle.
The desired map rotation in degrees.
Rotation animation options.
(ids, scope?)Selects objects on the map by identifiers.
An array of identifiers of objects that should be selected.
The scope of the identifiers. If not specified default scope is used.
(styleId)Uploads styles object by its id and applies it to the map. Returns a promise that contains param styleId.
uuid of the style.
(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.
Base URL of the style. It is used to resolve paths provided in the options.
Contains paths to styles, icons, fonts, models etc
(styleState)Sets whole map style global variables at once, any previously set variables will be reset or overridden.
(styleZoom, options?)Sets the map style zoom.
(zoom, options?)Sets the map zoom.
(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.
Shows the traffic layer on the map.
Calls the map rerender.
(point)Returns geographical coordinates
[longitude, latitude]
that correspond to the specified pixel coordinates.
The pixel coordinates
[x, y]
of the map's container to unproject.
Marker
Class for creating markers on the map.
(map, options)Example:
const marker = new mapgl.Marker(map, {
coordinates: map.getCenter()
});
Destroys the marker.
(type, data?)Calls all event listeners with event type
type
Event type
Data transferred to events
Returns current marker center in geographical coordinates
[longitude, latitude]
.
Returns a clockwise rotation angle of the marker icon in degrees.
Hides the marker.
(type, listener)Removes event listener registered with
on
Event type
Event handler
(type, listener)Registers event listener
Event type
Event handler
(type, listener)Registers event listener which will be called once
Event type
Event handler
(coordinates)Sets the geographical center of the marker.
Coordinates
[longitude, latitude]
where the center of the marker should be set.
(iconOptions?)Sets the hover icon of the marker. If you pass empty options, the current hover just will be deleted.
(iconOptions)Sets the icon of the marker.
(labelOptions?)Sets the label of the marker. If you pass an empty label, the current one just will be deleted.
(angle)Sets the clockwise rotation of the icon.
Angle in degrees.
Displays hidden marker.
Polygon
Class for creating a polygon on the map
(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',
});
Destroys the polygon
(type, data?)Calls all event listeners with event type
type
Event type
Data transferred to events
(type, listener)Removes event listener registered with
on
Event type
Event handler
(type, listener)Registers event listener
Event type
Event handler
(type, listener)Registers event listener which will be called once
Event type
Event handler
Polyline
Class for creating a polyline on the map
(map, options)Example:
const polyline = new mapgl.Polyline(map, {
coordinates: [
[82.878543, 54.975937],
[82.903049, 54.981333],
[82.929373, 54.973391],
],
});
Destroys the polyline
(type, data?)Calls all event listeners with event type
type
Event type
Data transferred to events
(type, listener)Removes event listener registered with
on
Event type
Event handler
(type, listener)Registers event listener
Event type
Event handler
(type, listener)Registers event listener which will be called once
Event type
Event handler
Raster
Class for creating a raster on the map.
(map, options)Example:
const raster = new mapgl.Raster(map, {
bounds: map.getBounds(),
image: {
url: 'some/url'
},
});
Destroys the raster.
(options)Updates an image URL or size of the raster on the map.
Options that include a URL or geographical bounds.
RasterTileSource
Class for creating raster tile source on the map
(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',
});
The map instance
Spatial data source options
Destroys the source
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
(map, options?)Example:
const control = new mapgl.ScaleControl(
map,
{ position: 'topRight' },
);
Destroys the scale control.
Returns the container of the control.
(position)Sets the position of the control.
TrafficControl
A control for enabling a traffic layer on the map.
It appears on the map only if you set the
trafficControl
option within
(map, options?)Example:
const control = new mapgl.TrafficControl(
map,
{ position: 'topRight' },
);
Destroys the control.
Returns the container of the control.
(position)Sets the position of the control.
ZenithSource
Class representing Zenith data source.
(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]
// ...
]
]
})
Destroys the source
(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
.
(map, options?)Example:
const control = new mapgl.ZoomControl(
map,
{ position: 'topRight' },
);
Destroys the zoom control.
Returns the container of the control.
(position)Sets the position of the control.