1

Quiero incluir un mapa con OpenLayers3 en un div de mi web.

La función que lo determina y crea es la siguente:

function traza_mapa() {
    var myVista = new ol.View({
        center: ol.proj.fromLonLat([-30,40],'EPSG:3857', 'EPSG:4326'),
        zoom: 4,
    });

    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),  
        ],  
        view: myVista,
        controls: new ol.control.defaults({
            zoom: true,
            attribution: false,
        })
    }); 
    map.addControl(new ol.control.ZoomSlider());
};
traza_mapa();

Está al final de un script que realiza una serie de operaciones al pulsar un botón. Concretamente lee un archivo local y extrae una serie de datos del mismo.

Esta función se encuentra al final y quiero que dibuje el mapa dentro de un div id='map'

Entiendo que al finalizar con la sentencia traza_mapa() debería incluirlo en el div. No lo hace. Sin embargo si ejecuto traza_mapa() en la consola del navegador una vez cargado el archivo local si traza el mapa.

Creo que lo que necesito es que se autollame esta función al final del script pero no consigo ver cómo.

El codígo para la carga del archivo de texto es el siguiente

function handleFileSelect(evt) {
    var files = evt.target.files; 
    var lectores = new Array();
    var output = [];
  for (var i = 0, f; f = files[i]; i++) {
    output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                f.size, ' bytes, last modified: ',
                f.lastModifiedDate.toLocaleDateString(), '</li>');


    lectores[i] = new FileReader();

    lectores[i].onload = function(e) {

      resultados_texto = this.result;

    }

    lectores[i].readAsText(f);
  }
  document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

1 respuesta 1

1

Pues este "Hello World" de OpenLayers me funciona bien.

var map = new ol.Map({ 
    layers: [ 
        new ol.layer.Tile({ 
            source: new ol.source.OSM() 
        }) 
    ], 
    renderer: "canvas",
    target: "map", 
    view: new ol.View({ 
        center: [0, 0], 
        zoom: 2 
    }) 
});  
 
map.addControl(new ol.control.ZoomSlider());
<link rel="stylesheet" href="http://openlayers.org/en/v3.15.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.15.0/build/ol.js" type="text/javascript"></script>

<div style="width:100%; height:100%" id="map"></div>

Y también este ejemplo usando un botón para cargar el mapa en el div:

function traza_mapa() {
    var map = new ol.Map({ 
        layers: [ 
            new ol.layer.Tile({ 
                source: new ol.source.OSM() 
            }) 
        ], 
        renderer: "canvas",
        target: "map", 
        view: new ol.View({ 
            center: [0, 0], 
            zoom: 2 
        }) 
    });   

    map.addControl(new ol.control.ZoomSlider());
}
<link rel="stylesheet" href="http://openlayers.org/en/v3.15.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.15.0/build/ol.js" type="text/javascript"></script>

<button onclick="traza_mapa()">Mapa</button>
<div style="width:100%; height:100%" id="map"></div>

Ahora, si intento usando el ejemplo que has proporcionado:

function traza_mapa() {
    var myVista = new ol.View({
        center: ol.proj.fromLonLat([-30,40],'EPSG:3857', 'EPSG:4326'),
        zoom: 4,
    });
    var map = new ol.Map({ 
        target: "map", 
        layers: [ 
            new ol.layer.Tile({ 
                source: new ol.source.OSM() 
            }) 
        ], 
        view: myVista,
        controls: new ol.control.defaults({
            zoom: true,
            attribution: false,
        })
    });   

    map.addControl(new ol.control.ZoomSlider());
}
<link rel="stylesheet" href="http://openlayers.org/en/v3.15.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.15.0/build/ol.js" type="text/javascript"></script>

<button onclick="traza_mapa()">Mapa</button>
<div style="width:100%; height:100%" id="map"></div>

He probado con tres versiones, usando la versión 3.2.0 me arrojaba el siguiente error:

Uncaught TypeError: ol.proj.fromLonLat is not a function

Asegúrate en la consola de JavaScript que no esté pasando lo mismo con tu código.

Luego he cambiado a las versiones 3.9.0 y 3.15.0 y tu código se ha ejecutado sin problemas.

3
  • Gracias. Estoy intentado dar con el problema. He cambiado a la versión 3.15 El asunto continúa igual. Quizas no lo haya explicado correctamente. La funcion traza_mapa() se ejecuta correctamente pero solo desde consola. Es una web con un div. Hay un botón para cargar un archivo local en formato txt. Se carga por medio del script
    – kamome
    el 6 abr. 2016 a las 18:22
  • Actualiza tu pregunta con el código que mencionas para la carga
    – César
    el 6 abr. 2016 a las 18:30
  • Se carga por medio de un script de la API FileReader. La idea es que una vez cargado y con una serie de datos del archivo de texto cargado, sean parámetros para el mapa, de manera que se cargue el mapa en ese momento, una vez cargado y procesado el archivo de texto con datos de Lon lat
    – kamome
    el 6 abr. 2016 a las 18:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.