Skip to content

Instantly share code, notes, and snippets.

@danswick danswick/README.md
Last active Aug 24, 2019

Embed
What would you like to do?
Mapbox GL JS interactive map.resize()

Intentionally break your map canvas using the resize container button, then fix it again using the fix map button. This little demo is designed to show off how Mapbox GL JS's map.resize() method can fix a squished or stretched map canvas by telling the map to 1) check the size of its container, then 2) trigger a re-render. This method is useful for applications where the map's container might be resized interactively through a sliding, expanding, contracting, or interactively hidden HTML element.

<!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.27.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.27.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; transition: all 0.3s; }
.button { color: #fff; background-color: #555; padding: 1em; margin: 1em; position: absolute; right: 1em; top: 1em; border-radius: 0.5em; border-bottom: 2px #222 solid; cursor: pointer; }
#resizeMap { top: 5em; }
</style>
</head>
<body>
<div id='map'></div>
<div id='resizeDiv' class='button'>Resize container</div>
<div id='resizeMap' class='button'>Fix map</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZGFuc3dpY2siLCJhIjoiY2l1dTUzcmgxMDJ0djJ0b2VhY2sxNXBiMyJ9.25Qs4HNEkHubd4_Awbd8Og';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v9', //stylesheet location
center: [-74.50, 40], // starting position
zoom: 9 // starting zoom
});
var biggerSmaller;
map.on('load', function() {
var mapCanvas = document.getElementsByClassName('mapboxgl-canvas')[0];
var mapDiv = document.getElementById('map');
var breakButton = document.getElementById('resizeDiv');
var fixButton = document.getElementById('resizeMap');
breakButton.onclick = function() {
if (biggerSmaller !== 'smaller') {
mapDiv.style.width = '50%';
mapCanvas.style.width = '100%';
biggerSmaller = 'smaller';
} else {
mapDiv.style.width = '150%';
mapCanvas.style.width = '100%';
biggerSmaller = 'bigger';
}
}
fixButton.onclick = function() {
map.resize();
}
});
</script>
</body>
</html>
@pjobson

This comment has been minimized.

Copy link

commented Apr 17, 2019

Thanks for posting this. I was having an issue where Angular was doing an animation which made half a map display. Wound up doing the resize after a 250ms timeout. Seems to work well enough.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.