How to make popup and hover with js plugin plugin?

Question

I use the drupal leaflet module and want you to have a popup, and then hover over the corner when you rotate. Currently my popup is working but cannot add the mouse cursor. Wherever I read, we say that you can add a mouse cursor to an object with a geoJson object, but it doesn't seem like I have access to this 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 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 a popup, I need to add a hover function to each function, how can I do this?

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 indicates which functions should be called depending on the event:

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

Example 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 code above to fit your design, but it shows you how you can hover over each function.