[StyleCluster] -Autocompletado del limite superior del rango maximo

Test en mapea42_dev

HTML

<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_dev/assets/css/mapea.ol.min.css">
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/vendor/browser-polyfill.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/js/mapea.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/js/configuration.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/geosearchbylocation/geosearchbylocation.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/wfstcontrols/wfstcontrols.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/geosearch/geosearch.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/attributetable/attributetable.ol.min.js"></script>
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/attributetable/attributetable.min.css">
<div id="mapjs">
</div>

CSS

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

JavaScript

let map = M.map({
    container: 'mapjs',
    layers: ["OSM"],
    projection: "EPSG:4326*d"
  });



  let ayuntamientos = new M.layer.WFS({
    name: "assda_sv10_ayuntamiento_point_indicadores",
    url: "https://clientes.guadaltel.es/desarrollo/geossigc/wfs?",
    namespace: "mapea",
    name: "assda_sv10_ayuntamiento_point_indicadores",
    legend: "Prestaciones - Ámbito municipal",
    getfeatureinfo: "plain",
    geometry: 'POINT',
  });

map.addLayers(ayuntamientos);

let style = new M.style.Cluster({
 
   ranges: [{
        min: 2,
        max: 4,
        style: new M.style.Point({
          stroke: {
            color: '#5789aa'
          },
          fill: {
            color: '#99ccff',
          },
          radius: 20
        })
      }, {
        min: 5,
        max: 9,
        style: new M.style.Point({
          stroke: {
            color: '#5789aa'
          },
          fill: {
            color: '#3399ff',
          },
          radius: 30
        })
      }, {
        min: 10,
        //max: 15,
        style: new M.style.Point({
          stroke: {
            color: '#5789aa'
          },
          fill: {
            color: '#004c99',
          },
          radius: 40
        })
      }],
      animated: true,
      hoverInteraction: true,
      displayAmount: true,
      distance: 80,
      maxFeaturesToSelect: 7
})

ayuntamientos.setStyle(style);