Descript

Adds an IControl to the map, calling `control.onAdd(this)`.

Example

// Add zoom and rotation controls to the map.
map.addControl(new routogl.NavigationControl());

Parameters

Returns

Returns itself to allow for method chaining.

Descript

Adds a source to the map's style.

Examples

map.addSource('my-data', {
    type: 'vector',
    url: 'mapbox://myusername.tilesetid'
});

map.addSource('my-data', {
    "type": "geojson",
    "data": {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [-77.0323, 38.9131]
        },
        "properties": {
            "title": "Mapbox DC",
            "marker-symbol": "monument"
        }
    }
});

Parameters

Returns

Returns itself to allow for method chaining.

Descript

Returns a Boolean indicating whether all tiles in the viewport from all sources on the style are loaded.

Example

const tilesLoaded = map.areTilesLoaded();

Returns

A Boolean indicating whether all tiles are loaded.

Descript

Returns a Boolean indicating whether the map is finished rendering, meaning all animations are finished.

Example

const frameReady = map.frameReady();

Returns

A Boolean indicating whether map finished rendering.

Descript

Returns the map's geographical bounds. When the bearing or pitch is non-zero, the visible region is not an axis-aligned rectangle, and the result is the smallest bounds that encompasses the visible region. If a padding is set on the map, the bounds returned are for the inset. With globe projection, the smallest bounds encompassing the visible region may not precisely represent the visible region due to the earth's curvature.

Example

const bounds = map.getBounds();

Returns

The geographical bounds of the map as LngLatBounds.

Descript

Returns the map's `canvas` element.

Example

const canvas = map.getCanvas();

Returns

The map's `canvas` element.

Descript

Returns the HTML element containing the map's `canvas` element. If you want to add non-GL overlays to the map, you should append them to this element. This is the element to which event bindings for map interactivity (such as panning and zooming) are attached. It will receive bubbled events from child elements such as the `canvas`, but not from map controls.

Example

const canvasContainer = map.getCanvasContainer();

Returns

The container of the map's `canvas`.

Descript

Returns the map's containing HTML element.

Example

const container = map.getContainer();

Returns

The map's container.

Descript

Returns the maximum geographical bounds the map is constrained to, or `null` if none set.

Example

const maxBounds = map.getMaxBounds();

Returns

The map object.

Descript

Returns the map's maximum allowable pitch.

Example

const maxPitch = map.getMaxPitch();

Returns

Returns `maxPitch`.

Descript

Returns the map's maximum allowable zoom level.

Example

const maxZoom = map.getMaxZoom();

Returns

Returns `maxZoom`.

Descript

Returns the map's minimum allowable pitch.

Example

const minPitch = map.getMinPitch();

Returns

Returns `minPitch`.

Descript

Returns the map's minimum allowable zoom level.

Example

const minZoom = map.getMinZoom();

Returns

Returns `minZoom`.

Descript

