class WebGLVectorTileLayer extends VectorTile {
  createRenderer() {
    return new WebGLVectorTileLayerRenderer(this, {
      className: this.getClassName(),
      style:  [{
        'stroke-pattern-src': 'bar.png',
        'stroke-width': 5,
        'stroke-offset': 0,
        'stroke-pattern-start-offset':20,
        'stroke-pattern-spacing': 40,
      },
      {
        'stroke-pattern-src': 'circle1.png',
        'stroke-width': 5,
        'stroke-offset': 0,
        'stroke-pattern-start-offset':17, 
        'stroke-pattern-spacing': 80,
      },
      {
        'stroke-pattern-src': 'circle2.png',
        'stroke-width': 5,
        'stroke-offset': 0,
        'stroke-pattern-start-offset':23,
        'stroke-pattern-spacing': 80,
      }],
    });
  }
}

    let startOffsetExpression = '0.';
    if ('stroke-pattern-start-offset' in style) {
      startOffsetExpression = expressionToGlsl(
        fragContext,
        style['stroke-pattern-start-offset'],
        NumberType,
      );
    }
    fragContext.functions['sampleStrokePattern'] =
    `vec4 sampleStrokePattern(sampler2D texture, vec2 textureSize, vec2 textureOffset, vec2 sampleSize, float spacingPx, float startOffsetPx, float currentLengthPx, float currentRadiusRatio, float lineWidth) {
  float currentLengthScaled = currentLengthPx * sampleSize.y / lineWidth;
  float spacingScaled = spacingPx * sampleSize.y / lineWidth;
  float uCoordPx = mod(currentLengthScaled + startOffsetPx, spacingScaled);
  // make sure that we're not sampling too close to the borders to avoid interpolation with outside pixels
  uCoordPx = clamp(uCoordPx, 0.5, sampleSize.x - 0.5);
  if (uCoordPx > sampleSize.x - 1.0) {
    return vec4(0.0);
  }  
  float vCoordPx = (0.5 - currentRadiusRatio * 0.5) * sampleSize.y;
  vec2 texCoord = (vec2(uCoordPx, vCoordPx) + textureOffset) / textureSize;
  return samplePremultiplied(texture, texCoord);
}`;
    const textureName = `u_texture${textureId}`;
    let tintExpression = '1.';
    if ('stroke-color' in style) {
      tintExpression = builder.getStrokeColorExpression();
    }
    builder.setStrokeColorExpression(
      `${tintExpression} * sampleStrokePattern(${textureName}, ${sizeExpression}, ${offsetExpression}, ${sampleSizeExpression}, ${spacingExpression}, ${startOffsetExpression}, currentLengthPx, currentRadiusRatio, v_width)`,
    );
  }