Affichage KML à partir de checkbox

**firebird13** · 23/09/2012, 10h38

Bonjour,

Je mets en place une carte google maps dont voici le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
<head>
<title>********</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <style type="text/css">
html { height: 100%;
} body {
height: 100%; margin: 0px; padding: 0px;
} #map_canvas {
height: 100%; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" ></script> <script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(45.281071, 8.393555); 
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.TERRAIN, 
navigationControl: true, mapTypeControl: true, 
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM.LEFT,
style: google.maps.ScaleControlStyle.DEFAULT }
};
 
var map = new google.maps.Map(
document.getElementById("map"), myOptions);
 
var kmllayer1 = new google.maps.KmlLayer('mon_fichier.kml', {preserveViewport:true});
	kmllayer1.setMap(map);
	google.maps.event.addListener(kmllayer1, 'click', function(){
    map.setZoom(14);});
 
 
var kmllayer2 = new google.maps.KmlLayer('mon_fichier.kml', {preserveViewport:true});
	kmllayer2.setMap(map);
	google.maps.event.addListener(kmllayer2, 'click', function(){
    map.setZoom(14);
});
}
 
 
function detectBrowser() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("map");
if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1)
{
mapdiv.style.width = '100%'; myOptions = {
navigationControlOptions : {
style : google.maps.NavigationControlStyle.ANDROID
},
mapTypeControlOptions : {
style : google.maps.MapTypeControlStyle.DROPDOWN_MENU }
};
map.setOptions(myOptions); } else {
mapdiv.style.width = '100%'; }
}
</script>
</head>
 
<body onload="initialize()">
<div id="map" style="width: 622px; height: 500px;"></div> 
</body>
</html>

Je souhaiterais afficher des cases à cocher pour appeler chaque couche kml (il y en aura une dizaine) ou séparemment ou toutes à la fois.
J'ai essayé plusieurs solutions sans y parvenir.
Merci de votre aide.

**georgie2** · 24/09/2012, 08h58

Salut !
Connais-tu les feuilles .js (javasript) ?

Les checkboxs vont appeler des fonctions (function), si tu en as beaucoup, mieux vaut placer tes fonctions dans une feuille .js (c'est d'ailleurs peut-être même obligatoire, je ne sais pas).

Tes checkbox seront bien dans ta feuille html, classiquement.

Dans ta page html, la chekbox ressemblera à cela :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<p><label><input type="checkbox" id="Revenus_Moyens.kml" onclick="toggleFile(this.id)" />
Niveaux de vie</label></p>

C'est donc bien l'utilisation de la fonction togglefile. Note que ce premier script contient déjà le nom d'un kml. En effet quand tu auras spécifié où sont tes kml, plus besoin de rappeler tout le chemin.

Ah oui : la manipulation d'un kml en vue d'une webmap exige que celui-ci soit hébergé sur le net, et dispose donc d'une adresse url.

Maintenant il faut encore écrire la fonction togglefile, liée aux chekboxs, dans ta feuille .js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
function toggleFile(file) {
var objCheckbox = document.getElementById(file);
if (objCheckbox.checked) {
readKml(file);
}
else {
ge.getFeatures().removeChild(currentKml[file]);
currentKml[file] = null;
}
}

Et enfin, la fonction qui va chercher les kml, toujours dans la feuille .js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function readKml(file) {
var kmlFolder = "Ici/LeCheminURL/DuDossier/Contenant/LeKml/"; // To set
var kmlUrl = kmlFolder + file;
google.earth.fetchKml(ge, kmlUrl, function(kml) {
if (!kml) {
alert("Erreur : Lecture du fichier KML impossible !");
return;
}
ge.getFeatures().appendChild(kml);
currentKml[file] = kml;
if (kml.getAbstractView()) {
ge.getView().setAbstractView(kml.getAbstractView());
}
});
}

Plus un petit script dont je n'ai jamais compris l'utilité (si quelqu'un sait ?), qui déclare les kml (mais avec ou sans ça marche), toujours dans .js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var currentKml = {
"Revenus_Moyens.kml": null, // To set
}

**firebird13** · 24/09/2012, 13h34

Bonjour georgie2,

Merci de ton aide.
j'ai fait un test avec 2 couches kml et ça ne fonctionne pas. Les couches kml s'affichent cases cochées ou non.

J'ai crée le fichier "appelkml.js" suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function toggleFile(file) {
var objCheckbox = document.getElementById(file);
if (objCheckbox.checked) {
readKml(file);
}
else {
ge.getFeatures().removeChild(currentKml[file]);
currentKml[file] = null;
}
}
 
