OpenLayers line string not displaying

Question

I am trying to show a line on map using OpenLayers 3. Here is my code so far:

<script type="text/javascript">
    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url: 'http://{a-d}.freemap.sk/T/{z}/{x}/{y}.png'
                })
            })
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([20.4511,48.91098]),
            zoom: 12
        })
    });
    var points = new Array(
        new ol.geom.Point(20.4511, 48.91098),
        new ol.geom.Point(21.4511, 46.91098)
    )
    var feature = new ol.Feature({
        geometry: new ol.geom.LineString(points)
    });

    feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');
    var vectorSource= new ol.source.Vector({
        features: [feature ]
    });
    var vectorLayer = new ol.layer.Vector({
        source: vectorSource
    });
    map.addLayer(vectorLayer);
</script>

However I cannot get it working. I only see my map which is loaded from source but I do not see any vector line. I have set strokeWidth to 50 to be sure that I will see it but it is not working. I think that there may be some problem with projection.

Any ideas how to get this working?

Answer 1

ol.geom.LineString accepts an array of ol.Coordinate.

Declare your feature like so:

var feature = new ol.Feature({
      geometry: new ol.geom.LineString([
      [20.4511, 48.91098],
      [21.4511, 46.91098]
]);