Como interagir com a camada do marcador de folheto fora do mapa?
Eu tenho um mapa de folhetos mostrando pontos para peças de arte públicas,GeoJSON. Ao lado do mapa, criei uma lista das peças do mesmoGeoJSON dados e deseja poder clicar em um item da lista fora do mapa e fazer com que o pop-up do marcador relacionado apareça no mapa.
Como posso vincular a lista de itens aos seus respectivos marcadores por meio de um evento de clique?
Meu arquivo map.js se parece com isso:
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)
}