trying to use mbtiles as a OpenLayers.Layer.TMS

Question

I am modifying the opengeo MapBoxSource plugin. The plugin is able to render MapBox Mbtiles into a openlayers TMS layer. I am modifying the plugin so that it will render my own tilesets served from tilestream. However I am not able to figure out what tile origin setting to use.

The original working code:

    createStore: function() {

    var options = {
        projection: "EPSG:900913",
        numZoomLevels: 9,
        serverResolutions: [
            156543.03390625, 78271.516953125, 39135.7584765625,
            19567.87923828125, 9783.939619140625, 4891.9698095703125,
            2445.9849047851562, 1222.9924523925781, 611.4962261962891,
            305.74811309814453, 152.87405654907226, 76.43702827453613,
            38.218514137268066, 19.109257068634033, 9.554628534317017,
            4.777314267158508, 2.388657133579254, 1.194328566789627,
            0.5971642833948135
        ],
        buffer: 1
    };

    var configs = [
        {name: "blue-marble-topo-bathy-jul", numZoomLevels: 9}
    ];

    var len = configs.length;
    var layers = new Array(len);
    var config;
    for (var i=0; i<len; ++i) {
        config = configs[i];
        layers[i] = new OpenLayers.Layer.TMS(
            this[OpenLayers.String.camelize(config.name) + "Title"],
            [
                "http://b.tiles.mapbox.com/mapbox/",
            ],
            OpenLayers.Util.applyDefaults({
                attribution: "<a href='http://mapbox.com'>MapBox</a> | <a href='http://mapbox.com/tos'>Terms of Service</a>",
                type: "png",
                tileOrigin: new OpenLayers.LonLat(-128 * 156543.03390625, -128 * 156543.03390625),
                layername: config.name,
                serviceVersion: '1.0.0',
                "abstract": '<div class="thumb-mapbox thumb-mapbox-'+config.name+'"></div>',
                numZoomLevels: config.numZoomLevels
            }, options)
        );
    }

    this.store = ...

I am then replacing the var configs with my own layer info, I am changing mapbox.com with my tilestream server address, and serviceVersion with 'v2'. It nearly works, but the tiles are not lining up. I have tried a number of different tileOrigin options without success. It is not clear to me why they are using -128 * 156543.03390625, -128 * 156543.03390625 instead of 20037504?

Answer 1

Ok, I Finally found the solution. I am serving the tilesets with tilestream, which uses V2, Openlayers.Layer.TMS can only support tiles being server from version 1.0.0. So, I need to instead use OpenLayers.Layer.XYZ as it supports tiles servered with v2. My code ended up like so:

layers[i] = new OpenLayers.Layer.XYZ(

                "hazard_map_points_world",
                [
                "http://<myTileStreamServer>:8000/v2/hazard_map_points_world/${z}/${x}/${y}.png"
                ],
                {
        attribution: "Tiles &copy; <a href='http://mapbox.com/'>MapBox</a>",
        sphericalMercator: true,
        wrapDateLine: true,
        numZoomLevels: 7,
        serverResolutions: [
                156543.03390625, 78271.516953125, 39135.7584765625,
                19567.87923828125, 9783.939619140625, 4891.9698095703125,
                2445.9849047851562, 1222.9924523925781, 611.4962261962891,
                305.74811309814453, 152.87405654907226, 76.43702827453613,
                38.218514137268066, 19.109257068634033, 9.554628534317017,
                4.777314267158508, 2.388657133579254, 1.194328566789627,
                0.5971642833948135
            ],
    }