Skip to content
This repository has been archived by the owner on Jul 6, 2023. It is now read-only.

Commit

Permalink
fix(canvas): Removes tile seams (#17)
Browse files Browse the repository at this point in the history 
* Attempt fix for tile seams by making Leaflet canvas elements 257x257.

* Sets tile size to 258

* Moves where to render tile bounds when debugging

* Moves debug tile limits further

* Increases line width instead

* Increases line width even further

* Even further?

Co-authored-by: Brandon Liu <[email protected]>
  • Loading branch information
@ibesora @bdon
ibesora and bdon authored Mar 24, 2022
1 parent 574a685 commit 0918f92
Show file tree
Hide file tree
Showing 6 changed files with 46 additions and 30 deletions.
15 changes: 8 additions & 7 deletions dist/frontends/leaflet.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { light } from "../default_style/light";
import { dark } from "../default_style/dark";
import { paintRules, labelRules } from "../default_style/style";
import { ProtomapsEvent } from "../events";
const LeafletTileSize = 258;
const timer = (duration) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
Expand Down Expand Up @@ -62,7 +63,7 @@ const leafletLayer = (options) => {
});
};
this.labelers = new Labelers(this.scratch, this.label_rules, 16, this.onTilesInvalidated);
this.tile_size = 256 * window.devicePixelRatio;
this.tile_size = LeafletTileSize * window.devicePixelRatio;
this.tileDelay = options.tileDelay || 3;
this.lang = options.lang;
// bound instance of function
Expand Down Expand Up @@ -126,16 +127,16 @@ const leafletLayer = (options) => {
maxX: 256 * (coords.x + 1) + BUF,
maxY: 256 * (coords.y + 1) + BUF,
};
let origin = new Point(256 * coords.x, 256 * coords.y);
let origin = new Point(256 * coords.x + 0.5, 256 * coords.y + 0.5);
element.width = this.tile_size;
element.height = this.tile_size;
let ctx = element.getContext("2d");
ctx.setTransform(this.tile_size / 256, 0, 0, this.tile_size / 256, 0, 0);
ctx.clearRect(0, 0, 256, 256);
ctx.setTransform(this.tile_size / LeafletTileSize, 0, 0, this.tile_size / LeafletTileSize, 0, 0);
ctx.clearRect(0, 0, LeafletTileSize, LeafletTileSize);
if (this.backgroundColor) {
ctx.save();
ctx.fillStyle = this.backgroundColor;
ctx.fillRect(0, 0, 256, 256);
ctx.fillRect(0, 0, LeafletTileSize, LeafletTileSize);
ctx.restore();
}
var painting_time = 0;
Expand All @@ -159,12 +160,12 @@ const leafletLayer = (options) => {
ctx.fillText(layout_time.toFixed() + " ms layout", 4, 56);
}
ctx.strokeStyle = this.debug;
ctx.lineWidth = 0.5;
ctx.lineWidth = 6;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, 256);
ctx.stroke();
ctx.lineWidth = 0.5;
ctx.lineWidth = 6;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(256, 0);
Expand Down
15 changes: 8 additions & 7 deletions dist/protomaps.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4815,6 +4815,7 @@ var protomaps = (() => {
};

// src/frontends/leaflet.ts
var LeafletTileSize = 258;
var timer = (duration) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
Expand Down Expand Up @@ -4857,7 +4858,7 @@ var protomaps = (() => {
});
};
this.labelers = new Labelers(this.scratch, this.label_rules, 16, this.onTilesInvalidated);
this.tile_size = 256 * window.devicePixelRatio;
this.tile_size = LeafletTileSize * window.devicePixelRatio;
this.tileDelay = options2.tileDelay || 3;
this.lang = options2.lang;
this.inspector = this.inspect(this);
Expand Down Expand Up @@ -4921,16 +4922,16 @@ var protomaps = (() => {
maxX: 256 * (coords.x + 1) + BUF,
maxY: 256 * (coords.y + 1) + BUF
};
let origin = new import_point_geometry7.default(256 * coords.x, 256 * coords.y);
let origin = new import_point_geometry7.default(256 * coords.x + 0.5, 256 * coords.y + 0.5);
element.width = this.tile_size;
element.height = this.tile_size;
let ctx = element.getContext("2d");
ctx.setTransform(this.tile_size / 256, 0, 0, this.tile_size / 256, 0, 0);
ctx.clearRect(0, 0, 256, 256);
ctx.setTransform(this.tile_size / LeafletTileSize, 0, 0, this.tile_size / LeafletTileSize, 0, 0);
ctx.clearRect(0, 0, LeafletTileSize, LeafletTileSize);
if (this.backgroundColor) {
ctx.save();
ctx.fillStyle = this.backgroundColor;
ctx.fillRect(0, 0, 256, 256);
ctx.fillRect(0, 0, LeafletTileSize, LeafletTileSize);
ctx.restore();
}
var painting_time = 0;
Expand All @@ -4954,12 +4955,12 @@ var protomaps = (() => {
ctx.fillText(layout_time.toFixed() + " ms layout", 4, 56);
}
ctx.strokeStyle = this.debug;
ctx.lineWidth = 0.5;
ctx.lineWidth = 6;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, 256);
ctx.stroke();
ctx.lineWidth = 0.5;
ctx.lineWidth = 6;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(256, 0);
Expand Down
4 changes: 2 additions & 2 deletions dist/protomaps.min.js
View file

Large diffs are not rendered by default.

15 changes: 8 additions & 7 deletions dist/protomaps.module.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4740,6 +4740,7 @@ var labelRules = (params, shade, language1, language2) => {
};

// src/frontends/leaflet.ts
var LeafletTileSize = 258;
var timer = (duration) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
Expand Down Expand Up @@ -4782,7 +4783,7 @@ var leafletLayer = (options) => {
});
};
this.labelers = new Labelers(this.scratch, this.label_rules, 16, this.onTilesInvalidated);
this.tile_size = 256 * window.devicePixelRatio;
this.tile_size = LeafletTileSize * window.devicePixelRatio;
this.tileDelay = options2.tileDelay || 3;
this.lang = options2.lang;
this.inspector = this.inspect(this);
Expand Down Expand Up @@ -4846,16 +4847,16 @@ var leafletLayer = (options) => {
maxX: 256 * (coords.x + 1) + BUF,
maxY: 256 * (coords.y + 1) + BUF
};
let origin = new import_point_geometry7.default(256 * coords.x, 256 * coords.y);
let origin = new import_point_geometry7.default(256 * coords.x + 0.5, 256 * coords.y + 0.5);
element.width = this.tile_size;
element.height = this.tile_size;
let ctx = element.getContext("2d");
ctx.setTransform(this.tile_size / 256, 0, 0, this.tile_size / 256, 0, 0);
ctx.clearRect(0, 0, 256, 256);
ctx.setTransform(this.tile_size / LeafletTileSize, 0, 0, this.tile_size / LeafletTileSize, 0, 0);
ctx.clearRect(0, 0, LeafletTileSize, LeafletTileSize);
if (this.backgroundColor) {
ctx.save();
ctx.fillStyle = this.backgroundColor;
ctx.fillRect(0, 0, 256, 256);
ctx.fillRect(0, 0, LeafletTileSize, LeafletTileSize);
ctx.restore();
}
var painting_time = 0;
Expand All @@ -4879,12 +4880,12 @@ var leafletLayer = (options) => {
ctx.fillText(layout_time.toFixed() + " ms layout", 4, 56);
}
ctx.strokeStyle = this.debug;
ctx.lineWidth = 0.5;
ctx.lineWidth = 6;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, 256);
ctx.stroke();
ctx.lineWidth = 0.5;
ctx.lineWidth = 6;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(256, 0);
Expand Down
4 changes: 4 additions & 0 deletions examples/leaflet.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@
height:100vh;
margin:0px;
}
.leaflet-tile {
width: 258px !important;
height: 258px !important;
}
</style>
</head>
<body>
Expand Down
23 changes: 16 additions & 7 deletions src/frontends/leaflet.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ import { paintRules, labelRules } from "../default_style/style";
import { ProtomapsEvent } from "../events";
import { PickedFeature } from "../tilecache";

const LeafletTileSize = 258;

const timer = (duration: number) => {
return new Promise<void>((resolve, reject) => {
setTimeout(() => {
Expand Down Expand Up @@ -97,7 +99,7 @@ const leafletLayer = (options: any): any => {
16,
this.onTilesInvalidated
);
this.tile_size = 256 * window.devicePixelRatio;
this.tile_size = LeafletTileSize * window.devicePixelRatio;
this.tileDelay = options.tileDelay || 3;
this.lang = options.lang;

Expand Down Expand Up @@ -184,18 +186,25 @@ const leafletLayer = (options: any): any => {
maxX: 256 * (coords.x + 1) + BUF,
maxY: 256 * (coords.y + 1) + BUF,
};
let origin = new Point(256 * coords.x, 256 * coords.y);
let origin = new Point(256 * coords.x + 0.5, 256 * coords.y + 0.5);

element.width = this.tile_size;
element.height = this.tile_size;
let ctx = element.getContext("2d");
ctx.setTransform(this.tile_size / 256, 0, 0, this.tile_size / 256, 0, 0);
ctx.clearRect(0, 0, 256, 256);
ctx.setTransform(
this.tile_size / LeafletTileSize,
0,
0,
this.tile_size / LeafletTileSize,
0,
0
);
ctx.clearRect(0, 0, LeafletTileSize, LeafletTileSize);

if (this.backgroundColor) {
ctx.save();
ctx.fillStyle = this.backgroundColor;
ctx.fillRect(0, 0, 256, 256);
ctx.fillRect(0, 0, LeafletTileSize, LeafletTileSize);
ctx.restore();
}

Expand Down Expand Up @@ -240,13 +249,13 @@ const leafletLayer = (options: any): any => {
}
ctx.strokeStyle = this.debug;

ctx.lineWidth = 0.5;
ctx.lineWidth = 6;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, 256);
ctx.stroke();

ctx.lineWidth = 0.5;
ctx.lineWidth = 6;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(256, 0);
Expand Down

0 comments on commit 0918f92

Please sign in to comment.