[Mapea5] Cluster

by SIGC

HTML

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

</div>

CSS

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

.makidentist:before {
  content: '\e814';
  color: 'red'
}

.container {
  display: flex;
  justify-content: center;
  z-index: 9999;
}

.panel-container {
  top: -180px;
  height: 170px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  border: 1px solid #e5008a;
  z-index: 9998;
  padding: 15px;
  background-color: white;
  border-radius: 5%;
  transition: top 0.25s ease;
}

.option {
  display: flex;
  justify-content: space-between;
}

.tab {
  border-radius: 5%;
  background-color: #e5008a;
  padding: 0 25px;
  border: 1px solid black;
  font-size: 1.2rem;
  color: white;
  cursor: pointer;
  position: absolute;
  z-index: 9999;
  transition: top 0.25s ease;
}

.opened2 {
  top: 180px;
}

.opened {
  top: 0;
}

.flex-center {
  display: flex;
  justify-content: center;
}

.option label {
  margin-right: 15px;
}

JavaScript

let map = M.map({
  container: 'map',
  controls: ['layerswitcher', 'scale', 'scaleline', 'mouse'],
});

const wfs = new M.layer.WFS({
  url: 'http://geostematicos-sigc.juntadeandalucia.es/geoserver/sepim/ows',
  name: "sepim:campamentos"
})
map.addLayers(wfs)

//Estilo para cluster
let clusterOptions = {
  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
};
let vendorParameters = {
  distanceSelectFeatures: 25,
  convexHullStyle: {
    fill: {
      color: '#000000',
      opacity: 0.5
    },
    stroke: {
      color: '#000000',
      width: 1
    }
  }
}
let clusterStyle = new M.style.Cluster(clusterOptions, vendorParameters);

wfs.setStyle(clusterStyle)
console.log(clusterStyle.serialize())