Class MVTLayer

The MVTLayer is a TileLayer designed to work with remote datasources that are delivering MVT encoded vector tiles.

Example

const myLayer = new MVTLayer({
    remote: {
        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
        tileSize : 512
    },
    min: 1,
    max: 20
})

Hierarchy (View Summary)

TileLayer
- MVTLayer

Index

Constructors

constructor

new MVTLayer(options: MVTLayerOptions): MVTLayer
Parameters
- options: MVTLayerOptions
  options to configure the TileLayer
Returns MVTLayer

Overrides TileLayer.constructor

Properties

`Readonly`id

id: string

The identifier of the Layer.

`Protected`margin

margin: number

default tile margin in pixel

max

max: number

maximum zoom level at which data from the Layer will be displayed.

maxDataZoom

maxDataZoom: number

Maximum zoom level at which actual tile data is available from the data source. When the map is zoomed beyond this level, the display loads tiles at maxDataZoom and scales them up.

Default Value

Same as max

min

min: number

minimum zoom level at which data from the Layer is displayed.

name

name: string = ''

The name of the Layer

Methods

addEventListener

addEventListener(type: string, listener: (event: CustomEvent) => void): any
Add an EventListener to the layer. Valid events: "featureAdd", "featureRemove", "featureCoordinatesChange", "clear", "styleGroupChange", "styleChange", and "viewportReady"

The detail property of the Event gives additional information about the event. detail.layer is a reference to the layer onto which the event was dispatched and is set for all events.
Parameters
- type: string
  A string representing the event type to listen for
- listener: (event: CustomEvent) => void
  the listener function that will be called when an event of the specific type occurs
Returns any

Inherited from TileLayer.addEventListener

addFeature

addFeature(
feature: Feature<string> | GeoJSONFeature<string>,
style?: Style[],
): Feature

Add a feature to the layer.

Parameters

feature: Feature<string> | GeoJSONFeature<string>
the feature to be added to the layer
Optionalstyle: Style[]
optional style the feature should be displayed with.

Returns Feature

Example

// add a feature that will be displayed with the default style of the layer.
layer.addFeature({
   type: "Feature"
   geometry: {
       coordinates: [[-122.49373, 37.78202, 0], [-122.49263, 37.78602, 0]],
       type: "LineString"
   }
});

Example

// add a feature that will be displayed with a specific style.
layer.addFeature({
   type: "Feature"
   geometry: {
       coordinates: [[-122.49373, 37.78202, 0], [-122.49263, 37.78602, 0]],
       type: "LineString"
   }
}, [{
   zIndex: 0, type: "Line", stroke: "#DDCB97", "strokeWidth": 18
}]);

addFeature(
feature: GeoJSONFeatureCollection | GeoJSONFeature<string>[],
style?: Style[],
): Feature<string>[]

Add features to the layer.

Parameters

feature: GeoJSONFeatureCollection | GeoJSONFeature<string>[]
the features to be added to the layer
Optionalstyle: Style[]
optional style the features should be displayed with.

Returns Feature<string>[]

Example

// add multiple features to the layer.
layer.addFeature([{
   type: "Feature"
   geometry: {
       coordinates: [[-122.49373, 37.78202], [-122.49263, 37.78602]],
       type: "LineString"
   }
},{
   type: "Feature"
   geometry: {
       coordinates: [[-122.49375, 37.78203], [-122.49265, 37.78604]],
       type: "LineString"
   }
}]);

getCachedTile

getCachedTile(quadkey: string): Tile
Get a locally cached tile by quadkey.
Parameters
- quadkey: string
  the quadkey of the tile
Returns Tile

Inherited from TileLayer.getCachedTile

getProvider

getProvider(zoom: any): MVTProvider
Get provider(s) of this layer.
Parameters
- zoom: any
Returns MVTProvider

Overrides TileLayer.getProvider

getStyle

getStyle(): LayerStyle

Get the declarative style definition of this layer.

Returns LayerStyle

Inherited from TileLayer.getStyle

getStyleGroup

getStyleGroup(
    feature: Feature,
    zoomlevel?: number,
    layerDefault?: boolean,
): readonly Style[]
Get styleGroup for the feature.

This method retrieves a StyleGroup for a given feature, optionally based on the specified zoom level and whether to use the layer default styles.
Parameters
- feature: Feature
  The feature for which to get the styles.
- Optionalzoomlevel: number
  The zoom level to use for determining the styles. This parameter should be set as it determines how styles are applied based on zoom. It is only optional if the style definition supports being applied without a specific zoom level.
- OptionallayerDefault: boolean
  (Optional) A boolean indicating whether to use the layer's default styles. If true, any custom styles set via TileLayer.setStyleGroup are ignored and the default layer styles are returned. If false, the method will return the custom styles set for the feature if available; otherwise, it returns the default layer styles. Default is false.
Returns readonly Style[]
A readonly StyleGroup representing the styles for the given feature at the specified zoom level. If no styles are found, a falsy value is returned, indicating that the feature is not displayed/visible.

Inherited from TileLayer.getStyleGroup

getTile

getTile(quadkey: string, callback: (tile: Tile) => void): Tile
Get a tile by quadkey.
Parameters
- quadkey: string
  quadkey of the tile
- callback: (tile: Tile) => void
  callback function
Returns Tile
the Tile is returned if its already cached locally

Inherited from TileLayer.getTile

isVisible

isVisible(): boolean
Checks whether the xyz-maps tile layer is currently visible.

Returns boolean
- Returns true if the layer is visible, otherwise false.
Example
```
if (layer.isVisible()) {
  console.log("Layer is visible");
} else {
  console.log("Layer is not visible");
}
```
Inherited from TileLayer.isVisible
isVisible(zoomLevel?: number): boolean
Checks whether the xyz-maps tile layer is currently visible.
Parameters
- OptionalzoomLevel: number
Returns boolean
- Returns true if the layer is visible, otherwise false.
Example
```
if (layer.isVisible()) {
  console.log("Layer is visible");
} else {
  console.log("Layer is not visible");
}
```
Inherited from TileLayer.isVisible

pointerEvents

pointerEvents(active?: boolean): boolean
Enable or disable pointer-event triggering for all features of the layer.
Parameters
- Optionalactive: boolean
  boolean to enable or disable posinter-events.
Returns boolean
boolean indicating if pointer-event triggering is active or disabled.

Inherited from TileLayer.pointerEvents

removeEventListener

removeEventListener(type: string, listener: (event: CustomEvent) => void): any
Remove an EventListener from the layer. Valid events: "featureAdd", "featureRemove", "featureCoordinatesChange", "clear", "styleGroupChange", "styleChange", and "viewportReady"
Parameters
- type: string
  A string which specifies the type of event for which to remove an event listener.
- listener: (event: CustomEvent) => void
  The listener function of the event handler to remove from the TileLayer.
Returns any

Inherited from TileLayer.removeEventListener

removeFeature

removeFeature(
    feature:
        | Feature<string>
        | GeoJSONFeature<string>
        | GeoJSONFeatureCollection
        | GeoJSONFeature<string>[],
): any
Remove feature(s) from the layer.
Parameters
- feature:
      | Feature<string>
      | GeoJSONFeature<string>
      | GeoJSONFeatureCollection
      | GeoJSONFeature<string>[]
  features that should be removed from the layer
Returns any

Inherited from TileLayer.removeFeature

search

search(
    options: {
        id: string | number;
        onerror?: (
            error: {
                message: string;
                name: "NetworkError";
                responseText: string;
                status: number;
            },
        ) => void;
        onload?: (result: Feature<string>) => void;
        remote?: boolean;
    },
): Feature
Search for feature(s) in the layer.
Parameters
- options: {
      id: string | number;
      onerror?: (
          error: {
              message: string;
              name: "NetworkError";
              responseText: string;
              status: number;
          },
      ) => void;
      onload?: (result: Feature<string>) => void;
      remote?: boolean;
  }
  configure the search
  - id: string | number
    
    search a feature by id.
  - Optionalonerror?: (
        error: {
            message: string;
            name: "NetworkError";
            responseText: string;
            status: number;
        },
    ) => void
    
    Function to be called when a request of a "remote search" fails.
  - Optionalonload?: (result: Feature<string>) => void
    
    Callback function for "remote" search.
  - Optionalremote?: boolean
    
    Force the data provider(s) to do remote search if no result is found in local cache.
