[Test] playas

by SIGC GUADALTEL

HTML

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

CSS

html,
body,
#map {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

JavaScript

//CREACION DEL MAPA
        var mapajs = M.map({
            container: 'map',
            controls: ['panzoombar', 'mouse', 'scale', 'scaleline' ,'OverviewMap','LayerSwitcher'],
            wmcfiles: ['https://www.juntadeandalucia.es/institutodeestadisticaycartografia/WMC/public/WMC_basico_atenuado1.xml*Contexto'],
            projection: 'EPSG:25830*m',
            zoom: 0
        });
       
	   //CAPA SERVICIOS DE SALUD
		let salud = new M.layer.WFS({
			name: "Salud",
			url: "https://www.ideandalucia.es/services/ise/wfs?",
			namespace: "ise",
			legend: "Servicios de Salud Públicos",
			transparent: false,
			cql: "idN2='14' OR idN2='11'",
			geometry: 'POINT',
			extract: true
		}); 
		let saludCentrosAntencionPrimaria = new M.style.Point({
			icon: {
				src: 'https://www.juntadeandalucia.es/institutodeestadisticaycartografia/mapa_equipamientos/geolocalizacion/iconos/Equipamientos/Salud/centros_primaria.png'
			}
		});

		let saludHospitales = new M.style.Point({
			icon: {
				src: 'https://www.juntadeandalucia.es/institutodeestadisticaycartografia/mapa_equipamientos/geolocalizacion/iconos/Equipamientos/Salud/hospital.png'
			}
		});  
	
		let categoriaSalud = new M.style.Category("Nivel2", {
			"Centros de atención primaria": saludCentrosAntencionPrimaria,
			"Hospitales": saludHospitales
		});

		let clusterOptionsSalud = {
			ranges: [{
				min: 2,
				max: 200,
				style: new M.style.Point({
					fill: {  
						color: '#0b5404',
						opacity: 1
					},
					stroke: {
						color: '#FFFFFF'
					},
					radius: 10
				})
			}
			],
			animated: true,
			hoverInteraction: false,
			displayAmount: true,
			selectedInteraction: true,
			maxFeaturesToSelect: 2,
			distance: 80,
			label: {
				font: 'bold 9px Comic Sans MS',
				color: '#FFFFFF'
			}
		};
     
		let clusterStyleSalud = new M.style.Cluster(clusterOptionsSalud, {
			distanceSelectFeatures: 25,
			convexHullStyle: {
				fill: {
				color: '#00FF00',
				opacity: 1
			},
			stroke:...