make Leaflet marker interactive only for click events? - Javascript Leaflet

Javascript examples for Leaflet:Marker

  1. HOME
  2. Javascript
  3. Leaflet
  4. Marker

Description

make Leaflet marker interactive only for click events?

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Leaflet 1.1 bubbleEvents2</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://unpkg.com/leaflet@1.1.0/dist/leaflet.js"></script> 
      <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css"> 
      <style id="compiled-css" type="text/css">

#map {/*w  w  w . jav  a  2s. c o  m*/
   height: 400px;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
var map = L.map('map').setView([39.5, -0.5], 5);
L.tileLayer(
    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    {maxZoom: 18}).addTo(map);
polygon_style= {
        stroke: true,
        weight: 1,
        color: '#ff8888',
        fill: true,
        fillOpacity: 0.8,
        className: 'label-polygon'
    };
southWest = L.latLng(36.0, -6),
    northEast = L.latLng(41.6, 4),
    bounds = L.latLngBounds(southWest, northEast);
mark = L.marker([43.83711,-3.464459])
pol = L.rectangle ( bounds, polygon_style );
pol.label="dummy";
           pol.on({
                mousemove: function(e) {
                   mark.addTo(map);
                },
                mouseout: function(e) {
                   mark.remove();
                }
            }).on('click', function (e) {
            console.log('polygon was clicked!');
        });
pol.addTo(map);
iconLabel = new L.DivIcon({
   html:"<p>This text blocks events</p>",
   iconSize: new L.Point(50, 70)
});
labeledMarker = new L.Marker([39.83711,-3.464459], {icon:iconLabel}).on('mouseover', function (e) {
            mark.addTo(map);
        }).on('click', function (e) {
            console.log('marker was clicked!');
        });
labeledMarker.addTo(map);
    }

      </script> 
   </head> 
   <body> 
      <div id="map"> 
      </div>  
   </body>
</html>

Related Tutorials