Databases
StackOverflow2013
Postsdbo
POPHP, geojson and openlayers
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPHP, geojson and openlayers
    text
    copied!<p>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:</p> <pre><code> `&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Welcome to my maps&lt;/title&gt; &lt;script src="http://www.openlayers.org/api/OpenLayers.js"&gt;&lt;/script&gt; &lt;script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" href="http://openlayers.org/api/theme/default/style.css" type="text/css" /&gt; &lt;style type="text/css"&gt; #bmap { width:83%; height:90%; border:2px solid black; position:absolute; top:10px; left:200px; } body{ background:yellow; } &lt;/style&gt; &lt;script&gt; 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 ); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;h3&gt;Flooding projection&lt;/h3&gt; &lt;form action="query5.php" method="POST" name="form"&gt; &lt;table cellpadding="0"&gt; &lt;tr&gt; &lt;td&gt; &lt;p&gt;Meters:&lt;/p&gt; &lt;/td&gt; &lt;td&gt; &lt;input name="sliderValue" id="sliderValue" type="Text" size="3"&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;input name="Submit" type="Submit" value="Submit"&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/form&gt; &lt;body onload="init();"&gt; &lt;div id="bmap"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; ` </code></pre> <p>And PHP query is looks like that:</p> <pre><code> `&lt;?php $db = pg_connect("host=localhost port=5432 dbname=firstSpatialDB user=postgres password=postgres"); $query = "SELECT* FROM dublin where alt&lt;='$_POST[sliderValue]'"; $result = pg_query($query); // Return route as GeoJSON $geojson = array( 'type' =&gt; 'FeatureCollection', 'features' =&gt; array() ); // Add edges to GeoJSON array while($row=pg_fetch_array($result)) { $feature = array( 'type' =&gt; 'Feature', 'geometry' =&gt; array( 'type' =&gt; 'Point', 'coordinates' =&gt; array($row[1], $row[2]) ), 'properties' =&gt; array( 'gid' =&gt; $row[0], 'alt' =&gt; $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); ?&gt; ` </code></pre> <p>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.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload