Method drawLayer

src/staticmaps.js:250–298

(config)

  }

  async drawLayer(config) {
    if (!config || !config.tileUrl) {
      // Early return if we shouldn't draw a base layer
      console.log(1);
      return this.image.draw([]);
    }
    const xMin = Math.floor(this.centerX - (0.5 * this.width / this.tileSize));
    const yMin = Math.floor(this.centerY - (0.5 * this.height / this.tileSize));
    const xMax = Math.ceil(this.centerX + (0.5 * this.width / this.tileSize));
    const yMax = Math.ceil(this.centerY + (0.5 * this.height / this.tileSize));

    const result = [];

    for (let x = xMin; x < xMax; x++) {
      for (let y = yMin; y < yMax; y++) {
        // # x and y may have crossed the date line
        const maxTile = (2 ** this.zoom);
        const tileX = (x + maxTile) % maxTile;
        let tileY = (y + maxTile) % maxTile;
        if (this.reverseY) tileY = ((1 << this.zoom) - tileY) - 1;

        let tileUrl;
        if (config.tileUrl.includes('{quadkey}')) {
          const quadKey = geoutils.tileXYToQuadKey(tileX, tileY, this.zoom);
          tileUrl = config.tileUrl.replace('{quadkey}', quadKey);
        } else {
          tileUrl = config.tileUrl.replace('{z}', this.zoom).replace('{x}', tileX).replace('{y}', tileY);
        }

        if (config.tileSubdomains.length > 0) {
          // replace subdomain with random domain from tileSubdomains array
          tileUrl = tileUrl.replace('{s}', config.tileSubdomains[Math.floor(Math.random() * config.tileSubdomains.length)]);
        }

        result.push({
          url: tileUrl,
          box: [
            this.xToPx(x),
            this.yToPx(y),
            this.xToPx(x + 1),
            this.yToPx(y + 1),
          ],
        });
      }
    }

    const tiles = await this.getTiles(result);
    return this.image.draw(tiles.filter((v) => v.success).map((v) => v.tile));
  }

  async drawSVG(features, svgFunction) {
    if (!features.length) return;