Taking advantage of the recently added functions to trigger events on features and maps from outside of the Leaflet context (i.e. http://drupal.org/commitlog/commit/25100/58fccdbfd6d0e16e2f97092a88d8f36...)

I implemented this very successfully on this page (work in progress …):

http://www.italomairo.com/geoblogcms/en/ip-locations-leaflet

Just try to mouseover and mouseout the "zoom in map" highlighted in the left list … to see how this (successfully) works.

In this case the map view is generated by the ip_geoloc module (http://drupal.org/project/ip_geoloc), that made me able to change the icons on dynamic values of the features themselves … but the logic is the same with the Leaflet Module itself for interaction.

It is awesome and now works great! …
but it took "not just a while" to figure out I to do that. More details on this solution is explained here: http://drupal.org/node/1998596

For me this now both works with the Leaflet Module and the Leaflet Markercluster one (http://drupal.org/project/leaflet_markercluster), but to make it working I needed to alter the js files of both the modules, as I needed to access also to the initial map.center and the map.zoom of the created Leaflet Map …

In the Leaflet Module, I had to make some fine integration to the "leaflet.drupal.js", just with the following few lines of code … (diff file attached)

--- a/sites/all/modules/leaflet/leaflet.drupal.js
+++ b/sites/all/modules/leaflet/leaflet.drupal.js
@@ -88,6 +88,10 @@
         else {
           Drupal.leaflet.fitbounds(lMap);
         }
+        
+        //Associate the center and zoom level proprerties to the built lMap (useful to after interaction with it, otherwise would be difficult to get them outside of this context ...)
+        lMap.center = lMap.getCenter();
+        lMap.zoom = lMap.getZoom();
 
         // add attribution
         if (this.map.settings.attributionControl && this.map.attribution) {

Available for more clarifications, I am looking forward to seeing this integrated/committed soon in the last dev of the Leaflet module ...

CommentFileSizeAuthor
leaflet-outsideInteraction-100644.diff599 bytesitamair

Comments

pvhee’s picture

pvhee commented

Thanks for that info itamair. Would you mind explaining also a little bit more about the architecture you used to do that, maybe with some code snippets? Could be useful for other people wanting to do the same. Also, good use of the jquery events, we are definitely planning to add in more so that people can do more JS integration in contributed modules.

itamair’s picture

itamair commented

Hi pvhee …

More details are explained here: http://drupal.org/node/1998596#comment-7464570

As said, the first matter is to have the leaflet_views_plugin_style to associate an id property to the feature ($point) passed to the leaflet js (feature) that represent the $node->nid (or the $term->did in case of taxonomy terms, and uid for users, etc … don't know for entities in general).

As explained, in my case the leaflet map was generated by the ip_geoloc module (http://drupal.org/project/ip_geoloc), so I had to alter its views plugin styles (very quick few lines of code). Already posted the feature request issue to Rick De Boer: http://drupal.org/node/2005484 to align its module.

Thus I made the views plugins pass to the leaflet js a feature.feature_id property, that so will be available to any external module js that binds the custom event 'leaflet.feature' triggered by the leaflet.drupal.js (& leaflet_markercluster.drupal.js) file 

          // Allow others to do something with the feature that was just added to the map
          $(document).trigger('leaflet.feature', [lFeature, feature]);
        }

This works nice … but (as experienced and mentioned by me)
Note: I tried to assign the $node->nid to the feature.leaflet_id property included in the leaflet api (and that the leaflet drupal module associate with the lFeature._leaflet_id) but this caused weird behavior (and continuous errors throwing in the browser console.log : TypeError: 'undefined' is not an object (evaluating 'this._map._panes'), especially with the marker clustering and the map.setView() method. Probably the lFeature._leaflet_id is something that should be left to the Leaflet apis management, without overriding it

I think the same logic should be implemented in the "leaflet_views_plugin_style.inc" file, adding a property such as $point[feature_id] matching the $entity's id (node, term user, ecc.) …

This will (much more if well documented) definitely easy other developers to implement the interaction, better than applying by themselves a personal altering of the points data through the 

          // Let modules modify the points data.
          drupal_alter('leaflet_views_alter_points_data', $result, $points);

yet present code.

I hope I was understandable …

itamair’s picture

itamair commented

Please keep a look on what is going on, about this same topic, on the ip_geoloc module side: https://drupal.org/node/2005484#comment-7481438

Would be great (much much better) a similar logic might be implemented in the leaflet module view plugin stye, such as to pass/forward to leaflet js feature a property linked to the drupal entity id (node, term, user, entity …) such as: leaflet.feature_id

noopal’s picture

noopal commented

Hi itamair

I've seen your similar posts in leaflet clusters and the ip geo views & maps modules.

Could you post a tutorial in one post how to achieve what you have in your example

itamair’s picture

itamair commented

https://drupal.org/node/2056551