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!
CodePudding user response:
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();
}