0

I'm attempting to use TileStache as a server for a UTFGrid created from a shapefile in WGS 84, but the Leaflet UTFgrid plugin doesn't seem to be able to use the data. There are no javascript errors or server errors, and when I directly request the json files, they seem to be in order, though there are strange characters () which might be causing problems. When using a similar setup with the shapefile converted to spherical mercator, everything works fine, except for the output being shifted too much to be usable.

I'm using the newest version of TileStache, Mapnik 3.0.12, the version of Leaflet included with Mapbox JS 2.4.0, and the latest version of the UTFGrid plugin.

My TileStache CFG:

{
 "cache":
 {
  "name": "Test",
  "path": "/tmp/stache",
  "umask": "0000"
 },
 "layers": 
 {
  "test":
  {
    "provider": {"name": "mapnik grid", "mapfile": "test.xml", "layers":[[0,["ZCTA5CE10"]]]},
    "projection": "WGS84",
    "allowed origin": "*"
  } 
 }
}

My Mapnik XML:

<?xml version="1.0"?>
<!DOCTYPE Map>
<Map srs="+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs">
<Style name="style">
    <Rule>
        <PolygonSymbolizer />
    </Rule>
</Style>
<Layer name="layer" srs="+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs">
    <StyleName>style</StyleName>
    <Datasource>
        <Parameter name="type">shape</Parameter>
        <Parameter name="file">/home/zip/test2.shp</Parameter>
    </Datasource>
</Layer>
</Map>

My HTML:

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="crossorigin="anonymous"></script>
<script src='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' />
<script src="leaflet.utfgrid.js"></script>
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>

<div id='map'></div>
<script>
var map = L.map('map').setView([38.97416, -95.23252], 3);
var layer = L.mapbox.styleLayer('mapbox://styles/mapbox/satellite-streets-v9',{
    maxNativeZoom: 18, maxZoom: 22
  }).addTo(map);
var grid = new L.UtfGrid('http://72.14.185.64:8000/bob/{z}/{x}/{y}.json?callback={cb}');
grid.on('mouseover', function (e) {
        console.log(e.data);
    });
map.addLayer(grid);
</script>
</body>
</html>
0

I found a workaround by using a spherical mercator projection that was similar enough to EPSG:4326 for my needs (EPSG:3857 if you're wondering). There does seem to either be some problem with the WSG84 module in TileStache or something I'm missing, because it doesn't seem to work properly, in this case and in others I've encountered.

| improve this answer | |

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.