Avec cette page
[javascript](function ($){
var apiParams = {
colors: 1,
values: 1,
backgroundColor: 1,
scaleColors: 1,
normalizeFunction: 1,
enableZoom: 1,
showTooltip: 1,
infobulle: 1,
borderColor: 1,
borderWidth: 1,
borderOpacity: 1,
selectedRegion: 1
};
var apiEvents = {
onLabelShow: 'labelShow',
onRegionOver: 'regionMouseOver',
onRegionOut: 'regionMouseOut',
onRegionClick: 'regionClick'
};
$.fn.vectorMap = function (options){
var defaultParams = {
map: 'world_en',
backgroundColor: '#a5bfdd',
color: '#000',
hoverColor: '#c9dfaf',
selectedColor: '#c9dfaf',
scaleColors: ['#b6d6ff', '#005ace'],
normalizeFunction: 'linear',
enableZoom: true,
showTooltip: false,
borderColor: '#818181',
borderWidth: 1,
borderOpacity: 0.25,
selectedRegion: null
}, map;
if (options === 'addMap')
{
WorldMap.maps[arguments[1]] = arguments[2];
}
else if (options === 'set' && apiParams[arguments[1]])
{
this.data('mapObject')['set' + arguments[1].charAt(0).toUpperCase() + arguments[1].substr(1)].apply(this.data('mapObject'), Array.prototype.slice.call(arguments, 2));
}
else
{
$.extend(defaultParams, options);
defaultParams.container = this;
this.css({ position: 'relative', overflow: 'hidden' });
map = new WorldMap(defaultParams);
this.data('mapObject', map);
for (var e in apiEvents)
{
if (defaultParams[e])
{
this.bind(apiEvents[e] + '.jqvmap', defaultParams[e]);
}
}
}
};
var VectorCanvas = function (width, height, params)
{
this.mode = window.SVGAngle ? 'svg' : 'vml';
this.params = params;
if (this.mode == 'svg')
{
this.createSvgNode = function (nodeName)
{
return document.createElementNS(this.svgns, nodeName);
};
}
else
{
try {
if (!document.namespaces.rvml)
{
document.namespaces.add("rvml", "urn:schemas-microsoft-com:vml");
}
this.createVmlNode = function (tagName)
{
return document.createElement('<rvml:' + tagName + ' class="rvml">');
};
}
catch (e)
{
this.createVmlNode = function (tagName)
{
return document.createElement('<' + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">');
};
}
document.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)");
}
if (this.mode == 'svg')
{
this.canvas = this.createSvgNode('svg');
}
else
{
this.canvas = this.createVmlNode('group');
this.canvas.style.position = 'absolute';
}
this.setSize(width, height);
};
VectorCanvas.prototype = {
svgns: "
http://www.w3.org/2000/svg",
mode: 'svg',
width: 0,
height: 0,
canvas: null,
setSize: function (width, height)
{
if (this.mode == 'svg')
{
this.canvas.setAttribute('width', width);
this.canvas.setAttribute('height', height);
}
else
{
this.canvas.style.width = width + "px";
this.canvas.style.height = height + "px";
this.canvas.coordsize = width + ' ' + height;
this.canvas.coordorigin = "0 0";
if (this.rootGroup)
{
var pathes = this.rootGroup.getElementsByTagName('shape');
for (var i = 0, l = pathes.length; i < l; i++)
{
pathes
.coordsize = width + ' ' + height;
pathes.style.width = width + 'px';
pathes.style.height = height + 'px';
}
this.rootGroup.coordsize = width + ' ' + height;
this.rootGroup.style.width = width + 'px';
this.rootGroup.style.height = height + 'px';
}
}
this.width = width;
this.height = height;
},
createPath: function (config)
{
var node;
if (this.mode == 'svg')
{
node = this.createSvgNode('path');
node.setAttribute('d', config.path);
if(this.params.borderColor !== null)
{
node.setAttribute('stroke', this.params.borderColor);
}
if(this.params.borderWidth > 0)
{
node.setAttribute('stroke-width', this.params.borderWidth);
node.setAttribute('stroke-linecap', 'round');
node.setAttribute('stroke-linejoin', 'round');
}
if(this.params.borderOpacity > 0)
{
node.setAttribute('stroke-opacity', this.params.borderOpacity);
}
node.setFill = function (color)
{
this.setAttribute("fill", color);
if(this.getAttribute("original") === null)
{
this.setAttribute("original", color);
}
};
node.getFill = function (color)
{
return this.getAttribute("fill");
};
node.getOriginalFill = function ()
{
return this.getAttribute("original");
};
node.setOpacity = function (opacity)
{
this.setAttribute('fill-opacity', opacity);
};
}
else
{
node = this.createVmlNode('shape');
node.coordorigin = "0 0";
node.coordsize = this.width + ' ' + this.height;
node.style.width = this.width + 'px';
node.style.height = this.height + 'px';
node.fillcolor = WorldMap.defaultFillColor;
node.stroked = false;
node.path = VectorCanvas.pathSvgToVml(config.path);
var scale = this.createVmlNode('skew');
scale.on = true;
scale.matrix = '0.01,0,0,0.01,0,0';
scale.offset = '0,0';
node.appendChild(scale);
var fill = this.createVmlNode('fill');
node.appendChild(fill);
node.setFill = function (color)
{
this.getElementsByTagName('fill')[0].color = color;
};
node.getFill = function (color)
{
return this.getElementsByTagName('fill')[0].color;
};
node.setOpacity = function (opacity)
{
this.getElementsByTagName('fill')[0].opacity = parseInt(opacity * 100, 10) + '%';
};
}
return node;
},
createGroup: function (isRoot)
{
var node;
if (this.mode == 'svg')
{
node = this.createSvgNode('g');
}
else
{
node = this.createVmlNode('group');
node.style.width = this.width + 'px';
node.style.height = this.height + 'px';
node.style.left = '0px';
node.style.top = '0px';
node.coordorigin = "0 0";
node.coordsize = this.width + ' ' + this.height;
}
if (isRoot)
{
this.rootGroup = node;
}
return node;
},
applyTransformParams: function (scale, transX, transY)
{
if (this.mode == 'svg')
{
this.rootGroup.setAttribute('transform', 'scale(' + scale + ') translate(' + transX + ', ' + transY + ')');
}
else
{
this.rootGroup.coordorigin = (this.width - transX) + ',' + (this.height - transY);
this.rootGroup.coordsize = this.width / scale + ',' + this.height / scale;
}
}
};
VectorCanvas.pathSvgToVml = function (path)
{
var result = '';
var cx = 0, cy = 0, ctrlx, ctrly;
return path.replace(/([MmLlHhVvCcSs])((?:-?(?:\d+)?(?:\.\d+)?,?\s?)+)/g, function (segment, letter, coords, index)
{
coords = coords.replace(/(\d)-/g, '$1,-').replace(/\s+/g, ',').split(',');
if (!coords[0])
{
coords.shift();
}
for (var i = 0, l = coords.length; i < l; i++)
{
coords = Math.round(100 * coords);
}
switch (letter)
{
case 'm':
cx += coords[0];
cy += coords[1];
return 't' + coords.join(',');
break;
case 'M':
cx = coords[0];
cy = coords[1];
return 'm' + coords.join(',');
break;
case 'l':
cx += coords[0];
cy += coords[1];
return 'r' + coords.join(',');
break;
case 'L':
cx = coords[0];
cy = coords[1];
return 'l' + coords.join(',');
break;
case 'h':
cx += coords[0];
return 'r' + coords[0] + ',0';
break;
case 'H':
cx = coords[0];
return 'l' + cx + ',' + cy;
break;
case 'v':
cy += coords[0];
return 'r0,' + coords[0];
break;
case 'V':
cy = coords[0];
return 'l' + cx + ',' + cy;
break;
case 'c':
ctrlx = cx + coords[coords.length - 4];
ctrly = cy + coords[coords.length - 3];
cx += coords[coords.length - 2];
cy += coords[coords.length - 1];
return 'v' + coords.join(',');
break;
case 'C':
ctrlx = coords[coords.length - 4];
ctrly = coords[coords.length - 3];
cx = coords[coords.length - 2];
cy = coords[coords.length - 1];
return 'c' + coords.join(',');
break;
case 's':
coords.unshift(cy - ctrly);
coords.unshift(cx - ctrlx);
ctrlx = cx + coords[coords.length - 4];
ctrly = cy + coords[coords.length - 3];
cx += coords[coords.length - 2];
cy += coords[coords.length - 1];
return 'v' + coords.join(',');
break;
case 'S':
coords.unshift(cy + cy - ctrly);
coords.unshift(cx + cx - ctrlx);
ctrlx = coords[coords.length - 4];
ctrly = coords[coords.length - 3];
cx = coords[coords.length - 2];
cy = coords[coords.length - 1];
return 'c' + coords.join(',');
break;
default:
return false;
break;
}
return '';
}).replace(/z/g, '');
};
var WorldMap = function (params)
{
params = params || {};
var map = this;
var mapData = WorldMap.maps[params.map];
this.container = params.container;
this.defaultWidth = mapData.width;
this.defaultHeight = mapData.height;
this.color = params.color;
this.hoverColor = params.hoverColor;
this.setBackgroundColor(params.backgroundColor);
this.width = params.container.width();
this.height = params.container.height();
this.resize();
jQuery(window).resize(function ()
{
map.width = params.container.width();
map.height = params.container.height();
map.resize();
map.canvas.setSize(map.width, map.height);
map.applyTransform();
});
this.canvas = new VectorCanvas(this.width, this.height, params);
params.container.append(this.canvas.canvas);
this.makeDraggable();
this.rootGroup = this.canvas.createGroup(true);
this.index = WorldMap.mapIndex;
this.label = jQuery('<div/>').addClass('jqvmap-label').appendTo(jQuery('body'));
if(params.enableZoom)
{
jQuery('<div/>').addClass('jqvmap-zoomin').text('+').appendTo(params.container);
jQuery('<div/>').addClass('jqvmap-zoomout').html('−').appendTo(params.container);
}
map.countries = [];
for (var key in mapData.pathes)
{
var path = this.canvas.createPath({
path: mapData.pathes[key].path
});
path.setFill(this.color);
path.id = 'jqvmap' + map.index + '_' + key;
map.countries[key] = path;
jQuery(this.rootGroup).append(path);
path.setAttribute('class', 'jqvmap-region');
if(params.selectedRegion !== null)
{
if(key.toLowerCase() == params.selectedRegion.toLowerCase())
{
path.setFill(params.selectedColor);
}
}
}
jQuery(params.container).delegate(this.canvas.mode == 'svg' ? 'path' : 'shape', 'mouseover mouseout', function (e){
var path = e.target,
code = e.target.id.split('_').pop(),
labelShowEvent = $.Event('labelShow.jqvmap'),
regionMouseOverEvent = $.Event('regionMouseOver.jqvmap');
if (e.type == 'mouseover')
{
jQuery(params.container).trigger(regionMouseOverEvent, [code, mapData.pathesCode : Tout sélectionner
.name]);
if (!regionMouseOverEvent.isDefaultPrevented())
{
if (params.hoverOpacity)
{
path.setOpacity(params.hoverOpacity);
}
else if (params.hoverColor)
{
path.currentFillColor = path.getFill() + '';
path.setFill(params.hoverColor);
}
}
if(params.showTooltip)
{
map.label.text(mapData.pathes[code].name);
jQuery(params.container).trigger(labelShowEvent, [map.label, code]);
if (!labelShowEvent.isDefaultPrevented())
{
map.label.show();
map.labelWidth = map.label.width();
map.labelHeight = map.label.height();
}
}
}
else
{
path.setOpacity(1);
if (path.currentFillColor)
{
path.setFill(path.currentFillColor);
}
map.label.hide();
jQuery(params.container).trigger('regionMouseOut.jqvmap', [code, mapData.pathes[code].name]);
}
});
jQuery(params.container).delegate(this.canvas.mode == 'svg' ? 'path' : 'shape', 'click', function (e){
for (var key in mapData.pathes)
{
map.countries[key].currentFillColor = map.countries[key].getOriginalFill();
map.countries[key].setFill(map.countries[key].getOriginalFill());
}
var path = e.target;
var code = e.target.id.split('_').pop();
jQuery(params.container).trigger('regionClick.jqvmap', [code, mapData.pathes[code].name]);
path.currentFillColor = params.selectedColor;
path.setFill(params.selectedColor);
});
if(params.showTooltip)
{
params.container.mousemove(function (e){
if (map.label.is(':visible'))
{
map.label.css({
left: e.pageX - 15 - map.labelWidth,
top: e.pageY - 15 - map.labelHeight
});
}
});
}
this.setColors(params.colors);
this.canvas.canvas.appendChild(this.rootGroup);
this.applyTransform();
this.colorScale = new ColorScale(params.scaleColors, params.normalizeFunction, params.valueMin, params.valueMax);
if (params.values)
{
this.values = params.values;
this.setValues(params.values);
}
this.bindZoomButtons();
WorldMap.mapIndex++;
};
WorldMap.prototype = {
transX: 0,
transY: 0,
scale: 1,
baseTransX: 0,
baseTransY: 0,
baseScale: 1,
width: 0,
height: 0,
countries: {},
countriesColors: {},
countriesData: {},
zoomStep: 1.4,
zoomMaxStep: 4,
zoomCurStep: 1,
setColors: function (key, color)
{
if (typeof key == 'string')
{
this.countries[key].setFill(color);
this.countries[key].setAttribute("original", color);
}
else
{
var colors = key;
for (var code in colors)
{
if (this.countries[code])
{
this.countries[code].setFill(colors[code]);
this.countries[code].setAttribute("original", colors[code]);
}
}
}
},
setValues: function (values)
{
var max = 0,
min = Number.MAX_VALUE,
val;
for (var cc in values)
{
val = parseFloat(values[cc]);
if (val > max)
{
max = values[cc];
}
if (val && val < min)
{
min = val;
}
}
this.colorScale.setMin(min);
this.colorScale.setMax(max);
var colors = {};
for (cc in values)
{
val = parseFloat(values[cc]);
if (val)
{
colors[cc] = this.colorScale.getColor(val);
}
else
{
colors[cc] = this.color;
}
}
this.setColors(colors);
this.values = values;
},
setBackgroundColor: function (backgroundColor)
{
this.container.css('background-color', backgroundColor);
},
setScaleColors: function (colors)
{
this.colorScale.setColors(colors);
if (this.values)
{
this.setValues(this.values);
}
},
setNormalizeFunction: function (f)
{
this.colorScale.setNormalizeFunction(f);
if (this.values)
{
this.setValues(this.values);
}
},
resize: function ()
{
var curBaseScale = this.baseScale;
if (this.width / this.height > this.defaultWidth / this.defaultHeight)
{
this.baseScale = this.height / this.defaultHeight;
this.baseTransX = Math.abs(this.width - this.defaultWidth * this.baseScale) / (2 * this.baseScale);
}
else
{
this.baseScale = this.width / this.defaultWidth;
this.baseTransY = Math.abs(this.height - this.defaultHeight * this.baseScale) / (2 * this.baseScale);
}
this.scale *= this.baseScale / curBaseScale;
this.transX *= this.baseScale / curBaseScale;
this.transY *= this.baseScale / curBaseScale;
},
reset: function ()
{
this.countryTitle.reset();
for (var key in this.countries)
{
this.countries[key].setFill(WorldMap.defaultColor);
}
this.scale = this.baseScale;
this.transX = this.baseTransX;
this.transY = this.baseTransY;
this.applyTransform();
},
applyTransform: function ()
{
var maxTransX, maxTransY, minTransX, minTransY;
if (this.defaultWidth * this.scale <= this.width)
{
maxTransX = (this.width - this.defaultWidth * this.scale) / (2 * this.scale);
minTransX = (this.width - this.defaultWidth * this.scale) / (2 * this.scale);
}
else
{
maxTransX = 0;
minTransX = (this.width - this.defaultWidth * this.scale) / this.scale;
}
if (this.defaultHeight * this.scale <= this.height)
{
maxTransY = (this.height - this.defaultHeight * this.scale) / (2 * this.scale);
minTransY = (this.height - this.defaultHeight * this.scale) / (2 * this.scale);
}
else
{
maxTransY = 0;
minTransY = (this.height - this.defaultHeight * this.scale) / this.scale;
}
if (this.transY > maxTransY)
{
this.transY = maxTransY;
}
else if (this.transY < minTransY)
{
this.transY = minTransY;
}
if (this.transX > maxTransX)
{
this.transX = maxTransX;
}
else if (this.transX < minTransX)
{
this.transX = minTransX;
}
this.canvas.applyTransformParams(this.scale, this.transX, this.transY);
},
makeDraggable: function ()
{
var mouseDown = false;
var oldPageX, oldPageY;
var self = this;
this.container.mousemove(function (e){
if (mouseDown)
{
var curTransX = self.transX;
var curTransY = self.transY;
self.transX -= (oldPageX - e.pageX) / self.scale;
self.transY -= (oldPageY - e.pageY) / self.scale;
self.applyTransform();
oldPageX = e.pageX;
oldPageY = e.pageY;
}
return false;
}).mousedown(function (e){
mouseDown = true;
oldPageX = e.pageX;
oldPageY = e.pageY;
return false;
}).mouseup(function (){
mouseDown = false;
return false;
});
},
bindZoomButtons: function ()
{
var map = this;
var sliderDelta = (jQuery('#zoom').innerHeight() - 6 * 2 - 15 * 2 - 3 * 2 - 7 - 6) / (this.zoomMaxStep - this.zoomCurStep);
this.container.find('.jqvmap-zoomin').click(function ()
{
if (map.zoomCurStep < map.zoomMaxStep)
{
var curTransX = map.transX;
var curTransY = map.transY;
var curScale = map.scale;
map.transX -= (map.width / map.scale - map.width / (map.scale * map.zoomStep)) / 2;
map.transY -= (map.height / map.scale - map.height / (map.scale * map.zoomStep)) / 2;
map.setScale(map.scale * map.zoomStep);
map.zoomCurStep++;
jQuery('#zoomSlider').css('top', parseInt(jQuery('#zoomSlider').css('top'), 10) - sliderDelta);
}
});
this.container.find('.jqvmap-zoomout').click(function ()
{
if (map.zoomCurStep > 1) {
var curTransX = map.transX;
var curTransY = map.transY;
var curScale = map.scale;
map.transX += (map.width / (map.scale / map.zoomStep) - map.width / map.scale) / 2;
map.transY += (map.height / (map.scale / map.zoomStep) - map.height / map.scale) / 2;
map.setScale(map.scale / map.zoomStep);
map.zoomCurStep--;
jQuery('#zoomSlider').css('top', parseInt(jQuery('#zoomSlider').css('top'), 10) + sliderDelta);
}
});
},
setScale: function (scale)
{
this.scale = scale;
this.applyTransform();
},
getCountryPath: function (cc)
{
return jQuery('#' + cc)[0];
}
};
WorldMap.xlink = "http://www.w3.org/1999/xlink";
WorldMap.mapIndex = 1;
WorldMap.maps = {};
var ColorScale = function (colors, normalizeFunction, minValue, maxValue)
{
if (colors)
{
this.setColors(colors);
}
if (normalizeFunction)
{
this.setNormalizeFunction(normalizeFunction);
}
if (minValue)
{
this.setMin(minValue);
}
if (minValue)
{
this.setMax(maxValue);
}
};
ColorScale.prototype = {
colors: [],
setMin: function (min)
{
this.clearMinValue = min;
if (typeof this.normalize === 'function')
{
this.minValue = this.normalize(min);
}
else
{
this.minValue = min;
}
},
setMax: function (max)
{
this.clearMaxValue = max;
if (typeof this.normalize === 'function')
{
this.maxValue = this.normalize(max);
}
else
{
this.maxValue = max;
}
},
setColors: function (colors)
{
for (var i = 0; i < colors.length; i++)
{
colors[i] = ColorScale.rgbToArray(colors[i]);
}
this.colors = colors;
},
setNormalizeFunction: function (f)
{
if (f === 'polynomial')
{
this.normalize = function (value)
{
return Math.pow(value, 0.2);
};
}
else if (f === 'linear')
{
delete this.normalize;
}
else
{
this.normalize = f;
}
this.setMin(this.clearMinValue);
this.setMax(this.clearMaxValue);
},
getColor: function (value)
{
if (typeof this.normalize === 'function')
{
value = this.normalize(value);
}
var lengthes = [];
var fullLength = 0;
var l;
for (var i = 0; i < this.colors.length - 1; i++)
{
l = this.vectorLength(this.vectorSubtract(this.colors[i + 1], this.colors[i]));
lengthes.push(l);
fullLength += l;
}
var c = (this.maxValue - this.minValue) / fullLength;
for (i = 0; i < lengthes.length; i++)
{
lengthes[i] *= c;
}
i = 0;
value -= this.minValue;
while (value - lengthes[i] >= 0)
{
value -= lengthes[i];
i++;
}
var color;
if (i == this.colors.length - 1)
{
color = this.vectorToNum(this.colors[i]).toString(16);
}
else
{
color = (this.vectorToNum(this.vectorAdd(this.colors[i], this.vectorMult(this.vectorSubtract(this.colors[i + 1], this.colors[i]), (value) / (lengthes[i]))))).toString(16);
}
while (color.length < 6)
{
color = '0' + color;
}
return '#' + color;
},
vectorToNum: function (vector)
{
var num = 0;
for (var i = 0; i < vector.length; i++)
{
num += Math.round(vector[i]) * Math.pow(256, vector.length - i - 1);
}
return num;
},
vectorSubtract: function (vector1, vector2)
{
var vector = [];
for (var i = 0; i < vector1.length; i++)
{
vector[i] = vector1[i] - vector2[i];
}
return vector;
},
vectorAdd: function (vector1, vector2)
{
var vector = [];
for (var i = 0; i < vector1.length; i++)
{
vector[i] = vector1[i] + vector2[i];
}
return vector;
},
vectorMult: function (vector, num)
{
var result = [];
for (var i = 0; i < vector.length; i++)
{
result[i] = vector[i] * num;
}
return result;
},
vectorLength: function (vector)
{
var result = 0;
for (var i = 0; i < vector.length; i++)
{
result += vector[i] * vector[i];
}
return Math.sqrt(result);
}
};
ColorScale.arrayToRgb = function (ar)
{
var rgb = '#';
var d;
for (var i = 0; i < ar.length; i++)
{
d = ar[i].toString(16);
rgb += d.length == 1 ? '0' + d : d;
}
return rgb;
};
ColorScale.rgbToArray = function (rgb)
{
rgb = rgb.substr(1);
return [parseInt(rgb.substr(0, 2), 16), parseInt(rgb.substr(2, 2), 16), parseInt(rgb.substr(4, 2), 16)];
};
})(jQuery);
[/javascript]
et avec cette page j'affiche ma carte:
[javascript]<script type="text/javascript">
$(document).ready(function() {
$('#francemap').vectorMap({
map: 'france_fr',
hoverOpacity: 0.5,
hoverColor: "#EC0000",
backgroundColor: "#ffffff",
color: "#a0dddb",
borderColor: "#000000",
infobulle: "#FFF",
selectedColor: "#4ec0b9",
enableZoom: false,
showTooltip: true,
onRegionClick: function(element, code, region)
{
window.location.href = '/sortie.php?region=' + region;
}
});
});
</script>
</head>
<body>
<div id="francemap" style="width: 500px; height: 500px;"></div>
</body>[/javascript]
