No es uno de los arcángeles, no es una de las tortugas ninja, no es un pintor renacentista. Es un una librería hecha en javascript que nos permite integrar y manejar el formato gráfico SVG dentro de una página Web. Esta interesante librería nos permite trabajar con esos mapas en SVG y hacer distintas cosas interactúando con los objetos del XML que compone el SVG.
Dmitry Baranovskiy escribió Raphaël. Y ya está en la versión 2.1.0. Todo se basa en un objeto Raphael que permite la creación de canvas sobre el cual se puede pintar usando los path de un SVG o simplemente pintar a nuestro gusto. Raphaël, usa SVG para los navegadores recientes y usa VML para los navegadores antiguos. Un dato curioso es que el logo de Raphaël es un SVG. Lógicamente dibujado con la propia librería.
El trabajo con Raphaël es sencillo, a continuación detallo un ejemplo en el cual pintaré un mapa de mí país Colombia usando Raphaël:
1. Obtén la librería JS de Raphaël:
http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js2. Crea tu HTML, en mi caso me basé en un ejemplo de la página de Raphaël sobre Australia (que tiene menos entidades territoriales que Colombia)
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var R = Raphael("paper", 2000, 2000);
var attr = {
fill: "#333",
stroke: "#666",
"stroke-width": 1,
"stroke-linejoin": "round"
};
var col = {};
col.dp1 = R.path("m 276.8341,977.12038 c 1.9777...."z").attr(attr);
3. Hay que crear un elemento del vector de paths por cada departamento o gráfica que quiera aparecer.
4. Se recorre el arreglo y se agrega una función para el evento onmouseover y onmouseout para el cambio de colores.
var current = null;
for (var state in col) {
col[state].color = Raphael.getColor();
(function (st, state) {
st[0].style.cursor = "pointer";
st[0].onmouseover = function () {
current && col[current].animate({fill: "#333", stroke: "#666"}, 500) && (document.getElementById(current).style.display = "");
st.animate({fill: st.color, stroke: "#ccc"}, 500);
st.toFront();
R.safari();
document.getElementById(state).style.display = "block";
current = state;
};
st[0].onmouseout = function () {
st.animate({fill: "#333", stroke: "#666"}, 500);
st.toFront();
R.safari();
};
})(col[state], state);
}
};
</script>
5. Ubicamos los div que contendrán el canvas y listo.
<body>
<div id="canvas">
<div id="paper"></div>
</div>
</body>
He aquí el ejemplo con el código usando el mapa de Colombia