Need black and white dotted line on Map

Question

Currently I am getting only a white dotted line in my map using the code below:

style: new ol.style.Style({
                                    stroke: new ol.style.Stroke({
                                      color:[255, 255, 255, 1.0],
                                      opacity: 1,
                                      width: 4,
                                      lineDash: [4, 4]
                                      }),
                                      fill: new ol.style.Stroke ({
                                          color: [155, 155, 155, 0.4]
                                      })

})

But my requirement is to get black and white dotted lines in the form black white black white...

ThomasG77 · Accepted Answer

You can set more than one style for a layer and overlay them

Go to http://openlayers.org/en/v4.6.5/examples/vector-layer.html, open the console and execute the following

// Array of styles with continuous black line below (first style)
var newstyle = [
  new ol.style.Style({
    stroke: new ol.style.Stroke({
      color:[0, 0, 0, 1.0],
      opacity: 1,
      width: 4
    })
    // Commented to only see the lines
    //,fill: new ol.style.Stroke ({
    //  color: [155, 155, 155, 0.4]
    //})
  }),
  // Dash white lines (second style, on the top)
  new ol.style.Style({
    stroke: new ol.style.Stroke({
      color:[255, 255, 255, 1.0],
      opacity: 1,
      width: 4,
      lineDash: [10, 20, 10, 20]
    })
  })
];

vectorLayer.setStyle(newstyle);

To grasp dash pattern (for white lines), you can go to http://phrogz.net/tmp/canvas_dashed_line.html (link borrowed from answer Dashed lines in OL3?)

PS: contrary to @JGH other answer, I didn't bother with offset and instead choose to add dash lines on top of a continuous line. Both approaches are valid, just a question of preferences.

JGH · Answer

You can make use of the lineDashOffset parameter, and to set two styles: one in white with no offset, one in black with an offset. You may want to adjust the offset and the dash pattern as the line width interferes with it:

style:  [
  new ol.style.Style({
        stroke: new ol.style.Stroke({
        color:[0, 0, 0, 1.0],
        opacity: 1,
        width: 4,
        lineDash: [4, 8]
        })
   }),
  new ol.style.Style({
        stroke: new ol.style.Stroke({
        color:[255, 255, 255, 1.0],
        opacity: 1,
        width: 4,
        lineDash: [4, 8],
        lineDashOffset:4
      }) 
  })
]

Karina Telles · Answer

It seems that the first parameter is the size of the line and the second is the space between them, so you can try:
lineDash: [1, 16]
Since "1" will be a really small line.

Need black and white dotted line on Map

3 Answers

Add your own answers!

Ask a Question