JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
<a id="sel" href="#">Arata selectia</a>
<br />
<div id="harta"></div>
JavaScript
jQuery(document).ready(function(){
var selectie = [];
$('#sel').click(function(){
alert('ai selectat: ' + selectie.join(','));
});
Raphael('harta', 1000, 400, function () {
var r = this;
r.rect(0, 0, 1000, 400, 10).attr({stroke: "none"});
r.setStart();
for (var country in worldmap.shapes) {
r.path(worldmap.shapes[country]).attr({stroke: "#ffffff", fill: "#cccccc", title: country});
}
var world = r.setFinish();
world.click(function(){
var tzara = this.attr('title');
if(!this.data('selectat')){
this.data('selectat', 1);
this.attr('fill', '#333333');
// adauga codul tarii in vector
selectie.push(tzara);
selectie = $.unique(selectie);
}else{
this.removeData('selectat');
this.attr('fill', '#cccccc');
var exista = $.inArray(tzara, selectie);
// sterge codul tarii din vector
if(~exista)
selectie.splice(exista, 1);
}
});
});
});
// sursa de la world.js mai jos (harta):
// http://raphaeljs.com/world/world.js
var worldmap = {
shapes: {
AE: "M604.196,161.643l0.514-0.129l0,0.772l2.188-0.386l2.189,0l1.672,0.129l1.803-1.802l2.058-1.802l1.674-1.673l0.518,0.900l0.385,2.189l-1.417,0l-0.258,1.802l0.517,0.386l-1.159,0.515l-0.129,1.029l-0.773,1.159l0,1.030l-0.514,0.644l-8.110-1.416l-1.031-2.704l0.127,0.643z",
AF:...