Showing leaflet map on device where pixel ratio != 1

Kristian Benoit

unread,

Aug 1, 2014, 12:14:58 PM8/1/14

to leafl...@googlegroups.com

First of all, thanks a lot for the much appreciated work on Leaflet.

I'm using leaflet on a mobile app. I found that some devices have a pixel ratio != 1, making tiles looks a bit blurry. I'm trying to figure out how to change the pixel ratio or by some other way get rid of that blurry look. I know there's support for retina display, is this what needs to be used ? How ?

Thanks,

Kristian

Jake Wilson

unread,

Aug 1, 2014, 3:01:36 PM8/1/14

to leafl...@googlegroups.com

Can you post an example or jsfiddle of this issue? I use leaflet maps on mobile devices without issue. And it's not possible to change the pixel ratio of a device. It's a specification of the hardware.

Kristian Benoit

unread,

Aug 2, 2014, 1:22:39 AM8/2/14

to leafl...@googlegroups.com

Here some code that show the problem, but any code does. It uses Angular and angular-leaflet-directive, but it should not change anything. I attached a screenshot to show show the result.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
        <style>
            .view {
                position:absolute;
                top:0;
                left:0;
                right:0;
                bottom:0;
            }
            .angular-leaflet-map {
                height : 100%;
            }
        </style>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    </head>
    <body ng-app="app">
        <div class="view" ng-controller="mapCtrl">
            <leaflet center="map.center"> </leaflet>
        </div>
        <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
        <script src="http://rawgit.com/tombatossals/angular-leaflet-directive/master/dist/angular-leaflet-directive.min.js"></script>

        <script>
            var app = angular.module("app", ["leaflet-directive"]);

            app.controller("mapCtrl", ["$scope", function($scope) {
                $scope.map = {
                    center: {
                        lat: 45.0,
                        lng: -74.8,
                        zoom: 13
                    }
                };
            }]);
        </script>
    </body>
</html>

Screenshot_2014-08-02-01-17-44.png

Reply all

Reply to author

Forward