I am new to this and trying to explore leaflet and geojson a bit. Please help me with this.

This is my php page which I am using to fetch data from PostGIS. (the data opened successfully in the browser)

$sql = "SELECT *, (ST_AsGeoJSON(geom)) AS Geojson FROM
$rs = pg_query($dbconn4, $sql);
if (!$rs) {
   echo "An SQL error occured.\n";
$output    = '';
$rowOutput = '';

while ($row = pg_fetch_assoc($rs)) {
  $rowOutput = (strlen($rowOutput) > 0 ? ',' : '') . '{"type": "Feature", "geometry": ' . $row['geojson'] . ', "properties": {';
  $props = '';
  $id    = '';
  foreach ($row as $key => $val) {
      if ($key != "geojson") {
        $props .= (strlen($props) > 0 ? ',' : '') . '"' . $key . '":"' . escapeJsonString($val) . '"';
      if ($key == "id") {
        $id .= ',"id":"' . escapeJsonString($val) . '"';

  $rowOutput .= $props . '}';
  $rowOutput .= $id;
  $rowOutput .= '}';
  $output .= $rowOutput;
$output = '{ "type": "FeatureCollection", "features": [ ' . $output . ' ]}';
echo json_encode($output);

And now I try to extract this resultant data through Ajax as a geojson layer on a leaflet powered map.(ajax code follows)

  type: "GET",
  url: 'geojson_entry_postgis.php',
  data: data,
  dataType: 'json',
    success: function (data) {

  var geojson = new L.geoJson(data).addTo(map);

Also tried this way..

var geojson = L.geojson('geojson_entry_postgis.php?geotable=village_boundary_metro&geomfield=geom', 
    { style: {"color":"#ff7800","weight":2}, maxZoom: 6, onEachFeature:
       onEachFeature }).addTo(map);

However the data fetched from postgis does not display as geojson layer on the map as expected. Please let me know where I am going wrong and Am I following the right process??

P.S. Ajax function runs fine in other examples.

  • Welcome to GIS.SE. Can you please ensure that your code is properly formatted in future -- I have fixed it for. It's a bit hard to tell from this code. It might be a SRID issue, an error in the JSON. If you could produce the actual JSON and a working example, it would help people to answer. Feb 26, 2015 at 16:59
  • Have you checked the Network tab in your browser console? Check out your HTTP answer and see if it looks correct or if it displays any errors. Feb 26, 2015 at 17:03
  • 1
    A question, you are exporting geojson from postgis, but then doing some complicated iteration over that geojson. Can you explain what's going on there? And a suggestion, before loading the json to leaflet in the ajax call, make sure you are getting the response you expect. What does console.log(data) show on success?
    – toms
    Feb 26, 2015 at 21:12
  • As you suggested @JohnBarca I added the SRID part in the sql query, and thanks for the edit I will follow that from next time.. BritishSteel I dint get it, what you are pointing at. Http request for the php query runs fine and returns the expected data out of the postgis..
    – Chetan
    Feb 28, 2015 at 6:17
  • AND @toms I revisited the query result part and observed that its format does not match with a normal geojson output from a geoserver for the same data. So primarily I think I should make the query data in such a format that it looks like a perfect geojson to enter the ajax and I have to edit the php part for that. Thanks all, I will try doing that parallely If anyone has a better workaround for what I am trying to do please suggest.
    – Chetan
    Feb 28, 2015 at 6:19

1 Answer 1


If you get results from your php code, copy that json result into the tester on geojson.io or geojsonlint.com to check the format, once you confirm the data, take a close look to the "coordinates" values, sometimes PostGIS brings that data in a format that leaflet cant draw. If coordinates are alright, then someting in the code html code is the problem. One commom issue is the scope of variables if you create one inside a function, load the response data in it and try to manage that layer from a leaflet control, then it will not be show. In your code:

success: function (data) {
var geojson = new L.geoJson(data).addTo(map);

this will be add the layer but it will not be controled by L.LayerControl.

I`ll recommend:

success: function (data) {var geojson = new L.geoJson(data);}

and outside function ajax:

  • I am changing the whole code by adding some intermediate code which will take care of creating a valid geojson. still learning on it. Thanks for the answer and sorry for a late reply
    – Chetan
    Sep 24, 2015 at 6:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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