Lizmap-web-client: Map scale rendering resolution Retina display in Lizmap 3.4.0

Created on 4 Jan 2021  路  2Comments  路  Source: 3liz/lizmap-web-client

On my Retina display the numbers on the map scale in Lizmap 3.4.0 are rendered quite pixelated.

Bildschirmfoto 2021-01-04 um 23 32 30

Even though this is more a luxery problem, I want to report it.

Lizmap 3.4.0
QGIS Lizmap-Plugin 3.4.0
QGIS Desktop 3.10.9-A Coru帽a
QGIS FCGI server 3.10.12-A Coru帽a
PostgreSQL 12.5
PostGIS 3.1
Ubuntu 18.04.3:
OS (MacOS):
Browser (Firefox, Chrome):

bug user interface

Most helpful comment

Bonsoir,
this screenshot is taken from the LWC 3.3.3. The whole setup is the same as described above.
I did only adapt the map.css to display the text and the mapscale in white without text-shadow.

Bildschirmfoto 2021-01-08 um 22 44 03

In the next screenshot I added the css from underneath to the map.css in LWZ 3.4.0.
For me this is clearer than the version with the text-shadow, that produces this strange and ugly rendering.

Bildschirmfoto 2021-01-08 um 23 08 25

/* display the scale text and lines in white without text-shadow */

.ol-scale-text {
  color:white;
  text-shadow: none;
}
.ol-scale-step-marker {
  background-color: white;
  position:absolute;
  top: -8px !important;
}

.ol-scale-singlebar {
  border: 1px solid white;
}

.ol-scale-step-text {
  color:white;
  text-shadow: none;
}

All 2 comments

@geomoes Did you have this issue with LWC 3.3.x? Can you make a screenshot with LWC 3.3.x please?

Bonsoir,
this screenshot is taken from the LWC 3.3.3. The whole setup is the same as described above.
I did only adapt the map.css to display the text and the mapscale in white without text-shadow.

Bildschirmfoto 2021-01-08 um 22 44 03

In the next screenshot I added the css from underneath to the map.css in LWZ 3.4.0.
For me this is clearer than the version with the text-shadow, that produces this strange and ugly rendering.

Bildschirmfoto 2021-01-08 um 23 08 25

/* display the scale text and lines in white without text-shadow */

.ol-scale-text {
  color:white;
  text-shadow: none;
}
.ol-scale-step-marker {
  background-color: white;
  position:absolute;
  top: -8px !important;
}

.ol-scale-singlebar {
  border: 1px solid white;
}

.ol-scale-step-text {
  color:white;
  text-shadow: none;
}
Was this page helpful?
0 / 5 - 0 ratings

Related issues

Nokram picture Nokram  路  5Comments

t0xycus picture t0xycus  路  7Comments

pcav picture pcav  路  11Comments

robibrazze picture robibrazze  路  5Comments

FPaulsen picture FPaulsen  路  13Comments