Loading points from an array given by PHP query from MySQL db to OL

Question

New to OpenLayers and JS in general. I have some coords stored as lat long, then PHP script which load these points from MySQL db and simply print it as follows:

var points = [[49.66356869941062, 16.993743907660246], [49.80203898920937, 17.41534424945712], [49.7259292108726, 17.078887950628996]];

Notice that these coordinates may change or there will be much more of them and so on. So I can't put them right into my code. I have tried to load it using this script in my HTML code but did not work.

            <script> 


              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([17.50, 49.25]),
              zoom: 8
            })
          });

            <?php include 'pointquery.php'; ?>
            var layer = new ol.layer.vector({
                source: new.ol.source.vector({

                })
            })

            var vectorSource = new.ol.vector({
                source: // here is probably my problem, how to define the source 
                        //which in my case the array given by pointquery.php
            });


            var vectorLayer = new ol.layer.vector({
                source: vectorSource
            });
            map.addLayer(vectorLayer);
            </script>

EDIT: added the map definiton

I have found similiar soutions e.g. here or here but none of these worked for me. Also, I do not want to do this stuff via GeoJSON. I want to do this as simply as possible.

EDIT2: Improved changed code with Reference Error: points is not defined (line points.forEach...)

<script>
    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([17.50, 49.25]),
                  zoom: 8
                })
              });


                "<?php include 'pointquery.php';?>"

                var vectorSource = new ol.source.Vector({

                });
                var projection = map.getView().getProjection();


                points.forEach(function(coordinate) {
                    vectorSource.addFeature(
                        new ol.Feature(
                            new ol.geom.Point(coordinate).transform('EPSG:4326', projection)
                        )
                    );
                });

                var vectorLayer = new ol.layer.Vector({
                    source: vectorSource
                });
                map.addLayer(vectorLayer);
</script>

Answer 1

You can loop through the array creating features and adding them to the source (you will need to define the map somewhere). If the coordinates are in Lon/Lat format:

        <script> 
        <?php include 'pointquery.php'; ?>

        var vectorSource = new ol.source.Vector();
        var projection = map.getView().getProjection();

        points.forEach(function(coordinate) {
            vectorSource.addFeature(
                new ol.Feature(
                    new ol.geom.Point(coordinate.reverse()).transform('EPSG:4326', projection)
                )
            );
        });

        var vectorLayer = new ol.layer.Vector({
            source: vectorSource
        });
        map.addLayer(vectorLayer);
        </script>

Answer 2

You are creating points in lat, lon order. OpenLayers expects points in lon, lat order. So if your script is correct, your points may not be where you expect them.

Otherwise, please state some error outputs that your script generates.

Also, your syntax might need to be corrected. Try

var points = "<?php include 'pointquery.php';?>";

where your php query only returns the point string.