protomaps-leaflet icon indicating copy to clipboard operation
protomaps-leaflet copied to clipboard

IconSymbolizer and DPR

Open ycouble opened this issue 4 months ago • 0 comments

I'm using IconSymbolizer on point features. I followed the sprite example to set icons with the IconSymbolizer. However, DPR doesn't seem to be well handled : on my iPhone (high DPR) it looks huge, on my desktop (dpr~2) it looks ok (tuned it for it), and on my collegue desktop (DPR = 1) it is tiny.

Playing a bit with the code, I saw that adding the following bits solves the issue for me.

    const draw = (ctx: CanvasRenderingContext2D) => {
      ctx.globalAlpha = 1;
      ctx.drawImage(
        this.sheet.canvas,
        loc.x,
        loc.y,
        loc.w,
        loc.h,
        -loc.w / 2 / this.dpr,
        -loc.h / 2 / this.dpr,
        loc.w / 2 / this.dpr, // THIS BIT
        loc.h / 2 / this.dpr, // THIS BIT
      );
    };

I'm certainly not an expert on dpr and drawing on screen, so... does that make any sense ?

ycouble avatar Oct 08 '25 20:10 ycouble