OpenLayers: Can't add a linestring of coordinates to a map

Question

I am having trouble showing a linestring based on an existing coordinate list and would appreciate some help. Below is my code, which shows an OpenLayers5 map, but no linestring overlaid.

I've read a bunch of different of different threads (OpenLayers 3: simple LineString example) and API docs, but I can't work out what I'm missing.

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">

  <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
  <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
</head>

<body>
  <div id="map" class="map"></div>

  <script type="text/javascript">   
    var view = new ol.View({
      center: ol.proj.fromLonLat([10,50]),
      zoom: 14
    })

    //Dummy coords
    var coordinates = [
      [10, 50],
      [11, 51],
      [12, 55]
    ];

    var layerLines = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [new ol.Feature({
                geometry: new ol.geom.LineString(coordinates),
                name: 'Line'
            })]
        }),
        style : new ol.style.Style({
          stroke : new ol.style.Stroke({ 
            strokeColor: '#ff0000',
            strokeWidth: 5                      
          })
        })
    });

    var map = new ol.Map({
      target: 'map',
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      view: view
    });

    map.addLayer(layerLines);

    </script>

</body>
</html>

JSFiddle link

georg · Accepted Answer · 2019-04-06T17:23:59.100

Two mistakes. First, it's width and color, not strokeWidth/Color. Second, you reproject the center from lon/lat to WebMercator, but forgot to do the same with the line coords - so that your line is actually somewhere in the Gulf of Guinea (10/50 meters from the 0,0 point).

Here's the corrected version.

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css"
          type="text/css">
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
</head>

<body>
<div id="map" class="map"></div>

<script>
    var view = new ol.View({
        center: ol.proj.fromLonLat([10, 50]),
        zoom: 14
    })

    //Dummy coords
    var coordinates = [
        ol.proj.fromLonLat([10, 50]),
        ol.proj.fromLonLat([11, 51]),
        ol.proj.fromLonLat([12, 55])
    ];

    var layerLines = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [new ol.Feature({
                geometry: new ol.geom.LineString(coordinates),
                name: 'Line'
            })]
        }),
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: '#ff0000',
                width: 3
            })
        })
    });

    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        view: view
    });

    map.addLayer(layerLines);
</script>

</body>
</html>

You can also keep the coordinates in Lon/Lat format and transform the geometry `geometry: new ol.geom.LineString(coordinates).transform('EPSG:4326', view.getProjection()),` — Mike, Apr 06 '19 at 16:15

OpenLayers: Can't add a linestring of coordinates to a map

1 Answers1