Agregar ventana emergente a la capa GeoJSON en el folleto

8

Soy nuevo en trabajar con la API de Leaflet y estoy teniendo problemas para crear ventanas emergentes para una capa GeoJSON. He visto la siguiente publicación como referencia y todavía tengo dificultades: vincular matrices anidadas como ventanas emergentes de geojson en el folleto

Mis datos de GeoJson se ven así:

{
    "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"
            }
        }

    ]
}

Mi folleto js es el siguiente:

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

La console.log(popupContent);llamada dentro de la onEachFeaturefunción está devolviendo datos, sin embargo, cuando hago clic en los puntos GeoJSON en el mapa, aparece el siguiente error: Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist.

He intentado investigar esto sin éxito hasta ahora.

Clhenrick
fuente

Respuestas:

8

Aquí hay un ejemplo que tengo de cargar geojson desde un servicio WFS: http://maps.gcc.tas.gov.au/dogexerciseareas.html

Este es otro ejemplo de carga de topojson (similar, pero diferente): http://agl.pw/examples/NRM_Regions/map.html

Aquí hay un código simple que uso para cargar una capa:

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

Entonces puedes interactuar y diseñar con algo como esto:

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

EDITAR: un ejemplo del sitio web del folleto sobre puntos de estilo (desde aquí 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: se agregó una solución a este problema. Ver aquí: https://gist.github.com/alexgleith/7112515

Todo lo que necesita hacer ahora es editar el bit donde dice 'popupContent' para agregar su bit y cambiar el código para cargar datos del archivo.

Alex Leith
fuente
gracias alexgleith, esto parece funcionar y mirar tus ejemplos también es útil. Sin embargo, ¿cómo agregaría la función pointToLayer que muestra datos de puntos como marcadores de círculo?
clhenrick
Buena pregunta, agregué un poco al final de mi publicación. Creo que básicamente puedes hacer eso con un estilo para los puntos que se crean.
Alex Leith
para que pueda obtener los marcadores de estilo predeterminados para tener ventanas emergentes que funcionen, pero no marcadores de círculo. Por alguna razón, cuando puse estos juntos no parece funcionar: pastebin.com/T9E9XpQM Si elimina las líneas 68-70, las ventanas emergentes funcionan. a partir de ahora la función pointToLayer no cambia el estilo del punto. ¿Lo tengo en el lugar equivocado de mi código?
clhenrick
Intente agregar esto: .bindPopup ("<b> Tiempo: </b>" + tiempo + "<br> <b> Altitud: </b>" + feature.properties.alt + "meters", popupOptions); hasta el final de la línea 69 ¡Creo que estás haciendo todo dos veces!
Alex Leith
1
Se agregó una esencia con la solución. ¡Quizás podría intentar mantener su código ordenado en el futuro! ¡Tenías partes por todos lados! Avíseme si tiene algún problema para que mi código funcione. Puedes verlo aquí: rawgithub.com/alexgleith/7112515/raw/…
Alex Leith