open a popup on hover event with clickable constant

Description

Demo Code

<html>
   <head> 
      <title>Leaflet Events</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <style id="compiled-css" type="text/css">

#map {//from www.  j a va2 s  .c  om
   height: 350px;
   width: 100%;
}
ul {
   display: inline;
   margin: 0;
   padding: 0;
}
li {
   display: inline;
   margin: 10px;
   text-decoration: underline;
   list-style: none;
   cursor: pointer;
}
#tag {
   width: 100px;
   margin: 3px;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
var map = L.map('map', {
   center: [47.59401, -122.24406],
   maxZoom: 17,
   zoom: 16,
   zoomControl: false
});
marker = L.circle([47.59401, -122.24406], 45.7, {
   color: 'red',
   fillColor: '#f03',
   fillOpacity: 0.5,
   weight: 1
});
marker.addTo(map);
var start;
marker.on('mouseover', function(e){
    e.target.bindPopup("dsdsdsdsd").openPopup();
    start = new Date().getTime();
  });
marker.on('mouseout', function(e){
    var end = new Date().getTime();
    var time = end - start;
    console.log('Execution time: ' + time);
    if(time > 700){
    e.target.closePopup();
    }
});
    }

      </script> 
   </head> 
   <body>   
      <title>Leaflet Events</title> 
      <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css"> 
      <script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>   
      <div id="map"></div> 
      <ul> 
         <li id="zoomin">Zoom In</li> 
         <li id="zoomout">Zoom Out</li> 
         <li id="near">Go Near</li> 
         <li id="far">Go Far</li> 
         <li id="pan">Pan</li> 
         <li id="reset">Reset</li> 
         <li id="line">Log Line</li> 
      </ul> 
      <input id="tag" type="text" placeholder="log line tag" value="">    
   </body>
</html>

open a popup on hover event with clickable constant - Javascript Leaflet

Description

Demo Code

Related Tutorials