Returns Feature
array of features
Example
```
// searching by id:
layer.search({id: 1058507462})

// remote search:
layer.search({
    id: 1058507462,
    remote: true, // force layer to do remote search if feature/search area is not cached locally
    onload: (result) => {...}
})
```
Inherited from TileLayer.search
search(
    options: {
        ids?: number[] | string[];
        onerror?: (
            error: {
                message: string;
                name: "NetworkError";
                responseText: string;
                status: number;
            },
        ) => void;
        onload?: (result: Feature<string>[]) => void;
        point?: GeoPoint;
        radius?: number;
        rect?: GeoRect | GeoJSONBBox;
        remote?: boolean;
    },
): Feature<string>[]
Search for feature(s) in the layer.
Parameters
- options: {
      ids?: number[] | string[];
      onerror?: (
          error: {
              message: string;
              name: "NetworkError";
              responseText: string;
              status: number;
          },
      ) => void;
      onload?: (result: Feature<string>[]) => void;
      point?: GeoPoint;
      radius?: number;
      rect?: GeoRect | GeoJSONBBox;
      remote?: boolean;
  }
  configure the search
  - Optionalids?: number[] | string[]
    
    Array of feature ids to search.
  - Optionalonerror?: (
        error: {
            message: string;
            name: "NetworkError";
            responseText: string;
            status: number;
        },
    ) => void
    
    Function to be called when a request of a "remote search" fails.
  - Optionalonload?: (result: Feature<string>[]) => void
    
    Callback function for "remote" search.
  - Optionalpoint?: GeoPoint
    
    Geographical center point of the circle to search in. options.radius must be defined.
  - Optionalradius?: number
    
    Radius of the circle in meters, it is used in "point" search.
  - Optionalrect?: GeoRect | GeoJSONBBox
    
    Geographical Rectangle to search in. [minLon, minLat, maxLon, maxLat] | GeoRect.
  - Optionalremote?: boolean
    
    Force the data provider(s) to do remote search if no result is found in local cache.
Returns Feature<string>[]
array of features
Example
```
// searching features by id:
layer.search({ids: [1058507462, 1058507464]})

// searching by point and radius:
layer.search({
    point: {longitude: 72.84205, latitude: 18.97172},
    radius: 100
})

// searching by Rect:
layer.search({
    rect:  {minLon: 72.83584, maxLat: 18.97299, maxLon: 72.84443, minLat: 18.96876}
})

// remote search:
layer.search({
    rect:  {minLon: 72.83584, maxLat: 18.97299, maxLon: 72.84443, minLat: 18.96876},
    remote: true, // force layer to do remote search if feature/search area is not cached locally
    onload: (result) => {...}
})
```
Inherited from TileLayer.search
search(
    rect: GeoRect | GeoJSONBBox,
    options?: {
        onerror?: (
            error: {
                message: string;
                name: "NetworkError";
                responseText: string;
                status: number;
            },
        ) => void;
        onload?: (result: Feature<string>[]) => void;
        remote?: boolean;
    },
): Feature<string>[]
Rectangle Search for feature(s) in the layer.
Parameters
- rect: GeoRect | GeoJSONBBox
  Geographical Rectangle to search in. [minLon, minLat, maxLon, maxLat] | GeoRect.
- Optionaloptions: {
      onerror?: (
          error: {
              message: string;
              name: "NetworkError";
              responseText: string;
              status: number;
          },
      ) => void;
      onload?: (result: Feature<string>[]) => void;
      remote?: boolean;
  }
  configure the search
  - Optionalonerror?: (
        error: {
            message: string;
            name: "NetworkError";
            responseText: string;
            status: number;
        },
    ) => void
    
    Function to be called when a request of a "remote search" fails.
  - Optionalonload?: (result: Feature<string>[]) => void
    
    Callback function for "remote" search.
  - Optionalremote?: boolean
    
    Force the data provider(s) to do remote search if no result is found in local cache.
