Discussion :

[samy01]

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.

[NoSmoking]

Bonjour,
ta demande est trop vague,

• avec quelle type de carte travailles tu ?
• comment sont ajoutées les coordonnées, via Ajax ?

[samy01]

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

[NoSmoking]

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 !

[samy01]

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

[samy01]

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

[NoSmoking]

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.

[samy01]

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

[NoSmoking]

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

[samy01]

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

[NoSmoking]

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.