Afficher des points sur une carte

Version imprimable

31/01/2019, 10h21
samy01

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.
31/01/2019, 10h46
NoSmoking
Bonjour,
ta demande est trop vague,
- avec quelle type de carte travailles tu ?
- comment sont ajoutées les coordonnées, via Ajax ?
31/01/2019, 10h55
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
31/01/2019, 11h10
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 !

1 pièce(s) jointe(s)

Code php

Code:

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

Code AJAX

code Ajax

Code:

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:

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

31/01/2019, 16h13
NoSmoking

Visiblement donc tu utilises le library LeaFlet :ccool:

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.

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:

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:

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

03/02/2019, 18h40
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) !

Bonjour,
Merci pour ta réponse
j'ai corrigé mes les points ne s'affichent toujours 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
 
 
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);

Difficile de dire en absence du contexte global mais je te propose de faire un test sur une base minimaliste.

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
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.