Returns Feature<string>[]
Example
```
layer.search({minLon: 72.83584, maxLat: 18.97299, maxLon: 72.84443, minLat: 18.96876})
// or:
layer.search([72.83584, 18.96876, 72.84443,18.97299])

// remote search:
layer.search({ minLon: 72.83584, maxLat: 18.97299, maxLon: 72.84443, minLat: 18.96876 }, {
    remote: true, // force layer to do remote search if search area is not cached locally
    onload: (result) => {...}
})
```
Inherited from TileLayer.search
search(
    point: GeoPoint,
    options: {
        onerror?: (
            error: {
                message: string;
                name: "NetworkError";
                responseText: string;
                status: number;
            },
        ) => void;
        onload?: (result: Feature) => void;
        radius?: number;
        remote?: boolean;
    },
): Feature<string>[]
Circle Search for feature(s) in the layer.
Parameters
- point: GeoPoint
  Geographical center point of the circle to search in. options.radius must be defined.
- options: {
      onerror?: (
          error: {
              message: string;
              name: "NetworkError";
              responseText: string;
              status: number;
          },
      ) => void;
      onload?: (result: Feature) => void;
      radius?: number;
      remote?: boolean;
  }
  configure the search
  - Optionalonerror?: (
        error: {
            message: string;
            name: "NetworkError";
            responseText: string;
            status: number;
        },
    ) => void
    
    Function to be called when a request of a "remote search" fails.
  - Optionalonload?: (result: Feature) => void
    
    Callback function for "remote" search.
  - Optionalradius?: number
    
    the radius is mandatory for circle search.
  - Optionalremote?: boolean
    
    Force the data provider(s) to do remote search if no result is found in local cache.
Returns Feature<string>[]
Example
```
layer.search({longitude: 72.84205, latitude: 18.97172},{
 radius: 100
})
// or:
layer.search([72.84205, 18.97172], {
 radius: 100
})

// remote search:
layer.search([72.84205, 18.97172], {
 radius: 100,
 remote: true, // force layer to do remote search if search area is not cached locally
 onload: function(result){
  // search result is only return in this callback function if features are not found in cache.
 }
})
```
Inherited from TileLayer.search
search(
id: string | number,
options?: { onload?: (result: Feature) => void; remote?: boolean },
): Feature
Search for feature by id in the layer.
Parameters
- id: string | number
  id of the feature to search for
- Optionaloptions: { onload?: (result: Feature) => void; remote?: boolean }
  configure the search
  - Optionalonload?: (result: Feature) => void
    
    Callback function for "remote" search.
  - Optionalremote?: boolean
    
    Force the data provider(s) to do remote search if no result is found in local cache.
Returns Feature
Example
```
layer.search(1058507462)

// remote search:
layer.search(1058507462,{
remote: true, // force layer to do remote search if search area is not cached locally
onload: function(feature){
 // search result is only return in this callback function if features are not found in cache.
}
})
```
Inherited from TileLayer.search

setFeatureCoordinates

setFeatureCoordinates(
    feature: Feature,
    coordinates:
        | GeoJSONCoordinate
        | GeoJSONCoordinate[]
        | GeoJSONCoordinate[][]
        | GeoJSONCoordinate[][][],
): void
Modify coordinates of a feature in the layer.
Parameters
- feature: Feature
  the Feature whose coordinates should be modified
- coordinates:
      | GeoJSONCoordinate
      | GeoJSONCoordinate[]
      | GeoJSONCoordinate[][]
      | GeoJSONCoordinate[][][]
  the modified coordinates to set. The coordinates must match features geometry type.
Returns void

Inherited from TileLayer.setFeatureCoordinates

setMargin

setMargin(tileMargin?: number): number
Set the tile margin in pixel.
Parameters
- tileMargin: number = 0
  the tileMargin
Returns number

Inherited from TileLayer.setMargin

setStyle

