Bienvenue! Inscrivez-vous et rejoignez notre communauté :)
  • Login:

Bienvenue sur Forum SIG - Systèmes d'Information Géographique et Géomatique.

Bienvenue sur le forumSIG. S'il s'agit de votre première visite, assurez vous de faire une recherche préalable dans les FAQ SIG. Vous devez vous inscrire avant de pouvoir poster.

Affichage des résultats 1 à 8 sur 8

Discussion: Parser data GeoJSON

  1. #1

    Date d'inscription
    juillet 2018
    Messages
    4

    Question Parser data GeoJSON

    Bonjour à tous,

    Je découvre Leaflet, OSM et l'open data du gouvernement et ses bases de données, j'ai des bases en PHP mais pas en Javascript, du moins je suis en train de m'y mettre.

    Je viens vous voir car j'ai réussi à mettre en place une cartographie avec le chargement de points au format GeoJSON au sein de mon fichier, voici le code fonctionnel :

    mon index.html

    Code HTML:
    <!DOCTYPE html>    <html lang="fr" ><head>  <meta charset="UTF-8">  <title>GEOJSON avec Leaflet</title>  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>  <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">  <link rel="stylesheet" href="css/style.css"></head><body>  <div id="map"></div>  <script  src="js/index.js"></script></body>
    </html>
    puis un dossier "js" mon fichier important mes points et mes tiles :

    Code:
    // initialize the mapvar map = L.map('map', {
      center: [49.248577, 4.032121],
      zoom: 8
    });
    
    
    // Ajout de la couche MAP (OpenStreetMap)
    L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>'
    }).addTo(map);
    
    
    // Chargement de mes données GeoJSON
    var geojsonFeature = {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [4.71831,49.77414]
          },
          "properties": {
            "id": "A"
          }
        },
        {
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [4.77915,49.69753]
          },
          "properties": {
            "id": "B"
          }
        },
        {
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [4.84162,49.88413]
          },
          "properties": {
            "id": "C"
          }
        },
        {
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [4.42762,49.86884]
          },
          "properties": {
            "id": "D"
          }
        },
        {
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [5.08267,49.67592]
          },
          "properties": {
            "id": "D"
          }
        }
      ]
    };
    
    
    
    
    // Chargement de mes DATA dans un tableau
    L.geoJSON(geojsonFeature, {
      // Ma condition de style en fonction de la id
      style: function(feature) {
        switch(feature.properties.id){
          case 'B': return { color: "red" }
          case 'C': return { color: "green" }
          case 'D': return { color: "blue" }
        }
      },
      // CSS à retravailler
      pointToLayer: function(feature, latlng) {
        return L.circleMarker(latlng, {
          radius: 14,
          fillColor: "orange",
          color: "orange",
          weight: 2,
          opacity: 1,
          fillOpacity: 0.5
        });
      },
      // Ajout du tooltip
      onEachFeature: function(feature, layer) {
        // check if specific property is existing
        if(feature.properties.id) {
          layer.bindTooltip("Object: " + feature.properties.id); }
        }
    }).addTo(map);
    Ma seconde étape est de charger via ma bdd mes coordonnées, chose que j'essaie de faire, j'ai codé un fichier php "json_decode.php" qui converti ma requête à ma base en fichier GeoJSON, celui ci est placé à la racine au même niveau que mon index.php.

    Mon travail suivant est basé sur le code précédent mais je donne tout.

    j'ai mon index en php :

    Code PHP:
    <!DOCTYPE html>    <html lang="fr" ><head>  <meta charset="UTF-8">  <title>GEOJSON avec Leaflet</title>  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>  <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">  <link rel="stylesheet" href="css/style.css"></head><body>  <div id="map"></div>  <script  src="js/index.js"></script>  <script  src="json_encode.js"></script></body>
    </html> 
    mon json_decode.php :

    Code PHP:
    <?phpinclude_once("includes/connect.php");
    $reqsession $bdd->query("SELECT * FROM pharma_id");
    $geojson = array( 'type' => 'FeatureCollection''features' => array()); 
    while(
    $row $reqsession->fetch()) 

    $marker = array(                 'type' => 'Feature',                 'features' => array(                     'type' => 'Feature',                     "properties" => array(                         'id' => json_decode('['.$row['id'].']'),                                             ),                    "geometry" => array(                         'type' => 'Point',                        'coordinates' => json_decode('['.$row['LatPharma'].','.$row['LongPharma'].']')                         )                 )     ); array_push($geojson['features'], $marker['features']); }      echo json_encode($geojson); ?>
    Et c'est au niveau de mon index.js que je n'arrive pas à importer mon fichier généré, notamment par un lien url du type ../json_encode.php

    Code:
    // initialize the mapvar map = L.map('map', {
      center: [49.248577, 4.032121],
      zoom: 8
    });
    
    
    // Ajout de la couche MAP (OpenStreetMap)
    L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>'
    }).addTo(map);
    
    
    // Chargement de mes données GeoJSON ???????????????????????????????????????????????????????
    
    
    // Chargement de mes DATA dans un tableau
    L.geoJSON(geojsonFeature, {
      // Ma condition de style en fonction de la id
      style: function(feature) {
        switch(feature.properties.id){
          case 'B': return { color: "red" }
          case 'C': return { color: "green" }
          case 'D': return { color: "blue" }
        }
      },
      // CSS à retravailler
      pointToLayer: function(feature, latlng) {
        return L.circleMarker(latlng, {
          radius: 14,
          fillColor: "orange",
          color: "orange",
          weight: 2,
          opacity: 1,
          fillOpacity: 0.5
        });
      },
      // Ajout du tooltip
      onEachFeature: function(feature, layer) {
        // check if specific property is existing
        if(feature.properties.id) {
          layer.bindTooltip("Object: " + feature.properties.id); }
        }
    }).addTo(map);
    j'ai essayé via de l'AJAX mais je dois mal le placé, j'ai tenté ceci :

    Code:
    $.getJSON("../json_encode.php", function(data) {
    var geojsonLayer = new L.GeoJSON(data);	//New GeoJSON layer
    map.addLayer(geojsonLayer);	//Add layer to map	
    });
    J'ai vraiment cherché donc je ne vois que vous demander de l'aide !

    En vous remerciant grandement,

    AlexCode

  2. #2
    Rédacteur Supporter(rice)

    Date d'inscription
    octobre 2008
    Localisation
    Le caillou
    Emploi
    Développeur SIG
    Âge
    33
    Messages
    1 912

    Par défaut Re : Parser data GeoJSON

    Bonjour Alexandre,
    Passes le résultat de ton fichier json_decode.php dans un validateur geojson, par exemple http://geojsonlint.com/ pour contrôler que le résultat est correct.
    Vu le code, je peux déjà te dire qu'il ne le sera pas

    Quelque chose comme çà devrait faire l'affaire (mais mon php est rouillé et je n'ai pas testé).
    Code:
    <?php
     include_once("includes/connect.php");
    $reqsession = $bdd->query("SELECT * FROM pharma_id");
    $geojson = array( 'type' => 'FeatureCollection', 'features' => array()); 
    while($row = $reqsession->fetch()) 
    { 
    	$marker = array(
    		'type' => 'Feature', 
    		"properties" => array(
    			'id' => $row['id']
    		), 
    		"geometry" => array( 
    			'type' => 'Point',
    			'coordinates' => array($row['LatPharma'], $row['LongPharma'])
    		) 
    	);
    	array_push($geojson['features'], $marker); 
    }
    echo json_encode($geojson);
    ?>
    - - MISE A JOUR - -

    Et un petit header en plus en début de script sera un plus ;-)
    header('content-type:application/json');

    Sinon, pour le JavaScript, tu es très bien parti.

  3. #3

    Date d'inscription
    juillet 2018
    Messages
    4

    Wink Re : Parser data GeoJSON

    Bonjour Barbapapa (j'adore ce surnom),

    Merci pour ta réponse ! Effectivement je travaille avec ce validateur et j'ai bien essayé de savoir si mon code était valide et il l'est, je viens revérifier il m'indique bien mes deux points :

    Code:
    {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"id":[1]},"geometry":{"type":"Point","coordinates":[4.77915,49.69753]}},{"type":"Feature","properties":{"id":[2]},"geometry":{"type":"Point","coordinates":[4.71831,49.77414]}}]}
    Cliquez sur l'image pour la voir en taille réelle 

