CODEWITHSUNDEEP
phppostgresqlopenlayersgeojson
user1351769
user1351769

Reputation: 11

PHP, geojson and openlayers

I stuck completely going through scripting with openlayers. I have database in postgis with coordinates and height values and even geometry column for each row. I create form with submit button to retrieve data only according to entered value by the user. When I press the submit button the PHP is getting correct data and transform into JSON format which I have displayed as result. Somebody know how to load these results into openlayers layer and display those points? Thats the main page:

    `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome to my maps</title>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<link rel="stylesheet" href="http://openlayers.org/api/theme/default/style.css" type="text/css" />


        <style type="text/css">
                       #bmap {
                          width:83%;
                          height:90%;
                          border:2px solid black;


                          position:absolute;
                          top:10px;
                          left:200px;
                          }
                          body{
                          background:yellow;
                          }
            </style>

             <script>

                    var mapoptions = {
                                theme: null,
                                maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                                maxResolution: 156543.0399,
                                numZoomLevels: 20,
                                units: 'm',
                                projection: new OpenLayers.Projection("EPSG:900913"),
                                displayProjection: new OpenLayers.Projection("EPSG:4326"),

                     controls:[
                                  new OpenLayers.Control.PanZoomBar(),
                                  new OpenLayers.Control.Navigation(),
                                  new OpenLayers.Control.LayerSwitcher(),
                                  new OpenLayers.Control.MousePosition(),
                                  new OpenLayers.Control.ScaleLine(),
                                  new OpenLayers.Control.Scale()
                              ]
                    };



                          function init() {
                            map = new OpenLayers.Map("bmap", mapoptions);

                            var mapnik = new OpenLayers.Layer.OSM("OSM Mapnik");
                            map.addLayer(mapnik);

                            var cyclemap = new OpenLayers.Layer.OSM("OSM CycleMap");
                            map.addLayer(cyclemap);



                             var wmslayer = new OpenLayers.Layer.WMS(
                                        "Altitude points",
                                        "http://192.168.56.101:8080/geoserver/wms",
                                        {'layers': 'dublin_flooding:dublin', 'format':'image/png', 'transparent':'true'},
                                        {'opacity': 1.0, 'isBaseLayer': false, 'visibility': false}
                                   );
                              map.addLayer(wmslayer);

var veclayer=new OpenLayers.Layer.Vector("geojson",{

                    strategies: [new OpenLayers.Strategy.Fixed()],
                    protocol: new OpenLayers.Protocol.HTTP({
            url: "query5.php",
                        format: new OpenLayers.Format.GeoJSON(),
                    internalProjection: new OpenLayers.Projection("EPSG:900913"),
                          externalProjection: new OpenLayers.Projection("EPSG:4326")
                    }),

                });
                map.addLayer(veclayer);




                            map.setCenter(new OpenLayers.LonLat(-6.26555,53.34590) // Center of the map
                              .transform(
                                new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                                new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
                              ), 12 // Zoom level
                            );
                          }
            </script>


</head>

<body>
<h3>Flooding projection</h3>
<form action="query5.php" method="POST" name="form">


        <table cellpadding="0">
        <tr>
        <td>
        <p>Meters:</p>
        </td>
        <td>
        <input name="sliderValue" id="sliderValue" type="Text" size="3">
        </td>
        </tr>
        <tr>
        <td>
<input name="Submit" type="Submit" value="Submit">
</td>
</tr>
</table>

</form>
<body onload="init();">
 <div id="bmap"></div>
</body>
</html>
`

And PHP query is looks like that:

    `<?php
$db = pg_connect("host=localhost port=5432 dbname=firstSpatialDB user=postgres password=postgres");
$query = "SELECT* FROM dublin where alt<='$_POST[sliderValue]'";
        $result = pg_query($query);
// Return route as GeoJSON
   $geojson = array(
       'type'      => 'FeatureCollection',
       'features'  => array()
    ); 
   // Add edges to GeoJSON array
    while($row=pg_fetch_array($result)) {  
  $feature = array(
          'type' => 'Feature', 
          'geometry' => array(
             'type' => 'Point',
             'coordinates' => array($row[1], $row[2])

          ),
          'properties' => array(
            'gid' => $row[0],
            'alt' => $row[3]
           )
       );
       // Add feature array to feature collection array
       array_push($geojson['features'], $feature);
    }
    pg_close($dbconn);
  // Return routing result
    header("Content-Type:application/json",true);
    //header("Location:map.html");
    echo json_encode($geojson);
?> `

In my view that should be working, but is not at all. Maybe somebody has idea what is wrong. Thanks for any suggestions, as I really have enough my own.

Upvotes: 1

Views: 9526

Answers (5)

Nathalie Guimar&#227;es
Nathalie Guimar&#227;es

Reputation: 189

You can use PHP

