Example d'utilisation avec 2 couches :

Etape 1 : creer les couches //couche osm var osm = new ol.layer.Tile({ name: 'osm', title: 'Carte OSM', source: new ol.source.OSM(), minResolution: 0, maxResolution: 2 });

//couche marker var vectorSource = new ol.source.Vector({ //create empty vector }); var iconFeature = new ol.Feature({ geometry: new ol.geom.Point(position), name: 'position' }); vectorSource.addFeature(iconFeature); //create the style var iconStyle = new ol.style.Style({ image: new ol.style.Icon(({ anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', opacity: 1, src: 'http://openlayers.org/en/v3.9.0/examples/data/icon.png' })) });

//add the feature vector to the layer vector, and apply a style to whole layer var vectorLayer = new ol.layer.Vector({ source: vectorSource, style: iconStyle, name: "marker" });

// Etape 2 les ajouter a une carte markerLayer = vectorLayer; map = new ol.Map({ target: 'map', layers: [ osm, markerLayer ], view: new ol.View({ projection: projection, center: position, minZoom: 16, maxZoom: 22, zoom: 5 }) });

// etape 3 creer une configuration json pour ces couches : var config = { "layers": [ { "name": "osm", "title": "O S M", "type": "base", "opacity": 0.5, "visible": true }, { "name": "marker", "title": "Mon marker" "type": "base", "opacity": 1.0, "visible": true } ] };

//etape 4 : Ajouter le TreeLayerSwitcher treeLayerSwitcher = new TreeLayerSwitcher("tree-layers", map);

// etape 5 : ajouter les couches au treeLayerSwitcher ( treeLayerSwitcher.addLayer(path, layerConfig, layer, opacity, isParent, isVisible) ) treeLayerSwitcher.addLayer('osm path', config.layers[0], osm, 1, false, true); treeLayerSwitcher.addLayer('marker', config.layers[1], markerLayer, 1, false, true);

//etape 6 : initialisation du treeLayerSwitcher treeLayerSwitcher.initCheckboxState(); treeLayerSwitcher.updateLayersEntriesColorByZoom();