I want to get geo data as geojson for geojson tile layer requests in leaflet. I set up a geojson layer like this: https://github.com/glenrobertson/leaflet-tilelayer-geojson/

A php script answers requests and reads polygon geometries as geojson with ST_AsGeoJSON from postgreSQL.

Each request is mapped to those php file by an htaccess to geo.php.

I can see all requests in Google Chrome in developer tools on network tab. It looks like:

.../geo.php/12/2165/1356.json

with following response:

{"type":"MultiPolygon","coordinates":[[[[10.42523568,51.79692078],[10.4301414,51.80612562],[10.43525988,51.82238007],[10.4370354,51.82429887],[10.44274896,51.82353972],[10.43982036,51.81211476],[10.45402992,51.8089752],[10.45623312,51.80868153],[10.46150892,51.81088257],[10.46547216,51.81090543],[10.466424,51.8089905],[10.46608272,51.80111316],[10.45419408,51.79484178],[10.45109448,51.79397202],[10.4386608,51.79716873],[10.42523568,51.79692078]]],[[[10.4174298,51.83180235],[10.42399224,51.83617779],[10.42398648,51.83724978],[10.42081272,51.83961867],[10.4292108,51.84436419],[10.43632332,51.84550854],[10.4398488,51.84357831],[10.44083196,51.83844759],[10.425852,51.83020782],[10.42100424,51.83043291],[10.4174298,51.83180235]]]]}

Output is calculated by x,y and z as zoom. Those parameters are calculated and transformed by the following function:

function tileCoord2BBox($url)
{
    $parsed = explode("/",$url);

    $z = $parsed[3];
    $x = $parsed[4];
    $y = $parsed[5];

    $n = pow(2, $z);

    $lon1 = $x / $n * 360.0 - 180.0;
    $lat1 = rad2deg(atan(sinh(pi() * (1 - 2 * $y / $n))));

    $lon2 = ($x + 1) / $n * 360.0 - 180.0;
    $lat2 = rad2deg(atan(sinh(pi() * (1 - 2 * ($y + 1) / $n))));

    $bbox =  array();
    $bbox['lon1'] = $lon1;
    $bbox['lat1'] = $lat1;
    $bbox['lon2'] = $lon2;
    $bbox['lat2'] = $lat2;

    return $bbox;
}

Reference: http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames

Those return values are used in sql statement defininig a bounding box which selects those polygons which are in that tile. Postgres returns geojson for resulting geometry.

I tested the responses with http://geojsonlint.com/ They all looks great.

But on leaflet map, I only see a partial polygon on only one tile. When I zoom or pan over leaflet map then another tile shows up with partial polygon.

In tilelayer.geojson.js on line 187 Chrome reports many errors with following output:

Uncaught TypeError: Cannot read property 'type' of undefined TileLayer.GeoJSON.js:187 L.TileLayer.GeoJSON.L.TileLayer.Ajax.extend.addTileData TileLayer.GeoJSON.js:187 L.TileLayer.GeoJSON.L.TileLayer.Ajax.extend._tileLoaded TileLayer.GeoJSON.js:246 (anonymous function)

It is reported on this line: https://github.com/glenrobertson/leaflet-tilelayer-geojson/blob/master/TileLayer.GeoJSON.js#L187

I think my output from server is ok. I will see a result on one tile and http://geojsonlint.com/ shows correctly that those data is valid for all the other requests. Also all requests have valid output.

What am I doing wrong? Why is it still showing an error even though all responses seem to be valid? If someone has a complete example with client and server side code using a geojson layer and with postgres or similiar, I really would appreciate that.

I do not know how I can solve my problem.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.