7

I want to display multiple polylines with different colors in openlayers. Can any one guide me regarding this.

I have done this in google maps. but i don't know how to do it in openlayers. I am newbie to Openlayers.

enter image description here

Henry Aloni
  • 248
  • 1
  • 2
  • 12
Ramesh Kotha
  • 331
  • 2
  • 6
  • 16

2 Answers2

13

Every feature has a style property which is null by default because it inherits the parent vector layer's style. But you can set the style for each feature:

DEMO

enter image description here

DEMO LINK

Code Example:

var myFirstLineStyle = OpenLayers.Util.applyDefaults(myFirstLineStyle, OpenLayers.Feature.Vector.style['default']);
myFirstLineStyle.strokeColor = "#ffffff";
myFirstLineStyle.strokeWidth = 8;
firstFeature.style = myFirstLineStyle;

var mySecondLineStyle = OpenLayers.Util.applyDefaults(mySecondLineStyle, OpenLayers.Feature.Vector.style['default']);
mySecondLineStyle.strokeColor = "#000000";
mySecondLineStyle.strokeWidth = 4;
secondFeature.style = mySecondLineStyle;

If you change the styles of the features after they've been added to the layer you must call layer.redraw().

More on Styling

CaptDragon
  • 13,313
  • 6
  • 55
  • 96
  • working like a charm... – Ramesh Kotha Mar 14 '12 at 15:36
  • i have updated my question with image can u look into it and guide me according to that. – Ramesh Kotha Mar 14 '12 at 18:41
  • I don't see a question. Regardless, i would recommend you post a separate question and reference this one if you like. Changing questions after they have been answered and dragging them on is not good etiquette. I'll be happy to help, just post a new question and revert this one back to how it was. – CaptDragon Mar 14 '12 at 18:47
1

Wow,

Instead of all this, u can configure your style with attribute replacement](http://docs.openlayers.org/library/feature_styling.html#attribute-replacement-syntax).

Then when a new feature is draw you have to intercept the featureAdded event and set the field to use in the replacement.

Claudio Santos
  • 365
  • 2
  • 7