Custom TileJSON URL tokens

[lucaswoj]

Sometimes tile endpoints do not adhere to a standard and cannot be changed. For these situations, we should offer users the ability to define their own TileJSON URL tokens.

Strawman interface proposal:

mapboxgl.urlTokens.foo = function(map) {
    return map.getZoom() + 20;
};

map.addSource('foo', {
        "type": "vector",
        "tiles": ["https://example.com/{foo}/{x}/{y}"]
    }
})

[tmcw]

Personally I'd prefer this to work more like:

map.addCustomSource('foo', {
        "type": "vector",
        "tiles": function(coord) {
          return "some computation using coord";
        }
    }
})

I think TileJSON is great because it's declarative and self-contained. Adding the strawman imperative functionality to TileJSON will break this idea - it will no longer be purely declarative, and it will have dependencies, since a source relies on foo and foo is there for the source.

The proposal of addCustomSource would try to make this 'custom' level explicit on the API level: if you add a custom source, you disable getStyle(). You can't add custom sources with addSource or through a stylesheet.

Part of my rationale is that I think we can support the 95% set of URL tokens - right now we have xyz, quadkeys, and bounding boxes. I'm comfortable with the 5% set being supported in a restrictive fashion to protect TileJSON and the rest of the API surface from uncertainty.

[lucaswoj]

Sounds good @tmcw. That proposal aligns closely with our custom source API proposal (https://github.com/mapbox/mapbox-gl-js/projects/2) which is a slightly bigger lift.

Slightly more boilerplate demonstrating how the proposed custom source API would work:

map.addCustomSource('foo', {
        rasterSource: new mapboxgl.RasterSource(...),

        getRasterTileCoordURL(coord) {
            return "some computation using coord";
        }

        getRasterTile(url, callback) {
            return this.rasterSource.getRasterTile(url, callback);
        }
    }
})

Let's close this ticket for now and focus on doing the custom source API right.

[vikyrock]

I know this case is closed but I am getting "map.addCustomSource is not a function" error. Can you guys please put some more specific example on how to add the custom coordinate in the url.

I need to change the calculations for the y-axis. So, how can I customize this axis using mpabox gl js api??

map.addCustomSource('foo', {
"type": "vector",
"tiles": function(coord) {
return "some computation using coord";
}
})

imageUrl = 'http://localhost:1337/google_tiles/{z}/{x}/{foo}.png'

Where should I look up for the proper documentation on the custom tile url??