Geomap: Add HiDPI support to CARTO basemap (#81195) (#106211)

Co-authored-by: Cledwyn Lew <me@trangle.top>

public/app/plugins/panel/geomap/layers/basemaps/carto.ts

@@ -45,10 +45,11 @@ export const carto: MapLayerRegistryItem<CartoConfig> = {
       } else {
         style += '_nolabels';
       }
+      const scale = window.devicePixelRatio > 1 ? '@2x' : '';
       return new TileLayer({
         source: new XYZ({
           attributions: `<a href="https://carto.com/attribution/">©CARTO</a> <a href="https://www.openstreetmap.org/copyright">©OpenStreetMap</a> contributors`,
-          url: `https://{1-4}.basemaps.cartocdn.com/${style}/{z}/{x}/{y}.png`,
+          url: `https://{1-4}.basemaps.cartocdn.com/${style}/{z}/{x}/{y}${scale}.png`,
         }),
       });
     },

public/app/plugins/panel/geomap/utils/utils.ts

@@ -99,7 +99,7 @@ export const getNewOpenLayersMap = (panel: GeomapPanel, options: Options, div: H
   const view = panel.initMapView(options.view);
   return (panel.map = new OpenLayersMap({
     view: view,
-    pixelRatio: 1, // or zoom?
+    pixelRatio: window.devicePixelRatio, // or zoom?
     layers: [], // loaded explicitly below
     controls: [],
     target: div,