En mi aplicación web, quiero permitir a los usuarios establecer el tamaño del contenedor del mapa.
Todo funcionó bien cuando el contenedor se expandió ligeramente (aparentemente esto se debe a que las baldosas que estaban justo detrás del borde ya estaban cargadas). Sin embargo, cuando el contenedor se expande significativamente (en el siguiente ejemplo, de 300 a 1000px de ancho), queda un espacio en blanco.
¿Cómo hacer que el mapa se redibuje y se adapte al nuevo tamaño?
Llamando a redraw() en todas las capas no ayudó. Tampoco lo hizo el acercamiento y alejamiento.
Lo probé con los resultados descritos en Opera, Chrome y Firefox. En IE8, sorprendentemente, el problema no ocurrió y el mapa se adaptó automáticamente.
Una página web simplificada para las pruebas:
<html>
<head>
<style>
#mapbox {
width: 300px;
height: 500px;
border: 1px solid black;
}
</style>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<div id="mapbox"></div>
<input type="button" id="test" value="resize">
<script>
var map = new OpenLayers.Map('mapbox');
map.addLayer(new OpenLayers.Layer.OSM());
map.setCenter(
new OpenLayers.LonLat(1000000, 7000000), 5);
document.getElementById('test').onclick = function() {
document.getElementById('mapbox').style.width = '1000px';
}
</script>
</body>
</html>
