Click on Leaflet marker to open image - Javascript Leaflet

Javascript examples for Leaflet:Marker

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

Description

Click on Leaflet marker to open image

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script> 
      <link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css"> 
      <script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script> 
      <link rel="stylesheet" type="text/css" href="http://www.davewyatt.co.uk/scripts/fancybox/source/jquery.fancybox.css"> 
      <script type="text/javascript" src="http://www.davewyatt.co.uk/scripts/fancybox/source/jquery.fancybox.pack.js"></script> 
      <style id="compiled-css" type="text/css">

#map {//from  w ww  .java  2s. co  m
   width: 100%;
   height: 800px;
}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){
var locations = [
            ['Triple Hole', 51.32774, -2.82406, 2, 'http://davewyatt.co.uk/wp-content/uploads/cache/2014/12/TripleHole/2251930291.jpg'],
            ['Classic Shaft', 51.32748, -2.82218, 1, 'http://davewyatt.co.uk/wp-content/uploads/cache/2014/12/ClassicShaft/3744186524.jpg'],
            ['Fern Mine', 51.32893, -2.82063, 3, 'http://davewyatt.co.uk/wp-content/uploads/cache/2014/12/FermMine/1016683837.jpg']
        ];
        var map = L.map('map').setView([51.32774, -2.82], 16);
        mapLink =
            '<a href="http://openstreetmap.org">OpenStreetMap</a>';
        L.tileLayer(
            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; ' + mapLink + ' Contributors',
                maxZoom: 18,
            }).addTo(map);
    //create a layergroup to store the markers inside it
    var group = L.layerGroup().addTo(map)
        for (i = 0; i < locations.length; i++) {
            marker = new L.marker([locations[i][1], locations[i][2]], {
                    title: (locations[i][0]),
                    opacity: 1
                })
                .addTo(group);
                marker.on('click', function() {
                    markerArray = group.getLayers();      //get an array with all the markers
                    //see which marker from the group was clicked and store the value for later use
               position = markerArray.indexOf(group.getLayer(this._leaflet_id));
                    $.fancybox({
                        href: locations[position][4],
                        width: 1000,
                        maxHeight: 666,
                        fitToView: true,
                        autoSize: false,
                        type: 'iframe',
                        padding: 0,
                        openEffect: 'elastic',
                        openSpeed: 150,
                        aspectRatio: true,
                        closeEffect: 'elastic',
                        closeSpeed: 150,
                        closeClick: true,
                        iframe: {
                            scrolling: 'no'
                        },
                        preload: true
                    });
                });
        }
    });

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

Related Tutorials