From 6af4eef7b5bc11c97b971160f3ddf11bb3c3571a Mon Sep 17 00:00:00 2001 From: archmoj Date: Tue, 23 Nov 2021 18:10:05 -0500 Subject: [PATCH 1/3] fix mapbox getView scale for Retina display --- src/plots/mapbox/mapbox.js | 32 +++++++++++++++++++++++++------- 1 file changed, 25 insertions(+), 7 deletions(-) diff --git a/src/plots/mapbox/mapbox.js b/src/plots/mapbox/mapbox.js index 5046b261e22..40b57eb55fd 100644 --- a/src/plots/mapbox/mapbox.js +++ b/src/plots/mapbox/mapbox.js @@ -722,11 +722,29 @@ proto.project = function(v) { proto.getView = function() { var map = this.map; var mapCenter = map.getCenter(); - var center = { lon: mapCenter.lng, lat: mapCenter.lat }; + var lon = mapCenter.lng; + var lat = mapCenter.lat; + var center = { lon: lon, lat: lat }; var canvas = map.getCanvas(); - var w = canvas.width; - var h = canvas.height; + var width = canvas.width; + var height = canvas.height; + + var p00, p10, p11, p01; + + // attempt finding correct scale for Retina display + for(var scale = 2; scale > 0; scale--) { + var w = width / scale; + var h = height / scale; + + p00 = map.unproject([0, 0]).toArray(); + p10 = map.unproject([w, 0]).toArray(); + p11 = map.unproject([w, h]).toArray(); + p01 = map.unproject([0, h]).toArray(); + + if(Math.abs(lon - (p00[0] + p11[0]) / 2) < 0.0001) break; + } + return { center: center, zoom: map.getZoom(), @@ -734,10 +752,10 @@ proto.getView = function() { pitch: map.getPitch(), _derived: { coordinates: [ - map.unproject([0, 0]).toArray(), - map.unproject([w, 0]).toArray(), - map.unproject([w, h]).toArray(), - map.unproject([0, h]).toArray() + p00, + p10, + p11, + p01 ] } }; From 4eb9a288ee5dff7f47e8bb2f83289d3d4e82b7f6 Mon Sep 17 00:00:00 2001 From: archmoj Date: Tue, 23 Nov 2021 18:49:21 -0500 Subject: [PATCH 2/3] log for PR 6039 --- draftlogs/6039_fix.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 draftlogs/6039_fix.md diff --git a/draftlogs/6039_fix.md b/draftlogs/6039_fix.md new file mode 100644 index 00000000000..f2cb2f1e8c4 --- /dev/null +++ b/draftlogs/6039_fix.md @@ -0,0 +1 @@ + - Fix mapbox derived coordinate for Retina displays [[#6039](https://github.com/plotly/plotly.js/pull/6039)] From 88d2eb2ed6f6922b26a8c48fad906b585c843ed1 Mon Sep 17 00:00:00 2001 From: alexcjohnson Date: Thu, 2 Dec 2021 19:17:28 -0500 Subject: [PATCH 3/3] mapbox coords: get canvas size from style, not attributes The width and height attributes are expanded by devicePixelRatio, but the style width and height are in css pixels. --- src/plots/mapbox/mapbox.js | 27 ++++++--------------------- 1 file changed, 6 insertions(+), 21 deletions(-) diff --git a/src/plots/mapbox/mapbox.js b/src/plots/mapbox/mapbox.js index 40b57eb55fd..ad728f3fd42 100644 --- a/src/plots/mapbox/mapbox.js +++ b/src/plots/mapbox/mapbox.js @@ -727,23 +727,8 @@ proto.getView = function() { var center = { lon: lon, lat: lat }; var canvas = map.getCanvas(); - var width = canvas.width; - var height = canvas.height; - - var p00, p10, p11, p01; - - // attempt finding correct scale for Retina display - for(var scale = 2; scale > 0; scale--) { - var w = width / scale; - var h = height / scale; - - p00 = map.unproject([0, 0]).toArray(); - p10 = map.unproject([w, 0]).toArray(); - p11 = map.unproject([w, h]).toArray(); - p01 = map.unproject([0, h]).toArray(); - - if(Math.abs(lon - (p00[0] + p11[0]) / 2) < 0.0001) break; - } + var w = parseInt(canvas.style.width); + var h = parseInt(canvas.style.height); return { center: center, @@ -752,10 +737,10 @@ proto.getView = function() { pitch: map.getPitch(), _derived: { coordinates: [ - p00, - p10, - p11, - p01 + map.unproject([0, 0]).toArray(), + map.unproject([w, 0]).toArray(), + map.unproject([w, h]).toArray(), + map.unproject([0, h]).toArray() ] } };