Retirer objet couche Géoportail [Leaflet]

Invité · 10/06/2016, 09h42

Bonjour,

Je viens vers vous aujourd'hui pour vous demander des informations. Je voudrais enlever le bouton blanc, obligé le menu des couches à rester affiché, changer les yeux en case à cocher et enfin enlever la poubelle et la fonction associée, mais je ne sais pas comment réaliser ces tâches.

Merci.

Nom : Capture.PNG
Affichages : 640
Taille : 32,4 Ko

Nom : Capture.PNG
Affichages : 640
Taille : 32,4 Ko

**lowzonenose** · 10/06/2016, 12h46

enlever le bouton blanc

CSS : GPshowLayersListPicto : {
display : none;
}

obligé le menu des couches à rester affiché

CODE : L.geoportalControl.LayerSwitcher({collapsed : false});

changer les yeux en case à cocher

CSS : #GPlayerSwitcher label {
display: block;
}

enlever la poubelle

CSS : .GPlayerRemove {
display: none;
}

Invité · 10/06/2016, 15h21

J'ai deux soucis sur les codes que vous m'avez fournis : sur les yeux pour les changer en case à cocher ça ne fonctionne pas et comment pourrais-je faire pour que la liste des couches soient de base ouverte ?

Nom : Capture.PNG
Affichages : 644
Taille : 7,8 Ko

Nom : Capture.PNG
Affichages : 644
Taille : 7,8 Ko

Dois-je ajouter le code ici le code que vous m'avez fourni pour les yeux ?

**gcebelieu** · 14/06/2016, 10h32

les instructions qui ont été données sont :

soit des surcharges CSS à mettre dans votre page HTML => Il existe des tutoriels ou documentations sur le sujet pour cela :

http://www.css-faciles.com/premiers-pas-css.php
http://www.w3schools.com/css/css_syntax.asp

