2013-07-23 10 views
6

Sto usando il modulo volantino drupal e voglio avere un popup sul clic, e poi un mouseover per mostrarlo nell'angolo quando si passa il mouse. Attualmente ho il popup che funziona ma non posso aggiungere un mouseover. Ovunque ho letto sta dicendo che puoi aggiungere un mouseover alla funzione con l'oggetto geoJson ma non sembra che abbia accesso a quell'oggetto che lo usa tramite questo modulo.Qui è il mio codice JsCome fare un popup e passare il mouse con il plugin js per gli opuscoli?

(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); 

ho il lavoro a comparsa, ho bisogno di aggiungere un on hover per ogni funzione, come posso fare che

risposta

3

Quando si crea un livello GeoJSON, è possibile passare funzioni:?

onEachFeature specifica quali funzioni devono essere chiamati a seconda dell'evento:

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

Esempio di funzione mouseover:

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 
} 

È necessario modificare il codice di cui sopra per misura il vostro disegno, ma mostra come si può ottenere il passaggio del mouse su ogni funzione funzionante.

+2

Il problema con questo è che non creo il livello geoJson manualmente. Con il modulo Drupal trasmetto i dati a una funzione "leaflet_render_map", quindi senza modificare direttamente il modulo leaflet, non ho accesso diretto all'oggetto geoJson – jakecraige

Problemi correlati