grinat/leaflet-simple-map-screenshoter

Bad resolution in Android

aoizoijoizj opened this issue · 8 comments

aoizoijoizj commented

Hello,
The screenshot is blurry in Android (Browser: Chrome)

grinat commented

Hi, i tried on my android, and all working fine.
Can you show your code?

aoizoijoizj commented

@grinat Thank you for your reply
Yes now I find it is working fine, but the problem is the low image resolution (335x447), so the image will be not clear.
The error happens when: setting leaflet map width and height to 100% (responsive)
Android's Chrome width & height is very low

Thank you

aoizoijoizj commented

Code:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    padding: 0;
    margin: 0;
}
html, body, #map {
    height: 100%;
    width: 100vw;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
<script src="https://grinat.github.io/leaflet-simple-map-screenshoter/dist/leaflet-simple-map-screenshoter.js"></script>
</head>
<body>
<div id='map'></div>
<script>
var map = L.map('map').fitWorld();
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
			'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
		id: 'mapbox.streets'
	}).addTo(map);
L.simpleMapScreenshoter({
        screenName: function () {
            return new Date().toDateString()
        }
    }).addTo(map)
</script>
</body>
</html>
grinat commented

In that case Image resolution = map resolution = document body resolution
For more info see: https://material.io/tools/devices/ and read about dpi

Add scrinshoter with caption option for see device res in px:

 L.simpleMapScreenshoter({
        caption: function () {
            const {width, height} = document.body.getBoundingClientRect()
            return `Device w=${width}px, h=${height}px`
        },
        screenName: function () {
            return new Date().toDateString()
        }
    }).addTo(map)
aoizoijoizj commented

Thank you very much
Is there any method to increase the resolution?

grinat commented

For page with map set width in viewport tag:

<meta name="viewport" content="width=1024, initial-scale=1">

Or you can use css transfrom:

        body {
           transform: scale(0.5, 0.5) translate(-50%, -50%);
        }

        #map{
          height: calc(100vh * 2);
          width: calc(100vw * 2);
        }

Or maybe help move map into iframe without viewport tag:

<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<body>
 <iframe>
   <html>
   <body>
   <div id='map'></div>
   <script>
var map = L.map('map').fitWorld();
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
			'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
		id: 'mapbox.streets'
	}).addTo(map);
L.simpleMapScreenshoter({
        screenName: function () {
            return new Date().toDateString()
        }
    }).addTo(map)
aoizoijoizj commented

Unfortunately, all the above solutions make the map not styled for mobile (map buttons, texts, buttons very small)
Thank you very much for your help

grinat commented

You can increase size for mobile with css

@media (max-width: 767px) {
        button {
           transform: scale(2, 2);
        }

        body {
           transform: scale(0.5, 0.5) translate(-50%, -50%);
        }

        #map{
          height: calc(100vh * 2);
          width: calc(100vw * 2);
        }
        
        ...etc
}