Blog de comersis.com S.V.G. Raphaël interactive maps  
     

Les nouvelles cartes SVG interactives

Les nouvelles cartes interactives et paramétrables utilisant le langage Javascript pour l'interactivité et le SVG (Scalable Vector Graphics) pour la cartographie ont été créees pour remplacer les anciennes cartes utilisant la technologie Flash®.
En effet, Flash® étant amené à disparaitre ou tout au moins à redevenir confidentiel, nous avons cherché une solution compatible avec les nouveaux langages ainsi qu'avec les nouvelles interfaces connectées: tablettes, smartphones, TV...

Ces cartes pour site Web et mobile sont simples à installer et à paramétrer : couleurs, liens URL ou script, texte.

Elles ont été testées sur les principaux navigateurs actuels ( voir plus bas ).

NOTE : Ces cartes Javascript n'utilisent pas le langage Flash®


Caractéristiques

Les cartes SVG - Javascript sont prêtes à l'emploi.
Ces cartes interactives fonctionnent avec des balises HTML standards.
Elles utilisent les librairies Javascript reconnues Jquery et Raphael-Js.

Lors de l'installation de ces cartes, vous pouvez définir la ou les couleurs de chaque zone (région, département, province selon les pays).
Au survol de la souris, la zone changera de couleur et une bulle info apparaîtra avec le texte que vous aurez précisé pour chaque zone.
Au clic de la souris, la carte vous redirigera vers les pages ou les scripts que vous aurez défini.

Simple à installer et à modifier, la carte Svg Javascript est une interface intuitive et esthétique pour vos internautes!

 

Cartes testées et compatibles avec ces navigateurs :

Cartes testées et compatibles avec ces cms :

compatible avec Opera
Opéra		 compatible avec Safari
Safari		 compatible avec Internet Explorer
I.E.		 compatible avec Mozilla Firefox
Firefox		 compatible avec Google Chrome
Chrome		  
  compatible avec Joomla
CMS Joomla!		 compatible avec Wordpress
Blog Wordpress


Pour les développeurs / développeuses qui utilisent Wordpress ou Joomla, un tutoriel simple est proposé afin d'insérer vos cartes dans vos menus ou vos articles.

Un plug-in Wordpress est également disponible en téléchargement gratuit


Pour plus d'infos, voir 'Configuration'

 

Exemples de carte interactive SVG Javascript

  
 
Certaines régions de ces cartes sont volontairement désactivées      

Téléchargez ces cartes sur notre site cmap.comersis.com











Installation - Configuration

Carte interactive et paramétrable utilisant le langage Javascript pour l'interactivité.
Cette carte comprend trois fichiers javascript et s'installe comme tel :

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/raphael-min.js"></script>
<script type="text/javascript" src="js/nom_de_la_carte.js"></script>

Chaque carte peut être configurer selon :

  • Le titre affiché dans la bulle info (tooltip);
  • La couleur de la zone à l'affichage;
  • Le lien url correspondant à chaque zone;
    note : le lien url peut être aussi un appel de script, une adresse e-mail ou un fichier à télécharger.


Vous pouvez également paramétrer la couleur générale de la carte, l'épaisseur et la couleur des traits, la couleur et la taille de la bulle info.

Redimensionner votre carte svg

Il existe deux méthodes pour adapter les dimensions de votre carte :

1 . La méthode setViewBox contenue dans la librairie Raphael.

Cette méthode a l'avantage d'adapter automatiquement la carte à son environnement,
c'est à dire aux dimensions de l'espace que vous lui réservez sur vos pages.

remplacez l'appel de script :

<script type="text/javascript" src="js/raphael-min.js"></script>
par
<script type="text/javascript" src="js/raphael_2.0.2.js"></script>

Téléchargez ici le script raphael_2.0.2.js

Ensuite, modifiez le script c_map.js en remplacant la ligne

var r = Raphael('Cmap', 400, 400);
par
var width = document.getElementById('Cmap').style.width;
var height = document.getElementById('Cmap').style.height * 0.99;
var svgHeight = 400;
var svgWidth = 400;
var r = Raphael("Cmap", "100%", "100%");
r.setViewBox(0, 0, svgWidth, svgHeight, true);
Ainsi la carte s'adaptera aux dimensions de la balise div #container (ou autre)
Vous pouvez modifier librement les dimensions de cette balise dans la feuille de style
de la page HTML qui appelle la carte.

Exemple :

#container {
width: 250px;
height: 250px;
margin: 50px auto;
}

2 . La méthode scale.raphael.js

Cette méthode définit une taille fixe à votre carte.

Pour utiliser cette méthode de redimensionnement de carte svg, il vous faudra ajouter
un appel de script en tête de votre page :

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/raphael-min.js"></script>
<script type="text/javascript" src="js/scale.raphael.js"></script>
<script type="text/javascript" src="js/c_map.js"></script>

Rendez vous sur la page http://www.shapevent.com/scaleraphael/ ou téléchargez directement
le script scale.raphael.js (clic droit > Enregistrer la cible du lien sous...)

Ensuite, ouvrez le fichier c_map.js et modifiez les lignes suivantes :

Remplacez la ligne :

var r = Raphael('Cmap', 400, 400);

par

var r = new ScaleRaphael('Cmap', 400, 400);
function resizePaper(){
var win = $(this);
r.changeSize(250, 250, true, false);
}
resizePaper();

Ainsi votre carte interactive adoptera les dimensions précisées dans l'appel
r.changeSize, dnas cet exemple, 250 pixels par 250 pixels.

Vous trouverez les différents paramètres et les propriétés de scale raphael sur
la page http://www.shapevent.com/scaleraphael/

 

Pour la configuration détaillée ou une installation sous Joomla! ou Wordpress, voir notre tutorial

 
Δ

Support et informations




Δ

Vos commentaires