hover of marker in leaflet - Javascript Leaflet

Javascript examples for Leaflet:Marker

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

Description

hover of marker in leaflet

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Leaflet Marker Popups</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script> 
      <script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.js"></script> 
      <link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.css"> 
      <script type="text/javascript">
    $(window).load(function(){//from w  w w  .j  a  v a2s. co  m
var map = L.map('map').setView([51.495, -0.09], 15);
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var osmLayer = new L.TileLayer(osmUrl, {
        maxZoom: 19,
        attribution: 'Map data ? OpenStreetMap contributors'
    });
map.addLayer(osmLayer);
    var markers = [];
    var marker1 = L.marker([51.497, -0.09],{title:"marker_1"}).addTo(map).bindPopup("Marker 1");
    markers.push(marker1);
    marker1.on('mouseover',function(ev) {
      marker1.openPopup();
    });
    function markerFunction(id){
        for (var i in markers){
            var markerID = markers[i].options.title;
            if (markerID == id){
                markers[i].openPopup();
            };
        }
    }
    $("a").click(function(){
        markerFunction($(this)[0].id);
    });
    });

      </script> 
   </head> 
   <body> 
      <div id="map" style="width:500px;height:400px;"></div> 
      <a id="marker_1" href="#">Marker 1</a>
      <br>  
   </body>
</html>

Related Tutorials