title: Images along on a line
body: <p>I am wondering how to place images on a line. For example, instead of a dotted or dashed line, I could include a symbol of a ship or a character (e.g. <code>|</code>) repeated along the line.</p>
  
  <p>My current code:</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>line = new ol.geom.LineString([[0, 0], [100, 100]]);
  lineStyle = new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'black',
      width: 5,
      lineDash: [10, 10]
    }),
  });
  lineFeature = new ol.Feature({
    geometry: line,
  });
  lineFeature.setStyle(lineStyle);
  </code></pre>
  
  <p>. . .</p>
  
  <pre class="lang-js prettyprint-override"><code>map = new ol.Map({
    layers: [
      new ol.layer.Vector({
        source: new ol.source.Vector({
          features: [
            lineFeature,
          ],
        }),
      })
    ],
  </code></pre>
  
  <p>. . . </p>
  
  <p><strong>EDIT 2:</strong>
  Here is what my line looks like:</p>
  
  <p><a href="http://i.stack.imgur.com/ZGKsr.png" rel="nofollow">(See image)</a></p>
  
  <p>Here is what it should look like:</p>
  
  <p><a href="http://i.stack.imgur.com/Qi2gL.png" rel="nofollow">(See image)</a></p>
  
  <p>It could be like this, or pictures of anchors.</p>
  
  <p><strong>EDIT:</strong>
  New style code (not working):</p>
  
  <pre class="lang-js prettyprint-override"><code>lineStyle = new ol.style.Style({
    radius: 10,
    images: './icon.png',
    stroke: new ol.style.Stroke({
      color: 'black',
      width: 5,
      lineDash: lineDash,
    }),
  });
  </code></pre>
  
  <p>Am I doing anything wrong?</p>
  
  <p><strong>EDIT 3:</strong></p>
  
  <h2>I have figured out how to do this:</h2>
  
  <ol>
  <li>Using Blender, add a mesh and add vertices on where the vertices are on your line.</li>
  <li>Convert the mesh to a curve (<kbd>Alt</kbd>-<kbd>C</kbd>).</li>
  <li>Add a plane and add your image to it as a texture.</li>
  <li>Scale the plane to the appropriate size relative to the line (<kbd>S</kbd>).</li>
  <li>Add an Array modifier to the plane with the image and choose <code>Fit Curve</code> for <code>Fit Type</code>.</li>
  <li>Set the <code>Curve:</code> to the name of the curve you created from the mesh.</li>
  <li>Set the Relative Offset’s first box to the space between the dots (relative to the size of the dots)</li>
  <li>Add a Curve modifier to the plane and choose the curve you created as the <code>Object:</code>.</li>
  </ol>
  
  <p><strong><em>Note: This may result in the images being deformed. If this occurs, follow these steps:</em></strong></p>
  
  <ol>
  <li>Duplicate the plane (<kbd>Alt</kbd>-<kbd>D</kbd>)</li>
  <li>Remove the Array and Curve modifiers from the duplicate.</li>
  <li>Parent the duplicate plane to the original plane.
  
  <ol>
  <li>Select the duplicate plane, then the original plane.</li>
  <li>Press <kbd>Ctrl</kbd>-<kbd>P</kbd>.</li>
  <li>Select <code>Object</code>.</li>
  </ol></li>
  <li><p>In the original plane, go to the Object buttons (orange cube) and select <code>Faces</code> under <code>Duplication</code>.</p>
  
  <p>This will place a copy of the plane at the center of each face.</p></li>
  </ol>