Home / Questions / 7087
Accepted
kamome
Asked: 2020-04-07 02:34:57 +0800 CST 2020-04-07 02:34:57 +0800 CST

How to render a map with Open Layers 3?

  • 772

I want to include a map with OpenLayers3 in one divof my web.

The function that determines and creates it is the following:

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();

It is at the end of a script that performs a series of operations at the click of a button. Specifically, it reads a local file and extracts a series of data from it.

This function is at the end and I want it to draw the map inside adiv id='map'

I understand that at the end of the statement traza_mapa()I should include it in the div. It doesn't. However if I run traza_mapa()in the browser console once the local file is loaded it does draw the map.

I think what I need is for this function to call itself at the end of the script, but I can't see how.

The code for loading the text file is as follows

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);
javascript

1 Answers

  1. Best Answer

    Well, this "Hello World" from OpenLayers works fine for me.

    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>

    And also this example using a button to load the map in the 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>

    Now if I try using the example you've provided:

    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>

    I have tried with three versions, using the version 3.2.0gave me the following error:

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

    Make sure in the JavaScript console that the same thing isn't happening with your code.

    I have then switched to versions 3.9.0and 3.15.0and your code has run without problems.

    • 1