1

I wanted to display some data (a number, different for each point) on a map (either Google maps or OpenStreetMap). Each point has an associated value (the number above).

For markers which are close to each other, the display is messy and the natural solution for this is to cluster the points.

While there several libraries or built-in mechanisms to cluster data points (including OpenLayers which seems to be very complete), all the ones I found display the number of markers in a cluster, without the possibility to display a sum of values carried by each point (or an average, or other functions which takes values an an input and transform them into one value).

Is there a library which would help with this problem? (in JavaScript for pure client-side rendering and ideally open source)

1

You can use OpenLayers to display each cluster marker's sum of children values. simply set a value to marker which will be clustered and set text option to cluster style. working example's here

  1. add a value what you want into feature

    features[i] = new ol.Feature(new ol.geom.Point(coordinates));
    // 1. set its value
    features[i].value = i;
  2. use the values when you set style

    var sum = 0;
    // 2. get sum of children
    for (var i = 0; i < size; i++) {
      sum += features[i].value;
    }
  3. set text as the calculated value

    text: new ol.style.Text({
      text: sum.toString(), // 3. set sum as text
      fill: new ol.style.Fill({
        color: '#fff'
      })
    })

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.