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
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Castets</title>
<!-- en dessous les scripts CSS -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<!-- en dessous les scripts JS -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var availableTags = [
"ALLEE SAINT GABRIEL",
"CHEMIN DE LA MOUSQUE",
"CHEMIN DE LAGESTE",
"CHEMIN DU STUCS",
];
$( "#tags" ).autocomplete({
source: availableTags
});
} );
</script>
<p>Formulaire</p>
<form method="post" action="cible.php">
<p>
<label for="tags">Voie </label> <input type="text" name="tags" id="tags"/>
<input type="text" name="code_postal" value="40260" />
<input type="submit" value="Valider" />
</p>
</form>
<p>Carte</p>
<div id="map" style="width: 800px; height: 800px"> </div>
<link rel="stylesheet" href="leaflet/dist/leaflet.css" />
<script src="leaflet/dist/leaflet.js"></script>
<Link rel = " stylesheet " href = "leaflet/fullscreen/Control.FullScreen.css" />
<Script src = "leaflet/fullscreen/Control.FullScreen.js" ></script>
<link rel="stylesheet" href="leaflet/dist/leaflet.home.css" />
<script src="leaflet/dist/leaflet.home.js"></script>
<script>
//Définir les coordonnées du centre de la carte et le seuil de zoom
//var map = L.map('map').setView([43.88192199999999, -1.145308], 13, home: true);
var map = L.map('map', {center: new L.LatLng(43.88192199999999,-1.145308), zoom: 13, home: true});
// Ajouter le fond de carte OSM
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Ajouter le fond de carte ESRI
//L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
//attribution: 'Tiles © Esri — Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012'
//}).addTo(map);
// Créer un contrôle plein écran
var fsControl = new L.Control.FullScreen();
// Ajoutez le contrôle plein écran à la carte
map.addControl(fsControl);
// Détecter le basculement plein écran
map.on('enterFullscreen', function(){
if(window.console) window.console.log('enterFullscreen');
});
map.on('exitFullscreen', function(){
if(window.console) window.console.log('exitFullscreen');
});
// Ajouter des markers
L.marker([43.881770,-1.143101]).addTo(map) .bindPopup("<b>ALLEE SAINT GABRIEL</b>").on('click', clickZoom);
L.marker([43.882850,-1.135150]).addTo(map) .bindPopup("<b>CHEMIN DE LA MOUSQUE</b>").on('click', clickZoom);
L.marker([43.889826,-1.13380]).addTo(map) .bindPopup("<b>CHEMIN DE LAGESTE</b>").on('click', clickZoom);
L.marker([43.918047,-1.113200]).addTo(map) .bindPopup("<b>CHEMIN DU STUCS</b>").on('click', clickZoom);
// Coordonnées d'un point après clic (utile pour trouver les coordonnées des voies)
map.on('click', onMapClick);
function onMapClick(e) {
alert("Vous venez de cliquer aux coordonnées " + e.latlng.toString());
}
// Zoom sur marker après click dessus après ajout de .on(click', clickZoom) sur les markers
function clickZoom(e) { map.setView(e.target.getLatLng(),17); }
// Appareil mobile et géolocalisation
//map.locate({setView: true, maxZoom: 30});
</script>
</body>
</html> |
jQuery autocomplete + leaflet
Répondre avec citation
Partager