jQuery autocomplete + leaflet

Version imprimable

Bonjour,

Je débute dans le développement donc désolé pour les erreurs.

Je souhaite réaliser un autocomplete (réalisé grâce à jquery) qui soit en interaction avec les markers de ma carte OSM (réalisée avec leaflet).

Le but est que quand je choisie une voie je sois redirigé vers la voie sur ma carte (pas le plus important) et que quand je clique sur un marqueur de ma carte ça remplisse la case voie de mon formulaire (le plus important).

Pour le moment le peu de chose que j'ai réalisé fonctionne très bien mais là je suis bloqué.

Le formulaire pour le moment renvoie vers une page cible mais le but sera de remplir une base de données.

Merci d'avance

Voici le code

Code:

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: '&copy; <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 &copy; Esri &mdash; 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>

31/03/2017, 00h09
mathieu

pour qu'un clic sur un point remplisse le formulaire, vous pouvez faire cela dans la fonction "clickZoom"
31/03/2017, 13h51
yole9

Merci

Bonjour,

Merci pour votre aide, mais pouvez-vous être plus précis car justement j'ai essayé à cette endroit mais ça ne marche pas ou plutôt je n'y arrive pas!!!

Cordialement
01/04/2017, 10h02
NoSmoking

Bonjour,
il existe de nombreux plugins concernant cette fonctionnalité : Search & popups.

Parmi ceux ci il y a : Leaflet.Control.Search avec tous pleins d'exemples, tu devrais trouver celui qui te convient le mieux.
03/04/2017, 11h16
yole9

re

Bonjour,

Merci pour votre aide mais j'ai testé "Leaflet.Control.Search " que j'ai du mal à faire fonctionner et qui fonctionne que dans un sens et pas celui qui m'intéresse le plus.

Je bloque je bloque!!!!
03/04/2017, 14h17
NoSmoking

Attache un événement click sur ton marker et regarde du coté de GeoJSON si tu dois ajouter des informations pour les afficher.
04/04/2017, 11h30
yole9

Re

Merci de m'aider mais je galère...

Apparemment pour la fonction de recherche que tu m'as proposé il faut installer npm... je travail sous windows et avec xampp et je ne connais pas npm.

N'y a t'il pas un moyen de remplir la case voie juste avec le click sur le marqueur?
04/04/2017, 15h23
NoSmoking

Citation:

Apparemment pour la fonction de recherche que tu m'as proposé il faut installer npm

tu n'en as dans ton cas aucunement besoin il te suffit de télécharger le script ou de l'appeler sur un CDN si existe ce qui semble être le cas.

Citation:

N'y a t'il pas un moyen de remplir la case voie juste avec le click sur le marqueur?

oui à condition que tu disposes des informations à afficher dans ton objet marker.

Il serait intéressant que tu précises combien de voies tu as à gérer et sous quelle forme se présente ces données, cela pourrait orienter la solution, les passer à la fonction et les liées au marker.

Encore merci pour ton aide,

J'ai mis le code dans mon premier post ou il y a 4 markers en fait je vais avoir 10 appli à faire avec 10 markers pour l'une et 70 max pour une autre etc...

Les marqueurs sont donc dans le code et nom pas sur une source externe.

Voici ce que j'ai essayé avec "controlSearch" mais qui ne fonctionne pas:

Code:

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
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="UTF-8">
		<title>Lit</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 liste = [
                                                      "ALLEE SAINT GABRIEL",
                                                      "CHEMIN DE LA MOUSQUE",
                                                      "CHEMIN DE LAGESTE",
                                                      "CHEMIN DU STUCS"
                                                ];
 
 
 
                        $( "#voie" ).autocomplete({
                        source: liste
                        });
                } );
            </script>	
 
 
 
 
 
 
		<p>Formulaire</p>
 
		<form method="post" action="cible.php">
 
		   <p>	
				<label for="voie">Voie </label> <input type="text" name="voie" id="voie"/>
				<input type="text" name="code_postal" value="40260" />
				<input type="submit" value="Valider" />
		   </p>
 
		</form>
 
		<p>Carte</p>
 
		 <div id="map" style="width: 100%; height: 80vh"> </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>
         <link rel="stylesheet" href="leaflet/leaflet-search-master/src/leaflet-search.css" />
		<link rel="stylesheet" href="leaflet/leaflet-search-master/style.css" />
		<script type="text/javascript" src="http://gc.kis.scr.kaspersky-labs.com/0CF5508F-913D-0043-A7B0-3C05F8BB3DD1/main.js" charset="UTF-8"></script></head>
         <script src="leaflet/leaflet-search-master/src/leaflet-search.js"></script>
         <script src="leaflet/leaflet-search-master/dist/leaflet-search.min.js"></script>
 
 
 
 
 
				<script>
 
                                        
 
                                        //Définir les coordonnées du centre de la carte et le seuil de zoom
                                
                                 var map = L.map('map', {center: new L.LatLng(43.88192199999999,-1.145308), zoom: 13, home: true});
 
 
                                
 
 
 
                                // 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');
                                        });
 
                                        //Échantillons de valeurs de données pour remplir la carte
                                        var data = [
                                                {"loc":[43.881770,-1.143101], "title":"ALLEE SAINT GABRIEL"},
                                                {"loc":[43.882850,-1.135150], "title":"CHEMIN DE LA MOUSQUE"},
                                                {"loc":[43.889826,-1.13380], "title":"CHEMIN DE LAGESTE"}
                                                
                                        ];
 
                                        map.addLayer(new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'));
 
                                        var markersLayer = new L.LayerGroup();  //La couche contient des éléments recherchés
 
                                        map.addLayer(markersLayer);
 
                                        var controlSearch = new L.Control.Search({
                                                position:'topright',            
                                                layer: markersLayer,
                                                initial: false,
                                                zoom: 8,
                                                marker: false
                                        });
 
 
                                        map.addControl( controlSearch );
 
 
                                                ////////////Localiser la carte avec des marqueurs à partir d'exemples de données
                                        for(i in data) {
                                                var title = data[i].title,      //Valeur recherchée
                                                        loc = data[i].loc,              //Position trouvée
                                                        marker = new L.Marker(new L.latLng(loc), {title: title} );//se property searched
                                                marker.bindPopup( title );
                                                markersLayer.addLayer(marker);
                                        }
 
 
 
 
 
         </script>
 
         <script type="text/javascript" src="http://labs.easyblog.it/labs-common.js"></script>
 
	</body>
 
</html>

Citation:

Voici ce que j'ai essayé avec "controlSearch" mais qui ne fonctionne pas:

Bon on va laisser tomber cette lib et utiliser celle de jQuery visiblement plus simple à appréhender.

Il est visiblement intéressant de construire ta liste de recherche à partir des informations disponibles sur tes markers, que leurs données soient ou non dans un fichier externe.

Je te propose cet exemple qui ne reprend pas tes données mais qui devrait coller, ou presque, à ce que tu cherches à faire.

Code:

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Leaflet Search et Autocomplete</title>
<meta name="Author" content="NoSmoking">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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 src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<style>
html, body {
  margin: 0 0 1em;
  padding: 0;
  font: 1em/1.5 Verdana,sans-serif;
  font-size: 100%;
}
h1, h2, h3 {
  margin: 0 0 .5em .25em;
  color: #069;
}
#main {
  margin: 0 auto;
  max-width: 60em;
  border-top: 1px solid transparent;
}
.section {
  margin: 0 2em 1em;
}
form {
  margin: auto;
  padding: .5em;
  max-width: 50em;
  border: 1px solid #CCC;
}
form p {
  margin: .25em;
  font-size: .9em;
}
label {
  display: inline-block;
  width: 4em;
  text-align: center;
}
label:after {
  content: ":";
  float: right;
  margin-right: .5em;
}
input {
  width: 8em;
  font: inherit;
}
[name="code_postal"] {
  width: 5em;
}
[type="submit"] {
  float: right;
}
#carte {
  height: 37em;
  margin: 0 auto;
  max-width: 50em;
  border: 5px solid #FFF;
  font-size: 1em;
  box-shadow: 0 2px 4px 2px #CCC;
}
.leaflet-popup-content-wrapper {
  border-radius: 0;
  font-size: .8em;
  font-family: Verdana, sans-serif;
}
</style>
</head>
<body>
<div id="main">
  <header>
    <h1>Leaflet Search et Autocomplete</h1>
  </header>
  <div class="section">
    <h2>Formulaire</h2>
    <form method="get" action="cible.php">
      <p>
        <label>Voie</label><input type="text" name="ville" value="">
        <label>CP</label><input type="text" name="code_postal" value="">
        <input type="submit" value="Valider">
      </p>
    </form>
  </div>
  <div class="section">
    <h2>Carte</h2>
    <div id="carte"></div>
  </div>
</div>
<script>
// données des markers à afficher
var tData = [
    { lat:44.837368, lon:-0.576144, titre:'Bordeaux',  cp: 33000, info:'<b>Bordeaux</b><br>la suite du texte...'},
    { lat:45.194276, lon:5.731633,  titre:'Grenoble',  cp: 38000, info:'<b>Grenoble</b><br>la suite du texte...'},
    { lat:45.767299, lon:4.834329,  titre:'Lyon',      cp: 69000, info:'<b>Lyon</b><br>la suite du texte...'},
    { lat:43.297612, lon:5.381042,  titre:'Marseille', cp: 13000, info:'<b>Marseille</b><br>la suite du texte...'},
    { lat:48.856667, lon:2.350987,  titre:'Paris',     cp: 75000, info:'<b>Paris</b><br>la suite du texte...'}
];
 
// création de la carte
var oMap = L.map("carte", {
  "center": new L.LatLng(46.8, 1.7),
  "zoom": 6,
  "home": true
});
 
// Ajout du fond de carte OSM
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(oMap);
// création et ajout d'un LayerGroup
var oLayerGroup = new L.LayerGroup();
oMap.addLayer(oLayerGroup);
 
// Initialisation des markers
var i;
var oData = [];
var data;
var oMarker;
for ( i = 0; i < tData.length; i += 1) {
  data = tData[i];
  // création marker
  oMarker = L.marker([data.lat, data.lon])
    .addTo(oLayerGroup)
    .bindPopup(data.info);
 
  // on passe par une closure pour transmettre les données
  (function(param) {
    oMarker.on("click",
        function(){
          $("[name='ville']").val(param.titre);
          $("[name='code_postal']").val(param.cp);
       }
    )
   })(data);
 
  // init données pour auto-completion
  oData.push({
    "label": data.titre,
    "cp": data.cp,
    "value": oLayerGroup.getLayerId(oMarker) // récup. id leaflet du marker
  });
}
// fonction appelée sur auto-complétion
function handleSelect(data) {
  var marker = oLayerGroup.getLayer(data.value);
  oMap.setView(marker.getLatLng(), 8);
  marker.fire('click');
}
 
// mise en place auto-complétion
$(function () {
  var $ville = $('[name=\'ville\']');
  var $cp = $('[name=\'code_postal\']');
  $ville.autocomplete({
    "source": oData,
    "select": function (event, ui) {
      // on rempli les champs
      $ville.val(ui.item.label);
      $cp.val(ui.item.cp);
      // on appelle la fonction
      handleSelect(ui.item);
      return false;
    }
  })
});
</script>
</body>
</html>

05/04/2017, 14h16
yole9

Super

Bonjour,

C'est exactement ce que je cherchais ça marche super!!!!

Merci merci merci

Bon j'ai 2 petits soucis le bouton home fonctionne pas la fonction plein écran ne marche pas!!!
05/04/2017, 14h20
yole9

re

Désolé la bouton d'accueil fonctionne j'avais oublié d'appeler la librairie, c'est juste le plein écran qui ne fonctionne pas!!!

Encore merci de ton aide
05/04/2017, 14h22
yole9

re re

Franchement encore merci tout fonctionne à la perfection!!!