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 à 15 sur 15
  1. #1

    Date d'inscription
    janvier 2005
    Localisation
    Mayenne (53)
    Âge
    37
    Messages
    742

    Par défaut Affichage GeoJson + HeatMap + Cluster

    Bonjour à tous,

    Je tente l'affichage dans une carte Leaflet d'une couche GeoJson clusterisée (plugin Leaflet.markercluster ), ainsi que de sa "Heatmap"/"carte de chaleur" (plugin Leaflet.heat ).
    Le clustering fonctionne bien, mais n'y connaissant pas grand chose en Javascript, je ne sais pas trop comment mélanger les 2 codes/plugins.
    Au final je souhaiterais 2 layers distincts : 1 de la couche clusterisée, 1 de la heatmap.

    Mon GeoJson est généré dynamiquement par une requête PHP (d'après cet exemple), et je l'appelle par cette ligne :
    Code:
    $.getJSON("geojson_7j.php", function(obs) { addObsToMap(obs, map); });
    (c'est de l'AJAX, c'est bien ça ?)

    La fonction qui ajoute mon GeoJson clusterisé est celle-ci :
    Code:
    function addObsToMap(obs, map) {
    var markers = L.markerClusterGroup();
            var obslayer = L.geoJson(obs, {
                onEachFeature: function (feature, layer) {
                var popupText = "<img alt='" + feature.properties.nom_liste + "' src='" + feature.properties.urlpicto + "'> " + "<a href='" + feature.properties.urlespece + "'>" + feature.properties.nom_fr + " (<i>" + feature.properties.nom_la + "</i>)</a>" + "<br>Date: " + feature.properties.dateobs + "<br>Observateurs: " + feature.properties.observateurs;
                layer.bindPopup(popupText); }
            });
            markers.addLayer(obslayer);
            map.addLayer(markers);
            map.fitBounds(markers.getBounds());
    }
    Pour la HeatMap, j'ai compris que le plugin a besoin d'un "array" de coordonnées.
    Sur Github, il est proposé cette fonction pour convertir le GeoJson en array exploitable par le plugin (lien vers le message) :

    Code:
    geoJson2heat = function(geojson) { return geojson.features.map(function(feature) { return [parseFloat(feature.geometry.coordinates[1]), parseFloat(feature.geometry.coordinates[0])]; }); }
    var geoData = geoJson2heat(geojson_data, 1);
    var heatMap = new L.heatLayer(geoData,{radius: 40, blur: 25, maxZoom: 17});
    map.addLayer(heatMap);
    Mais comme je me mélange un peu les pinceaux entre les noms des fonctions, des variables, ..., je ne sais pas quel est la correspondance entre les noms de ma couche geaojson clusterisée ("obs", "oblayer", "marker") et de cet exemple ("geojson", "geojson_data", "geoData").
    Désolé, c'est vraiment du b.a.-ba, mais du coup, peut-être ne sera-ce pas trop compliqué de m'aider !

    (désolé, je ne peux envoyer de lien vers l'URL de tests, les données ne sont pas communicables)

    Merci d'avance pour votre aide !

    Sylvain M.

  2. #2

    Date d'inscription
    mai 2011
    Localisation
    Algérie
    Emploi
    Cadre d'études Carto/SIG
    Organisme
    Bureau National d'Etudes pour le Développement Rural
    Âge
    27
    Messages
    155

    Mes réseaux sociaux

    Add parazitenew on Facebook
    Add parazitenew on Linkedin

    Par défaut Re : Affichage GeoJson + HeatMap + Cluster

    Bonsoir,

    Est ce que chaque carte fonctionne? La carte avec les cluster apparemment oui, la heatmap marche aussi? Si oui, à ce stade t'as bel et bien deux layers distincts. Il ne reste qu'à créer un layergroup, avec des boutons radio pour choisir la quelle afficher.
    Si j'ai pu t'aider, un petit pouce à gauche serait très apprécié

  3. #3

    Date d'inscription
    janvier 2005
    Localisation
    Mayenne (53)
    Âge
    37
    Messages
    742

    Par défaut Re : Affichage GeoJson + HeatMap + Cluster

    Je n'ai pas essayé la Heatmap seule (j'aurais dû en effet), j'ai tout de suite essayé de combiner les 2 plugins (les clusters seuls, par lesquels j'ai commencé, fonctionnent).
    Demain, j'essaierai la Heatmap seule en effet pour y voir plus clair.

    En fait, il y a cette ligne dont je ne comprends pas trop le fonctionnement :
    Code:
    $.getJSON("geojson_7j.php", function(obs) { addObsToMap(obs, map); });
    Le $.getJSON, c'est du AJAX ou du JQuery ? (que je me documente dans la bonne direction : je ne connais ni l'un ni l'autre pour le moment)
    Peux-tu me traduire ce que ça fait ?

  4. #4

    Date d'inscription
    janvier 2005
    Localisation
    Mayenne (53)
    Âge
    37
    Messages
    742

    Par défaut Re : Affichage GeoJson + HeatMap + Cluster

    Le $.getJSON, c'est du AJAX ou du JQuery
    Bon, je m'auto répond : c'est du JQuery :
    http://api.jquery.com/jQuery.getJSON/
    Plus qu'à lire tout ça après une bonne nuit de sommeil

  5. #5

    Date d'inscription
    mai 2011
    Localisation
    Algérie
    Emploi
    Cadre d'études Carto/SIG
    Organisme
    Bureau National d'Etudes pour le Développement Rural
    Âge
    27
    Messages
    155

    Mes réseaux sociaux

    Add parazitenew on Facebook
    Add parazitenew on Linkedin

    Par défaut Re : Affichage GeoJson + HeatMap + Cluster

    Bonjour, oui c'est du Jquery.

    $.getJSON("geojson_7j.php"
    récupère des données au format geojson généré par le script php.

    function(obs)
    Enregistre le contenu du résultat du script php (les données en geojson) dans la variable "obs"

    addObsToMap(obs, map)
    il ajoute les données de la variable obs sur la carte déclarée sous le nom "map"
    Si j'ai pu t'aider, un petit pouce à gauche serait très apprécié

  6. #6

    Date d'inscription
    janvier 2005
    Localisation
    Mayenne (53)
    Âge
    37
    Messages
    742

    Par défaut Re : Affichage GeoJson + HeatMap + Cluster

    Merci pour tes éclaircissements.

    Mais je n'arrive pas à comprendre d'où vient la variable geojson_data du code proposé dans ce message.
    Il y est dit :
    Citation Envoyé par Jmuccigr
    [...]where geojson_data is the variable declared by the .js file that contains the geojson data
    (j'ai posé la question directement sur Github je serai peut-être plus compréhensible dans mes questions en Français ici )

    Le contenu de mon GeoJson est de ce type :
    Code:
    {"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-0.341547,48.528597]},"properties":{ ... ...
    Du coup, comment dois-je nommer les variables en rouges de ces codes afin qu'elles correspondent à mon GeoJson ?
    Code:
    geoJson2heat = function(geojson) {
    return geojson.features.map(function(feature) {
    return [parseFloat(feature.geometry.coordinates[1]), parseFloat(feature.geometry.coordinates[0])];
    });
    }
    
    [...]
    
    var geoData = geoJson2heat(geojson_data, 1);
    var heatMap = new L.heatLayer(geoData,{radius: 40, blur: 25, maxZoom: 17});
    map.addLayer(heatMap);
    Je pense que geojson = obs, mais je n'en suis pas sûr.
    Mais ce geojson_data, je vois pas...

  7. #7

    Date d'inscription
    janvier 2005
    Localisation
    Mayenne (53)
    Âge
    37
    Messages
    742

    Par défaut Re : Affichage GeoJson + HeatMap + Cluster

    J'ai donc eu une réponse sur Github, qui me dit que la variable geojson_data est écrite en dur dans un fichier .JS
    Code:
    var geojson_data =  {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
    …
    Hors, mon Geojson est créé dynamiquement en PHP d'après une interrogation d'une base PostGreSQL.
    Avec un code comme celui-ci (dont je ne suis pas l'auteur) :
    Code:
    echo json_encode($geojson, JSON_NUMERIC_CHECK);
    Je me demande donc comment ajouter dynamiquement cette variable qui va ajouter "var geojson_data =" devant le contenu de mon geojson, lui même récupéré par JQuery :
    Code:
    $.getJSON("geojson_7j.php", function(obs) { addObsToMap(obs, map); });

  8. #8
    Rédacteur Supporter(rice)

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

    Par défaut Re : Affichage GeoJson + HeatMap + Cluster

    Salut Sylvain,

    On parle ici de 2 options différentes pour charger le geojson :
    - option 1 : ajouter le geojson via une balise script
    Code:
    <script src="mon_geojson.js"></script>
    Dans ce cas, il faut intégrer dans le fichier le var geojson_data = {{{{mon_geojson}}};
    Ainsi, le contenu du geojson est accessible dans le reste du script via cette variable.
    Le fichier n'est alors plus réellement du GeoJSON mais un bout de "code" javascript qui contient le contenu du geoJSON

    - option 2 : utiliser une requête AJAX pour charger le geojson (ici, avec jquery et $.getJSON)
    $.getJSON("geojson_7j.php", function(contenu_fichier_en_json) {});
    Ici, le contenu du geojson est accessible dans la fonction par la variable contenu_fichier_en_json. Ne pas ajouter le var geojson_data = dans le geojson !!!

    NB : GeoJSON c'est du JSON donc du javascript (un objet javascript). C'est pour çà qu'on peut faire le coup du var geojson_data =

    PS : si tu veux pouvoir faire l'option 1 avec du php, il faut par exemple ajouter un paramètre dans l'url:
    <script src="geojson_7j.php?asJS=mon_geojson"></script>

    Code:
    ...
    ...
    ...
    if($_GET["asJS"]){ echo "var ".$_GET["asJS"]." = ";}
    echo json_encode($geojson, JSON_NUMERIC_CHECK);
    if($_GET["asJS"]){ echo ";"}

  9. #9

    Date d'inscription
    janvier 2005
    Localisation
    Mayenne (53)
    Âge
    37
    Messages
    742

    Par défaut Re : Affichage GeoJson + HeatMap + Cluster

    Merci pour ces explications très claires Barbapapa
    Dans mon cas, utilisant déjà JQuery pour charger d'autres données GeoJson, je pense qu'il faut rester sur l'option 2.

    J'ai par exemple une autre couche (geojson_pnrnm.php) chargée selon cette méthode :

    Code:
    function addPnrnmToMap(pnrnm, map) {
    		var pnrnmlayer = L.geoJson(pnrnm, {
    			style: stylepnrnm,
    		});
    		map.addLayer(pnrnmlayer);
    }
    
    $.getJSON("geojson_pnrnm.php", function(pnrnm) { addPnrnmToMap(pnrnm, map); });
    Mais je n'arrive vraiment pas à cumuler cette méthode avec les codes proposés dans ce message sur Github, pour créer une heatmap depuis pour cet autre couche (geojson_7j.php) :

    Code:
    geoJson2heat = function(geojson) {
    return geojson.features.map(function(feature) {
    return [parseFloat(feature.geometry.coordinates[1]), parseFloat(feature.geometry.coordinates[0])];
    });
    }
    
    function addObsMap(obs, map) {
    var geoData = geoJson2heat(geojson_data, 1);
    var heatMap = new L.heatLayer(geoData,{radius: 40, blur: 25, maxZoom: 17});
    map.addLayer(heatMap);
    }
    
    
    $.getJSON("geojson_7j.php", function(obs) { addObsMap(obs, map); });
    Notamment, je ne sais pas quoi écrire à la place de geojson_data et de geojson

  10. #10

    Date d'inscription
    janvier 2005
    Localisation
    Mayenne (53)
    Âge
    37
    Messages
    742

    Par défaut Re : Affichage GeoJson + HeatMap + Cluster

    Question subsidiaire :
    est-ce que l'écriture "geoJson2heat = function(geojson) {}" est égale à l'écriture "function geoJson2heat(geojson) {}" ?
    (oui oui, je suis un vrai newbie en programmation )

    - - MISE A JOUR - -

    C'est bon, ça marche !!!
    Dans les dernières versions de mes essais, j'avais tout bêtement oublié de référencer le script en entête de la page
    Du coup, voici ce que ça donne :
    Code:
    geoJson2heat = function(geojson) {
    return geojson.features.map(function(feature) {
    return [parseFloat(feature.geometry.coordinates[1]), parseFloat(feature.geometry.coordinates[0])];
    });
    }
    
    function addObsMap(obs, map) {
    var geoData = geoJson2heat(obs, 1);
    var heatMap = new L.heatLayer(geoData,{radius: 50, blur: 25, maxZoom: 17});
    map.addLayer(heatMap);
    }
    
    $.getJSON("geojson_7j.php", function(obs) { addObsMap(obs, map); });
    Formuler ma question, et mettre en couleur les variables, m'a aidé finalement à y voir plus clair !

    Par contre, pour comprendre, je veux bien votre avis sur ma dernière question :
    Citation Envoyé par Sylvain M.
    est-ce que l'écriture "geoJson2heat = function(geojson) {}" est égale à l'écriture "function geoJson2heat(geojson) {}" ?

  11. #11

    Date d'inscription
    janvier 2005
    Localisation
    Mayenne (53)
    Âge
    37
    Messages
    742

    Par défaut Re : Affichage GeoJson + HeatMap + Cluster

    Dernière question de la journée (promis !)
    Maintenant que j'arrive à afficher à la fois la HeatMap et le GeoJson clusterisé, je me rends compte que les 2 ne cohabitent pas très bien.
    L'idéal serait de pouvoir alterner dans le contrôle des couches L.control.layers().

    J'ai donc ajouté à la fin du script de la DIV map :
    Code:
    var overlayMaps = {
        "Heat Map": heatMap,
        "Cluster Map": markers
    };
    
    L.control.layers(baseMaps, overlayMaps).addTo(map);
    Ceci, juste après :
    Code:
    $.getJSON("geojson_7j.php", function(obs) { addHeatToMap(obs, map); addClusterToMap(obs, map); });
    Mais il semble que les variables heatMap et markers ne soient pas disponibles à cet endroit, car la console d'erreur du navigateur (FireFox) me dit :
    Code:
    ReferenceError: heatMap is not defined
    (les baseMaps sont définies au début du script, et sont bien ajoutées au "L.control.layers()" )

    Comment faire pour ajouter mes 2 couches dans le contrôleur ?
    Merci à vous !

  12. #12

    Date d'inscription
    mai 2011
    Localisation
    Algérie
    Emploi
    Cadre d'études Carto/SIG
    Organisme
    Bureau National d'Etudes pour le Développement Rural
    Âge
    27
    Messages
    155

    Mes réseaux sociaux

    Add parazitenew on Facebook
    Add parazitenew on Linkedin

    Par défaut Re : Affichage GeoJson + HeatMap + Cluster

    Bonjour j'avais profité de cette journée férié, pour cause de vote législatives chez nous, pour me pencher sur la question mais je vois finalement que ton problème est réglé.

    En revanche, j'ai remarqué qu'en testant, mon code est beaucoup plus simple et bref que le tient. Je ne suis pas encore arrivé au Cluster, car je viens de lire que t'es arrivé à résoudre le problème, alors plus besoin que je continue je pense.
    heatMap is not defined
    Je crois que ton problème vient du fait que t'as précédé HeatMap avec var, en JavaScript, une variable déclarée avec "var" n'est connue que localement, une fois sortit de la fonction initiale, elle n'est plus reconnue, pour éviter cela, supprime simplement le "var", essaye ceci:
    heatMap = new L.heatLayer(geoData,{radius: 50, blur: 25, maxZoom: 17});
    Si t'es curieux de voir mon code, le voici:

    Code:
    /*APPEL DE FOND OSM*/
    var OpenStreetMap_Mapnik = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
            });
    /*CREATION DE LA MAPMONDE*/
    map = L.map("map", {
              zoom: 11,
              center: [35.9,3.2],
              layers: [OpenStreetMap_Mapnik],
              zoomControl: true,
              attributionControl: false,
            });
    
    $.ajax({
        type: 'post',
        url: 'log.php',
        success: function(result){
           data = JSON.parse(result); 
        },
        async: false
    }); //Code jax pour récupéré les coordonnées depuis une bdd sql
    
    tableau_points = [];    //Déclaration du tableau principale
    var taille=data.length;
        
        for( i=0;i< taille; i++)    //boucle, pour chaque point
            {
             tab = [];  //on creer un nouveau petit tableau
             tab.push(data[i]['latitude'], data[i]['longitude'],'1');     //on y insère les coordonnées
             tableau_points.push(tab) ;     //on insère ce petit tableau dans le grand tableau
            }
        
    //CREATION DE LA COUCHE HEATMAP
    var heat = L.heatLayer(
            tableau_points
        , {radius: 50}).addTo(map);
        
    //Controle des couches
    var baseLayers = { "OSM": OpenStreetMap_Mapnik} ;
    
    var groupedOverlays = {
        "Heat Map": {
        "<img src='' width='24' height='28'>&nbsp;Stations": heat
        }
        };
        var layerControl = L.control.groupedLayers(baseLayers, groupedOverlays,{collapsed: true}).addTo(map);
    Le code php:

    Code PHP:
    <?php

    $servername 
    "localhost";
        
    $dbname "sntfmap";
        
    $username "root";
        
    $password "";
        
        try
        {
            
    $bdd = new PDO("mysql:host=$servername;dbname=$dbname; charset=utf8"$username$password);
        }
        catch (
    Exception $e)
        {
            die(
    'Erreur: '.$e->getMessage());
        }

    $req $bdd->query('SELECT * FROM log');

    $output=[];
    while(
    $res=$req->fetch(PDO::FETCH_ASSOC))
    {
        
    $output[]=$res;
    }

    echo 
    json_encode($output);

        
    ?>
    Résultat:

    Cliquez sur l'image pour la voir en taille réelle 

Nom : 		Capture.PNG 
Affichages :	23 
Taille :		98,9 Ko 
ID : 			8836


    ps: pour ta dernière question:
    https://www.w3schools.com/js/js_function_definition.asp
    Dernière modification par parazitenew ; 04/05/2017 à 16h42.
    Si j'ai pu t'aider, un petit pouce à gauche serait très apprécié

  13. #13

    Date d'inscription
    janvier 2005
    Localisation
    Mayenne (53)
    Âge
    37
    Messages
    742

    Par défaut Re : Affichage GeoJson + HeatMap + Cluster

    Salut Parazitenew, et désolé pour mon silence : je n'avais pas reçu d'alerte de réponse sur le sujet (j'ai déjà eu ce bug ici, et c'est lié à mon adresse mail chez Yahoo...).

    Merci pour ton code que je vais étudier de près ! (je suis sur autre chose là, mais je garde ton message préciseusement )

    Bonne journée !

  14. #14

    Date d'inscription
    janvier 2005
    Localisation
    Mayenne (53)
    Âge
    37
    Messages
    742

    Par défaut Re : Affichage GeoJson + HeatMap + Cluster

    Bonjour à tous,
    Je reviens sur ce sujet et je remercie encore Parazitenew pour son aide !
    J'ai effectivement une petite difficulté avec les variables (locales) ...
    Voici un exemple beaucoup plus simple, ou j'utilise le plugin Snogylop pour masquer le territoire hors Parc :
    http://149.202.129.102/pnrnm/leaflet_snogylop_last.php
    J'essaye d'ajouter un contrôleur de couche avec L.control.layers(baseMaps, overlayMaps).addTo(map);
    Mais les layers ne sont pas définis, comme l'indique la console d'erreur Firefox :
    Code:
    ReferenceError: masklayer is not defined
    J'ai essayé de les définir avant les fonctions en mettant des variables "vides" :
    Code:
    pnrnmlayer = L.geoJson()
    masklayer = L.geoJson()
    Et dans ce cas, le contrôleur de couche affiche bien les layer. Mais les contrôles d'affichages sont inopérants...
    Si vous avez 2 minutes pour regarder mon code, je suis sur que c'est évident pour quelqu'un qui parle javascript !
    view-source:http://149.202.129.102/pnrnm/leaflet_snogylop_last.php

    Merci !!

  15. #15

    Date d'inscription
    janvier 2005
    Localisation
    Mayenne (53)
    Âge
    37
    Messages
    742

    Par défaut Re : Affichage GeoJson + HeatMap + Cluster

    Je vais me permettre d'ouvrir un nouveau sujet, car la question initiale est finalement résolue (affichage du HeatMap + Cluster).
    Mon problème maintenant concerne plus la gestion des variables des différents layers, dans le cas de chargement avec $.getJSON()
    Merci en tout cas pour votre aide Parazitenew et Barbapapa

 

 

Discussions similaires

  1. [Leaflet] Rafraichir l'affichage d'un layer geojson
    Par Nico dans le forum Assistance et Programmation
    Réponses: 0
    Dernier message: 07/06/2016, 13h48
  2. [OpenLayers] Interpolation avec ol.layer.Heatmap?
    Par mat_elot dans le forum Assistance et Programmation
    Réponses: 0
    Dernier message: 23/03/2016, 15h38
  3. [OpenLayers] Problème d'affichage de couches geoJSON sur Google Chrome
    Par Enora_ dans le forum Assistance et Programmation
    Réponses: 4
    Dernier message: 15/07/2015, 13h29
  4. [Google Maps API] affichage d'une couche vecteur '.geojson'
    Par achref_georex dans le forum Assistance et Programmation
    Réponses: 2
    Dernier message: 12/08/2012, 12h47
  5. [OpenLayers] 2.11 : Problème d'affichage de données en GeoJSON
    Par AdrienVH dans le forum Assistance et Programmation
    Réponses: 8
    Dernier message: 09/03/2012, 08h36

Les tags pour cette discussion

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
  •