IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

jQuery autocomplete + leaflet


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Responsable de service informatique
    Inscrit en
    Décembre 2015
    Messages
    44
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Responsable de service informatique

    Informations forums :
    Inscription : Décembre 2015
    Messages : 44
    Par défaut jQuery autocomplete + leaflet
    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 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
    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>

  2. #2
    Expert confirmé
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 670
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 670
    Par défaut
    pour qu'un clic sur un point remplisse le formulaire, vous pouvez faire cela dans la fonction "clickZoom"

  3. #3
    Membre averti
    Homme Profil pro
    Responsable de service informatique
    Inscrit en
    Décembre 2015
    Messages
    44
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Responsable de service informatique

    Informations forums :
    Inscription : Décembre 2015
    Messages : 44
    Par défaut 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

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 209
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 209
    Par défaut
    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.

  5. #5
    Membre averti
    Homme Profil pro
    Responsable de service informatique
    Inscrit en
    Décembre 2015
    Messages
    44
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Responsable de service informatique

    Informations forums :
    Inscription : Décembre 2015
    Messages : 44
    Par défaut 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!!!!

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 209
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 209
    Par défaut
    Attache un événement click sur ton marker et regarde du coté de GeoJSON si tu dois ajouter des informations pour les afficher.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. jQuery autocomplete avec un tableau à id
    Par mLk92 dans le forum jQuery
    Réponses: 7
    Dernier message: 18/08/2010, 16h59
  2. [JQuery] Autocomplete, du mal avec Json
    Par supertino7 dans le forum jQuery
    Réponses: 4
    Dernier message: 21/09/2009, 18h25
  3. utilisation avancée de jquery.autocomplete
    Par saryry dans le forum jQuery
    Réponses: 1
    Dernier message: 04/09/2009, 01h19
  4. JQuery autocompletion asp.net
    Par M.Mounir dans le forum jQuery
    Réponses: 1
    Dernier message: 18/04/2009, 17h23

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo