2

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>

2 Answers 2

0

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>
6
  • It still doesn't work. The map itself works but after I put your script even the map does not display. I added my basic map script
    – pomdoe
    Commented Mar 6, 2020 at 13:39
  • There was an unwanted . the the code which would have caused an error. Also if you are opening the map in Czech republic I presume your points are not in Yemen but your feed is Lat/Lat and you will need to reverse the coordinates codepen.io/mike-000/pen/ExjbKVO
    – Mike
    Commented Mar 6, 2020 at 15:36
  • Already tried to switch the coords. It's not the problem. And as mentioned I need to get these coords from the PHP query. I can't put it into the code as in your example. I updated the code in edit2 and got error. Trying to find a way how to use variable from PHP result "var points = [[49.6635..." into the script. No success so far.
    – pomdoe
    Commented Mar 6, 2020 at 16:04
  • How about defining your points in javascript, e.g. var points = "<?php include 'pointquery.php';?>"; Otherwise I expect there is no point variable in your javascript. Then your php needs to throw back only the point string of course.
    – ulrich
    Commented Mar 6, 2020 at 16:08
  • Got error: points.forEach is not a function. Searched for it, tried Array.forEach and stuff but still something wrong in there.
    – pomdoe
    Commented Mar 6, 2020 at 16:53
0

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.

2
  • I know that. Already tried to switch many times but this is not the main problem I think. The map won't show at all after I add the script. Got error "SyntaxError: expected expression, got '<'" at the line with php include part.
    – pomdoe
    Commented Mar 6, 2020 at 14:33
  • Maybe your syntax is broken. Check this link: stackoverflow.com/questions/3345457/…
    – ulrich
    Commented Mar 6, 2020 at 14:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.