Pasar parámetros a un script de JavaScript
Tiempo de lectura: 1 minutos
Si estamos utilizando OpenLayers como una web estática, al desplegar en producción la app necesitaremos poder pasar parámetros para actualizar el mapa, de manera que no sea totalmente estático.
La web
Si estamos utilizando OpenLayers como una web estática, al desplegar en producción la app necesitaremos poder pasar parámetros para actualizar el mapa, de manera que no sea totalmente estático.
Suponemos que ya tenemos preparada una página para representar los mapas y la llamada es esta:
<iframe id='OLframe' height='450px' width='100%'
src='map.html'></iframe>
se utiliza un iframe para mostrar el mapa correspondiente y se carga con la página de inicio de la app deplegada.
Primero decidimos qué información necesitamos actualizar en el mapa, digamos que sea el nivel de zoom, las coordenadas y la rotación del mapa. Un zoom de 10m las coordenadas de la isla de Menorca, sin rotación y los concatenamos en el parámetro utilizando un separador
<iframe height='450px' width='100%'
src='map.html#map=10/4.0/40.0/0'>
</iframe>
El script
En el script tenemos que aplicar los siguientes cambios:
inicializamos los parámetros
let zoom = 10;
let center = [0, 0];
let rotation = 0;
Leemos el parámetro 'map' y parseamos los elementos por el separador que hayamos utilizado
const hash = window.location.hash.replace('#map=', '');
const parts = hash.split('/');
if (parts.length === 4) {
zoom = parseFloat(parts[0]);
center = fromLonLat([parseFloat(parts[1]),
parseFloat(parts[2])]);
rotation = parseFloat(parts[3]);
} El mapa
Finalmente utilizamos las variables actualizadas para incializar el mapa
const map = new Map({
layers: [osm, vectorLayer],
target: document.getElementById('map'),
view: new View({
center: center,
zoom: zoom,
rotation: rotation,
}),
}); Aviso
Recuerda que esta técnica require que se recargue el iframe cuando se hace un cambio para que se pueda representar el mapa con los cambios enviados
var olframe = document.getElementById('OLframe');
olframe.contentWindow.location.reload(true); 
