Using quadkey

[baziz]

Hi - how should I use quadkeys when instantiating a < Map /> ?

[PaulLeCam]

What are quadkeys?
The <Map /> component passes its props as options to the Leaflet constructor, so any option supported by Leaflet should work the same way.

[baziz]

Quadkeys are tile references that are encapsulated in one string, in contrast to the more common tile references that happen with x / y / zoom https://msdn.microsoft.com/en-us/library/bb259689.aspx

In order to accommodate that type of URL, I extended your TileLayer component

class CustomTileLayer extends TileLayer {

  componentWillMount() {

    super.componentWillMount();
    const { map, url, ...props } = this.props;
    this.leafletElement.__proto__.getTileUrl = function (tilePoint) {

                this._adjustTilePoint(tilePoint);
                var myUrl = this._url.replace(/{s}/, 0).replace(/{q}/, 
                this._quadKey(tilePoint.x, tilePoint.y, this._getZoomForUrl()));
                return myUrl;

                };

    this.leafletElement.__proto__._quadKey = function (x, y, z) {

                    var quadKey = [];
                    for (var i = z; i > 0; i--) {
                        var digit = '0';
                        var mask = 1 << (i - 1);
                        if ((x & mask) != 0) {
                            digit++;
                        }
                        if ((y & mask) != 0) {
                            digit++;
                            digit++;
                        }
                        quadKey.push(digit);
                    }
                    return quadKey.join('');
                };
  } 

with the TileLayer component containing a url that has {q} in it and relabeled "CustomTileLayer"

[texas697]

@baziz
I need to use this can you show me how you are using this pplease?

[baziz]

@texas697 Been a couple years man - I'm sorry, I wish I could be of more help, but I think the code should be enough to get you going.