soit des paramètres à passer à la fonction qui crée le widget (pour avoir le gestionnaire de couches déplié à l'ouverture de la page) :

Code :

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

1
2
L.geoportalControl.LayerSwitcher({collapsed : false});

Si cela ne fonctionne pas, un accès au code de votre application (page web en ligne par exemple) peut aider à comprendre le problème.

Gilles

Invité · 14/06/2016, 10h41

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
<!DOCTYPE html>
<html>
	<head>
		<title>Localisation avec GéoPortail</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		
		<link rel="stylesheet" href="./leaflet.css" />
		<link rel="stylesheet" href="./GpPluginLeaflet.css" />
		
		
		<script data-key="4e15lhgzqeg5y644rmzf4zx1" src="./GpPluginLeaflet.js"></script>
	
		<style type="text/css">
			html
			{
				height: 100%;
				font-family: Verdana,sans-serif;
			}
			body
			{
				height: 100%;
				margin: 0;
				padding: 0;
			}
			@media print
			{
				body { display:block !important; }
			}
			div#entete input[type="text"]
			{
				width: 100%;
				box-sizing: border-box;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
			}
			div#entete
			{
				width: 100%;
				height: auto;
				white-space: nowrap;
			}
			.map
			{
				width: 100%;
				min-width: 800px;
				height: calc(100% - 200px);
				min-height: 600px;
				background-position: center center; 
				background-repeat: no-repeat;   
			}
			
			footer a, footer a:link, footer a:visited, footer a:hover
			{
				text-decoration:none;
				color:black;
			}
			.gpControlLayerSwitcher.olControlNoSelect.gpMainDivClass
			{
				width: 190px;
			}
			.gpControlFloating[id*=WMS]
			{
				min-height: 310px;
				max-width: 470px;
			}
			.gpControlFloating[id*=WMS] > .gpControlFloatingBody
			{
				min-height: 290px;
				max-width: 470px;
				background-color:#ffffff;
			}
			footer
			{
				position: absolute;
				bottom: 0;
				font-size: x-small;
				text-align: center;
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div id="entete">

			<table width="100%"><tr><td width="100%" align="center">
				<b>Visualiser la carte &agrave; partir d&#39;une adresse, du nom d&#39;un lieu ou des coordonn&eacute;es</b>
				</td></tr></table>

				<form action="#" onsubmit="showAddress(this.adresse.value,this.parcelle.value,this.input_lat.value,this.input_lng.value); return false;">
					<table width="100%">
						<tr>
							<td width="60%" align="center">Adresse (num&eacute;ro, rue, code postal et/ou ville, pays)</td>
							<td width="8%" align="center">Latitude</td>
							<td width="8%" align="center">Longitude</td>
							<td width="12%" align="center">Parcelle (97408000BE0088)</td>
							<td width="6%"></td>
							<td width="6%"></td>
						</tr>
						<tr>
							<td width="60%"><input type="text" name="adresse" id="adresse" value="" /></td>
							<td width="8%"><input type="text" name="input_lat" id="input_lat" value="" /></td>
							<td width="8%"><input type="text" name="input_lng" id="input_lng" value="" /></td>
							<td width="12%"><input type="text" name="parcelle" id="parcelle" value="" /></td>
							<td width="6%"><input type="submit" value="Visualiser" name="Visualiser" /></td>
						</tr>
					</table>
				</form>

				<form id="visuGM" action="visuGM.php" method="post">
					<input type="hidden" name="zoom_level" id="zoom_level" />
					<input type="hidden" name="target_lat" id="target_lat" />
					<input type="hidden" name="target_lon" id="target_lon" />
					<table bgcolor="#FFFFCC" width="100%">
						<tr>
							<td width="11%" height="17" align="center"><b>Latitude</b></td>
							<td width="11%" height="17" align="center"><b>Longitude</b></td>
							<td width="5%" height="17" align="center"><b>Alti</b></td>
							<td width="3%" height="17" align="center"><input type="button" value="Alti" name="btnAlti" onclick="GetAlti();" /></td>
							<td width="33%" height="34" rowspan="2" align="center"><img src="images/geoportail.png" width="210" height="50"/></td>
							<td width="37%" height="34" rowspan="2" align="center"><a href="javascript: submitVisuGM()">Localiser avec Google Maps</a></td>
						</tr>
						<tr>
							<td id="latitude" width="11%" height="17" align="center"><input type="text" name="lat" id="lat" /></td>
							<td id="longitude" width="11%" height="17" align="center"><input type="text" name="lng" id="lng" /></td>
							<td id="altitude" width="5%" height="17" align="center"><input type="text" name="alti" id="alti" /></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
				</form>
			</table>

		</div>
		<div id="map" style="width: 100%; height: calc(100% - 149.81px); background-position: center center; background-repeat: no-repeat; position: absolute; z-index = 1; "></div>
		<footer id="footer"><a href="http://www.geoportail.gouv.fr/mentions-legales" id="legal" target="_blank">Mentions L&eacute;gales</a> - &copy;IGN 2016</footer>
	
		<script src="./leaflet.js"></script>
		<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
		<script src="jquery-2.2.4.min.js"></script>
		<script src="./GpPluginLeaflet.js"></script>
		
	
		<script>
			window.onload = function () {
                Gp.Services.getConfig({
                    apiKey: 'maclé',
                    onSuccess: function (response) {
					   // Création de la carte
						var map  = L.map('map', {
							zoom : 10,
							center : L.latLng(43.8173928, 4.3360565)
						});

						// Création de la couche
						var lyrOSM= L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png?') ;
						var lyrLimAdmin = L.geoportalLayer.WMTS({
							layer: "ADMINISTRATIVEUNITS.BOUNDARIES",
						});
						
						var lyrRoute = L.geoportalLayer.WMTS({
							layer: "TRANSPORTNETWORKS.ROADS",
						});
							
						var lyrCadastre = L.geoportalLayer.WMTS({
							layer: "CADASTRALPARCELS.PARCELS",
						});
							
						var lyrIGN = L.geoportalLayer.WMTS({
							layer: "GEOGRAPHICALGRIDSYSTEMS.MAPS",
						});
							
						var lyrAerien = L.geoportalLayer.WMTS({
							layer: "ORTHOIMAGERY.ORTHOPHOTOS",
						});
							
						map.addLayer(lyrAerien);
						map.addLayer(lyrIGN);	
						map.addLayer(lyrCadastre);
						map.addLayer(lyrRoute);						
						map.addLayer(lyrLimAdmin);	
						
						var layerSwitcher = L.geoportalControl.LayerSwitcher({
							layers : [
							{
								layer : lyrOSM,
								config : {
									title : "OSM",
									description : "Couche Open Street Maps"
								}
							},
							{
								layer : lyrLimAdmin,
                                config : {
									visibility : false
								}
							},
							{
                                layer : lyrIGN,
                                config : {
                                    visibility : false
                                }
                            },
							{
                                layer : lyrRoute,
                                config : {
                                    visibility : false
                                }
                            }
							]
						});
						map.addControl(layerSwitcher);
						L.geoportalControl.LayerSwitcher({collapsed : false});
						
						var searchCtrl = L.geoportalControl.SearchEngine({});
						map.addControl(searchCtrl);
						L.geoportalControl.LayerSwitcher({collapsed : false});
						
						//Définition du centre de la carte
						var getCenterPoint = function(map) {
********					var mapCenter = map.getCenter().toString();
************				var centerLat = parseFloat(mapCenter.substring(7, mapCenter.indexOf(',')));
************				var centerLng = parseFloat(mapCenter.substring(mapCenter.indexOf(',') + 2));
********					return {latitude: centerLat, longitude: centerLng};
						};
						
						//Défini la position du marqueur et affiche la latitude et la longitude du point
						var setNewCenterPoint = function(map) {
********					var centerPoint = getCenterPoint(map);
********					marqueur = L.marker([centerPoint.latitude, centerPoint.longitude], {
************					draggable: true
********					}).addTo(map);
********					document.getElementById('lat').value = centerPoint.latitude;
********					document.getElementById('lng').value = centerPoint.longitude;
						};
						
						
						
						setNewCenterPoint(map);
*						map.on('dragend zoomend', function(e) {
****						if (marqueur) {
********						map.removeLayer(marqueur);
****						}
*							setNewCenterPoint(map);
						});
					}
				});
            }
			
			document.getElementsByID("map").style.cursor = "url('http://wiki-devel.sugarlabs.org/images/e/e2/Arrow.cur'), auto";
		</script>	
	</body>
</html>

Retirer objet couche Géoportail [Leaflet]

IGN API Géoportail

Discussions similaires

Partager

Partager