Bonjour à tous,
J'ai mis en place plusieurs petites interfaces carto utilisant Google Maps API, pour lesquelles j'ai déjà reçu beaucoup d'aide ici et ailleurs.
(On m'a déjà signalé qu'il faut que je me dépêche de mettre à jour mon code source en API v3, mais ce n'est pas l'objet de ma demande du jour...)
J'ai aujourd'hui un problème concernant l'ordre d'affichage des couches (KML) chargées sur mes pages, via des checkbox. Je souhaiterai pouvoir gérer l'ordre d'affichage des couches l'une par rapport à l'autre. A ce niveau de mes recherches, je pense qu'il s'agit d'attribuer un "z-index" à chaque layer.
Mais étant incapable d'ajouter cette fonctionnalité à mon code source, je sollicite l'aide du forum, si jamais quelqu'un avait une solution "facile à adapter".
Voici une des pages en question, où je souhaiterai par exemple que la couche "Communes prises en charge" (1ère dans la liste à droite), soit chargée par dessus les autres.
Ci-dessous, quelques extraits de mon code source relatifs au chargement des KML (je sais, ce n'est certainement pas très propre...:o:) :
Merci à vous !
Sylvain M.
J'ai mis en place plusieurs petites interfaces carto utilisant Google Maps API, pour lesquelles j'ai déjà reçu beaucoup d'aide ici et ailleurs.
(On m'a déjà signalé qu'il faut que je me dépêche de mettre à jour mon code source en API v3, mais ce n'est pas l'objet de ma demande du jour...)
J'ai aujourd'hui un problème concernant l'ordre d'affichage des couches (KML) chargées sur mes pages, via des checkbox. Je souhaiterai pouvoir gérer l'ordre d'affichage des couches l'une par rapport à l'autre. A ce niveau de mes recherches, je pense qu'il s'agit d'attribuer un "z-index" à chaque layer.
Mais étant incapable d'ajouter cette fonctionnalité à mon code source, je sollicite l'aide du forum, si jamais quelqu'un avait une solution "facile à adapter".
Voici une des pages en question, où je souhaiterai par exemple que la couche "Communes prises en charge" (1ère dans la liste à droite), soit chargée par dessus les autres.
Ci-dessous, quelques extraits de mon code source relatifs au chargement des KML (je sais, ce n'est certainement pas très propre...:o:) :
Code:
var layers = {
"Communes prises en charge": {"url" : "http://pagesperso-orange.fr/symont/cercion/kml/observateurs_communes_2013.kml",
"name": "Communes prises en charge"},
"Grandes mailles": {"url": "http://pagesperso-orange.fr/symont/cercion/kml/mailles4x2.kml",
"name": "Grandes mailles"},
"Mailles": {"url": "http://pagesperso-orange.fr/symont/cercion/kml/mailles_2010.kml",
"name": "Mailles"},
"Synthèse Mailles 2013": {"url": "http://pagesperso-orange.fr/symont/cercion/kml/synthese_mailles_2013.kml",
"name": "Synthèse Mailles 2013"},
"Synthèse Mailles 2011": {"url": "http://pagesperso-orange.fr/symont/cercion/kml/mailles_nbsps_2010.kml",
"name": "Synthèse Mailles 2011"},
"Mailles vides": {"url" : "http://pagesperso-orange.fr/symont/cercion/kml/maillesvides_2010.kml",
"name": "Mailles vides"},
"Departements Normands": {"url": "http://pagesperso-orange.fr/symont/KML/dept/DeptNormandie.kml",
"name": "Departements Normands"},
"Ischnura elegans": {"url": "http://pagesperso-orange.fr/symont/cercion/kml/ischnura_elegans.kml",
"name": "Ischnura elegans"}
};
for(var layer in layers) {
addTR(layer, layers[layer].name);
}
document.getElementById("Mailles").checked = true;
document.getElementById("Departements Normands").checked = true;
toggleGeoXML("Departements Normands", true);
toggleGeoXML("Mailles", true) ;
} function addGeoXML() {
var theUrl = document.getElementById("url").value;
theUrl = theUrl.replace(/^\s+/, "");
theUrl = theUrl.replace(/\s+$/, "");
if (theUrl.indexOf(' ') != -1) {
alert('Error - that address has a space in it');
} else {
var id = "userAdded" + userAdded;
layers[id] = {};
layers[id].url = theUrl;
layers[id].name = "KML personnel " + userAdded;
addTR(id);
document.getElementById(id).checked = true;
toggleGeoXML(id, true);
userAdded++;
}
}
function addTR(id) {
var layerTR = document.createElement("tr");
var inputTD = document.createElement("td");
var input = document.createElement("input");
input.type = "checkbox";
input.id = id;
input.onclick = function () { toggleGeoXML(this.id, this.checked) };
inputTD.appendChild(input);
var nameTD = document.createElement("td");
var nameA = document.createElement("a");
nameA.href = layers[id].url;
var name = document.createTextNode(layers[id].name);
nameA.appendChild(name);
nameTD.appendChild(nameA);
layerTR.appendChild(inputTD);
layerTR.appendChild(nameTD);
document.getElementById("sidebarTBODY").appendChild(layerTR);
}
function toggleGeoXML(id, checked) {
if (checked) {
var geoXml = new GGeoXml(layers[id].url);
GEvent.addListener(geoXml, 'load', function() {
if (geoXml.loadedCorrectly()) {
layers[id].geoxml = geoXml;
document.getElementById("status").innerHTML = "";
}
});
layers[id].geoXml = geoXml;
map.addOverlay(layers[id].geoXml);
document.getElementById("status").innerHTML = "Chargement...";
} else if (layers[id].geoXml) {
map.removeOverlay(layers[id].geoXml);
}
}Sylvain M.