function readKml(file) {
var kmlFolder = "chemin_de_mon_dossier_ou_se_trouvent_les_fichiers_kml"; // To set
var kmlUrl = kmlFolder + file;
google.earth.fetchKml(ge, kmlUrl, function(kml) {
if (!kml) {
alert("Erreur : Lecture du fichier KML impossible !");
return;
}
ge.getFeatures().appendChild(kml);
currentKml[file] = kml;
if (kml.getAbstractView()) {
ge.getView().setAbstractView(kml.getAbstractView());
}
});
}
var currentKml = {
"mon_ficheir_kml1": null, // To set
}
var currentKml = {
"mon_ficheir_kml2": null, // To set
}

et modifié mon fichier html comme ceci :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
!DOCTYPE html>
<html>
<head>
<title>*********</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <style type="text/css">
html { height: 100%;
} body {
height: 100%; margin: 0px; padding: 0px;
} #map {
height: 100%; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" ></script> <script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(45.281071, 8.393555); 
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.TERRAIN, 
navigationControl: true, mapTypeControl: true, 
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM.LEFT,
style: google.maps.ScaleControlStyle.DEFAULT }
};
 
var map = new google.maps.Map(
document.getElementById("map"), myOptions);
 
var kmllayer1 = new google.maps.KmlLayer('chemin_de_mon_fichier_kml1', {preserveViewport:true});
        kmllayer1.setMap(map);
        google.maps.event.addListener(kmllayer1, 'click', function(){
    map.setZoom(14);});
        center: latlng
        tag:'chk1'      
 
var kmllayer2 = new google.maps.KmlLayer('chemin_de_mon_fichier_kml2', {preserveViewport:true});
        kmllayer2.setMap(map);
        google.maps.event.addListener(kmllayer2, 'click', function(){
    map.setZoom(14);
        center: latlng
        tag:'chk2'
});
}
 
 
 
function detectBrowser() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("map");
if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1)
{
mapdiv.style.width = '100%'; myOptions = {
navigationControlOptions : {
style : google.maps.NavigationControlStyle.ANDROID
},
mapTypeControlOptions : {
style : google.maps.MapTypeControlStyle.DROPDOWN_MENU }
};
map.setOptions(myOptions); } else {
mapdiv.style.width = '100%'; }
}
 
        
</script>
</head>
 
<body onload="initialize()">
<div id="map" style="width: 622px; height: 500px;"></div>
<div><p><label><input type="checkbox" id="mon_ficher.kml1" onclick="toggleFile(this.id)" />
kml1</label></p>
<p><label><input type="checkbox" id="mon_ficher.kml2" onclick="toggleFile(this.id)" />
kml2</label></p></div>
 
<!-- Include Javascript -->
<script type="text/javascript" src="chemin_de_mon_fichier.js"></script> 
</body>
</html>

**georgie2** · 24/09/2012, 23h06

Je pense que les kml se lancent à cause de la fonction var kml layer 1 et 2.
Supprime ces fonctions et réessaie.

Mais tu dois aussi modifier le nom de ton dossier ou se trouvent tes kml. Je rappelle qu'ils doivent être hébergés, le nom du dossier les contenant commencera donc forcément par "http://" et devra se finir par un "/", du type :
http://www.xxx.fr/zzz/aaa/

**firebird13** · 24/09/2012, 23h25

Bonsoir georgie2,

j'ai pensé aussi qu'il y avait une incompatibilité entre les fonctions var klmlayer 1 et 2 et la fonction toggleFile.

J'ai supprimé les 2 fonctions var kmllayer 1 et 2.
J'ai rajouté "/" à la fin du chemin du dossier en ligne contenant les fichiers kml.
(ils sont bien hebergés en ligne).

Là les "layers" ne s'affichent plus, je n'ai plus rien..

**georgie2** · 25/09/2012, 07h24

Ok et il commence bien par "http://" ?

Peux-tu m'en dire plus sur l'API que tu utilises (GoogleMaps ?) ?

J'ai l'habitude d'utiliser ces codes avec l'API GoogleEarth, mais je ne savais même pas qu'on pouvait utiliser GoogleMaps en tant qu'API.

Par contre je sais que la lecture des kml n'est pas optimisée sur GoogleMaps (disparition de certaines symbologies, les balloons qui apparaissent parfois bizarrement...), alors qu'elle l'est sur GoogleEarth et son API.

Autre chose, ça n'explique pas les problèmes que tu as, mais pour plus de performances, il serait bon que toutes tes fonctions et déclarations soient dans ta feuille JS, et non dans le html.

Affichage KML à partir de checkbox

APIs Google

Vue hybride

Discussions similaires

Partager

Partager