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.
