Properties and options
Goong GL JS's global properties and options that you can access while initializing your map or accessing information about its status.
accessToken
src/index.jsGets and sets the map's access token.
Example
goongjs.accessToken = myAccessToken;
Related
baseApiUrl
src/index.jsGets and sets the map's default API URL for requesting tiles, styles, sprites, and glyphs
Example
goongjs.baseApiUrl = 'https://api.goong.io';
workerCount
src/index.jsGets and sets the number of web workers instantiated on a page with GL JS maps. By default, it is set to half the number of CPU cores (capped at 6). Make sure to set this property before creating any map instances for it to have effect.
Example
goongjs.workerCount = 2;
maxParallelImageRequests
src/index.jsGets and sets the maximum number of images (raster tiles, sprites, icons) to load in parallel, which affects performance in raster-heavy maps. 16 by default.
Example
goongjs.maxParallelImageRequests = 10;
supported
src/index.jsTest whether the browser supports Goong GL JS.
Parameters
(Object?)
Name | Description |
---|---|
options.failIfMajorPerformanceCaveat boolean default: false | If
true
,
the function will return
false
if the performance of Goong GL JS would
be dramatically worse than expected (e.g. a software WebGL renderer would be used).
|
Returns
boolean
:
Example
goongjs.supported() // = true
Related
version
src/index.jsThe version of Goong GL JS in use as specified in package.json
,
CHANGELOG.md
, and the GitHub release.
setRTLTextPlugin
src/index.jsSets the map's RTL text plugin. Necessary for supporting the Arabic and Hebrew languages, which are written right-to-left. Mapbox Studio loads this plugin by default.
Parameters
(boolean)
If set to
true
, goongjs will defer loading the plugin until rtl text is encountered,
rtl text will then be rendered only after the plugin finishes loading.
Example
goongjs.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.0/mapbox-gl-rtl-text.js');
Related
getRTLTextPluginStatus
src/index.jsGets the map's RTL text plugin status.
The status can be unavailable
(i.e. not requested or removed), loading
, loaded
or error
.
If the status is loaded
and the plugin is requested again, an error will be thrown.
Example
const pluginStatus = goongjs.getRTLTextPluginStatus();
clearStorage
src/index.jsClears browser storage used by this library. Using this method flushes the Mapbox tile cache that is managed by this library. Tiles may still be cached by the browser in some cases.
This API is supported on browsers where the Cache
API
is supported and enabled. This includes all major browsers when pages are served over
https://
, except Internet Explorer and Edge Mobile.
When called in unsupported browsers or environments (private or incognito mode), the callback will be called with an error argument.
Parameters
AnimationOptions
src/ui/camera.jsOptions common to map movement methods that involve animation, such as Map#panBy and Map#easeTo, controlling the duration and easing function of the animation. All properties are optional.
Properties
(Function)
: A function taking a time in the range 0..1 and returning a number where 0 is
the initial state and 1 is the final state.
(PointLike)
: of the target center relative to real map container center at the end of animation.
(boolean)
: If
true
, then the animation is considered essential and will not be affected by
prefers-reduced-motion
.
CameraOptions
src/ui/camera.jsOptions common to Map#jumpTo, Map#easeTo, and Map#flyTo, controlling the desired location, zoom, bearing, and pitch of the camera. All properties are optional, and when a property is omitted, the current camera value for that property will remain unchanged.
Properties
(number)
: The desired bearing, in degrees. The bearing is the compass direction that
is "up"; for example, a bearing of 90° orients the map so that east is up.
(LngLatLike)
: If
zoom
is specified,
around
determines the point around which the zoom is centered.
PaddingOptions
src/ui/camera.jsOptions for setting padding on a call to Map#fitBounds. All properties of this object must be non-negative integers.
Properties
RequestParameters
src/util/ajax.jsA RequestParameters
object to be returned from Map.options.transformRequest callbacks.
Properties
(string)
: 'same-origin'|'include'
Use 'include' to send cookies with cross-origin requests.
StyleImageInterface
src/style/style_image.jsInterface for dynamically generated style images. This is a specification for implementers to model: it is not an exported method or class.
Images implementing this interface can be redrawn for every frame. They can be used to animate icons and patterns or make them respond to user input. Style images can implement a StyleImageInterface#render method. The method is called every frame and can be used to update the image.
Properties
(number)
(number)
((Uint8Array | Uint8ClampedArray))
Example
var flashingSquare = {width: 64,height: 64,data: new Uint8Array(64 * 64 * 4), onAdd: function(map) {this.map = map;}, render: function() {// keep repainting while the icon is on the mapthis.map.triggerRepaint(); // alternate between black and white based on the timevar value = Math.round(Date.now() / 1000) % 2 === 0 ? 255 : 0; // check if image needs to be changedif (value !== this.previousValue) {this.previousValue = value; var bytesPerPixel = 4;for (var x = 0; x < this.width; x++) {for (var y = 0; y < this.height; y++) {var offset = (y * this.width + x) * bytesPerPixel;this.data[offset + 0] = value;this.data[offset + 1] = value;this.data[offset + 2] = value;this.data[offset + 3] = 255;}} // return true to indicate that the image changedreturn true;}}} map.addImage('flashing_square', flashingSquare);
Instance Members
Related
CustomLayerInterface
src/style/style_layer/custom_style_layer.jsInterface for custom style layers. This is a specification for implementers to model: it is not an exported method or class.
Custom layers allow a user to render directly into the map's GL context using the map's camera. These layers can be added between any regular layers using Map#addLayer.
Custom layers must have a unique id
and must have the type
of "custom"
.
They must implement render
and may implement prerender
, onAdd
and onRemove
.
They can trigger rendering using Map#triggerRepaint
and they should appropriately handle Map.event:webglcontextlost and
Map.event:webglcontextrestored.
The renderingMode
property controls whether the layer is treated as a "2d"
or "3d"
map layer. Use:
"renderingMode": "3d"
to use the depth buffer and share it with other layers"renderingMode": "2d"
to add a layer with no depth. If you need to use the depth buffer for a"2d"
layer you must use an offscreen framebuffer and CustomLayerInterface#prerender
Properties
Example
// Custom layer implemented as ES6 classclass NullIslandLayer {constructor() {this.id = 'null-island';this.type = 'custom';this.renderingMode = '2d';} onAdd(map, gl) {const vertexSource = `uniform mat4 u_matrix;void main() {gl_Position = u_matrix * vec4(0.5, 0.5, 0.0, 1.0);gl_PointSize = 20.0;}`; const fragmentSource = `void main() {gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);}`; const vertexShader = gl.createShader(gl.VERTEX_SHADER);gl.shaderSource(vertexShader, vertexSource);gl.compileShader(vertexShader);const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);gl.shaderSource(fragmentShader, fragmentSource);gl.compileShader(fragmentShader); this.program = gl.createProgram();gl.attachShader(this.program, vertexShader);gl.attachShader(this.program, fragmentShader);gl.linkProgram(this.program);} render(gl, matrix) {gl.useProgram(this.program);gl.uniformMatrix4fv(gl.getUniformLocation(this.program, "u_matrix"), false, matrix);gl.drawArrays(gl.POINTS, 0, 1);}} map.on('load', function() {map.addLayer(new NullIslandLayer());});