Restons dans le domaine de la cartographie, avec aujourd’hui une carte des départements de France. Dans le dernier article, je vous présentais une carte du monde en JQuery / svg.
Cette fois-ci, pas de JQuery, du pur Javascript, cette carte utilise la librairie raphaël. Je ne connaissais pas du tout avant de voir cette démo. Pour en faire une brève présentation, elle facilite le travaille sur des données vectorielles. Elle est compatible avec la plupart des navigateurs, même les plus vieux (Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+).
J’ai l’impression que cette démo, reste une démo, et pas un plugin avec tout plein d’options.
On trouve le code suivant dans le fichier script.js :
for (var state in fr) {
fr[state].color = "#0493AB";
(function (st, state) {
st[0].style.cursor = "pointer";
st[0].onmouseover = function () {
current && fr[current].animate({fill: "#f5f5f5", stroke: "#d5d5d5"}, 300);
st.animate({fill: st.color, stroke: "#d5d5d5"}, 300);
//st.toFront();
paper.safari();
//document.getElementById(state).style.display = "block";
//current = state;
};
st[0].onmouseout = function () {
st.animate({fill: "#f5f5f5", stroke: "#d5d5d5"}, 300);
//st.toFront();
paper.safari();
};
})(fr[state], state);
}
Il semble donc relativement facile de modifier le comportement au survol, au clic.
Source : http://lab.proov.fr/carte_france_svg/demo.html
Restez un peu plus longtemps, et prenez le temps de lire aussi :
Aout
A Propos
Je suis un concepteur et développeur web à Grenoble. Je développe essentiellement avec le CMS Spip. Actuellement en contrat chez Territorial, je continue ma veille technologique, et vous fais partager ce que je trouve utile et pratique.
