search

grinat / leaflet-simple-map-screenshoter

Leaflet plugin which take screenshot of map
MIT License
74 stars 19 forks source link

Bad resolution in Android #3

Closed aoizoijoizj closed 5 years ago

aoizoijoizj commented 5 years ago

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

grinat commented 5 years ago

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

aoizoijoizj commented 5 years ago

@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 5 years ago

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 5 years ago

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 5 years ago

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

grinat commented 5 years ago

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 5 years ago

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 5 years ago

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
}