javascript - examples - leaflet polygon example

¿Cómo interactuar con la capa de marcador de folleto desde fuera del mapa?

Question

Tengo un mapa de folletos que muestra puntos para piezas de arte público, renderizado desde GeoJSON . Junto al mapa, creé una lista de las piezas de los mismos datos de GeoJSON y quiero poder hacer clic en un elemento de la lista fuera del mapa y hacer que aparezca la ventana emergente del marcador relacionado en el mapa.

¿Cómo puedo vincular la lista de elementos a sus respectivos marcadores a través de un evento de clic?

Mi archivo map.js se ve así:

var map;
var pointsLayer;

$(document).ready(function () {
    map = new L.Map(''mapContainer'');
    var url = ''http://{s}.tiles.mapbox.com/v3/mapbox.mapbox-streets/{z}/{x}/{y}.png'';
    var copyright = ''Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade'';
    var tileLayer = new L.TileLayer(url, {
        attribution: copyright
    });
    var startPosition = new L.LatLng(41.883333, - 87.633333);
    map.on(''load'', function (e) {
        requestUpdatedPoints(e.target.getBounds())
    });
    map.setView(startPosition, 13).addLayer(tileLayer);
    map.on(''moveend'', function (e) {
        requestUpdatedPoints(e.target.getBounds())
    })
});

function requestUpdatedPoints(bounds) {
    $.ajax({
        type: ''GET'',
        url: ''/SeeAll'',
        dataType: ''json'',
        data: JSON.stringify(bounds),
        contentType: ''application/json; charset=utf-8'',
        success: function (result) {
            parseNewPoints(result);
            addToList(result)
        },
        error: function (req, status, error) {
            alert(''what happen? did you lose conn. to server ?'')
        }
    })
}

function addToList(data) {
    for (var i = 0; i < data.features.length; i++) {
        var art = data.features[i];
        $(''div#infoContainer'').append(''<a href="#" class="list-link" title="'' + art.properties.descfin + ''"><div class="info-list-item">'' + ''<div class="info-list-txt">'' + ''<div class="title">'' + art.properties.wrknm + ''</div>'' + ''<br />'' + art.properties.location + ''</div>'' + ''<div class="info-list-img">'' + art.properties.img_src + ''</div>'' + ''<br />'' + ''</div></a>'')
    }
    $(''a.list-link'').click(function (e) {
        alert(''now you see what happens when you click a list item!'');
        e.preventDefault()
    })
}

function parseNewPoints(data) {
    if (pointsLayer != undefined) {
        map.removeLayer(pointsLayer)
    }
    pointsLayer = new L.GeoJSON();
    var geojsonMarkerOptions = {
        radius: 8,
        fillColor: "#FF6788",
        color: "YELLOW",
        weight: 1,
        opacity: 1,
        fillOpacity: 0.5
    };
    L.geoJson(data, {
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, geojsonMarkerOptions)
        },
        onEachFeature: function (feature, pointsLayer) {
            pointsLayer.bindPopup(feature.properties.img_src + "<br />" + feature.properties.wrknm + "<br />" + feature.properties.artist + "<br />" + feature.properties.location + ''<div class="description">'' + feature.properties.descfin + ''</div>'')
        }
    }).addTo(map)
}

Answer 1

Felix Kling tiene razón, pero ampliaré un poco su comentario ...

Dado que L.LayerGroup y L.FeatureGroup (que L.GeoJSON extiende desde) no tienen métodos para recuperar capas individuales, deberá extender desde L.GeoJSON y agregar un método de este tipo o mantener su propio mapeo separado desde una ID única a CircleMarker de GeoJSON.

GeoJSON no requiere una ID única, pero asumiré que los marcadores en tu feed tienen un atributo de ID único llamado "id". Deberá agregar esta ID única a los enlaces en los que el usuario puede hacer clic para que los enlaces puedan seleccionar el marcador correcto en el mapa. Luego, deberá almacenar un mapa de identificadores y marcadores para recuperar el marcador y seleccionarlo en el mapa.

markerMap = {}; // a global variable unless you extend L.GeoJSON

// Add the marker id as a data item (called "data-artId") to the "a" element
function addToList(data) {
    for (var i = 0; i < data.features.length; i++) {
        var art = data.features[i];
        $(''div#infoContainer'').append(''<a href="#" class="list-link" data-artId=/"''+art.id+''/" title="'' + art.properties.descfin + ''"><div class="info-list-item">'' + ''<div class="info-list-txt">'' + ''<div class="title">'' + art.properties.wrknm + ''</div>'' + ''<br />'' + art.properties.location + ''</div>'' + ''<div class="info-list-img">'' + art.properties.img_src + ''</div>'' + ''<br />'' + ''</div></a>'')
    }
    $(''a.list-link'').click(function (e) {
        alert(''now you see what happens when you click a list item!'');

        //Get the id of the element clicked
        var artId = $(this).data( ''artId'' );
        var marker = markerMap[artId];

        //since you''re using CircleMarkers the OpenPopup method requires
        //a latlng so I''ll just use the center of the circle
        marker.openPopup(marker.getLatLng());
        e.preventDefault()
    })
}

Debe crear el marcador de mapa cuando obtenga los datos del servidor. Su método pointToLayer podría ser modificado para hacer eso:

L.geoJson(data, {
    pointToLayer: function (feature, latlng) {
      var marker = new L.CircleMarker( latlng, geojsonMarkerOptions );
      markerMap[feature.id] = marker;
      return marker;
    },...

Answer 2

Sé que esta es una pregunta antigua, pero Leaflet está en camino de proporcionar una solución integrada y hay una forma (algo) integrada de lograrlo ahora ...

El enfoque sería utilizar la interfaz layerGroup . Proporciona un método, getLayer , que suena como si fuera perfecto obtener nuestros marcadores usando una identificación. Sin embargo, en este momento, Leaflet no proporciona ninguna forma de especificar una ID o nombre personalizado .

Este tema en Github discute cómo se debe hacer esto. Dicho esto, puede obtener y guardar la ID generada automáticamente de cualquier Marcador (o iLayer ), de este modo:

let people = [...],
    group = L.layerGroup()

people.forEach(person => {
    let marker = // ... create marker

    group.addLayer( marker );
    person.marker_id = group.getLayerId(marker)
})

Ahora que tenemos la ID de cada marcador guardada con cada objeto de respaldo en nuestra matriz de datos, podemos obtener fácilmente el marcador más adelante así:

group.getLayer(person.marker_id)

Ver esta pluma para un ejemplo completo y esta pregunta para más opciones ...