Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I've produced with mapnik my own tiles with EPSG:31256 on a shapefile. I've structured the tiles in a OSM-like tree: zoom/x/y.png, with zoom from 0 to 2 and, x y starting from 1:

tiles
  ├── 0
  │   └── 1
  │       └── 1.png
  ├── 1
  │   ├── 2
  │   │   ├── 2.png
  │   │   └── 3.png
  │   └── 3
  │       ├── 2.png
  │       └── 3.png
  └── 2
      ├── 4
      │   ├── 4.png
      │   ├── 5.png
      │   ├── 6.png
      │   └── 7.png
      ├── 5
      │   ├── 4.png
      │   ├── 5.png
      │   ├── 6.png
      │   └── 7.png
      ├── 6
      │   ├── 4.png
      │   ├── 5.png
      │   ├── 6.png
      │   └── 7.png
      └── 7
          ├── 4.png
          ├── 5.png
          ├── 6.png
          └── 7.png

Tiles are 256x256 pixels and the tile at zoom 0 covers the entire shape, which is 7500x7500 meters (I used this dimension to set up scales). From zoom 1, tiles are splitted in 2 and so on. Map div element is 512x512 pixels. To display tiles, I would like to use OpenLayers XYZ layer, with my own get_url function, as described here:

function create_map () {
    Proj4js.defs["EPSG:31256"] = "+proj=tmerc +lat_0=0 +lon_0=16.33333333333333 +k=1 +x_0=0 +y_0=-5000000 +ellps=bessel +towgs84=577.326,90.129,463.919,5.137,1.474,5.297,2.4232 +units=m +no_defs "

    var proj = new OpenLayers.Projection("EPSG:31256");
    var bounds = OpenLayers.Bounds(5000,216250,12500,223750);
    var minZoom = 0;
    var maxZoom = 2;

    var map = new OpenLayers.Map({
        div: "map",
        allOverlays: true,
        projection: proj,
        maxExtent: bounds,
        allowSelection: true,
        scales: [7500, 3750, 1875],
        units: 'm',
        controls: [new OpenLayers.Control.PanZoomBar(),
                   new OpenLayers.Control.Navigation()]
    });

    var layer = new OpenLayers.Layer.XYZ(
        "my_tile_layer",
         '/tiles/',
        {
            maxZoomLevel: maxZoom,
            minZoomLevel: minZoom,
            getURL: get_my_url
        }
    );
    map.addLayer(layer);

    var center = bounds.getCenterLonLat();
    map.setCenter(center, minZoom);
};

function get_my_url (bounds) {
    var res = this.map.getResolution();
    // Note, I've added +1 because I do not have x and y coordinates equal to 0.
    var x = Math.round ((bounds.left - this.maxExtent.left) / (res * this.tileSize.w)+1);
    var y = Math.round ((this.maxExtent.top - bounds.top) / (res * this.tileSize.h)+1);
    var z = this.map.getZoom();

    var path = z + "/" + x + "/" + y + ".png";
    var url = this.url;
    if (url instanceof Array) {
        url = this.selectUrl(path, url);
    }
    return url + path;
}

My problem is that tile retrieval is wrong: at zoom 0, I correctly load 0/1/1.png, but it is positioned at the extreme right of the map: I had to pan it to make it visible. I do not understand why, because my center variable is correctly set to (8750, 220000). If I zoom in I see nothing and I get not existent tile names such as 1/1/1.png. Could you please help me? Thanks in advance.

share|improve this question
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.