Jacobian Jacobian - 11 months ago 184
Javascript Question

Multiple text labels along a linestring feature

Is it possible in

OpenLayers 3
to create a text label which clones multiple times along a linestring feature, depending on a scale? Something like:

enter image description here

enter image description here

Here you can see, that when we change scale label "IX Corps Blvd" appears twice. How can we implement this?


You can achieve this with style function. My code sample is about making arrows to line string (slightly different case), but I have commented parts necessary to be changed (at least):

var raster = new ol.layer.Tile({
    source: new ol.source.OSM()

var source = new ol.source.Vector();

var styleFunction = function(feature) {
    var geometry = feature.getGeometry();
    var styles = [
      // linestring
      new ol.style.Style({
        stroke: new ol.style.Stroke({   // apply street style here
          color: '#ffcc33',
          width: 2

    geometry.forEachSegment(function(start, end) {
      var dx = end[0] - start[0];
      var dy = end[1] - start[1];
      var rotation = Math.atan2(dy, dx);
      // arrows
      styles.push(new ol.style.Style({
        geometry: new ol.geom.Point(end),
        image: new ol.style.Icon({    // Use here label, not icon.
          src: 'http://openlayers.org/en/v3.17.1/examples/data/arrow.png',
          anchor: [0.75, 0.5],
          rotateWithView: false,
          rotation: -rotation

    return styles;

var vector = new ol.layer.Vector({
     source: source,
     style: styleFunction

  map.addInteraction(new ol.interaction.Draw({
    source: source,
    type: /** @type {ol.geom.GeometryType} */ ('LineString')

Some more effort is needed to place titles in correct placements. I left this answer like this to serve a solid starting point for building your feature.

My source:

[1] http://openlayers.org/en/master/examples/line-arrows.html