How to do a popup and hover with leaflet js plugin?

Question

I'm using the drupal leaflet module and want to have a popup on click, and then a mouseover to show up in the corner when hovering. Currently I have the popup working but cannot add a mouseover. Everywhere I"ve read is saying that you can add a mouseover to the feature wih the geoJson object but it doesn't look like I have access to that object using it through this module. Here is my Js code.

(function ($) {
Drupal.behaviors.maps = {
attach:function (context, settings) {

  // Add legends to each leaflet map instance in Drupal's settings array
  $(settings.leaflet).each(function() {
    // Get the map object from the current iteration
    var map = this.lMap;

    // Create a legend class that will later be instantiated and added to the map
    var legend = L.Control.extend({
      options: {
        position: 'bottomleft'
      },

      onAdd: function (map) {
        // create the control container div with classes
        var container = L.DomUtil.create('div', 'info legend');

        var html = '<h1>Status</h1>';
        html += '<ul>';
        html += ' <li><span class="color home"></span> Available Home</li>';
        html += ' <li><span class="color lot"></span> Available Lot</li>';
        html += ' <li><span class="color not-available"></span> Not Available</li>';
        html += '</ul>';
        container.innerHTML = html;

        return container;
      }
    });
    map.scrollWheelZoom.disable();
    map.addControl(new legend());
  });
}
};
})(jQuery);

I have the popup working, I need to add an on hover to each feature, how can I do that?

Answer 1

When you create your geojson layer, you can pass functions:

var myLayer = L.geoJson(d, {style: style, onEachFeature: onEachFeature, pointToLayer: pointToLayer}).addTo(map);

onEachFeature specifies what functions are to be called depending on the event:

var onEachFeature = function onEachFeature(feature, layer) {
        layer.on({
            mouseover: highlightFeature,
            mouseout: resetHighlight,
            click: zoomToFeature,
            pointToLayer: pointToLayer
        });
    };

Example of mouseover function:

function highlightFeature(e) {
    var layer = e.target;

    layer.setStyle({ // highlight the feature
        weight: 5,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.6
    });

    if (!L.Browser.ie && !L.Browser.opera) {
        layer.bringToFront();
    }
    map.info.update(layer.feature.properties); // Update infobox
}

You need to modify the above code to fit your design, but it shows you how you can get the hover on each feature working.