Ajout d'une fenêtre contextuelle à la couche GeoJSON dans Leaflet


8

Je suis novice dans l'utilisation de l'API Leaflet et je rencontre des problèmes avec la création de fenêtres contextuelles pour une couche GeoJSON. J'ai regardé le post suivant comme référence et j'ai toujours des difficultés: lier des tableaux imbriqués en tant que popups geojson dans la brochure

Mes données GeoJson ressemblent à:

{
    "type": "FeatureCollection",
    "features": [
        {
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -73.97364044189453,
                    40.66893768310547
                ]
            },
            "type": "Feature",
            "properties": {
                "lon": -73.97364044189453,
                "lat": 40.66893768310547,
                "version": "1.1",
                "t": 1381167616,
                "device": "iPhone3,3",
                "alt": 67,
                "os": "6.1.3"
            }
        },
        {
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -73.96121215820312,
                    40.66240692138672
                ]
            },
            "type": "Feature",
            "properties": {
                "lon": -73.96121215820312,
                "lat": 40.66240692138672,
                "version": "1.1",
                "t": 1381171200,
                "device": "iPhone3,3",
                "alt": 45,
                "os": "6.1.3"
            }
        }

    ]
}

Mon dépliant js est le suivant:

// create a variable to load Stamen 'toner' tiles
var layer = new L.StamenTileLayer("toner");

// initialize and set map center and zoom
var map = L.map('map', {
    center: new L.LatLng(40.67, -73.94),
    zoom: 12
});

// create the map 
map.addLayer(layer);

// on each feature use feature data to create a pop-up
function onEachFeature(feature, layer) {

    if (feature.properties) {

        var popupContent;
        popupContent = feature.properties.t;

        console.log(popupContent);    
    }
    layer.bindPopup(popupContent);
}

// grab the processed GeoJSON through ajax call
var geojsonFeature = (function() {
        var json = null;
        $.ajax({
            'async': false,
            'global': false,
            'url': "/data/test_random.json",
            'dataType': "json",
            'success': function (data) {
                json = data;
            }
        });
        return json;
    })();

// create an object to store marker style properties
var geojsonMarkerOptions = {
    radius: 10,
    fillColor: "rgb(255,0,195)",
    color: "#000",
    weight: 0,
    opacity: 1,
    fillOpacity: 1
};

// load the geojson to the map with marker styling
L.geoJson(geojsonFeature, {

    style: function (feature) {
        return feature.properties && feature.properties.style;
    },

    onEachFeature: onEachFeature,

    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, geojsonMarkerOptions)
    }
}).addTo(map);

L' console.log(popupContent);appel dans la onEachFeaturefonction renvoie des données, mais lorsque je clique sur les points GeoJSON dans la carte, j'obtiens l'erreur suivante: Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist.

J'ai essayé d'envisager cela sans succès jusqu'à présent.

Réponses:


8

Voici un exemple de chargement de geojson à partir d'un service WFS: http://maps.gcc.tas.gov.au/dogexerciseareas.html

Ceci est un autre exemple de chargement de topojson (similaire, mais différent): http://agl.pw/examples/NRM_Regions/map.html

Voici un code simple que j'utilise pour charger une couche:

var myLayer = L.geoJson().addTo(map);
$.getJSON("data/buildings.json", function(json) {
  myLayer.addData(json);
});

Ensuite, vous pouvez faire de l'interactivité et du style avec quelque chose comme ceci:

    success : function (response) {
        DogExerciseAreas = L.geoJson(response, {
            style: function (feature) {
                return {
                    stroke: false,
                    fillColor: 'FFFFFF',
                    fillOpacity: 0
                };
            },
            onEachFeature: function (feature, layer) {
                popupOptions = {maxWidth: 200};
                layer.bindPopup("<b>Site name:</b> " + feature.properties.sitename +
                    "<br><b>Dog Exercise: </b>" + feature.properties.dog_exercise +
                    "<br><br>Please ensure that tidy up after your dog. Dogs must be kept under effective control at all times."
                    ,popupOptions);
            }
        }).addTo(map);
    }

EDIT: un exemple du site Web de la brochure sur les points de style (à partir d'ici http://leafletjs.com/examples/geojson.html ):

var geojsonMarkerOptions = {
    radius: 8,
    fillColor: "#ff7800",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
};

L.geoJson(someGeojsonFeature, {
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, geojsonMarkerOptions);
    }
}).addTo(map);

EDIT2: Ajout d'une solution à ce problème. Voir ici: https://gist.github.com/alexgleith/7112515

Tout ce que vous devez faire maintenant est d'éditer le bit où il est écrit «popupContent» pour ajouter votre bit et changer le code pour charger les données du fichier.


merci alexgleith, cela semble fonctionner et regarder vos exemples est également utile. Mais comment ajouter la fonction pointToLayer qui affiche les données de points sous forme de marqueurs de cercle?
clhenrick

Bonne question, j'ai ajouté un peu au bas de mon post. Je pense que vous pouvez essentiellement le faire avec un style pour les points qui sont créés.
Alex Leith

afin que je puisse obtenir les marqueurs de style par défaut pour avoir des fenêtres contextuelles qui fonctionnent, mais pas des marqueurs de cercle. Pour une raison quelconque, lorsque je les rassemble, cela ne semble pas fonctionner: pastebin.com/T9E9XpQM Si vous supprimez les lignes 68 à 70, les fenêtres contextuelles fonctionnent. à partir de maintenant, la fonction pointToLayer ne change pas le style de point. Est-ce que je l'ai au mauvais endroit dans mon code?
clhenrick

Essayez d'ajouter ceci: .bindPopup ("<b> Heure: </b>" + heure + "<br> <b> Altitude: </b>" + feature.properties.alt + "mètres", popupOptions); jusqu'à la fin de la ligne 69 Tu fais tout deux fois, je pense!
Alex Leith

1
Ajout d'un résumé avec la solution. Peut-être pourriez-vous essayer de garder votre code agréable et bien rangé à l'avenir! Vous en aviez partout! Faites-moi savoir si vous avez du mal à faire fonctionner mon code. Vous pouvez le voir ici: rawgithub.com/alexgleith/7112515/raw/…
Alex Leith
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.