Search code examples
javascriptleaflet

hover of marker in leaflet

I would like to ask if it is possible to hover not CLICKED the marker in the leaflet map

here is my code

leaflet.js

var map = L.map( 'map', {
  center: [20.0, 5.0],
  maxZoom: 16,
  minZoom: 2,
  zoom: 2
})

L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
   subdomains: ['a', 'b', 'c']
}).addTo( map )

var myURL = jQuery( 'script[src$="leaf-demo.js"]' ).attr( 'src' ).replace( 'leaf-demo.js', '' )

var myIcon = L.icon({
  iconUrl: myURL + 'images/pin24.png',
  iconRetinaUrl: myURL + 'images/pin48.png',
  iconSize: [29, 24],
  iconAnchor: [9, 21],
  popupAnchor: [0, -14]
})

here is where it shows the marker and the data in the leaflet map

var markers = [
["<b style='font-size:15pt;'> ROXAS CITY CHAPTER </b> <br> <i style='font-size:12pt;'> JUAN DELA CRUZ </i> <br>juan@yahoo.com", 11.58528,122.75111],
["<b style='font-size:15pt;'> MANILA CITY CHAPTER </b> <br> <i style='font-size:12pt;'> PEDRO DELA CRUZ </i> <br>pedro@gmail.com", 14.599512,120.984222],
["<b style='font-size:15pt;'> CANADA CHAPTER </b> <br> <i style='font-size:12pt;'> SIMON DELA CRUZ </i> <br>simon@gmail.com", 53.631611 ,-113.323975]
];
for ( var i=0; i < markers.length; i++ ){
  marker = L.marker ([markers[i][1], markers[i][2]], {icon: myIcon})
  .bindPopup(markers[i][0])

  .addTo( map );
}

here is a image for more understanding enter image description here

Solution

  • Add mouseover event on the marker and calling openPopup() in the handler like below:

    marker = L.marker(...);

marker.on('mouseover',function(ev) {
  ev.target.openPopup();
});

    or

    marker.on('mouseover',function(ev) {
  marker.openPopup();
});

    I have setup jsfiddle for the same : http://jsfiddle.net/74g6ts4r/