// Create OSM layer
const osm = new ol.layer.Tile({
  source: new ol.source.OSM(),
  visible: false,
 });

// Create IGN Base Todo layer
const baseIGNTodo = new ol.layer.Tile({
    source: new ol.source.XYZ({
    url: 'https://tms-ign-base.ign.es/1.0.0/IGNBaseTodo/{z}/{x}/{-y}.jpeg'
  })
});

const municipios = new ol.layer.Tile({
  source: new ol.source.TileWMS({
    url: 'http://geostematicos-sigc.juntadeandalucia.es/geoserver/tematicos/wms?',
        params: {
          'LAYERS': 'tematicos:Municipios',
      },
  })
})

const layerGroup = new ol.layer.Group({
  layers: [municipios]
})

// Group layers
const BaseLayerGroup = new ol.layer.Group({
 layers: [osm, baseIGNTodo, layerGroup]
});

// Create map
const map = new ol.Map({
  layers: [BaseLayerGroup],
  target: 'map',
    view: new ol.View({
    center: ol.proj.fromLonLat([0, 0]),
    zoom: 2
  })
});

// Helper function to get element by selector
const $ = (id) => document.querySelector(id);

// Event listeners for checkboxes
const osmInput = $('#OSM');
osmInput.addEventListener('click', () => osm.setVisible(osmInput.checked));

const baseIGNTodoInput = $('#IGNBaseTodo');
baseIGNTodoInput.addEventListener('click', () => baseIGNTodo.setVisible(baseIGNTodoInput.checked));

const layerGroupInsideInput = $('#layerGroupInside');
layerGroupInsideInput.addEventListener('click', () => layerGroup.setVisible(layerGroupInsideInput.checked));

const municipiosInput = $('#municipios');
municipiosInput.addEventListener('click', () => municipios.setVisible(municipiosInput.checked));


const GroupInput = $('#Group');
GroupInput.addEventListener('click', () => {
  const checked = GroupInput.checked;
  BaseLayerGroup.setVisible(GroupInput.checked);
});