setStyle(layerStyle: RuntimeLayerStyle | LayerStyle, keepCustom?: boolean): void
Set layer with given style.
Parameters
- layerStyle: RuntimeLayerStyle | LayerStyle
  the layerStyle
- keepCustom: boolean = false
  keep and reuse custom set feature styles that have been set via TileLayer.setStyleGroup
Returns void

Inherited from TileLayer.setStyle

setStyleGroup

setStyleGroup(feature: Feature, styleGroup?: false | Style[]): void
Set StyleGroup the feature should be rendered with. Pass styleGroup = false|null to hide the feature. If no styleGroup is passed, custom feature style will be cleared and layer default style will be set.
Parameters
- feature: Feature
  the feature that's styleGroup should be set
- OptionalstyleGroup: false | Style[]
  the styleGroup that feature should be displayed with
Returns void

Inherited from TileLayer.setStyleGroup

setVisible

setVisible(isVisible?: boolean): void
Sets the visibility of the Layer.

This function controls whether the tile layer is currently displayed or hidden.
Parameters
- OptionalisVisible: boolean
  A boolean value indicating whether the tile layer should be visible (true) or hidden (false).
Returns void
- The current visibility state of the tile layer.
Example
```
// Create a new tile layer
let tileLayer = new XYZMapsTileLayer();

// Hide the tile layer
tileLayer.visible(false);

// Show the tile layer
tileLayer.visible(true);
```
Inherited from TileLayer.setVisible

Class MVTLayer

Example

Hierarchy (View Summary)

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

Returns MVTLayer

Properties

Readonlyid

Protectedmargin

max

maxDataZoom

Default Value

min

name

Methods

addEventListener

Parameters

Returns any

addFeature

Parameters

Returns Feature

Example

Example

Parameters

Returns Feature<string>[]

Example

getCachedTile

Parameters

Returns Tile

getProvider

Parameters

Returns MVTProvider

getStyle

Returns LayerStyle

getStyleGroup

Parameters

Returns readonly Style[]

getTile

Parameters

Returns Tile

isVisible

Returns boolean

Example

Parameters

Returns boolean

Example

pointerEvents

Parameters

Returns boolean

removeEventListener

Parameters

Returns any

removeFeature

Parameters

Returns any

search

Parameters

id: string | number

Optionalonerror?: ( error: { message: string; name: "NetworkError"; responseText: string; status: number; },) => void

Optionalonload?: (result: Feature<string>) => void

Optionalremote?: boolean

Returns Feature

Example

Parameters

Optionalids?: number[] | string[]

Optionalonerror?: ( error: { message: string; name: "NetworkError"; responseText: string; status: number; },) => void

Optionalonload?: (result: Feature<string>[]) => void

Optionalpoint?: GeoPoint

Optionalradius?: number

Optionalrect?: GeoRect | GeoJSONBBox

Optionalremote?: boolean

Returns Feature<string>[]

Example

Parameters

Optionalonerror?: ( error: { message: string; name: "NetworkError"; responseText: string; status: number; },) => void

`Readonly`id

`Protected`margin

`Optional`onerror?: (
error: {
message: string;
name: "NetworkError";
responseText: string;
status: number;
},
) => void

`Optional`onload?: (result: Feature<string>) => void

`Optional`remote?: boolean

`Optional`ids?: number[] | string[]

`Optional`onerror?: (
error: {
message: string;
name: "NetworkError";
responseText: string;
status: number;
},
) => void

`Optional`onload?: (result: Feature<string>[]) => void

`Optional`point?: GeoPoint

`Optional`radius?: number

`Optional`rect?: GeoRect | GeoJSONBBox

`Optional`remote?: boolean

`Optional`onerror?: (
error: {
message: string;
name: "NetworkError";
responseText: string;
status: number;
},
) => void

`Optional`onload?: (result: Feature<string>[]) => void

`Optional`remote?: boolean

`Optional`onerror?: (
error: {
message: string;
name: "NetworkError";
responseText: string;
status: number;
},
) => void

`Optional`onload?: (result: Feature) => void

`Optional`radius?: number

`Optional`remote?: boolean

`Optional`onload?: (result: Feature) => void

`Optional`remote?: boolean