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

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Using quadkey about react-leaflet HOT 4 CLOSED

paullecam commented on May 20, 2024

Using quadkey

from react-leaflet.

Comments (4)

PaulLeCam commented on May 20, 2024

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.

from react-leaflet.

baziz commented on May 20, 2024

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('');
                };
  }