change the cluster properties on the sources option #1998
Conversation
|
Thanks for taking the time to contribute!! |
|
Bundle size report: Size Change: +68 B
ℹ️ View Details
|
Hey, Sorry to hear that, I’m only changing the property ( not removing the clusters ), I tested it with the CSS/Js build and it was working. |
|
Can you share the code that you used for testing this? |
|
Oh I see, that does make sense, because I had this use case while I was reloading it with React, I tested the build with a simple HTML code with buttons like this (so as you said this only runs once): <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="maplibre-gl.js"></script>
<link rel="stylesheet" href="maplibre-gl.css">
<title>Document</title>
</head>
<body>
<style>
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.buttons{
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
</style>
<h1>Webpack</h1>
<div class="container">
<div class="buttons">
<button id="on">Turn On</button>
<button id="off">Turn Off</button>
</div>
<div class="mapcontainer">
<div id="map"></div>
</div>
</div>
<script>
var map = new maplibregl.Map({
container: 'map',
style:
'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
center: [-103.59179687498357, 40.66995747013945],
zoom: 3
});
map.on('load', function () {
// Add a new source from our GeoJSON data and
// set the 'cluster' option to true. GL-JS will
// add the point_count property to your source data.
map.addSource('earthquakes', {
type: 'geojson',
// Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
// from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
data:
'https://maplibre.org/maplibre-gl-js-docs/assets/earthquakes.geojson',
cluster: true,
clusterMaxZoom: 50, // Max zoom to cluster points on
clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
});
map.addLayer({
id: 'clusters',
type: 'circle',
source: 'earthquakes',
filter: ['has', 'point_count'],
paint: {
// Use step expressions (https://maplibre.org/maplibre-gl-js-docs/style-spec/#expressions-step)
// with three steps to implement three types of circles:
// * Blue, 20px circles when point count is less than 100
// * Yellow, 30px circles when point count is between 100 and 750
// * Pink, 40px circles when point count is greater than or equal to 750
'circle-color': [
'step',
['get', 'point_count'],
'#51bbd6',
100,
'#f1f075',
750,
'#f28cb1'
],
'circle-radius': [
'step',
['get', 'point_count'],
20,
100,
30,
750,
40
]
}
});
map.addLayer({
id: 'cluster-count',
type: 'symbol',
source: 'earthquakes',
filter: ['has', 'point_count'],
layout: {
'text-field': '{point_count_abbreviated}',
'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
'text-size': 12
}
});
map.addLayer({
id: 'unclustered-point',
type: 'circle',
source: 'earthquakes',
filter: ['!', ['has', 'point_count']],
paint: {
'circle-color': '#11b4da',
'circle-radius': 4,
'circle-stroke-width': 1,
'circle-stroke-color': '#fff'
}
});
// inspect a cluster on click
map.on('click', 'clusters', function (e) {
var features = map.queryRenderedFeatures(e.point, {
layers: ['clusters']
});
var clusterId = features[0].properties.cluster_id;
map.getSource('earthquakes').getClusterExpansionZoom(
clusterId,
function (err, zoom) {
if (err) return;
map.easeTo({
center: features[0].geometry.coordinates,
zoom: zoom
});
}
);
});
// When a click event occurs on a feature in
// the unclustered-point layer, open a popup at
// the location of the feature, with
// description HTML from its properties.
map.on('click', 'unclustered-point', function (e) {
var coordinates = e.features[0].geometry.coordinates.slice();
var mag = e.features[0].properties.mag;
var tsunami;
if (e.features[0].properties.tsunami === 1) {
tsunami = 'yes';
} else {
tsunami = 'no';
}
// Ensure that if the map is zoomed out such that
// multiple copies of the feature are visible, the
// popup appears over the copy being pointed to.
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
new maplibregl.Popup()
.setLngLat(coordinates)
.setHTML(
'magnitude: ' + mag + '<br>Was there a tsunami?: ' + tsunami
)
.addTo(map);
});
//--------------------Test ---------------------
const turnOnBtn = document.getElementById('on');
const turnOffBtn = document.getElementById('off');
turnOnBtn.addEventListener('click', () => {
map.setLayoutProperty('clusters', 'visibility', 'visible');
map.getSource('earthquakes').setCluster(true);
console.log(map.getSource('earthquakes')._options.cluster)
});
turnOffBtn.addEventListener('click', () => {
map.setLayoutProperty('clusters', 'visibility', 'none');
map.getSource('earthquakes').setCluster(false);
console.log(map.getSource('earthquakes')._options.cluster)
});
//--------------------Test ---------------------
});
</script>
</body>
</html>I'll try to update my pull request in the upcoming days |
IhsenBen
changed the title
|
I updated the pull request and added more options, I'm open to your suggestions or requirements 😃 |
|
Thanks for the update, please see if you can add tests to this scenario. |
|
Hi,
|
|
This looks great! |
I don't understand, I already typed the arguments of setCluster(). |
|
The class members have a type |
I rebased my branch and added the type for _options with optional properties for flexibility, also tbh I didn't want to bother with workerOptions because this has a lot values and I didn't want to mess anything up. Hope this will do it :D |
|
Would be nice to type the worker option as best as you could at this point in time, we can always improve this in the future. Anything is better than |
Hey |
- Adding unit test for setClusterOptions - Adding Types for _options - Adding Types for workerOptions - Log these changes in CHANGELOG.md
|
Thanks Harel, this was my first valuable open-source contribution. |
|
First of many hopefully 😀 |
Launch Checklist
setClusterOptions(cluster: boolean, clusterRadius?: number; clusterMaxZoom?: number})The value of the clusters properties.Exemple: