Leaflet et autocomplete

a marqué ce sujet comme résolu.

Bonjour,

Tout d’abord super tuto qui me permet d’avancer dans mon projet.

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 

  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
<!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: 500px; height: 500px"> </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> 






         <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);



            // 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(),15); } 


            // Appareil mobile et géolocalisation
            //map.locate({setView: true, maxZoom: 13});


         </script>

    </body>

</html>
+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte