2

I've a feature in my map where every point has his own id, I want to assign different random colors to differents ids (id 0 = red,...), the ids are given dinamically, so I don't know the exact number. How can I do?

This is my code:

  var bikeStyle = new ol.style.Style({
       image: new ol.style.Circle({
           radius: 15,
           fill: new ol.style.Fill({color: 'rgba(120, 255, 12, 1)'}),
           stroke: new ol.style.Stroke({color: 'green', width: 1})
       })
   });


   var map = new ol.Map({
       target: 'map',
       layers: [
           new ol.layer.Tile({
               source: new ol.source.OSM()
           }),
       ],
       view: new ol.View({
           center: ol.proj.fromLonLat([11.341868,44.494949]),
           zoom: 14
       })
   });


//CLUSTERS

   var clusters = '<?php echo $_SESSION["clusters"] ?>';
   console.log(clusters);
   var source = new ol.source.Vector();
   var bikeClust = new ol.layer.Vector({
         title: 'bikeClust',
         source: source,
         style: bikeStyle,
   })

   source.addFeatures(
         new ol.format.GeoJSON().readFeatures(clusters, {
             dataProjection: 'EPSG:4326',
             featureProjection: map.getView().getProjection()
         })
   );

   map.addLayer(bikeClust);
2
  • Should colors be random or you have some specific palette? Is there some expected number/upper limit of different ids? Please edit your question and add that info.
    – TomazicM
    Feb 8 at 16:36
  • Random colors, I change the question
    – Uderr
    Feb 8 at 16:40

1 Answer 1

3

You create simple function randomColor to create random rgb colors and then, instead of static style, use style function where you assign random color to background fill.

When style with random color is assigned to the feature the first time, it's saved as property myFillColor of the ferature, so that it can be used in the future.

Code could then look something like this:

function randomColor() {
  var r = Math.floor(Math.random() * 256);
  var g = Math.floor(Math.random() * 256);
  var b = Math.floor(Math.random() * 256);
  var color = 'rgb(' + r + ',' + g + ',' + b + ')';
  
  return(color);
}

var baseBikeStyle = new ol.style.Style({
  image: new ol.style.Circle({
    radius: 15,
    fill: new ol.style.Fill({color: rgb(0, 0, 0)}),
    stroke: new ol.style.Stroke({color: 'green', width: 1})
  })
});
 
function bikeStyle(feature, resolution) {
  var myFillColor = feature.get('myFillColor');
  if (!myFillColor) {
    myFillColor = randomColor();
    feature.set('myFillColor', myFillColor, true);
  }
  baseBikeStyle.getImage().getFill().setColor(myFillColor);

  return(baseBikeStyle);
}
3
  • I'm sorry for the vary late reply, but this function assign an unique color to all features. What I want is to assign different colors on differents id for the same feature
    – Uderr
    Feb 25 at 15:56
  • What do you mean by "assign different colors on different id for the same feature"? Does this mean that such an id changes for the same feature? How then you identify the feature if it does not have some constant unique id?
    – TomazicM
    Feb 25 at 17:28
  • I have a feature where each element has an id field, I want to assign different colors to different ids (id 1 = red, id 2 = blue)
    – Uderr
    Feb 28 at 18:03

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.