Options
All
  • Public
  • Public/Protected
  • All
Menu

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

Index

Constructors

Properties

Methods

Constructors

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.

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

        • (event: CustomEvent): void

        • Parameters

          • event: CustomEvent

          Returns void

    Returns any

addFeature

  • Add a feature to the layer.

    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
}]);

    Parameters

    • feature: GeoJSONFeature | Feature

      the feature to be added to the layer

    • Optional style: Style[]

      optional style the feature should be displayed with.

    Returns Feature

  • Add features to the layer.

    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"
   }
}]);

    Parameters

    Returns Feature[]

getCachedTile

  • getCachedTile(quadkey: string): Tile

  • Get a locally cached tile by quadkey.

    Parameters

    • quadkey: string

      the quadkey of the tile

    Returns Tile

getProvider

getStyle

getStyleGroup

  • getStyleGroup(feature: Feature, zoomlevel?: number, layerDefault?: boolean): Style[]

  • Get styleGroup for the feature.

    Parameters

    • feature: Feature

      the feature to get style

    • Optional zoomlevel: number

      specify the zoomlevel for the feature style

    • Optional layerDefault: boolean

    Returns Style[]

getTile

  • getTile(quadkey: string, callback: (tile: Tile) => void): Tile | undefined

  • Get a tile by quadkey.

    Parameters

    • quadkey: string

      quadkey of the tile

    • callback: (tile: Tile) => void

      callback function

        • (tile: Tile): void

        • Parameters

          Returns void

    Returns Tile | undefined

    the Tile is returned if its already cached locally

pointerEvents

  • pointerEvents(active?: boolean): boolean

  • Enable or disable pointer-event triggering for all features of the layer.

    Parameters

    • Optional active: boolean

      boolean to enable or disable posinter-events.

    Returns boolean

    boolean indicating if pointer-event triggering is active or disabled.

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.

        • (event: CustomEvent): void

        • Parameters

          • event: CustomEvent

          Returns void

    Returns any

removeFeature

