OpenLayers map duplicates when layer source is changed with an html select

Question

I created an OpenLayers map that loads KML files.

I would like these files to be changed based on an html select. It works well but the original map is not replaced: a second one is created below.

This behavior is visible here: https://jsfiddle.net/A_d_r_i/mazegr60/

window.onload = function go() {
    
    var choix = document.getElementById('choix');
    
    choix.onchange = function() {
        title.innerHTML = this.options[this.selectedIndex].text;
        test.innerHTML = this.options[this.selectedIndex].getAttribute('name');
        var name = this.options[this.selectedIndex].getAttribute('name');
        
    
        var url_bdd1 = 'URL FOR KML' + name + '.kml';
        var url_bdd2 = 'URL FOR KML' + name + '.kml';
        
        var layer_bdd1 = new ol.layer.Vector({
            source : new ol.source.Vector({
                format : new ol.format.KML(),
                url : url_bdd1
            })
        });
        
        var layer_bdd2 = new ol.layer.Vector({
            source : new ol.source.Vector({
                format : new ol.format.KML(),
                url : url_bdd2
            })
        });
        
        
        var layer_osm = new ol.layer.Tile({
            source: new ol.source.OSM(),
            opacity: 1
        });
        
        
        var map = new ol.Map({
            target: 'map',
            layers: [
                layer_osm,
                layer_bdd2,
                layer_bdd1
            ],
            view: new ol.View({
                center: ol.proj.transform([2, 47], 'EPSG:4326', 'EPSG:3857'),
                zoom: 6
            })
        });
    };
    choix.onchange();
}

I must definitely make a mistake in my onchange function. If someone has an idea?

Thanks!

Answer 1

You are creating a new map every time you call the function. Create the map and layers once, and only change the sources inside the function https://jsfiddle.net/ukbjp7oe/

window.onload = function go() {

  var layer_bdd1 = new ol.layer.Vector();

  var layer_bdd2 = new ol.layer.Vector();

  var layer_osm = new ol.layer.Tile({
    source: new ol.source.OSM(),
    opacity: 1
  });

  var map = new ol.Map({
    target: 'map',
    layers: [
      layer_osm,
      layer_bdd2,
      layer_bdd1
    ],
    view: new ol.View({
      center: ol.proj.transform([2, 47], 'EPSG:4326', 'EPSG:3857'),
      zoom: 6
    })
  });

  var choix = document.getElementById('choix');

  choix.onchange = function() {
    title.innerHTML = this.options[this.selectedIndex].text;
    test.innerHTML = this.options[this.selectedIndex].getAttribute('name');
    var name = this.options[this.selectedIndex].getAttribute('name');

    var url_bdd1 = 'URL FOR KML' + name + '.kml';
    var url_bdd2 = 'URL FOR KML' + name + '.kml';

    layer_bdd1.setSource(
      new ol.source.Vector({
        format: new ol.format.KML(),
        url: url_bdd1
      })
    );

    layer_bdd2.setSource(
      new ol.source.Vector({
        format: new ol.format.KML(),
        url: url_bdd2
      })
    );

  };
  choix.onchange();
}