PHP, geojson and openlayers

Question

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.

chri_chri · Answer 1 · 2012-05-24 11:24:15Z

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();
    }
        }

i've been having some trouble myself, when trying to display data from the server on a world map, (OpenStreetMaps), instead of an image map. I think I've screwed up the projections, you might want to fool around with that as well — chri_chri, May 30 '12 at 12:16

Mike · Answer 2 · 2012-06-13 08:24:27Z

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.

asked	1 year ago
viewed	1907 times
active	1 year ago

PHP, geojson and openlayers

2 Answers

Your Answer

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

PHP, geojson and openlayers

2 Answers

Your Answer

Sign up or login

Post as a guest

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

Related