Leaflet - polygon click

by J. Albert Bowden

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<div id="map"></div>

CSS

#map { 
    height: 400px; 
}

JavaScript

// Create the map
var map = L.map('map').setView([79, -100], 5);

// Set up the OSM layer
L.tileLayer(
    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
    {maxZoom: 18}).addTo(map);

//Handle click on polygon
var onPolyClick = function(event){
    //callFancyboxIframe('flrs.html')
    var label = event.target.options.label;
    var content = event.target.options.popup;
    var otherStuff = event.target.options.otherStuff;
    alert("Clicked on polygon with label:" +label +" and content:" +content +". Also otherStuff set to:" +otherStuff);
};

//Create polygon
var popup_flor ="MyLabel";
var content_flor ="MyContent";
var poly = new L.Polygon([
        [79.07181, -100.63477], 
        [79.06348, -90.43945], 
        [77.52312, -90.52734], 
        [77.50412, -94.21875], 
        [77.41825, -94.35059], 
        [77.40868, -96.72363], 
        [77.51362, -96.81152], 
        [77.53261, -100.63477], 
        [79.07181, -100.63477]
  ], {'label': popup_flor, 'popup': content_flor, 'otherStuff': 'abc123'});
poly.on('click', onPolyClick);

//Add polygon to map
poly.addTo(map);