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 Answer 1

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
});
9
  • 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
    – DevWizard
    Jan 17, 2018 at 9:12
  • You have varius options to customise the code above and achieve your goal. I have update my answer!!!!
    – pavlos
    Jan 17, 2018 at 9:47
  • check this fiddle -->jsfiddle.net/p_tsagkis/o0kf4hcc
    – pavlos
    Jan 17, 2018 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.
    – DevWizard
    Jan 17, 2018 at 11:24
  • Icons should not be a problem if you include them within your deploy files. I am using a point just for demonstrating. My updated code solves your problems 1)the color change for every plotted Marker 2) I also need that the colors are not repeated
    – pavlos
    Jan 17, 2018 at 11:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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