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

  1. #1
    Membre à l'essai
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    décembre 2018
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ghana

    Informations professionnelles :
    Activité : Administrateur de base de données
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : décembre 2018
    Messages : 10
    Points : 10
    Points
    10

    Par défaut Afficher des points sur une carte

    Bonjour à tous,

    je suis un débutant en ajax je développe une application SIG. j'ai intergré une carte a mon application. je veux afficher les points sur ma carte de façon dynamique, a chaque fois que les coordonnés sont ajoutées dans la base de donnée , ils doivent etre afficher automatiquement sur la carte. j'ai réussi a récupérer les données dans la base avec ajax, mais je n'arrive pas à les afficher sur la carte j'ai regardé des tutos mes j'ai pas trouvé solution.
    Merci d'avance.

  2. #2
    Modérateur

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

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 295
    Points : 32 109
    Points
    32 109

    Par défaut

    Bonjour,
    ta demande est trop vague,
    • avec quelle type de carte travailles tu ?
    • comment sont ajoutées les coordonnées, via Ajax ?

  3. #3
    Membre à l'essai
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    décembre 2018
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ghana

    Informations professionnelles :
    Activité : Administrateur de base de données
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : décembre 2018
    Messages : 10
    Points : 10
    Points
    10

    Par défaut

    j'ai réaliser une carte avec qgis et je l'ai exporter en HTML avec qgis2web pour l'integrer à lapplication.

    mes coordonnés sont enregistrer avec php et je les récupères avec ajax

  4. #4
    Modérateur

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

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 295
    Points : 32 109
    Points
    32 109

    Par défaut

    Je ne connais pas du tout cet outil, pourrais tu nous montrer, ou mettre une page test en ligne, pour que l'on se rende compte ?

    Il doit bien exister une documentation officielle qui te donne les méthodes utilisables pour placer un marqueur !

  5. #5
    Membre à l'essai
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    décembre 2018
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ghana

    Informations professionnelles :
    Activité : Administrateur de base de données
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : décembre 2018
    Messages : 10
    Points : 10
    Points
    10

    Par défaut Code php

    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
     
    // je fait la connexion ici
    require_once '../../config/conx.php';
     
    // je charge ma classe ici
     
    function chargerclasse($classe) {
        require ('../../models/' . $classe . '.php');
    }
    spl_autoload_register('chargerclasse'); // fonction d'auto chargement de classe.
     
    $posts = new T_poste(NULL,$bdd);
     
     
    // fonction pour recuperer les données
     
     if($_GET['action']=='select'){
     
         $pts = json_encode($posts->Select()); 
         echo createFeature ($pts);
     
         }
    Fichiers attachés Fichiers attachés

  6. #6
    Membre à l'essai
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    décembre 2018
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ghana

    Informations professionnelles :
    Activité : Administrateur de base de données
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : décembre 2018
    Messages : 10
    Points : 10
    Points
    10

    Par défaut Code AJAX

    code Ajax

    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
     
     
     
    window.onload = function (){
     
         $.ajax({
         type:'GET',
         url:'http://localhost/PachyDem/cartes/ws/wscarte.php',
         dataType:'json',
         data: 'action=select',
         timeout: 4000,
         success: function loading(data){
             //console.log(data);
              var POSTES = data;
        console.log(poste);
     
         },   
         error: function() {
                // J'affiche un message d'erreur
                box.html("verifier votre connexion internet.");
            }
     
       });
    code pour afficher les données sur la carte

    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
     
     var layer_POSTE = new L.geoJson(POSTES, {
                attribution: '<a href=""></a>',
                pane: 'pane_POSTE',
                onEachFeature: pop_POSTE,
                pointToLayer: function (feature, latlng) {
                    var context = {
                        feature: feature,
                        variables: {}
                    };
                    return L.marker(latlng);
                },
            });
            bounds_group.addLayer(layer_POSTE);
            map.addLayer(layer_POSTE);

  7. #7
    Modérateur

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

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 295
    Points : 32 109
    Points
    32 109

    Par défaut

    Visiblement donc tu utilises le library LeaFlet

    Cela va dépendre du format des datas que tu récupères, mais si ce sont des « features » il te faut utiliser la méthode GeoJSON.

  8. #8
    Membre à l'essai
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    décembre 2018
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ghana

    Informations professionnelles :
    Activité : Administrateur de base de données
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : décembre 2018
    Messages : 10
    Points : 10
    Points
    10

    Par défaut

    bonjour

    merci pour ta réponse

    j'ai refais mon code en suivent les liens que vous m'avez donné, mes les points ne s'affichent pas sur la carte
    j'ai créer le geojson en php et je le recupere avec la librairy geojson.ajax.

    voicie mon nouveau code

    php
    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
     
     
     
     
    // je fais la connexion a la bd ici
    require_once '../../config/conx_1.php';
     
    function chargerclasse($classe) {
        require ('../../models/' . $classe . '.php');
    }
    spl_autoload_register('chargerclasse'); // fonction d'auto chargement de classe.
     
     
    $posts = new T_poste(NULL,$bdd);
     
     
     
     if($_GET['action']=='select'){
     
         $pts =$posts->Select(); 
         //var_dump($pts);
         echo json_encode(jsone($pts));
     
         }
     
    function jsone($data)
    { 
        $geo_json = [];
        foreach ($data as $val) {
     
             $feature[]= array(
                'type'=>'Feature',
                'properties'=>array(               
                   "APPELATION"=>$val->getNom_fr(),
                   "APPELATI_1"=>$val->getNom_an(),
                   "CORD_X"=>$val->getCord_x(),
                   "CORD_Y"=>$val->getCord_y(),
                ),
                'geometry'=>array('coordinates'=>array($val->getCord_x(),$val->getCord_y()))
                );
     
        }
     
        $crs= array('type'=>'name',
                    'properties'=>array('name'=>'urn:ogc:def:crs:OGC:1.3:CRS84'));
     
        $geo_json = [ "type"=>"FeatureCollection",
                      "name"=>"POSTESG4S_8",
                      "crs"=>$crs,
                      "features"=>$feature
            ];
            return $geo_json;
    }
    lorsque je test il me ramène les donnée au format geojson

    voici mon code js pour afficher les points sur la carte

    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
     
     
     
     function style_POSTES_0() {
                return {
                    pane: 'pane_POSTES',
            rotationAngle: 0.0,
            rotationOrigin: 'center center',
            icon: L.icon({
                iconUrl: 'markers/red-marker.svg',
                iconSize: [18.24, 18.24]
            }),
                }
            }
           map.createPane('pane_POSTES');
           map.getPane('pane_POSTES').style.zIndex = 408;
           map.getPane('pane_POSTES').style['mix-blend-mode'] = 'normal';
     
     
     
            var layer_POSTESG4S_8 = new L.geoJson.ajax('http://localhost/PachyDem/cartes/ws/wscarte.php?action=select', {
     
              pane: 'pane_POSTES',
              onEachFeature: pop_POSTES,
              pointToLayer: function (feature, latlng) {
                   var context = {
                       feature: feature,
                       variables: {}
                  };
                    return L.marker(latlng, style_POSTES_0(feature));
               },
           });
            bounds_group.addLayer(layer_POSTES);
            map.addLayer(layer_POSTES);
    merci d'avance

  9. #9
    Modérateur

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

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 295
    Points : 32 109
    Points
    32 109

    Par défaut

    Tu récupères tes données dans var layer_POSTESG4S_8 mais je ne vois pas où tu l'ajoutes à la carte, par contre on trouve map.addLayer(layer_POSTES) !

  10. #10
    Membre à l'essai
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    décembre 2018
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ghana

    Informations professionnelles :
    Activité : Administrateur de base de données
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : décembre 2018
    Messages : 10
    Points : 10
    Points
    10

    Par défaut

    Bonjour,
    Merci pour ta réponse
    j'ai corrigé mes les points ne s'affichent toujours pas

    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
     
     
    function style_POSTES_0() {
                return {
                    pane: 'pane_POSTES',
            rotationAngle: 0.0,
            rotationOrigin: 'center center',
            icon: L.icon({
                iconUrl: 'markers/red-marker.svg',
                iconSize: [18.24, 18.24]
            }),
                }
            }
           map.createPane('pane_POSTES');
           map.getPane('pane_POSTES').style.zIndex = 408;
           map.getPane('pane_POSTES').style['mix-blend-mode'] = 'normal';
     
            var layer_POSTES = new L.geoJson.ajax('http://localhost/PachyDem/cartes/ws/wscarte.php?action=select', {
     
              pane: 'pane_POSTES',
              onEachFeature: pop_POSTES,
              pointToLayer: function (feature, latlng) {
                   var context = {
                       feature: feature,
                       variables: {}
                  };
                    return L.marker(latlng, style_POSTES_0(feature));
               },
           });
            bounds_group.addLayer(layer_POSTES);
            map.addLayer(layer_POSTES);

  11. #11
    Modérateur

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

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 295
    Points : 32 109
    Points
    32 109

    Par défaut

    Difficile de dire en absence du contexte global mais je te propose de faire un test sur une base minimaliste.
    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
    function showAjaxData(data) {
      var featuresLayer = new L.geoJSON(data, {
        style: function(feature) {
          return {
            color: feature.properties.color
          };
        },
        onEachFeature: function(feature, elem) {
          elem.bindPopup(feature.properties.name);
        }
      });
      oMap.addLayer(featuresLayer);
    }
     
    function getAjaxData(url, callback) {
      var oXhr = new XMLHttpRequest();
      oXhr.onload = function() {
        callback(JSON.parse(this.responseText));
      }
      oXhr.open("GET", url, true);
      oXhr.send(null);
    }
    var OSMLayer = new L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution: "&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
    });
    var oMap = new L.Map("carte", {
      zoom: 9,
      center: new L.latLng([47, 1])
    });
    oMap.addLayer(OSMLayer);
    getAjaxData("http://localhost/PachyDem/cartes/ws/wscarte.php?action=select", showAjaxData);
    c'est un code minimal qu'il faut bien évidement adapter à ton besoin.

Discussions similaires

  1. Localiser des points sur une carte géographique
    Par Msysteme dans le forum SIG : Système d'information Géographique
    Réponses: 4
    Dernier message: 28/07/2014, 13h05
  2. [Google Maps] Localiser des points sur une carte google
    Par Msysteme dans le forum APIs Google
    Réponses: 7
    Dernier message: 29/06/2014, 18h08
  3. Afficher des points sur une carte
    Par atta09 dans le forum Discussions diverses
    Réponses: 0
    Dernier message: 29/07/2013, 12h59
  4. Afficher des infobulles sur une carte
    Par morgan47 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 10
    Dernier message: 02/11/2012, 16h14
  5. Réponses: 9
    Dernier message: 20/07/2012, 17h15

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