round CSS translate values to avoid blurry tiles (#42)

maplibre · Dec 4, 2022 · ee177c9 · ee177c9
1 parent 03a48a9
commit ee177c9
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,11 +8,17 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 - Fix [#29](https://github.com/maplibre/maplibre-gl-leaflet/issues/29) - layer is mis-aligned with map when panning the map off screen ([#31](https://github.com/maplibre/maplibre-gl-leaflet/pulls/31))
 
+## 0.0.19 - 2022-11-30
+
+### Fixed
+
+- round CSS translate values to avoid blurry tiles ([#41](https://github.com/maplibre/maplibre-gl-leaflet/issues/41)).
+
 ## 0.0.18 - 2022-11-11
 
 ### Fixed
 
-- import MapOptions instead of obsolete MapboxOptions for compatibility with neuer maplibre-gl versions ([#25](https://github.com/maplibre/maplibre-gl-leaflet/issues/25)).  
+- import MapOptions instead of obsolete MapboxOptions for compatibility with neuer maplibre-gl versions ([#25](https://github.com/maplibre/maplibre-gl-leaflet/issues/25)).
 
 ## 0.0.15 - 2021-07-08
 

diff --git a/leaflet-maplibre-gl.js b/leaflet-maplibre-gl.js
@@ -99,6 +99,10 @@
         getPaneName: function () {
             return this._map.getPane(this.options.pane) ? this.options.pane : 'tilePane'; 
         },
+
+        _roundPoint: function(p) {
+            return {x: Math.round(p.x), y: Math.round(p.y)}
+        },
 
         _initContainer: function () {
             var container = this._container = L.DomUtil.create('div', 'leaflet-gl-layer');
@@ -110,7 +114,7 @@
 
             var topLeft = this._map.containerPointToLayerPoint([0, 0]).subtract(offset);
 
-            L.DomUtil.setPosition(container, topLeft);
+            L.DomUtil.setPosition(container, this._roundPoint(topLeft));
         },
 
         _initGL: function () {
@@ -164,7 +168,7 @@
                 offset = this._map.getSize().multiplyBy(this.options.padding),
                 topLeft = this._map.containerPointToLayerPoint([0, 0]).subtract(offset);
 
-            L.DomUtil.setPosition(container, topLeft);
+            L.DomUtil.setPosition(container, this._roundPoint(topLeft));
 
             this._transformGL(gl);
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@maplibre/maplibre-gl-leaflet",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "binding from maplibre gl to the leaflet api",
   "main": "leaflet-maplibre-gl.js",
   "directories": {