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

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.