[Test] 5.1.0 LayerGroup II

by Francisco

HTML

<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea-hcsigc/assets/css/mapea-5.1.0.ol.min.css">
<script src="https://sigc.desarrollo.guadaltel.es/mapea-hcsigc/js/mapea-5.1.0.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea-hcsigc/js/configuration-5.1.0.js"></script>
<div id="map"></div>

CSS

html,
 body {
   margin: 0;
   padding: 0;
   height: 100%;
   overflow: hidden;
 }

JavaScript

const mapa = M.map({
  container: 'map',
  controls: ['layerswitcher']
});


const provincias = new M.layer.GeoJSON({
  name: "Provincias",
  url: "http://geostematicos-sigc.juntadeandalucia.es/geoserver/tematicos/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=tematicos:Provincias&maxFeatures=50&outputFormat=application/json",
  extract: true
});



const campamentos = new M.layer.GeoJSON({
  name: "Campamentos",
  url: "http://geostematicos-sigc.juntadeandalucia.es/geoserver/sepim/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=sepim:campamentos&outputFormat=application/json&",
  extract: true
});


let capaWMS = new M.layer.WMS({
    url: 'https://www.ideandalucia.es/services/andalucia/wms?',
    name: '05_Red_Viaria',
    legend: 'Red Viaria',
    transparent: true,
    tiled: false
  });


/*const layerGroup1 = new M.layer.LayerGroup('id_grupo_1', 'Grupo 1');
const layerGroup2 = new M.layer.LayerGroup('id_grupo_2','Grupo 2');

mapa.addLayerGroup(layerGroup1);
mapa.addLayerGroup(layerGroup2);

layerGroup2.addChildren([capaWMS]);

layerGroup1.addChildren([provincias, campamentos, layerGroup2]);*/
const layerGroup2 = new M.layer.LayerGroup(
{
  id: 'id_grupo_2',
  title:  'Grupo 2',
  collapsed: false,
  zIndex: 10000,
  children: [capaWMS],
  order: 0
	});
  
const layerGroup1 = new M.layer.LayerGroup(
{
  id: 'id_grupo_1',
  title:  'Grupo 1',
  collapsed: false,
  zIndex: 10000,
  children: [provincias, campamentos, layerGroup2],
  order: 0
	});

mapa.addLayerGroup(layerGroup1);
//mapa.addLayerGroup(layerGroup2);


console.log('La agrupación ' + layerGroup1.title + ' tiene ' + layerGroup1.getChildren().length + ' capas hijas');