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'

 










Installation


Cette carte comprend deux versions et s'installe comme suit :

Version HTML - installation

Pour fonctionner, la carte a besoin des fichiers Javascript contenus dans le dossier "js":

  • js/jquery.js
  • js/raphael-min.js
  • js/scale.raphael.js
  • js/init.js
  • Dxx_paths.js

Installez ces appels de fichiers sur votre page entre les balises <head> et </head>

<script type="text/javascript" src="./js/jquery.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/Dxx_paths.js"></script>
<script type="text/javascript" src="./js/init.js"></script>

Ajoutez ensuite ce code html entre les balises <body> et </body> à l'endroit où vous
souhaitez installer votre carte :

<div class="mapBlock">

    <div id="Cmap"></div>
</div>

C'est fait !

 

Version PHP / Sql - installation

Ouvrez avec votre éditeur texte (Notepad, Notepad++, Komodo...)
le fichier "php/connexion.php" et modifiez les informations :

$hote="localhost"; ou sql.free.fr ou 60gp.ovh.net ...
$base="mabase"; nom de votre base de données.
$utilisateur="root"; nom d'utilisateur, généralement le même que $base sur les hébergement mutualisé.
$pass="xxxx"; Votre mot de passe ... et oui.

$table="dxx"; // nom de la table ( voir fichier sql/dxx.sql )

 

Installez ensuite la base de données sql sur votre serveur

"sql/dxxx.sql"

Lancez la page "nom_de_la_carte.php"

 

Configuration

Chaque carte peut être configurer selon :

  • Le titre affiché dans la bulle info (tooltip);
  • La couleur de la zone à l'affichage;
  • La couleur de survol
  • 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.

Version html - configuration

Ouvrez le fichier "js/Dxx_paths.js" avec votre éditeur texte (Notepad, Notepad++, Komodo...)
et éditez les différentes variables comme suit :

Configuration générale :

var mapfill = '#EEFF00'; Couleur hexadécimale* de remplissage par défaut.
var mapoff = '#EEFF00'; Couleur hexadécimale* des zones désactivées.
var maphover_fill = '#FF0000'; Couleur hexadécimale du survol de la souris.
var mapstroke = '#FFFFFF'; Couleur hexadécimale des contours (traits).
var mapstroke_width = 2.5; Épaisseur des contours en pixels.
   
var mapWidth= 500; Largeur de la carte en pixels.

* A propos des couleurs hexadécimales


Configuration géographique :

 

Chaque zone de la carte (région, département, province, canton, communes...) est paramétrable comme suit :

D4: {  
title: "Alpes-de-Haute-Provence 04", Texte affiché au survol dans la bulle-info.
coul: "#6699CC", Couleur spécifique de cette zone.
url: "http://www.google.fr", Lien url ou appel de script, e-mail ou fichier.
target: "_self" Mode d'ouverture du lien (_self, _blank, _parent...)
path: "M 388.2,310.5 C [ ... ]L 388.2,310.5 z " Dessin SVG [ ne pas modifier ]
},  

 

Version PHP - configuration

Utilisez la page "php/administration pour éditer les différents paramètres de votre carte

 
 
Δ




Δ