diff --git a/js/jquery.mapael.js b/js/jquery.mapael.js
index 3bda8d0a3..ce123f860 100644
--- a/js/jquery.mapael.js
+++ b/js/jquery.mapael.js
@@ -3,7 +3,7 @@
* Jquery Mapael - Dynamic maps jQuery plugin (based on raphael.js)
* Requires jQuery and raphael.js
*
-* Version: 0.1.0 (06-22-2013)
+* Version: 0.2.0 (06-30-2013)
*
* Copyright (c) 2013 Vincent Brouté (http://www.neveldo.fr/mapael)
* Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php).
@@ -21,22 +21,36 @@
var $tooltip = $("
").addClass(options.map.tooltip.cssClass).css("display", "none")
, $container = $(this).empty().append($tooltip)
, mapConf = $.fn.mapael.maps[options.map.name]
+ , containerWidth = $container.width()
, paper = new Raphael(this, mapConf.width, mapConf.height)
, areaParams = {}
, legend = {}
, mapElem = {}
- , hoverParams = {}
, bbox = {}
, plotParams = {}
, textElem = {}
- , coords = {};
-
- options.map.tooltipCss && $tooltip.css(options.map.tooltipCss);
+ , coords = {}
+ , resizeTO = 0;
- if (options.map.width && options.map.height) {
- paper.setViewBox(0, 0, mapConf.width, mapConf.height, false);
- paper.setSize(options.map.width, options.map.height);
- }
+ if (options.map.width) {
+ paper.setSize(options.map.width, mapConf.height * (options.map.width / mapConf.width));
+ } else {
+ // Handle resizing of the container
+ $(window).bind('resize', function(){
+ clearTimeout(resizeTO);
+ resizeTO = setTimeout(function(){$container.trigger('resizeEnd');}, 150);
+ });
+ $(document).bind('ready', function(){$container.trigger('resizeEnd');});
+ $container.bind('resizeEnd', function(e) {
+ var containerWidth = $container.width();
+ if (paper.width != containerWidth) {
+ paper.setSize(containerWidth, mapConf.height * (containerWidth / mapConf.width));
+ }
+ });
+ }
+
+ options.map.tooltip.css && $tooltip.css(options.map.tooltip.css);
+ paper.setViewBox(0, 0, mapConf.width, mapConf.height, false);
// Draw map areas
for (var id in mapConf.elems) {
@@ -53,12 +67,11 @@
}
mapElem = paper.path(mapConf.elems[id]).attr(areaParams.attrs);
+ mapElem.elemType = 'area';
areaParams.tooltip && areaParams.tooltip.content && $.fn.mapael.setTooltip(mapElem, $tooltip, areaParams.tooltip.content);
$.fn.mapael.paramHover(mapElem, areaParams.attrs, areaParams.attrsHover);
- hoverParams = {"paper" : paper, "mapElem" : mapElem};
-
// Set a text label in the area
if (areaParams.text) {
bbox = mapElem.getBBox();
@@ -79,14 +92,19 @@
}
}
- // Draw additional plots
+ // Draw plots
for (var i = 0, length = options.plots.length; i < length; ++i) {
plotParams = $.extend(
- true, {}
- , options.map.defaultPlot
- , (options.plots[i] ? options.plots[i] : {})
- );
- coords = mapConf.getCoords(plotParams.latitude, plotParams.longitude);
+ true, {}
+ , options.map.defaultPlot
+ , (options.plots[i] ? options.plots[i] : {})
+ );
+
+ if (plotParams.x && plotParams.y) {
+ coords = {x : plotParams.x, y : plotParams.y};
+ } else {
+ coords = mapConf.getCoords(plotParams.latitude, plotParams.longitude);
+ }
if (options.legend.plot && plotParams.value) {
legend = $.fn.mapael.getLegendEl(plotParams.value, options.legend.plot);
@@ -106,6 +124,7 @@
throw "Unknown plot type '" + plotParams.type + "'";
}
+ mapElem.elemType = 'plot';
mapElem.attr(plotParams.attrs);
plotParams.tooltip && plotParams.tooltip.content && $.fn.mapael.setTooltip(mapElem, $tooltip, plotParams.tooltip.content);
@@ -123,10 +142,10 @@
plotParams.attrs.href && (textElem.attr({"href": plotParams.attrs.href}));
$.fn.mapael.paramHover(textElem, plotParams.textAttrs, plotParams.textAttrsHover);
$.fn.mapael.setHover(paper, mapElem, textElem);
- $.fn.mapael.setCallbacks(areaParams, mapElem, textElem);
+ $.fn.mapael.setCallbacks(plotParams, mapElem, textElem);
} else {
$.fn.mapael.setHover(paper, mapElem);
- $.fn.mapael.setCallbacks(areaParams, mapElem);
+ $.fn.mapael.setCallbacks(plotParams, mapElem);
}
}
@@ -138,33 +157,35 @@
if (options.legend.plot.slices && options.legend.plot.display) {
$.fn.mapael.createLegend($container, options, 'plot');
}
+
+ $(paper.desc).append(" and Mapael (http://neveldo.fr/mapael)");
});
};
/**
* Set user defined callbacks on areas and plots
- * @param areaParams the area parameters
+ * @param elemParams the element parameters
* @param mapElem the map element to set callback on
* @param textElem the optional text within the map element
*/
- $.fn.mapael.setCallbacks = function(areaParams, mapElem, textElem) {
+ $.fn.mapael.setCallbacks = function(elemParams, mapElem, textElem) {
var callbacks = [];
- if (areaParams.onclick) {
+ if (elemParams.onclick) {
callbacks.push({
event : 'click'
- , callback : function() {areaParams.onclick(areaParams, mapElem, textElem)}
+ , callback : function() {elemParams.onclick(elemParams, mapElem, textElem)}
});
}
- if (areaParams.onmouseenter) {
+ if (elemParams.onmouseover) {
callbacks.push({
- event : 'mouseenter'
- , callback : function() {areaParams.onmouseenter(areaParams, mapElem, textElem)}
+ event : 'mouseover'
+ , callback : function() {elemParams.onmouseover(elemParams, mapElem, textElem)}
});
}
- if (areaParams.onmouseleave) {
+ if (elemParams.onmouseout) {
callbacks.push({
- event : 'mouseleave'
- , callback : function() {areaParams.onmouseleave(areaParams, mapElem, textElem)}
+ event : 'mouseout'
+ , callback : function() {elemParams.onmouseout(elemParams, mapElem, textElem)}
});
}
@@ -203,12 +224,15 @@
* @param content the content to set in the tooltip
*/
$.fn.mapael.setTooltip = function(elem, $tooltip, content) {
- $(elem.node).bind("mouseenter", function() {
- $tooltip.html(content).css("display", "block");
- }).bind("mouseleave", function() {
+ var tooltipTO = 0;
+
+ $(elem.node).bind("mouseover", function() {
+ tooltipTO = setTimeout(function() {$tooltip.html(content).css("display", "block");}, 120);
+ }).bind("mouseout", function() {
+ clearTimeout(tooltipTO);
$tooltip.css("display", "none");
}).bind("mousemove", function(e) {
- $tooltip.css("left", e.pageX+20).css("top", e.pageY+20);
+ $tooltip.css("left", e.pageX + 15).css("top", e.pageY + 15 - $(window).scrollTop());
});
};
@@ -275,6 +299,8 @@
).attr(legendParams.slices[i].attrs);
}
+ elem.elemType = 'plot';
+
label = paper.text(
marginLeft + legendParams.slices[i].size + marginLeftLabel
, height + legendParams.slices[i].size / 2
@@ -296,9 +322,11 @@
// https://github.com/DmitryBaranovskiy/raphael/issues/225
$.fn.mapael.mouseHovered = false;
$.fn.mapael.elemsHovered = [];
+ $.fn.mapael.oldEvents = typeof document.documentElement.onmouseenter !== 'undefined';
+
/**
- * Set he behaviour for 'mouseenter' event
+ * Set he behaviour for 'mouseover' event
* @param paper paper Raphael paper object
* @param mapElem mapElem the map element
* @param textElem the optional text element (within the map element)
@@ -313,15 +341,15 @@
mapElem.attrsHover
, mapElem.attrsHover.animDuration
);
- mapElem.attrsHover.transform && mapElem.toFront();
+ mapElem.elemType == 'area' && mapElem.attrsHover.transform && mapElem.toFront();
}
if (textElem) {
- textElem && textElem.animate(
+ textElem.animate(
textElem.attrsHover
, textElem.attrsHover.animDuration
);
- textElem && mapElem.attrsHover.transform && textElem.toFront();
+ mapElem.elemType == 'area' && mapElem.attrsHover.transform && textElem.toFront();
}
paper.safari();
} else {
@@ -336,7 +364,7 @@
}
/**
- * Set he behaviour for 'mouseleave' event
+ * Set he behaviour for 'mouseout' event
* @param paper Raphael paper object
* @param mapElem the map element
* @param textElem the optional text element (within the map element)
@@ -355,27 +383,30 @@
};
/**
- * Set the hover behavior (mouseenter & mouseleave) for plots and areas
+ * Set the hover behavior (mouseover & mouseout) for plots and areas
* @param paper Raphael paper object
* @param mapElem the map element
* @param textElem the optional text element (within the map element)
*/
$.fn.mapael.setHover = function (paper, mapElem, textElem) {
var $mapElem = {}
- , $textElem = {};
+ , $textElem = {}
+ , hoverTO = 0;
if (mapElem) {
$mapElem = $(mapElem.node);
- $mapElem.bind("mouseenter",
- function () {$.fn.mapael.hoverIn(paper, mapElem, textElem);}
+ $mapElem.bind("mouseover",
+ function() {
+ hoverTO = setTimeout(function () {$.fn.mapael.hoverIn(paper, mapElem, textElem);}, 120);
+ }
);
- $mapElem.bind("mouseleave",
- function () {$.fn.mapael.hoverOut(paper, mapElem, textElem);}
+ $mapElem.bind("mouseout",
+ function () {clearTimeout(hoverTO);$.fn.mapael.hoverOut(paper, mapElem, textElem);}
);
}
if (textElem) {
$textElem = $(textElem.node);
- $textElem.bind("mouseenter",
+ $textElem.bind("mouseover",
function () {$.fn.mapael.hoverIn(paper, mapElem, textElem);}
);
$textElem && $(textElem.node).bind("mouseout",
@@ -387,10 +418,16 @@
/**
* 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 mouseleave event
- * @param attrsHover the attributes to set on mouseenter event
+ * @param originalAttrs the original attributes to restore on mouseout event
+ * @param attrsHover the attributes to set on mouseover event
*/
$.fn.mapael.paramHover = function (elem, originalAttrs, attrsHover) {
+
+ // Don't use transform option on hover for VML (IE<9) because of several bugs
+ if (Raphael.type != 'SVG') {
+ delete attrsHover.transform;
+ }
+
elem.attrsHover = {};
$.extend(elem.attrsHover, attrsHover);
diff --git a/js/maps/france_departments.js b/js/maps/france_departments.js
index 5f9d916f0..bd62ae10c 100644
--- a/js/maps/france_departments.js
+++ b/js/maps/france_departments.js
@@ -1,5 +1,7 @@
/**
-* Mapael
+*
+* Jquery Mapael - Dynamic maps jQuery plugin (based on raphael.js)
+* Requires jQuery and raphael.js
*
* Map of France by department
*
@@ -10,8 +12,8 @@
{
maps : {
france_departments : {
- width : 600,
- height : 550,
+ width : 507.08136,
+ height : 553.04327,
getCoords : function (lat, lon) {
// Corse
if (lat < 43.157109 && lon > 8.171997) {
diff --git a/js/maps/usa_states.js b/js/maps/usa_states.js
index e04b8c772..1aae0c363 100644
--- a/js/maps/usa_states.js
+++ b/js/maps/usa_states.js
@@ -1,5 +1,7 @@
/**
-* Mapael
+*
+* Jquery Mapael - Dynamic maps jQuery plugin (based on raphael.js)
+* Requires jQuery and raphael.js
*
* Map of USA by state
*
diff --git a/js/maps/world_countries.js b/js/maps/world_countries.js
index c21c2cb4b..cd0e4e7b9 100644
--- a/js/maps/world_countries.js
+++ b/js/maps/world_countries.js
@@ -1,9 +1,11 @@
/**
-* Mapael
+*
+* Jquery Mapael - Dynamic maps jQuery plugin (based on raphael.js)
+* Requires jQuery and raphael.js
*
* Map of World by country
*
-* http://backspace.com/mapapp/javascript_world/
+* @source http://backspace.com/mapapp/javascript_world/
*/
(function($) {