title: Draw a line between two coordinates in OpenLayers 4
body: <p>I want to draw a line between two coordinates in OpenLayers (OL) 4. I have been looking for documentations on The Internet but most of them only for OL 2 (<a href="https://stackoverflow.com/questions/9765224/draw-line-between-two-points-using-openlayers">example1</a> , <a href="https://stackoverflow.com/questions/2735944/drawing-a-path-with-a-line-in-openlayers-using-javascript">example2</a>) or 3 (<a href="https://stackoverflow.com/questions/30888181/openlayers-3-simple-linestring-example">example3</a>).</p>
  
  <p>I took the <a href="https://openlayers.org/en/latest/doc/quickstart.html" rel="nofollow noreferrer" title="example">example</a> from the OL website and add my own code. In this case I am using LineString:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.4/ol.css" type="text/css"&gt;
              &lt;style&gt;
            .map {
              height: 400px;
              width: 100%;
            }
              &lt;/style&gt;
              &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.4/ol.js"/&gt;
              &lt;title&gt;OpenLayers example&lt;/title&gt;
          &lt;/head&gt;
          &lt;body&gt;
              &lt;h2&gt;My Map&lt;/h2&gt;
              &lt;div id="map" class="map"/&gt;
              &lt;script type="text/javascript"&gt;
                  var map = new ol.Map({
                      target: 'map',
                      layers: [
                        new ol.layer.Tile({
                          source: new ol.source.OSM()
                        })
                      ],
                      view: new ol.View({
                        center: ol.proj.fromLonLat([37.41, 8.82]),
                        zoom: 5
                      })
                  });
  
                  //example coordinates
                  var lonlat = [33.8, 8.4];
                  var location2 = [37.5, 8.0];
  
                  //create the line's style
                  var linieStyle = [
                              // linestring
                              new ol.style.Style({
                                stroke: new ol.style.Stroke({
                                  color: '#d12710',
                                  width: 2
                                })
                              })
                            ];
  
                  //create the line       
                  var linie = new ol.layer.Vector({
                          source: new ol.source.Vector({
                          features: [new ol.Feature({
                              geometry: new ol.geom.LineString(lonlat, location2),
                              name: 'Line',
                          })]
                      })
                  });
  
                  //set the style and add to layer
                  linie.setStyle(linieStyle);
                  map.addLayer(linie);
  
              &lt;/script&gt;
          &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>However, the line does not appear on the map.
  This is my <a href="https://jsfiddle.net/50zwv8bu/17/" rel="nofollow noreferrer">JS Fiddle</a>. What's missing on my code?</p>