Poppup on markers in markerCluster on ListClick

275 views
Skip to first unread message

Sultan Molutov

unread,
Oct 7, 2015, 10:57:42 AM10/7/15
to Leaflet
Hello I have implement poppup before on one method and then when usser click list item ot will show appropreciate marker with poppup I try and made only that map will show marker but poppup doesnt work how to find already existing marker and show it

var me = this;
var marker = new L.MarkerClusterGroup();
var store = Ext.getStore('Person.PersonStore');
for (var i = 0; i < store.data.items.length; i++) {
if (store.data.items[i].data.position != null) {
var lat = store.data.items[i].data.position.lat;
var lng = store.data.items[i].data.position.lng;
var position = {
lat: lat,
lng: lng
};

                       var m = new L.Marker(position);
                                                                                                      m.bindPopup('<div>' + "sssss" + '</div>');

                            marker.addLayer(m);

}
map.addLayer(marker);



and my 
 ListClick: function(grid, rowIndex, cellIndex, e) {
                        var me = this;
      
                   
                         var mymarker = L.marker([e.data.position.lat, e.data.position.lng]).openPopup();
                        me.map.panTo(new L.LatLng(e.data.position.lat, e.data.position.lng));
                       

                    },






ghybs

unread,
Oct 7, 2015, 12:43:38 PM10/7/15
to Leaflet
Hi Sultan,

Well it is not very clear which marker you try to open the popup.
If you re-create a marker (using `L.marker()`), you have to bind a new popup to it before you can open it.

Then, maybe the panning closes back the popup, as it seems to be the case for another recent issue from someone else:
https://groups.google.com/d/msg/leaflet-js/sFtuUxMElrI/pRCgXDLEEgAJ

Hope this helps.

Sultan Molutov

unread,
Oct 8, 2015, 1:41:16 AM10/8/15
to Leaflet
Thanks for replyin, I want to find marker that has been added already and just find it on map by [e.data.position.lat, e.data.position.lng]) and open it poppup that also has been attached already

среда, 7 октября 2015 г., 22:43:38 UTC+6 пользователь ghybs написал:

ghybs 1

unread,
Oct 8, 2015, 2:05:06 AM10/8/15
to leafl...@googlegroups.com
Sultan,

Well I think this would be basic application-specific structure.
Nothing really related to Leaflet.

Basically, you have to keep in memory (variables) the list of your markers, so that you can easily refer to them to trigger an action (like opening a marker popup).
For example, you could store a reference to your marker in your displayed list.
Or you could add this reference directly to your `store` object: `store.data.items[i].data.markerReference = m` so that later you can do `e.data.markerReference.openPopup()`, assuming that you keep the same `store` to trigger your action.

I guess it is time for your homework now.

Sultan Molutov

unread,
Oct 8, 2015, 11:09:53 AM10/8/15
to Leaflet
Thank you again,but I have a little problem now,I decided to store it all in array like here: https://github.com/Leaflet/Leaflet/issues/205,Unfortunately it wont work I am newbie in extJS what I am doing wrong?When I load marker I put it into array with key then I am get it from array 
 markersArray : [],
onPanelRendered: function() {
        var mapview = Ext.getCmp("mapViewId");
        var me = this;
        var tasksStore = Ext.getStore('Person.PersonStore');
        tasksStore.load({
            callback: function(records, operation, success) {
                if (success == true) {
                    var marker = new L.MarkerClusterGroup();
                    var store = Ext.getStore('Person.PersonStore');
                    for (var i = 0; i < store.data.items.length; i++) {
                             if (store.data.items[i].data.position != null) {
                                var lat = store.data.items[i].data.position.lat;
                                var lng = store.data.items[i].data.position.lng;
                                var position = {
                                    lat: lat,
                                    lng: lng
                                };
                               var m = new L.Marker(position);
                               var status =store.data.items[i].data.status;
                                var name = store.data.items[i].data.fullName;
                                if (store.data.items[i].data.status == null) {
                                   status = "";
                                  }
                                if (name == null || name == '' ) {
                                   name = "no";
                                  }
                           
                                    m.bindPopup("<b>" + name + "</b><br/><b>Here</b><br/>" + Ext.util.Format.date(new Date(parseInt(store.data.items[i].data.position.date)), 'd.m.Y, H:i'));

                           
                            
                               
                            var latlng = position.lat,
                            key = latlng.toString();
                            console.log(key);
                           console.log(latlng);

                            me.markersArray[key] = me.markersArray[key] || [];
                            me.markersArray[key].push(m);
                          console.log(me.markersArray[key]);

                           // console.log(me.markerCache[key]);
                                marker.addLayer(m);

                             }
                    }
                     map.addLayer(marker);
                }

            }
        });


    },

ListClick: function(grid, rowIndex, cellIndex, e) {
        var me = this;
          var date = e.data.position.date;
         var time = new Date(e.data.position.date);
                   
            var lat = e.data.position.lat;
            var lng = e.data.position.lng;
            var position = {lat: lat,lng: lng};
            var mymarkerlat = ([e.data.position.lat, e.data.position.lng]);
             console.log(mymarkerlat)
             map.panTo(new L.LatLng(e.data.position.lat, e.data.position.lng));
              var latlng = position.lat,
                            key = latlng.toString();
             //var key = position.toString();
            console.log(key);
              console.log(me.markerCache[key]);

            var markers = me.markersArray[key].openPopup();
     }

четверг, 8 октября 2015 г., 12:05:06 UTC+6 пользователь ghybs написал:

Sultan Molutov

unread,
Oct 8, 2015, 11:10:18 AM10/8/15
to Leaflet
Thank you very much


четверг, 8 октября 2015 г., 12:05:06 UTC+6 пользователь ghybs написал:
Sultan,

Sultan Molutov

unread,
Oct 9, 2015, 3:40:33 AM10/9/15
to leafl...@googlegroups.com

but it not working

08.10.2015 21:10 пользователь "Sultan Molutov" <mol...@gmail.com> написал:
--

---
You received this message because you are subscribed to a topic in the Google Groups "Leaflet" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/leaflet-js/KU47UdxlpAE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to leaflet-js+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages