MapBoxLayers

About

The MapBoxVectorLayer allows you to create a layer based on a Mapbox-hosted style using a single vector source. The MapBoxElevationLayer is used to display the elevation layer hosted by Mapbox. You need to subscribe to mapbox and get your personal access token to be able to use these layers.

Setup

interface IMapBoxVectorLayerInfo extends IBaseLayerInfo {
    LayerType: "MapBoxVectorLayer";
    /** MapBox style url, e.g. mapbox://styles/mapbox/light-v10 */
    StyleUrl: URL;
    /** Map box access token, connects request to an active map box account */
    AccessToken: string;
}

interface IMapBoxElevationLayerInfo extends IBaseLayerInfo {
    LayerType: "MapBoxElevationLayer";
    /** Map box access token, connects request to an active map box account */
    AccessToken: string;
}

Example

include {Layers} from "@mariateleplan/map-core"
const elevationInfo: Layers.IMapBoxElevationLayerInfo =         {
            "Visible": false,
            "LayerType": "MapBoxElevationLayer",
            "Id": "elev_mb",
            "Name": "Mapbox elevation",
            "AccessToken": "YOUR_ACCESS_TOKEN",
            "ParentLayerId": "maps"
        }
const mapBoxVectorInfo: Layers.IMapBoxVectorLayerInfo = {
            "Visible": false,
            "LayerType": "MapBoxVectorLayer",
            "Id": "mapbox_light_v10",
            "Name": "Mapbox light",
            "StyleUrl": "mapbox://styles/mapbox/light-v10",
            "AccessToken": "YOUR_ACCESS_TOKEN",
            "ParentLayerId": "maps"
}

const layers: Layers.ILayersInfo = {
    Services:{},
    Layers:[new Layers.MapBoxElevationLayer(elevationInfo), new Layers.MapBoxVectorLayer(mapBoxVectorInfo)]
}
const props = {   
      "Zoom": 10,
      "Center": [1197567, 8380058],
      "Projection": 'EPSG:3857'
    }
const mapHtmlId = "map";
const maria = new MariaCore(props, mapHtmlId)
maria.SetupLayers(layers)