ol-layerlist
Version:
Layer switcher control for OpenLayers v3/v4/v5
73 lines (70 loc) • 2.61 kB
JavaScript
(function() {
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Group({
'title': 'Base maps',
fold:true,
allowSelection:true,
layers: [
new ol.layer.Group({
title: 'Water color with labels',
type: 'base',
combine: true,
visible: false,
layers: [
new ol.layer.Tile({
source: new ol.source.Stamen({
layer: 'watercolor'
})
}),
new ol.layer.Tile({
source: new ol.source.Stamen({
layer: 'terrain-labels'
})
})
]
}),
new ol.layer.Tile({
title: 'Water color',
type: 'base',
visible: false,
source: new ol.source.Stamen({
layer: 'watercolor'
})
}),
new ol.layer.Tile({
title: 'OSM',
type: 'base',
visible: true,
source: new ol.source.OSM()
})
]
}),
new ol.layer.Group({
title: 'Overlays',
fold:true,
layers: [
new ol.layer.Image({
title: 'Countries',
source: new ol.source.ImageArcGISRest({
ratio: 1,
params: {'LAYERS': 'show:0'},
url: "https://ons-inspire.esriuk.com/arcgis/rest/services/Administrative_Boundaries/Countries_December_2016_Boundaries/MapServer"
}),
enableOpacitySliders: true
})
]
})
],
view: new ol.View({
center: ol.proj.transform([-0.92, 52.96], 'EPSG:4326', 'EPSG:3857'),
zoom: 6
})
});
var layerSwitcher = new ol.control.LayerSwitcher({
tipLabel: 'Légende', // Optional label for button
layers:map.getLayers()
});
map.addControl(layerSwitcher);
})();