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

Improve this question

1 Answer 1

Reset to default
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 });
Improve this answer
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 Commented Jan 17, 2018 at 9:12
  • You have varius options to customise the code above and achieve your goal. I have update my answer!!!! Commented Jan 17, 2018 at 9:47
  • check this fiddle -->jsfiddle.net/p_tsagkis/o0kf4hcc Commented 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. Commented 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 Commented Jan 17, 2018 at 11:34

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.