[Test] IAPH CLuster 5.0.0 versión visor

by Francisco

HTML

<script src="https://mapea4-sigc.juntadeandalucia.es/js/mapea-5.0.0.ol.min.js"></script>
<link rel="stylesheet" href="https://mapea4-sigc.juntadeandalucia.es/assets/css/mapea-5.0.0.ol.min.css">
<script src="http://mapea4-sigc.juntadeandalucia.es/js/configuration-5.0.0.js"></script>
<span id="totalInmaterialesDuplicados">-</span>
<div id="map"></div>
<!--<div class="loading">Loading&#8230;</div>-->

CSS

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

 /* Transparent Overlay */

 .loading {
   position: fixed;
   z-index: 999;
   height: 2em;
   width: 2em;
   overflow: show;
   margin: auto;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
 }

 .loading:before {
   content: '';
   display: block;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.3);
 }

 /* :not(:required) hides these rules from IE9 and below */

 .loading:not(:required) {
   /* hide "loading..." text */
   font: 0/0 a;
   color: transparent;
   text-shadow: none;
   background-color: transparent;
   border: 0;
 }

 .loading:not(:required):after {
   content: '';
   display: block;
   font-size: 10px;
   width: 1em;
   height: 1em;
   margin-top: -0.5em;
   -webkit-animation: spinner 1500ms infinite linear;
   -moz-animation: spinner 1500ms infinite linear;
   -ms-animation: spinner 1500ms infinite linear;
   -o-animation: spinner 1500ms infinite linear;
   animation: spinner 1500ms infinite linear;
   border-radius: 0.5em;
   -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
   box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
 }

 /* Animation */

 @-webkit-keyframes spinner {
   0% {
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
     -webkit-transform:...

JavaScript

// Inicio timer
   var date1 = new Date();
   // variables control carga capas
   let datosLocalizadorLoaded = false;
   let rutasLoaded = false;
   let inmaterialesLoaded = false;
   // Obtención de los inmateriales 
   let inmaterialesDuplicados = [];
   let totalInmaterialesDuplicados = 0;

   // Mapa
   var mapajs = M.map({
     container: 'map',
     layers: [new M.layer.OSM()],
     projection: "EPSG:3857*m",
     bbox: [-947706.8825451421, 4322709.934542003, -131919.24094830884, 4635796.002398086],
     resolutions: [611.50, 305.75, 152.87, 76.437, 38.219, 19.109, 9.5546, 4.7773, 2.3887, 1.1943, 0.5972, 0.2986, 0.1493],
   });


   /************* DEFINICION DE ESTILOS *******************/
   const clusterOptions_1 = {
     ranges: [{
       min: 2,
       max: 9,
       style: new M.style.Point({
         stroke: {
           color: '#ffffff'
         },
         fill: {
           color: '#08701F',
           opacity: 0.75
         },
         radius: 10,
       })
     }, {
       min: 10,
       max: 99,
       style: new M.style.Point({
         stroke: {
           color: '#ffffff'
         },
         fill: {
           color: '#08701F',
           opacity: 0.75
         },
         radius: 15
       })
     }, {
       min: 100,
       max: 999,
       style: new M.style.Point({
         stroke: {
           color: '#ffffff'
         },
         fill: {
           color: '#08701F',
           opacity: 0.75
         },
         radius: 20
       })
     }, {
       min: 1000,
       max: 5000,
       style: new M.style.Point({
         stroke: {
           color: '#ffffff'
         },
         fill: {
           color: '#08701F',
           opacity: 0.75
         },
         radius: 30
       })
     }],
     animated: true,
     hoverInteraction: true,
     displayAmount: true,
     distance: 80,
     maxFeaturesToSelect: 0,
     label: {
       font: '9px',
       color: '#FFFFFF',
       stroke: {
         color: 'black',
         width: 1,
      ...