javascript - print - Asignar ID al marcador en el folleto

leaflet search address (5)

Así que trato de lograr un resultado como en foursquare: https://foursquare.com/explore?cat=drinks&mode=url&near=Paris que es cuando hace clic en un marcador en el mapa, se desplaza a través de la lista de restaurantes a la derecha El lado de la pantalla en el restaurante ad hoc, y lo resalta a través de CSS. Por el contrario, cuando hace clic en el restaurante de la lista, se resalta en el mapa.

Estoy usando skobbler / folleto. Creo que puedo lograr esto mediante la modificación dinámica de CSS como se muestra en este ejemplo: http://jsfiddle.net/gU4sw/7/ + un desplazamiento al script de destino que ya está en la página.

Para lograr esto, sin embargo, parece que necesito asignar una ID dentro de los marcadores (2 marcadores a continuación):

var marker = L.marker([52.52112, 13.40554]).addTo(map); marker.bindPopup("Hello world!<br>I am a popup1.", { offset: new L.Point(-1, -41) }).openPopup(); var marker = L.marker([52.53552, 13.41994]).addTo(map); marker.bindPopup("Hello world!<br>I am a popup2.", { offset: new L.Point(-1, -41) }).openPopup();

La pregunta es: ¿Cómo puedo asignar un ID de marcador para activar el cambio de css en el elemento correspondiente dentro de mi página html?

Mi conocimiento de JS es muy limitado, pero es posible que haya una solución fácil y agradable por ahí, gracias

En mi caso, encontré que la mejor manera era simplemente generar y pasar una ID única al objeto Opciones de L.marker cuando lo creo.

const newMarker = L.marker([lat, lng], {uniqueID: uniqueID})

A continuación, puede agregar este marcador a un grupo de layerGroup folleto.

const newLayerGroup = L.layerGroup().addTo(map); newLayerGroup.addLayer(newMarker);

Puede acceder al ID con layer.options.uniqueID Esto me permite encontrar y manipular el marcador más tarde; todo lo que necesito es Leaflet''s .eachLayer() y el uniqueID.

Mi backend (Cloud Firestore) ya genera ID de documentos únicos, lo que hace que sea muy fácil sincronizar mi mapa de Leaflet y backend en tiempo real, en lugar de reconstruir y volver a montar todo el layerGroup o actualizar la página.

//e.g. a callback which fires whenever a doc has been removed from my db newLayerGroup.eachLayer((layer) => { if (deletedDocID === layer.options.uniqueID) { newLayerGroup.removeLayer(layer); } });

He estado buscando una buena manera de hacer esto y, por lo que puedo decir, todavía no hay una forma integrada (usando un folleto) para dar a un marcador una identificación. Sé que llego un poco tarde para responder esto, pero espero que ayude a otros que se topan con esta pregunta . Hasta donde puedo decir, hay dos cuestiones principales aquí:

Problema nº 1: a menos que guarde sus marcadores en un objeto o mapa, que se describe a continuación, no hay una forma programática fácil de acceder a ellos más adelante. Por ejemplo: un usuario hace clic FUERA DEL mapa que corresponde a un marcador DENTRO del mapa.

Problema nº 2: cuando un usuario hace clic en un marcador DENTRO del mapa, no hay una forma integrada de recuperar el ID de ese marcador y luego usarlo para resaltar un elemento correspondiente o activar una acción FUERA del mapa.

Soluciones

El uso de una o más de estas opciones ayudará a resolver los problemas descritos anteriormente. Comenzaré con el mencionado en la respuesta anterior. Aquí está la pluma de trabajo , que contiene todo el código que se encuentra a continuación.

Opción # 1: guardar cada marcador, usando un ID codificado o dinámico, dentro de un objeto -

// Create or retrieve the data var data = [ { name: ''Bob'', latLng: [41.028, 28.975], id: ''2342fc7'' }, {...}, {...} ]; // Add an object to save markers var markers = {}; // Loop through the data for (var i = 0; i < data.length; i++) { var person = data[i]; // Create and save a reference to each marker markers[person.id] = L.marker(person.latLng, { ... }).addTo(map); }

Similar a la otra respuesta, ahora puede acceder a un solo marcador usando -

var marker = markers.2342fc7; // or markers[''2342fc7'']

Opcion 2:

Si bien el folleto no proporciona una opción ''id'' incorporada para los marcadores, puede agregar la identificación al elemento directamente al acceder a la propiedad ._icon :

// Create and save a reference to each marker markers[person.id] = L.marker(person.latLng, {...}).addTo(map); // Add the ID markers[person.id]._icon.id = person.id;

Ahora, cuando maneja eventos de clics, es fácil obtener el ID del marcador:

$(''.leaflet-marker-icon'').on(''click'', function(e) { // Use the event to find the clicked element var el = $(e.srcElement || e.target), id = el.attr(''id''); alert(''Here is the markers ID: '' + id + ''. Use it as you wish.'') });

Opción # 3:

Otro 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 issue en Github discute cómo se debe hacer esto. Sin embargo, puede obtener y guardar la ID generada automáticamente de cualquier Marcador (o iLayer para esa materia) de la siguiente manera:

var group = L.layerGroup() people.forEach(person => { // ... 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 ...

Opción # 4:

La forma más limpia de hacerlo, si tiene tiempo , sería extender la clase de marcadores del folleto para manejar sus necesidades individuales de manera limpia. Puede agregar una identificación a las opciones o insertar HTML personalizado en el marcador que tiene su identificación / clase. Consulte la documentation para obtener más información sobre esto.

También puede usar el circleMarker que, en las opciones de ruta , verá que tiene una opción para className que puede ser agradable para estilizar grupos de marcadores similares.

Estilo:

Casi olvide que su pregunta original se planteó con el propósito de diseñar ... simplemente use la ID para acceder a elementos individuales:

.leaflet-marker-icon#2342fc7 { ... }

Conclusión

También mencionaré que la capa y los grupos de características proporcionan otra excelente manera de interactuar con los marcadores. Aquí hay una question que discute esto un poco. Siéntase libre de juguetear, o bifurque la primera o la segunda pluma y comente si me he perdido algo.

La opción className del folleto puede permitirle agregar identificadores a los objetos:

var onMouseover = function() { // returns all members of the specified class d3.selectAll(".mySpecialClass") .style("opacity", ".1"); }; // add desired class to pointer L.circleMarker([46.85, 2.35], {className: "mySpecialClass"}) .addTo(map).on(''mouseover'', onMouseover); // to select the marker(s) with a particular class, just use css selectors // here''s a d3.js solution d3.selectAll(".mySpecialClass") .style("opacity", ".3")

Una forma fácil de hacer esto es agregar todos los marcadores a una lista con una identificación única.

var markersObject = {}; markersObject["id1"] = marker1; markersObject["id2"] = marker2; markersObject["id3"] = marker3;

Si la lista de restaurantes tiene una propiedad en el elemento html de un solo restaurante que corresponde a la identificación del marcador agregado. Algo como:

<a href="#" id="singleRestaurantItem" data-restaurantID="id1" data-foo="bar">Click</a>

Luego agregue el evento de clic donde pasará el ID del restaurante (en este caso, "data-restaurantID") y haga algo como:

markersObject["passedValueFromTheClickedElement"].openPopup();

De esta manera, una vez que haga clic en el elemento de la lista, se abrirá una ventana emergente de marcadores que indica dónde se encuentra el restaurante en el mapa.