events - layers - ¿Cómo desencadenar eventos en los polígonos de mapa de Folleto?
leaflet polygon example (3)
Entonces, actualización rápida.
Simplemente llame a fireEvent (o su alias de fire ) en cualquier capa que necesite.
No es necesario que arriesgue ._private [Vars], solo obtenga una referencia a la capa objetivo y dispare, por ejemplo
var vectorLayer = map.getLayer(''myVectorLayer'');
vectorLayer.fire(''click'');
Estoy tratando de averiguar cómo activar manualmente los eventos para los polígonos de Folleto (cargados a través de GeoJSON).
En pocas palabras, tengo un mapa de folletos con numerosos polígonos. También tengo un hipervínculo regular fuera del mapa que al hacer clic, debería activar un evento de mouseover (o cualquier evento realmente) en un polígono en particular.
¿Cómo asigno ID a todos mis polígonos para poder enlazar hipervínculos a un evento de polígono específico? ¿O es que incluso la forma más lógica de hacer esto?
En última instancia, estoy tratando de crear un mapa con numerosos polígonos junto con una tabla HTML de etiquetas de texto asociadas a cada polígono. Al hacer clic en el texto de la tabla HTML, me gustaría activar eventos en los polígonos del mapa (y viceversa). Simplemente no sé cómo hacer referencia a cada polígono.
Aquí está mi HTML muy simplificado:
<body>
<div id="map" style="height: 550px; width:940px"></div>
<a href="#" id="testlink">Click to trigger a specific polygon mouseover event</a>
</body>
Aquí está mi JS muy simplificado:
$(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
});
});
OK, lo he descubierto.
Debe crear un evento de clic para cada polígono que abre la ventana emergente, y asignar una ID única a cada polígono para poder hacer referencia a él más adelante y activar manualmente la ventana emergente.
Lo siguiente logra esto:
var polyindex = 0;
popup = new L.Popup();
geojsonLayer = new L.GeoJSON(null, {});
geojsonLayer.on("featureparse", function (e){
(function(layer, properties) {
//click event that triggers the popup and centres it on the polygon
layer.on("click", function (e) {
var bounds = layer.getBounds();
var popupContent = "popup content here";
popup.setLatLng(bounds.getCenter());
popup.setContent(popupContent);
map.openPopup(popup);
});
})(e.layer, e.properties);
//assign polygon id so we can reference it later
e.layer._leaflet_id = ''polyindex''+polyindex+'''';
//increment polyindex used for unique polygon id''s
polyindex++;
});
//add the polygon layer
map.addLayer(geojsonLayer);
geojsonLayer.addGeoJSON(neighbourhood_polygons);
Luego, para activar manualmente un evento de clic de capas específico, simplemente llámelo así:
map._layers[''polyindex0''].fire(''click'');
Todo entre los corchetes es el ID único de la capa que desea activar. En este caso, estoy disparando el evento de clic de la capa ID polyindex0.
Espero que esta información ayude a alguien más!
function clickMarker(i){
var popupContent = "content here or html format",
popup = new L.Popup({offset:new L.Point(0,-28)});
popup.setLatLng(LatLng);
popup.setContent(popupContent);
map.panTo(LatLng);
map.openPopup(popup); }
i = tengo una coordenada correspondiente que es LatLng