0

How can I change the color (randomly or iterate through a specific array) of a feature that I draw on the map?

This is my code:

// marker layer
Msource = new ol.source.Vector();

markLayer = new ol.layer.Vector({
  source: Msource,
  style: new ol.style.Style({
    image: new ol.style.Icon({
      opacity: 0.95,
      src: 'http://www..../images/mapplot.png',
     color: "red"
    })
  })
});

I have a button that when I click on it allows me to draw that marker with this code:

var mark;
var counter = "true";

function addMark(Type) {

  counter = "true";

  mark = new ol.interaction.Draw({
    source: Msource,
    type: Type
  });

  // limit the marker to 4
  if (Msource.getFeatures().length < 4) {

    map.addInteraction(mark);

    // occurs when you finish to draw the current element
    mark.on("drawend", function(){
      counter = "true";
      drawingMarker();
    });

    // occurs just after you finish to draw the current element
    markLayer.on("change", function(){
      map.removeInteraction(mark);

      if (counter == "true") {
        counter = "false";
        var ind = Msource.getFeatures().length - 1;
        Msource.getFeatures()[ind].setId(MarkId - 1);
      }

    });

  } else {

    map.removeInteraction(mark);

    // show max marker message
    $(".maxmarkers").css("display", "inline");

  }

} // end addDraw


$("#Marker").click(function(e) {
  e.preventDefault();
  addMark("Point");
});

I use some other function like remove function and drag feature, for this reason, I assign an incremented ID.

How can I change the color of the marker randomly or through an array (the max marker are 4)?

Here a screenshot of how it looks at the moment, the marker is not red because I'm using another image at the moment but I have another (always png) that change color based on the color in the layer.

enter image description here

1

You may create a style function instead of giving a static style. Check this:

var myColors = ['red','blue','green','yellow'];
var iterator = -1;

function styleFn(f){

var retSytle;


  if (typeof(f.get('styledwithcolor')) != 'undefined'){
  console.log("1",typeof(f.get('styledwithcolor')))

  retSytle = new ol.style.Style({
        image: new ol.style.Circle({
          radius: 6,
          stroke: new ol.style.Stroke({
            color: 'white',
            width: 2
          }),
          fill: new ol.style.Fill({
            color: f.get('styledwithcolor')
          })
        })
      });
  } else {
  console.log("2",typeof(f.get('styledwithcolor')))
  if (iterator == myColors.length-1){
  iterator =-1
  }
iterator = iterator + 1;
  f.set('styledwithcolor',myColors[iterator]);
  retSytle = new ol.style.Style({
        image: new ol.style.Circle({
          radius: 6,
          stroke: new ol.style.Stroke({
            color: 'white',
            width: 2
          }),
          fill: new ol.style.Fill({
            color: myColors[iterator]
          })
        })
      });
  console.log("retSytle",retSytle)
  }
  return [retSytle];

}

markLayer = new ol.layer.Vector({
  source: Msource,
  style: styleFn
});
  • a very useful and interesting answer, it works but I can't use it. When you plot a new Marker the color change for every plotted Marker, the same when you drag the feature (on drag change color every pixel you move the cursor) and delete it. I also need that the colors are not repeated – Sebastiano Jan 17 '18 at 9:12
  • You have varius options to customise the code above and achieve your goal. I have update my answer!!!! – pavlos Jan 17 '18 at 9:47
  • I created a Codepen codepen.io/sebalaini/pen/rpqYKL For some reason your Icon doesn't work, and I can't use my image because is on HTTP – Sebastiano Jan 17 '18 at 9:48
  • check this fiddle -->jsfiddle.net/p_tsagkis/o0kf4hcc – pavlos Jan 17 '18 at 9:49
  • I prefer the first one because I need to use an Icon, I can't use a point (it's a work project) I think I can make it work :) I have to take a look the event to prevent that pass from 1 to 3 as is doing now. – Sebastiano Jan 17 '18 at 11:24

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.