Я пытаюсь выяснить, как вручную запускать события для полигонов Leaflet (загружаемых через GeoJSON).
В двух словах, у меня есть карта листов с множеством полигонов. У меня также есть регулярная гиперссылка за пределами карты, которая при щелчке должна вызвать событие mouseover (или любое событие действительно) на определенном полигоне.
Как назначить идентификатор всем моим полигонам, чтобы я мог связывать гиперссылки с конкретным событием полигона? Или это даже самый логичный способ сделать это?
В конечном счете, я пытаюсь создать карту с многочисленными многоугольниками вместе с таблицей текстовых меток HTML, которые связаны с каждым полигоном. Когда вы нажимаете на текст таблицы HTML, я бы хотел вызвать события на полигонах карты (и наоборот). Я просто не знаю, как ссылаться на каждый многоугольник.
Вот мой очень упрощенный HTML:
<body>
<div id="map" style="height: 550px; width:940px"></div>
<a href="#" id="testlink">Click to trigger a specific polygon mouseover event</a>
</body>
Вот мой очень упрощенный JS:
$(document).ready(function () {
// build the map and polygon layer
function buildMap(data) {
var map = new L.Map('map');
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/***yourkeyhere***/66267/256/{z}/{x}/{y}.png',
cloudmadeAttribution = '',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
var mapLoc = new L.LatLng(43.675198,-79.383287);
map.setView(mapLoc, 12).addLayer(cloudmade);
var geojsonLayer = new L.GeoJSON(null, {});
geojsonLayer.on("featureparse", function (e){
// apply the polygon style
e.layer.setStyle(polyStyle);
(function(layer, properties) {
layer.on("mouseover", function (e) {
// change the style to the hover version
layer.setStyle(polyHover);
});
});
layer.on("mouseout", function (e) {
// reverting the style back
layer.setStyle(polyStyle);
});
layer.on("click", function (e) {
// do something here like display a popup
console.log(e);
});
})(e.layer, e.properties);
});
map.addLayer(geojsonLayer);
geojsonLayer.addGeoJSON(myPolygons);
}
// bind the hyperlink to trigger event on specific polygon (by polygon ID?)
$('#testlink').click(function(){
// trigger a specific polygon mouseover event here
});
});