search

  • search(options: { id: number | string; onerror?: (error: { message: string; name: "NetworkError"; responseText: string; status: number }) => void; onload?: (result: Feature | null) => void; remote?: boolean }): Feature
  • search(options: { ids?: number[] | string[]; onerror?: (error: { message: string; name: "NetworkError"; responseText: string; status: number }) => void; onload?: (result: Feature[] | null) => void; point?: GeoPoint; radius?: number; rect?: GeoRect | GeoJSONBBox; remote?: boolean }): Feature[]
  • search(rect: GeoRect | GeoJSONBBox, options?: { onerror?: (error: { message: string; name: "NetworkError"; responseText: string; status: number }) => void; onload?: (result: Feature[] | null) => void; remote?: boolean }): Feature[]
  • search(point: GeoPoint, options: { onerror?: (error: { message: string; name: "NetworkError"; responseText: string; status: number }) => void; onload?: (result: Feature) => void; radius?: number; remote?: boolean }): Feature[]
  • search(id: string | number, options?: { onload?: (result: Feature) => void; remote?: boolean }): Feature

  • Search for feature(s) in the layer.

    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) => {...}
})

    Parameters

    • options: { id: number | string; onerror?: (error: { message: string; name: "NetworkError"; responseText: string; status: number }) => void; onload?: (result: Feature | null) => void; remote?: boolean }

      configure the search

      • id: number | string

        search a feature by id.

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

        Function to be called when a request of a "remote search" fails.

          • (error: { message: string; name: "NetworkError"; responseText: string; status: number }): void

          • Parameters

            • error: { message: string; name: "NetworkError"; responseText: string; status: number }
              • message: string

                The error message of the failing request.

              • name: "NetworkError"

                The name property represents a name for the type of error. The value is "NetworkError".

              • responseText: string

                The responseText which contains the textual data received of the failing request.

              • status: number

                The numerical HTTP status code of the failing request.

            Returns void

      • Optional onload?: (result: Feature | null) => void

        Callback function for "remote" search.

          • Parameters

            Returns void

      • Optional remote?: boolean

        Force the data provider(s) to do remote search if no result is found in local cache.

    Returns Feature

    array of features

  • Search for feature(s) in the layer.

    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) => {...}
})

    Parameters

    • options: { ids?: number[] | string[]; onerror?: (error: { message: string; name: "NetworkError"; responseText: string; status: number }) => void; onload?: (result: Feature[] | null) => void; point?: GeoPoint; radius?: number; rect?: GeoRect | GeoJSONBBox; remote?: boolean }

      configure the search

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

        Array of feature ids to search.

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

        Function to be called when a request of a "remote search" fails.

          • (error: { message: string; name: "NetworkError"; responseText: string; status: number }): void

          • Parameters

            • error: { message: string; name: "NetworkError"; responseText: string; status: number }
              • message: string

                The error message of the failing request.

              • name: "NetworkError"

                The name property represents a name for the type of error. The value is "NetworkError".

              • responseText: string

                The responseText which contains the textual data received of the failing request.

              • status: number

                The numerical HTTP status code of the failing request.

            Returns void

      • Optional onload?: (result: Feature[] | null) => void

        Callback function for "remote" search.

          • Parameters

            Returns void

      • Optional point?: GeoPoint

        Geographical center point of the circle to search in. options.radius must be defined.

      • Optional radius?: number

        Radius of the circle in meters, it is used in "point" search.

      • Optional rect?: GeoRect | GeoJSONBBox

        Geographical Rectangle to search in. [minLon, minLat, maxLon, maxLat] | GeoRect.

      • Optional remote?: boolean

        Force the data provider(s) to do remote search if no result is found in local cache.

    Returns Feature[]

    array of features

  • Rectangle Search for feature(s) in the layer.

    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) => {...}
})

    Parameters

    • rect: GeoRect | GeoJSONBBox

      Geographical Rectangle to search in. [minLon, minLat, maxLon, maxLat] | GeoRect.

    • Optional options: { onerror?: (error: { message: string; name: "NetworkError"; responseText: string; status: number }) => void; onload?: (result: Feature[] | null) => void; remote?: boolean }

      configure the search

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

        Function to be called when a request of a "remote search" fails.

          • (error: { message: string; name: "NetworkError"; responseText: string; status: number }): void

          • Parameters

            • error: { message: string; name: "NetworkError"; responseText: string; status: number }
              • message: string

                The error message of the failing request.

              • name: "NetworkError"

                The name property represents a name for the type of error. The value is "NetworkError".

              • responseText: string

                The responseText which contains the textual data received of the failing request.

              • status: number

                The numerical HTTP status code of the failing request.

            Returns void

      • Optional onload?: (result: Feature[] | null) => void

        Callback function for "remote" search.

          • Parameters

            Returns void

      • Optional remote?: boolean

        Force the data provider(s) to do remote search if no result is found in local cache.

    Returns Feature[]

  • Circle Search for feature(s) in the layer.

    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.
 }
})

    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

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

        Function to be called when a request of a "remote search" fails.

          • (error: { message: string; name: "NetworkError"; responseText: string; status: number }): void

          • Parameters

            • error: { message: string; name: "NetworkError"; responseText: string; status: number }
              • message: string

                The error message of the failing request.

              • name: "NetworkError"

                The name property represents a name for the type of error. The value is "NetworkError".

              • responseText: string

                The responseText which contains the textual data received of the failing request.

              • status: number

                The numerical HTTP status code of the failing request.

            Returns void

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

        Callback function for "remote" search.

      • Optional radius?: number

        the radius is mandatory for circle search.

      • Optional remote?: boolean

        Force the data provider(s) to do remote search if no result is found in local cache.

    Returns Feature[]

  • Search for feature by id in the layer.

    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.
}
})

    Parameters

    • id: string | number

      id of the feature to search for

    • Optional options: { onload?: (result: Feature) => void; remote?: boolean }

      configure the search

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

        Callback function for "remote" search.

      • Optional remote?: boolean

        Force the data provider(s) to do remote search if no result is found in local cache.

    Returns Feature

setFeatureCoordinates

setMargin

  • setMargin(tileMargin?: number): number

  • Set the tile margin in pixel.

    Parameters

    • Default value tileMargin: number = 0

      the tileMargin

    Returns number

setStyle

  • setStyle(layerStyle: LayerStyle, keepCustom?: boolean): void

  • Set layer with given style.

    Parameters

    • layerStyle: LayerStyle

      the layerStyle

    • Default value keepCustom: boolean = false

      keep and reuse custom set feature styles that have been set via layer.setStyleGroup(...)

    Returns void

setStyleGroup

  • setStyleGroup(feature: Feature, styleGroup?: Style[] | false | null): 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

    • Optional styleGroup: Style[] | false | null

      the styleGroup that feature should be displayed with

    Returns void

Generated using TypeDoc