<?php
    ini_set('display_errors', 1);

    # Connect to PostgreSQL database
    $conn = pg_connect("dbname='gisdata' user='username' 
    password='password' host='localhost'") 
    or die ("Could not connect to server\n");

    $result = pg_fetch_all(pg_query($conn, "SELECT row_to_json(fc)
        FROM ( SELECT 'FeatureCollection' As type, 
        array_to_json(array_agg(f)) As features
        FROM (SELECT 'Feature' As type
        , ST_AsGeoJSON(lg.geom, 4)::json As geometry
        , row_to_json((SELECT l FROM (SELECT id, designacao) As l
          )) As properties
        FROM hidrog As lg ) As f ) As fc;"));

    if (!$result) {
        echo "An error occurred.\n";
        exit;
    }

    #echo json_encode($result, JSON_NUMERIC_CHECK);
    $json_data = json_encode($result);
    file_put_contents('test.json', $json_data);

    $jsonString = file_get_contents('test.json');
    $json_new = substr($jsonString, 17,-2);
    $json_new = str_ireplace('\"', '"', $json_new);
    echo $json_new;

    file_put_contents('test_new.json', $json_new);
?>

Upvotes: 0

geom
geom

Reputation: 435

I use PostGis together with Openlayers 3/4 without GeoServer. The way I choose is to get geojson from a Postgis-database via a function I call, which returns the data and styles it acording to my settings.

In Javascript I define the data and styling => Javascript-function calls a php-script via GET to retrive data from Postgis => function styles the data to render in Openlayers 3. The whole sripts can be seen in Is there an easy way to use Postgis-geojson in Openlayers 3?

Be aware, that the proposed solution is not secure, because GET-strings could be manipulated (sql-injections). I use a call via https and the serverside php-script checks if a SESSION is set. So the scripts cannot be executed without beeing logged in. We use this in a very small group, but it might be not a good idea to use it in an environment, where many poeple are accessing the data.

So improvments in security would be good.

Upvotes: 0

Ben Ayoub
Ben Ayoub

Reputation: 31

you can look at this example postgis to geojson php clarifying how to use a php script the get geojson data through postgis database.

and as you did in your geojson layer url, u pass the url of your php script... hope it helps;

Upvotes: 0

Mike
Mike

Reputation: 11

I just tried your code (chri_chri) .

I tried to load an images but seem to be wrong... Im also now to openlayers

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Floorplan test</title>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<link rel="stylesheet" href="http://openlayers.org/api/theme/default/style.css"     type="text/css" />


        <style type="text/css">
                       #bmap {
                          width:83%;
                          height:90%;
                          border:2px solid black;


                          position:absolute;
                          top:10px;
                          left:200px;
                          }
                          body{
                          background:yellow;
                          }
            </style>

             <script>

                   var map;

        function init(){
            map = new OpenLayers.Map('map');
            var options = {numZoomLevels: 3}
             var floorplan = new OpenLayers.Layer.Image(
            'Floorplan Map',
            'png_1.jpg',
            new OpenLayers.Bounds(-300, -188.759, 300, 188.759),
            new OpenLayers.Size(580, 288),
            options
        );
            map.addLayer(floorplan);
           //Create a Format object
    var vector_format = new OpenLayers.Format.GeoJSON({}); 

    //Create a Protocol object using the format object just created
    var vector_protocol = new OpenLayers.Protocol.HTTP({
        url: 'ex5_data.json',
        format: vector_format
    });

    //Create an array of strategy objects
    var vector_strategies = [new OpenLayers.Strategy.Fixed()];

    //Create a vector layer that contains a Format, Protocol, and Strategy class
    var vector_layer = new OpenLayers.Layer.Vector('More Advanced Vector Layer',{    
        protocol: vector_protocol,
        strategies: vector_strategies 
    });

    map.addLayer(vector_layer);

    if(!map.getCenter()){
        map.zoomToMaxExtent();
    }
        }
            </script>


</head>

<body>
<h3>Floorplan</h3>

<body onload="init();">
 <div id="bmap"></div>
</body>
</html>

What im starting up with is to load a floorplan map and try to scale it.

Upvotes: 1

chri_chri
chri_chri

Reputation: 310

I have never used php, so I don't know if that's where your problem is. Compare your code to this, it worked for me, maybe your error is in the javascript.

 var map;

        function init(){
            map = new OpenLayers.Map('map');
            var options = {numZoomLevels: 3}
             var floorplan = new OpenLayers.Layer.Image(
            'Floorplan Map',
            '../../temp_photos/sample-floor-plan.jpg',
            new OpenLayers.Bounds(-300, -188.759, 300, 188.759),
            new OpenLayers.Size(580, 288),
            options
        );
            map.addLayer(floorplan);
           //Create a Format object
    var vector_format = new OpenLayers.Format.GeoJSON({}); 

    //Create a Protocol object using the format object just created
    var vector_protocol = new OpenLayers.Protocol.HTTP({
        url: 'ex5_data.json',
        format: vector_format
    });

    //Create an array of strategy objects
    var vector_strategies = [new OpenLayers.Strategy.Fixed()];

    //Create a vector layer that contains a Format, Protocol, and Strategy class
    var vector_layer = new OpenLayers.Layer.Vector('More Advanced Vector Layer',{
        protocol: vector_protocol,
        strategies: vector_strategies 
    });

    map.addLayer(vector_layer);

    if(!map.getCenter()){
        map.zoomToMaxExtent();
    }
        }

Upvotes: 1

Related Questions