Implement flyTo functionality on cross-referenced data

Once again, this was simply a matter of investigating and understanding Rik's amazing base of code to work from.

Change line 104 in sites/all/modules/ip_geoloc/js/ip_geoloc_leaflet_sync_content.js from

this.map.panTo(point);
to
this.map.flyTo(point);

Easy. Rik, you've created an amazing launchpad for so many people with this module. Many thanks.

Thanks! It looks pretty slick. Only hitch is that if the locations are somewhat far apart and the zoom is fairly close, the fly animation seems to "jump" to the halfway point between the map position when the "flyTo" button was clicked before it animates the flyover to the next point. This is not how it behaves natively in Leaflet.

Anything jump out at you as to why that might happen? I'll investigate as I get more time.

EDIT**

This was an Ajax problem with my theme (I'm using the awesome CarbideBuilder). It zooms smoothly when viewed anonymously.

I got deeper into the rabbit hole and added a "zoom level" field into each piece of my content. I then changed some of Rik's code to use this number as zoom level for the flyTo() for each location. It looks ridiculously good.

In my case, I added the new "zoom level" field as another row in the table that houses my printed map data, hid that row through CSS, and grabbed its value in the JS function that zooms. I'm not really a coder, so here's my solution — it's not very scaleable and only works exactly for how I have my view and content type set up, but if anybody has any suggestions to clean this up and make it more universal, I'd appreciate it. Hopefully this helps somebody!

 jQuery(contentSelector).bind('click', function(event) {
    //make sure to pass contentSelector here
       sync.handleContentMouseOver(contentSelector, marker);
    });
  },
  	
	//and pass contentSelector here
  handleContentMouseOver: function(contentSelector, marker) {
  //add variable to set zoom level for flyTo animation
    var zoomnumber = +(jQuery(contentSelector).closest("tr").find('td:eq(1)').text());
    
    if (zoomnumber == 0) {
    	var zoomfly = 10;
    }
    else {
    	var zoomfly = zoomnumber;
    }
    
    if (marker === null || marker === this.lastMarker) {
      return;
    }

    this.hideIfAddedViaSync(this.lastMarker);

    var addedViaSync = !marker._map || !marker.options.opacity;
    if (!marker._map) {
      marker.addTo(this.map);
    }
    marker.addedViaSync = addedViaSync || marker.addedViaSync;

    var point = marker.getLatLngs ? marker.getLatLngs()[0] : marker.getLatLng();
//    if (!this.map.getBounds().contains(point)) {
//      this.map.flyTo(point, 12);
//    }
    	  
    this.map.flyTo(point, zoomfly, {
    		animate: true,
            easeLinearity: 0.1,
            duration: 3 // in seconds
        });

I'm trying to add a panBy action after the flyTo, but it seems like this "click" won't recognize Leaflet 'on' or 'once' methods because of old jQuery.

here's what I want to have happen, only after one of the elements is clicked:

   // Using bind() as D7 core's jQuery is old and does not support on()
    jQuery(contentSelector).bind('click', function(event) {
    //make sure to pass contentSelector here
       sync.handleContentMouseOver(contentSelector, marker);
       //	move marker to bottom of map to allow space for popup        
           this.map.once({
               moveend: function() {
                 this.map.panBy([0, -150]);
               }
             });  
    });

Any ideas how to get "on" or "once" functions to work?

Hey Rik,

I have — runnting 2.1 on my theme. For some reason, map.on and map.once are the only things that don't work. I'd like to add a panBy event only after a user hovers over a cross-referenced marker so that I can move the targeted marker closer to the bottom of the map viewport. I've spent all day for two days working on this simple function, and I can't figure out how to get it to fire a panBy only after interacting with the cross-referenced content.

Thanks in advance for any help — this module is truly spectacular!

-Brendan

Figured it out. Overlooked that the map object had changed after zoomend. So easy, and so much time wasted in frustration : ) Here's the code

this.map.flyTo(point, zoomfly, {
    	animate: true,
        easeLinearity: 0.1,
        duration: speedfly // in seconds
 }); 
 //adjust map so markers appear closer to bottom of screen, allowing room for popups    
 this.map.once('zoomend', function(event) {
    this.panBy([0, -100]);
 });