Nom : 		gis.jpg 
Affichages :	39 
Taille :		69,7 Ko 
ID : 			9052

    J'ai testé ton php et il me donne ce code qui lui ne passe pas :

    Code:
    {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"id":"1"},"geometry":{"type":"Point","coordinates":["4.77915","49.69753"]}},{"type":"Feature","properties":{"id":"2"},"geometry":{"type":"Point","coordinates":["4.71831","49.77414"]}}]}
    Donc j'aimerai bien savoir pourquoi que tu ne le penses pas valide, au niveau des IDs ? je veux savoir et avancer !

    Pour header c'est noté

    Encore merci !

  4. #4

    Date d'inscription
    juillet 2018
    Messages
    4

    Par défaut Re : Parser data GeoJSON

    Barbapapa ?

  5. #5

    Date d'inscription
    juillet 2018
    Messages
    4

    Par défaut Re : Parser data GeoJSON

    Enchanté !

    Un problème ? Un spam ? Autre ?

  6. #6
    Admin' Portail Supporter(rice)

    Date d'inscription
    mars 2005
    Localisation
    Messanges
    Emploi
    Géomaticien
    Organisme
    CNRS
    Âge
    39
    Messages
    5 050

    Mes réseaux sociaux

    Follow Lud On Twitter

    Par défaut Re : Parser data GeoJSON

    Bonjour
    Pas d'impatience, les membres ne sont pas continuellement sur le forum, ils répondent quand ils peuvent et quand ils le veulent ...
    "comme j' dis toujours C'est pas parce que c'est sérieux que ça doit être lugubre..." Phyto
    --------------
    Vous avez le droit de poster sur différents forums mais prévenez nous qu'on ne perde pas de temps à faire les mêmes réponses !
    --------------
    Merci de respecter les règles du forum
    Un avis, une remarque sur la nouvelle version du PortailSIG, cliquez ici
    Vous souhaitez devenir rédacteur du PortailSIG, contactez moi

  7. #7
    Rédacteur Supporter(rice)

    Date d'inscription
    octobre 2008
    Localisation
    Le caillou
    Emploi
    Développeur SIG
    Âge
    33
    Messages
    1 912

    Par défaut Re : Parser data GeoJSON

    Citation Envoyé par Lud Voir le message
    Bonjour
    Pas d'impatience, les membres ne sont pas continuellement sur le forum, ils répondent quand ils peuvent et quand ils le veulent ...
    Et quand le bébé tout juste sorti le veut

    - - MISE A JOUR - -

    Alexandre, tu as un tableau au lieu d'un entier pour définir ton id. C'est presque bon. (et dans ma version les coordonnées sont en texte au lieu de nombre, il faut les parser en nombre avec la fonction floatval)

  8. #8
    Admin' Portail Supporter(rice)

    Date d'inscription
    mars 2005
    Localisation
    Messanges
    Emploi
    Géomaticien
    Organisme
    CNRS
    Âge
    39
    Messages
    5 050

    Mes réseaux sociaux

    Follow Lud On Twitter

    Par défaut Re : Parser data GeoJSON

    Citation Envoyé par Barbapapa Voir le message
    Et quand le bébé tout juste sorti le veut
    Je n'osais pas dévoiler ta vie ;-)
    "comme j' dis toujours C'est pas parce que c'est sérieux que ça doit être lugubre..." Phyto
    --------------
    Vous avez le droit de poster sur différents forums mais prévenez nous qu'on ne perde pas de temps à faire les mêmes réponses !
    --------------
    Merci de respecter les règles du forum
    Un avis, une remarque sur la nouvelle version du PortailSIG, cliquez ici
    Vous souhaitez devenir rédacteur du PortailSIG, contactez moi

 

 

Discussions similaires

  1. [Leaflet] SetStyle et ReSetStyle sur GeoJson
    Par Sylvain M. dans le forum Assistance et Programmation
    Réponses: 0
    Dernier message: 25/07/2017, 09h34
  2. [Leaflet] Charger un layer geojson
    Par Nico dans le forum Assistance et Programmation
    Réponses: 4
    Dernier message: 30/05/2016, 13h38
  3. [Leaflet] Ajouter couche geojson
    Par Arno dans le forum Assistance et Programmation
    Réponses: 7
    Dernier message: 20/01/2014, 09h01
  4. [Données] Outils parser GML en C++
    Par zachada dans le forum Assistance Technique
    Réponses: 2
    Dernier message: 21/04/2009, 05h48
  5. [MapServer/Appli] CartoWeb : Chameleon XML Parser
    Par philo13 dans le forum Assistance et Programmation
    Réponses: 3
    Dernier message: 07/11/2006, 13h34

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •