CompositeLayer

About

Map layers can be ordered in a hierarchy using the CompositeLayer. It can be used as a parent layer to group other layers. This can be displayed in the maria-map example project where layers is grouped based on composite layers in the map layers selection tool.

interface ICompositeLayerInfo extends IBaseLayerInfo {
    LayerType: "CompositeLayer";
}

Example

In this example we create a composite layer named Maps to group the map layers below. The layers are connected by setting the ParentLayerId-field to an existing composite layer id. This structure come in handy other places, i.e. to display layers nicely.

include {Layers} from "@mariateleplan/map-core"
const parentLayer: Layers.ICompositeLayerInfo =        
{
            "LayerType": "CompositeLayer",
            "Id": "maps",
            "Name": "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 wmsLayerInfo: Layers.IWmsMapLayerInfo = {
            "Visible": false,
            "LayerType": "WmsMapLayer",
            "Id": "wms_test",
            "Name": "WMS Raster",
            "WmsUrl": "https://ahocevar.com/geoserver/wms",
            "Layers": "ne:NE1_HR_LC_SR_W_DR",
            "ParentLayerId": "maps"
}

const layers: Layers.ILayersInfo = {
    Services:{},
    Layers:[new Layers.CompositeLayer(parentLayer), new Layers.WMSLayer(wmsLayerInfo), 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)