Returns a [projection](https://docs.mapbox.com/mapbox-gl-js/style-spec/projection/) object that defines the current map projection.

Example

const projection = map.getProjection();

Returns

The [projection](https://docs.mapbox.com/mapbox-gl-js/style-spec/projection/) defining the current map projection.

Descript

Returns the rain specification or `null` if rain is not set on the map. *This API is experimental, not production ready and subject to change in future versions*.

Example

const rain = map.getRain();

Returns

Rain specification properties of the style.

Descript

Returns the state of `renderWorldCopies`. If `true`, multiple copies of the world will be rendered side by side beyond -180 and 180 degrees longitude. If set to `false`: - When the map is zoomed out far enough that a single representation of the world does not fill the map's entire container, there will be blank space beyond 180 and -180 degrees longitude. - Features that cross 180 and -180 degrees longitude will be cut in two (with one portion on the right edge of the map and the other on the left edge of the map) at every zoom level.

Example

const worldCopiesRendered = map.getRenderWorldCopies();

Returns

Returns `renderWorldCopies` boolean.

Descript

Returns the snow specification or `null` if snow is not set on the map. *This API is experimental, not production ready and subject to change in future versions*.

Example

const snow = map.getSnow();

Returns

Snow specification properties of the style.

Descript

Returns the source with the specified ID in the map's style. This method is often used to update a source using the instance members for the relevant source type as defined in [Sources](#sources). For example, setting the `data` for a GeoJSON source or updating the `url` and `coordinates` of an image source.

Example

const sourceObject = map.getSource('points');

Parameters

Returns

The style source with the specified ID or `undefined` if the ID corresponds to no existing sources. The shape of the object varies by source type. A list of options for each source type is available on the Mapbox Style Specification's [Sources](https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/) page.

Descript

Returns the map's Mapbox [style](https://docs.mapbox.com/help/glossary/style/) object, a JSON object which can be used to recreate the map's style. For the Mapbox Standard style or any "fragment" style (which is a style with `fragment: true` or a `schema` property defined), this method returns an empty style with no layers or sources. The original style is wrapped into an import with the ID `basemap` as a fragment style and is not intended to be used directly. This design ensures that user logic is not tied to style internals, allowing Mapbox to roll out style updates seamlessly and consistently.

Example

map.on('load', () => {
    const styleJson = map.getStyle();
});

Returns

The map's style JSON object.

Descript

버전 확인

Example

const version = map.getVersion();

Returns

버전

Descript

Checks if a control is on the map.

Example

// Define a new navigation control.
const navigation = new routogl.NavigationControl();
// Add zoom and rotation controls to the map.
map.addControl(navigation);
// Check that the navigation control exists on the map.
const added = map.hasControl(navigation);
// added === true

Parameters

Returns

True if map contains control.

Descript

hide layer.

Parameters

Descript

Returns true if the map is panning, zooming, rotating, or pitching due to a camera animation or user gesture.

Example

const isMoving = map.isMoving();

Returns

True if the map is moving.

Descript

Determines if the given point is located on a visible map surface.

Example

const pointOnSurface = map.isPointOnSurface([100, 200]);

Parameters

Returns

Returns `true` if the point is on the visible map surface, otherwise returns `false`.

Descript

Returns true if the map is rotating due to a camera animation or user gesture.

Example

map.isRotating();

Returns

True if the map is rotating.

Descript

Returns a Boolean indicating whether the source is loaded. Returns `true` if the source with the given ID in the map's style has no outstanding network requests, otherwise `false`.

Example

const sourceLoaded = map.isSourceLoaded('bathymetry-data');

Parameters

Returns

A Boolean indicating whether the source is loaded.

Descript

Returns a Boolean indicating whether the map's style is fully loaded.

Example

const styleLoadStatus = map.isStyleLoaded();

Returns

A Boolean indicating whether the style is fully loaded.

Descript

Returns true if the map is zooming due to a camera animation or user gesture.

Example

const isZooming = map.isZooming();

Returns

True if the map is zooming.

Descript

Returns a Boolean indicating whether the map is fully loaded. Returns `false` if the style is not yet fully loaded, or if there has been a change to the sources or style that has not yet fully loaded.

Example

const isLoaded = map.loaded();

Returns

A Boolean indicating whether the map is fully loaded.

Descript

remove event

Parameters

Descript

register event

Parameters

Descript

Returns a Point representing pixel coordinates, relative to the map's `container`, that correspond to the specified geographical location. When the map is pitched and `lnglat` is completely behind the camera, there are no pixel coordinates corresponding to that location. In that case, the `x` and `y` components of the returned Point are set to Number.MAX_VALUE.

Example

const coordinate = [-122.420679, 37.772537];
const point = map.project(coordinate);

Parameters

Returns

The Point corresponding to `lnglat`, relative to the map's `container`.

Descript

Returns an array of [GeoJSON](http://geojson.org/) [Feature objects](https://tools.ietf.org/html/rfc7946#section-3.2) representing visible features that satisfy the query parameters.

Examples

// Find all features at a point
const features = map.queryRenderedFeatures(
  [20, 35],
  {layers: ['my-layer-name']}
);

// Find all features within a static bounding box
const features = map.queryRenderedFeatures(
  [[10, 20], [30, 50]],
  {layers: ['my-layer-name']}
);

// Find all features within a bounding box around a point
const width = 10;
const height = 20;
const features = map.queryRenderedFeatures([
    [point.x - width / 2, point.y - height / 2],
    [point.x + width / 2, point.y + height / 2]
], {layers: ['my-layer-name']});

// Query all rendered features from a single layer

Parameters

Returns

An array of [GeoJSON](http://geojson.org/) [feature objects](https://tools.ietf.org/html/rfc7946#section-3.2). The `properties` value of each returned feature object contains the properties of its source feature. For GeoJSON sources, only string and numeric property values are supported. `null`, `Array`, and `Object` values are not supported. Each feature includes top-level `layer`, `source`, and `sourceLayer` properties. The `layer` property is an object representing the style layer to which the feature belongs. Layout and paint properties in this object contain values which are fully evaluated for the given zoom level and feature. Only features that are currently rendered are included. Some features will **not** be included, like: - Features from layers whose `visibility` property is `"none"`. - Features from layers whose zoom range excludes the current zoom level. - Symbol features that have been hidden due to text or icon collision. Features from all other layers are included, including features that may have no visible contribution to the rendered result; for example, because the layer's opacity or color alpha component is set to 0. The topmost rendered feature appears first in the returned array, and subsequent features are sorted by descending z-order. Features that are rendered multiple times (due to wrapping across the antimeridian at low zoom levels) are returned only once (though subject to the following caveat). Because features come from tiled vector data or GeoJSON data that is converted to tiles internally, feature geometries may be split or duplicated across tile boundaries and, as a result, features may appear multiple times in query results. For example, suppose there is a highway running through the bounding rectangle of a query. The results of the query will be those parts of the highway that lie within the map tiles covering the bounding rectangle, even if the highway extends into other tiles, and the portion of the highway within each map tile will be returned as a separate feature. Similarly, a point feature near a tile boundary may appear in multiple tiles due to tile buffering.

Descript

Returns an array of [GeoJSON](http://geojson.org/) [Feature objects](https://tools.ietf.org/html/rfc7946#section-3.2) representing features within the specified vector tile or GeoJSON source that satisfy the query parameters.

Example

// Find all features in one source layer in a vector source
const features = map.querySourceFeatures('your-source-id', {
    sourceLayer: 'your-source-layer'
});

Parameters

Returns

An array of [GeoJSON](http://geojson.org/) [Feature objects](https://tools.ietf.org/html/rfc7946#section-3.2). In contrast to Map#queryRenderedFeatures, this function returns all features matching the query parameters, whether or not they are rendered by the current style (in other words, are visible). The domain of the query includes all currently-loaded vector tiles and GeoJSON source tiles function does not check tiles outside the currently visible viewport. Because features come from tiled vector data or GeoJSON data that is converted to tiles internally, feature geometries may be split or duplicated across tile boundaries and, as a result, features may appear multiple times in query results. For example, suppose there is a highway running through the bounding rectangle of a query. The results of the query will be those parts of the highway that lie within the map tiles covering the bounding rectangle, even if the highway extends into other tiles, and the portion of the highway within each map tile will be returned as a separate feature. Similarly, a point feature near a tile boundary may appear in multiple tiles due to tile buffering.

Descript

Removes the control from the map.

Example

// Define a new navigation control.
const navigation = new routogl.NavigationControl();
// Add zoom and rotation controls to the map.
map.addControl(navigation);
// Remove zoom and rotation controls from the map.
map.removeControl(navigation);

Parameters

Returns

Returns itself to allow for method chaining.

Descript

Removes a source from the map's style.

Example

map.removeSource('bathymetry-data');

Parameters

Returns

Returns itself to allow for method chaining.

Descript

Resizes the map according to the dimensions of its `container` element. Checks if the map container size changed and updates the map if it has changed. This method must be called after the map's `container` is resized programmatically or when the map is shown after being initially hidden with CSS.

Example

// Resize the map when the map container is shown
// after being initially hidden with CSS.
const mapDiv = document.getElementById('map');
if (mapDiv.style.visibility === true) map.resize();

Parameters

Returns

Returns itself to allow for method chaining.

Descript

set Attribution Control Position

Parameters

Descript

set 3d Model layer

Parameters

Descript

set extrusion layer

Parameters

Descript

set hd map layer

Parameters

Descript

set hillshade layer

Parameters

Descript

set landuse layer

Parameters

Descript

set traffic layer

Parameters

Descript

Sets or clears the map's geographical bounds. Pan and zoom operations are constrained within these bounds. If a pan or zoom is performed that would display regions outside these bounds, the map will instead display a position and zoom level as close as possible to the operation's request while still remaining within the bounds. For `mercator` projection, the viewport will be constrained to the bounds. For other projections such as `globe`, only the map center will be constrained.

Example

// Define bounds that conform to the `LngLatBoundsLike` object.
const bounds = [
    [-74.04728, 40.68392], // [west, south]
    [-73.91058, 40.87764]  // [east, north]
];
// Set the map's max bounds.
map.setMaxBounds(bounds);

Parameters

Returns

Returns itself to allow for method chaining.

Descript

Sets or clears the map's maximum pitch. If the map's current pitch is higher than the new maximum, the map will pitch to the new maximum.

Example

map.setMaxPitch(70);

Parameters

Returns

Returns itself to allow for method chaining.

Descript

Sets or clears the map's maximum zoom level. If the map's current zoom level is higher than the new maximum, the map will zoom to the new maximum.

Example

map.setMaxZoom(18.75);

Parameters

Returns

Returns itself to allow for method chaining.

Descript

Sets or clears the map's minimum pitch. If the map's current pitch is lower than the new minimum, the map will pitch to the new minimum.

Example

map.setMinPitch(5);

Parameters

Returns

Returns itself to allow for method chaining.

Descript

Sets or clears the map's minimum zoom level. If the map's current zoom level is lower than the new minimum, the map will zoom to the new minimum. It is not always possible to zoom out and reach the set `minZoom`. Other factors such as map height may restrict zooming. For example, if the map is 512px tall it will not be possible to zoom below zoom 0 no matter what the `minZoom` is set to.

Example

map.setMinZoom(12.25);

Parameters

Returns

Returns itself to allow for method chaining.

Descript

Sets the map's projection. If called with `null` or `undefined`, the map will reset to Mercator.

Example

map.setProjection('albers');
map.setProjection({
    name: 'albers',
    center: [35, 55],
    parallels: [20, 60]
});

Parameters

Returns

Returns itself to allow for method chaining.

Descript

Sets the rain property of the style. *This API is experimental, not production ready and subject to change in future versions*.

Example

map.setRain({
      density: 1,
      intensity: 0.3,
      "distortion-strength": 0.3
  });

Parameters

Returns

Returns itself to allow for method chaining.

Descript

Sets the state of `renderWorldCopies`.

Example

map.setRenderWorldCopies(true);

Parameters

Returns

Returns itself to allow for method chaining.

Descript

Sets the snow property of the style. *This API is experimental, not production ready and subject to change in future versions*.

Example

map.setSnow({
      density: 1,
      intensity: 0.3
  });

Parameters

Returns

Returns itself to allow for method chaining.

Descript

Updates the map's routo style object with a new value.

Parameters

Descript

show layer.

Parameters

Descript

show traffic layer.

Parameters

Descript

Returns a LngLat representing geographical coordinates that correspond to the specified pixel coordinates. If horizon is visible, and specified pixel is above horizon, returns a LngLat corresponding to point on horizon, nearest to the point.

Example

map.on('click', (e) => {
    // When the map is clicked, get the geographic coordinate.
    const coordinate = map.unproject(e.point);
});

Parameters

Returns

The LngLat corresponding to `point`.

Descript

Fired when the user cancels a "box zoom" interaction, or when the bounding box does not meet the minimum size threshold. See BoxZoomHandler.

Type

• MapBoxZoomEvent

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// the user cancels a "box zoom" interaction.
map.on('boxzoomcancel', () => {
    console.log('A boxzoomcancel event occurred.');
});

Descript

Fired when a "box zoom" interaction ends. See BoxZoomHandler.

Type

• MapBoxZoomEvent

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// just after a "box zoom" interaction ends.
map.on('boxzoomend', () => {
    console.log('A boxzoomend event occurred.');
});

Descript

Fired when a "box zoom" interaction starts. See BoxZoomHandler.

Type

• MapBoxZoomEvent

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// just before a "box zoom" interaction starts.
map.on('boxzoomstart', () => {
    console.log('A boxzoomstart event occurred.');
});

Descript

Fired when a pointing device (usually a mouse) is pressed and released at the same point on the map. **Note:** This event is compatible with the optional `layerId` parameter. If `layerId` is included as the second argument in Map#on, the event listener will fire only when the point that is pressed and released contains a visible portion of the specifed layer.

Type

• MapMouseEvent

Examples

// Initialize the map
const map = new routogl.Map({});
// Set an event listener
map.on('click', (e) => {
    console.log(`A click event has occurred at ${e.lngLat}`);
});

// Initialize the map
const map = new routogl.Map({});
// Set an event listener for a specific layer
map.on('click', 'poi-label', (e) => {
    console.log(`A click event has occurred on a visible portion of the poi-label layer at ${e.lngLat}`);
});

Descript

Fired when the right button of the mouse is clicked or the context menu key is pressed within the map.

Type

• MapMouseEvent

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// when the right mouse button is
// pressed within the map.
map.on('contextmenu', () => {
    console.log('A contextmenu event occurred.');
});

Descript

Fired when any map data loads or changes. See MapDataEvent for more information.

Type

• MapDataEvent

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// when map data loads or changes.
map.on('data', () => {
    console.log('A data event occurred.');
});

Descript

Fired when any map data (style, source, tile, etc) begins loading or changing asynchronously. All `dataloading` events are followed by a `data` or `error` event. See MapDataEvent for more information.

Type

• MapDataEvent

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// when any map data begins loading
// or changing asynchronously.
map.on('dataloading', () => {
    console.log('A dataloading event occurred.');
});

Descript

Fired when a pointing device (usually a mouse) is pressed and released twice at the same point on the map in rapid succession. **Note:** This event is compatible with the optional `layerId` parameter. If `layerId` is included as the second argument in Map#on, the event listener will fire only when the point that is clicked twice contains a visible portion of the specifed layer.

Type

• MapMouseEvent

Examples

// Initialize the map
const map = new routogl.Map({});
// Set an event listener
map.on('dblclick', (e) => {
    console.log(`A dblclick event has occurred at ${e.lngLat}`);
});

// Initialize the map
const map = new routogl.Map({});
// Set an event listener for a specific layer
map.on('dblclick', 'poi-label', (e) => {
    console.log(`A dblclick event has occurred on a visible portion of the poi-label layer at ${e.lngLat}`);
});

Descript

Fired repeatedly during a "drag to pan" interaction. See DragPanHandler.

Type

• MapMouseEvent | MapTouchEvent

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// repeatedly during a "drag to pan" interaction.
map.on('drag', () => {
    console.log('A drag event occurred.');
});

Descript

Fired when a "drag to pan" interaction ends. See DragPanHandler.

Type

• MapMouseEvent | MapTouchEvent

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// when a "drag to pan" interaction ends.
map.on('dragend', () => {
    console.log('A dragend event occurred.');
});

Descript

Fired when a "drag to pan" interaction starts. See DragPanHandler.

Type

• MapMouseEvent | MapTouchEvent

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// when a "drag to pan" interaction starts.
map.on('dragstart', () => {
    console.log('A dragstart event occurred.');
});

Properties

Descript

Fired when an error occurs. This is Mapbox GL JS's primary error reporting mechanism. We use an event instead of `throw` to better accommodate asyncronous operations. If no listeners are bound to the `error` event, the error will be printed to the console.

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// when an error occurs.
map.on('error', () => {
    console.log('A error event occurred.');
});

Descript

Fired after the last frame rendered before the map enters an "idle" state: - No camera transitions are in progress - All currently requested tiles have loaded - All fade/transition animations have completed.

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// just before the map enters an "idle" state.
map.on('idle', () => {
    console.log('A idle event occurred.');
});

Descript

Fired immediately after all necessary resources have been downloaded and the first visually complete rendering of the map has occurred.

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// when the map has finished loading.
map.on('load', () => {
    console.log('A load event occurred.');
});

Descript

Fired when a pointing device (usually a mouse) is pressed within the map. **Note:** This event is compatible with the optional `layerId` parameter. If `layerId` is included as the second argument in Map#on, the event listener will fire only when the the cursor is pressed while inside a visible portion of the specifed layer.

Type

• MapMouseEvent

Examples

// Initialize the map
const map = new routogl.Map({});
// Set an event listener
map.on('mousedown', () => {
    console.log('A mousedown event has occurred.');
});

// Initialize the map
const map = new routogl.Map({});
// Set an event listener for a specific layer
map.on('mousedown', 'poi-label', () => {
    console.log('A mousedown event has occurred on a visible portion of the poi-label layer.');
});

Descript

Fired when a pointing device (usually a mouse) enters a visible portion of a specified layer from outside that layer or outside the map canvas. **Important:** This event can only be listened for when Map#on includes three arguments, where the second argument specifies the desired layer.

Type

• MapMouseEvent

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener
map.on('mouseenter', 'water', () => {
    console.log('A mouseenter event occurred on a visible portion of the water layer.');
});

Descript

Fired when a pointing device (usually a mouse) leaves a visible portion of a specified layer or moves from the specified layer to outside the map canvas. **Note:** To detect when the mouse leaves the canvas, independent of layer, use Map.event:mouseout instead. **Important:** This event can only be listened for when Map#on includes three arguments, where the second argument specifies the desired layer.

Type

• MapMouseEvent

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// when the pointing device leaves
// a visible portion of the specified layer.
map.on('mouseleave', 'water', () => {
    console.log('A mouseleave event occurred.');
});

Descript

Fired when a pointing device (usually a mouse) is moved while the cursor is inside the map. As you move the cursor across the map, the event will fire every time the cursor changes position within the map. **Note:** This event is compatible with the optional `layerId` parameter. If `layerId` is included as the second argument in Map#on, the event listener will fire only when the the cursor is inside a visible portion of the specified layer.

Type

• MapMouseEvent

Examples

// Initialize the map
const map = new routogl.Map({});
// Set an event listener
map.on('mousemove', () => {
    console.log('A mousemove event has occurred.');
});

// Initialize the map
const map = new routogl.Map({});
// Set an event listener for a specific layer
map.on('mousemove', 'poi-label', () => {
    console.log('A mousemove event has occurred on a visible portion of the poi-label layer.');
});

Descript

Fired when a point device (usually a mouse) leaves the map's canvas.

Type

• MapMouseEvent

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// when the pointing device leaves
// the map's canvas.
map.on('mouseout', () => {
    console.log('A mouseout event occurred.');
});

Descript

Fired when a pointing device (usually a mouse) is moved within the map. As you move the cursor across a web page containing a map, the event will fire each time it enters the map or any child elements. **Note:** This event is compatible with the optional `layerId` parameter. If `layerId` is included as the second argument in Map#on, the event listener will fire only when the the cursor is moved inside a visible portion of the specifed layer.

Type

• MapMouseEvent

Examples

// Initialize the map
const map = new routogl.Map({});
// Set an event listener
map.on('mouseover', () => {
    console.log('A mouseover event has occurred.');
});

// Initialize the map
const map = new routogl.Map({});
// Set an event listener for a specific layer
map.on('mouseover', 'poi-label', () => {
    console.log('A mouseover event has occurred on a visible portion of the poi-label layer.');
});

Descript

Fired when a pointing device (usually a mouse) is released within the map. **Note:** This event is compatible with the optional `layerId` parameter. If `layerId` is included as the second argument in Map#on, the event listener will fire only when the the cursor is released while inside a visible portion of the specifed layer.

Type

• MapMouseEvent

Examples

// Initialize the map
const map = new routogl.Map({});
// Set an event listener
map.on('mouseup', () => {
    console.log('A mouseup event has occurred.');
});

// Initialize the map
const map = new routogl.Map({});
// Set an event listener for a specific layer
map.on('mouseup', 'poi-label', () => {
    console.log('A mouseup event has occurred on a visible portion of the poi-label layer.');
});

Descript

Fired repeatedly during an animated transition from one view to another, as the result of either user interaction or methods such as Map#flyTo.

Type

• MapMouseEvent | MapTouchEvent

Example

// Initialize the map.
const map = new routogl.Map({});
// Set an event listener that fires repeatedly during an animated transition.
map.on('move', () => {
    console.log('A move event occurred.');
});

Descript

Fired just after the map completes a transition from one view to another, as the result of either user interaction or methods such as Map#jumpTo.

Type

• MapMouseEvent | MapTouchEvent

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// just after the map completes a transition.
map.on('moveend', () => {
    console.log('A moveend event occurred.');
});

Descript

Fired just before the map begins a transition from one view to another, as the result of either user interaction or methods such as Map#jumpTo.

Type

• MapMouseEvent | MapTouchEvent

Example

// Initialize the map.
const map = new routogl.Map({});
// Set an event listener that fires just before the map begins a transition from one view to another.
map.on('movestart', () => {
    console.log('A movestart` event occurred.');
});

Descript

Fired repeatedly during the map's pitch (tilt) animation between one state and another as the result of either user interaction or methods such as Map#flyTo.

Type

• MapMouseEvent | MapTouchEvent

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// repeatedly during a pitch (tilt) transition.
map.on('pitch', () => {
    console.log('A pitch event occurred.');
});

Descript

Fired immediately after the map's pitch (tilt) finishes changing as the result of either user interaction or methods such as Map#flyTo.

Type

• MapMouseEvent | MapTouchEvent

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// just after a pitch (tilt) transition ends.
map.on('pitchend', () => {
    console.log('A pitchend event occurred.');
});

Descript

Fired whenever the map's pitch (tilt) begins a change as the result of either user interaction or methods such as Map#flyTo .

Type

• MapMouseEvent | MapTouchEvent

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// just before a pitch (tilt) transition starts.
map.on('pitchstart', () => {
    console.log('A pitchstart event occurred.');
});

Descript

Triggered when a click event occurs and is fired before the click event. Primarily implemented to ensure closeOnClick for pop-ups is fired before any other listeners.

Type

• MapMouseEvent

Descript

Fired immediately after the map has been removed with Map.event:remove.

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// just after the map is removed.
map.on('remove', () => {
    console.log('A remove event occurred.');
});

Descript

Fired whenever the map is drawn to the screen, as the result of: - a change to the map's position, zoom, pitch, or bearing - a change to the map's style - a change to a GeoJSON source - the loading of a vector tile, GeoJSON file, glyph, or sprite.

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// whenever the map is drawn to the screen.
map.on('render', () => {
    console.log('A render event occurred.');
});

Descript

Fired whenever the rendering process of the map is started. This event can be used in pair with the "render" event, to measure the time spent on the CPU during the rendering of a single frame.

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// when the map begins rendering.
map.on('renderstart', () => {
    console.log('A renderstart event occurred.');
});

Descript

Fired immediately after the map has been resized.

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// immediately after the map has been resized.
map.on('resize', () => {
    console.log('A resize event occurred.');
});

Descript

Fired repeatedly during a "drag to rotate" interaction. See DragRotateHandler.

Type

• MapMouseEvent | MapTouchEvent

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// repeatedly during "drag to rotate" interaction.
map.on('rotate', () => {
    console.log('A rotate event occurred.');
});

Descript

Fired when a "drag to rotate" interaction ends. See DragRotateHandler.

Type

• MapMouseEvent | MapTouchEvent

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// just after a "drag to rotate" interaction ends.
map.on('rotateend', () => {
    console.log('A rotateend event occurred.');
});

Descript

Fired when a "drag to rotate" interaction starts. See DragRotateHandler.

Type

• MapMouseEvent | MapTouchEvent

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// just before a "drag to rotate" interaction starts.
map.on('rotatestart', () => {
    console.log('A rotatestart event occurred.');
});

Descript

Fired when one of the map's sources loads or changes, including if a tile belonging to a source loads or changes. See MapDataEvent for more information.

Type

• MapDataEvent

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// when one of the map's sources loads or changes.
map.on('sourcedata', () => {
    console.log('A sourcedata event occurred.');
});

Descript

Fired when one of the map's sources begins loading or changing asynchronously. All `sourcedataloading` events are followed by a `sourcedata` or `error` event. See MapDataEvent for more information.

Type

• MapDataEvent

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// when the map's sources begin loading or
// changing asynchronously.
map.on('sourcedataloading', () => {
    console.log('A sourcedataloading event occurred.');
});

Descript

Fired when the map's style loads or changes. See MapDataEvent for more information.

Type

• MapDataEvent

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// when the map's style loads or changes.
map.on('styledata', () => {
    console.log('A styledata event occurred.');
});

Descript

Fired when the map's style begins loading or changing asynchronously. All `styledataloading` events are followed by a `styledata` or `error` event. See MapDataEvent for more information.

Type

• MapDataEvent

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// when the map's style begins loading or
// changing asynchronously.
map.on('styledataloading', () => {
    console.log('A styledataloading event occurred.');
});

Properties

Descript

Fired when an icon or pattern needed by the style is missing. The missing image can be added with Map#addImage within this event listener callback to prevent the image from being skipped. This event can be used to dynamically generate icons and patterns.

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// when an icon or pattern is missing.
map.on('styleimagemissing', () => {
    console.log('A styleimagemissing event occurred.');
});

Descript

Fired when a [`touchcancel`](https://developer.mozilla.org/en-US/docs/Web/Events/touchcancel) event occurs within the map.

Type

• MapTouchEvent

Example

// Initialize the map.
const map = new routogl.Map({});
// Set an event listener that fires when a `touchcancel` event occurs within the map.
map.on('touchcancel', () => {
    console.log('A touchcancel event occurred.');
});

Descript

Fired when a [`touchend`](https://developer.mozilla.org/en-US/docs/Web/Events/touchend) event occurs within the map.

Type

• MapTouchEvent

Example

// Initialize the map.
const map = new routogl.Map({});
// Set an event listener that fires when a `touchstart` event occurs within the map.
map.on('touchstart', () => {
    console.log('A touchstart event occurred.');
});

Descript

Fired when a [`touchmove`](https://developer.mozilla.org/en-US/docs/Web/Events/touchmove) event occurs within the map.

Type

• MapTouchEvent

Example

// Initialize the map.
const map = new routogl.Map({});
// Set an event listener that fires when a touchmove event occurs within the map.
map.on('touchmove', () => {
    console.log('A touchmove event occurred.');
});

Descript

Fired when a [`touchstart`](https://developer.mozilla.org/en-US/docs/Web/Events/touchstart) event occurs within the map.

Type

• MapTouchEvent

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// when a `touchstart` event occurs within the map.
map.on('touchstart', () => {
    console.log('A touchstart event occurred.');
});

Descript

Fired when the WebGL context is lost.

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// when the WebGL context is lost.
map.on('webglcontextlost', () => {
    console.log('A webglcontextlost event occurred.');
});

Descript

Fired when the WebGL context is restored.

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// when the WebGL context is restored.
map.on('webglcontextrestored', () => {
    console.log('A webglcontextrestored event occurred.');
});

Descript

Fired when a [`wheel`](https://developer.mozilla.org/en-US/docs/Web/Events/wheel) event occurs within the map.

Type

• MapWheelEvent

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// when a wheel event occurs within the map.
map.on('wheel', () => {
    console.log('A wheel event occurred.');
});

Descript

Fired repeatedly during an animated transition from one zoom level to another, as the result of either user interaction or methods such as Map#flyTo.

Type

• MapMouseEvent | MapTouchEvent

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// repeatedly during a zoom transition.
map.on('zoom', () => {
    console.log('A zoom event occurred.');
});

Descript

Fired just after the map completes a transition from one zoom level to another as the result of either user interaction or methods such as Map#flyTo. The zoom transition will usually end before rendering is finished, so if you need to wait for rendering to finish, use the Map.event:idle event instead.

Type

• MapMouseEvent | MapTouchEvent

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// just after a zoom transition finishes.
map.on('zoomend', () => {
    console.log('A zoomend event occurred.');
});

Descript

Fired just before the map begins a transition from one zoom level to another, as the result of either user interaction or methods such as Map#flyTo.

Type

• MapMouseEvent | MapTouchEvent

Example

// Initialize the map
const map = new routogl.Map({});
// Set an event listener that fires
// just before a zoom transition starts.
map.on('zoomstart', () => {
    console.log('A zoomstart event occurred.');
});

Descript

remove IndoorArea Layer

Descript

reset IndoorArea Layer

Descript

Add IndoorArea Layer to Map

Parameters

Descript

실내 지도 옵션 적용

Parameters

Descript

remove Parking Lot Layer

Descript

reset Parking Lot Layer

Descript

Add Parking Lot Layer to Map

Parameters