OpenLayers change cluster style
by barbarina
HTML
<script src="https://openlayers.org/en/latest/build/ol.js"></script>
<link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css">
<link rel="stylesheet" href="https://viglino.github.io/ol-ext/dist/ol-ext.css">
<script src="https://viglino.github.io/ol-ext/dist/ol-ext.js"></script>
<div id="map" class="map">
</div>
CSS
.map {
height: 300px;
width: 100%;
}
JavaScript
const MARKER_SIZE = 25;
const geojsonObject = {
'type': 'FeatureCollection',
'crs': {
'type': 'name',
'properties': {
'name': 'EPSG:4326',
},
},
'features': [{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [10, 10]
},'properties': {'nome': 'a'}
}, {
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [10, 10]
},'properties': {'nome': 'b'}
}, {
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [10.4, 10.4]
},'properties': {'nome': 'c'}
}, {
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [10.4, 10.4]
},'properties': {'nome': 'd'}
}, {
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [10.4, 10.4]
},'properties': {'nome': 'e'}
}, {
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [10.5, 10.5]
},'properties': {'nome': 'f'}
}, {
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [10.5, 10.5]
},'properties': {'nome': 'g'}
}]
};
const raster = new ol.layer.Tile({
source: new ol.source.Stamen({
layer: 'toner-lite',
}),
});
const getShadowStyle = () => {
return new ol.style.Style({
image: new ol.style.Shadow({
radius: MARKER_SIZE,
blur: 5,
fill: new ol.style.Fill({
color: 'rgba(0, 0, 0, 0.5)',
})
})
});
};
const getPoiStyle = (feature, extraDefs = {}) => {
const features = feature.get('features');
let color = '#255CF6';
let glyph = 'icomoon-bike';
return new ol.style.Style(
Object.assign({}, {
image: new...