Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

On retina screens, images added with addImage are half-size #4637

Closed
jfirebaugh opened this issue Apr 24, 2017 · 0 comments · Fixed by #4645
Closed

On retina screens, images added with addImage are half-size #4637

jfirebaugh opened this issue Apr 24, 2017 · 0 comments · Fixed by #4645
Assignees
@asheemmamoowala
Labels
bug 🐞 good first issue

Comments

@jfirebaugh
Copy link
Contributor

Test case:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.36.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.36.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map'></div>

<script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiamZpcmUiLCJhIjoiVkRqZHhXTSJ9.k3r6TYm9oetgLQX0A_nQbQ';

    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9'
    });

    map.on('load', () => {
        map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png', (error, image) => {
            if (error) throw error;
            map.addImage('cat', image);
            map.addLayer({
                "id": "points",
                "type": "symbol",
                "source": {
                    "type": "geojson",
                    "data": {
                        "type": "FeatureCollection",
                        "features": [{
                            "type": "Feature",
                            "geometry": {
                                "type": "Point",
                                "coordinates": [0, 0]
                            }
                        }]
                    }
                },
                "layout": {
                    "icon-image": "cat",
                    "icon-size": 1
                }
            });
        });
    });

</script>

</body>
</html>

On a retina screen, the cat is half the size of the original image. On a non-retina screen, it's the expected size.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@asheemmamoowala asheemmamoowala

Labels
bug 🐞 good first issue
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Use correct pixel ratio when creating image buffer from map.addImage() mapbox/mapbox-gl-js
2 participants
@jfirebaugh @asheemmamoowala