Comment interagir avec notice marqueur de la couche de l'extérieur de la carte?

J'ai un dépliant carte montrant les points pour le public des œuvres d'art, rendue par GeoJSON. À côté de la carte, j'ai créé une liste des pièces de la même GeoJSON de données et que vous voulez être en mesure de cliquer sur un élément dans la liste à l'extérieur de la carte, et la relative marqueur de pop de trouver sur la carte.

Comment puis-je relier la liste des éléments à leur marqueur correspondant par le biais d'un événement de clic?

Mon map.js fichier ressemble à ceci:

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)
}
  • Je voudrais créer un hachage de la carte identifier -> marker et ensuite cherchez le marqueur d'identification lorsque vous cliquez sur un élément.
InformationsquelleAutor roy | 2012-10-22
  1. 35

    Felix Kling est juste, mais je vais développer sur son commentaire un peu...

    Depuis L. LayerGroup et L. FeatureGroup (L. GeoJSON s'étend de l') n'ont pas de méthodes pour extraire des couches, vous aurez besoin d'augmenter de L. GeoJSON et d'ajouter une méthode ou garder votre propre distinct de cartographie à partir de l'ID unique pour CircleMarker de GeoJSON.

    GeoJSON n'a pas besoin d'un IDENTIFIANT unique, mais je vais supposer que les marqueurs de votre alimentation ont un attribut ID unique appelé "id". Vous aurez besoin d'ajouter cet ID unique pour les liens que l'utilisateur peut cliquer sur afin que les liens pouvez sélectionner le marqueur sur la carte. Ensuite, vous aurez besoin de stocker une carte d'identification de marqueurs afin de récupérer le marqueur pour le sélectionner sur la carte.

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

    Vous avez besoin pour construire le markerMap quand vous obtenez les données à partir du serveur. Votre pointToLayer méthode pourrait être modifiée pour faire que l':

    L.geoJson(data, {
pointToLayer: function (feature, latlng) {
var marker = new L.CircleMarker( latlng, geojsonMarkerOptions );
markerMap[feature.id] = marker;
return marker;
},...
    • c'est un super utile explication. Merci de prendre le temps.
    • Je me demande si il ya un moyen plus facile de le faire avec l'actuelle version la plus récente de LeafletJS.
    • Je sais que c'est très tard, mais j'ai ajouté une réponse ci-dessous, en utilisant des méthodes à partir de la dernière version de la Notice, pour obtenir la même chose.
    InformationsquelleAutor InPursuit
  2. 4

    Je sais que c'est une vieille question, mais Dépliant est sur son chemin à fournir une solution intégrée et il est (un peu), intégré dans la façon de l'atteindre maintenant...

    L'approche serait d'utiliser le layerGroup interface. Il fournit une méthode, getLayer, qui sonne comme il serait parfaite à nos marqueurs à l'aide d'un ID. Cependant, à cette époque, Dépliant ne pas fournit aucun moyen de spécifier un ID personnalisé ou le nom.

    Ce question sur Github traite de la façon dont cela devrait être fait. Avec cela dit, vous pouvez obtenir et enregistrer le auto-ID généré de tout Marqueur (ou iLayer que ce soit) comme ça: 

    let people = [...],
group = L.layerGroup()
people.forEach(person => {
let marker = //... create marker
group.addLayer( marker );
person.marker_id = group.getLayerId(marker)
})

    Maintenant que nous avons chaque marqueur d'identification du enregistrées avec chaque sauvegarde de l'objet dans l'ensemble de nos données, nous pouvons facilement obtenir le marqueur plus tard comme suit: 

    group.getLayer(person.marker_id)

    Voir ce stylo pour un exemple complet et cette question pour plus d'options...

    InformationsquelleAutor Skip Jack