ARTICLE EN COURS DE RÉDACTION...
Nos cartes interactives fonctionnent avec des paramètres stockés sur une base SQL.
// Fichier de configuration
// janvier 2023
// Ici, les identifiants de connexion à la base de données
$hote="localhost"; // serveur SQL
$base="svg"; // nom de la base de données
$utilisateur="root"; // nom de l'utilisateur
$pass="votre mot de passe"; // mot de passe
$table="departements"; // nom de la table des departements
// appel de connexion
$c = mysqli_connect("$hote", "$utilisateur", "$pass", "$base");
$c->set_charset("utf8");
Une fois le fichier 'connexion.php' édité, transférez tous les dossiers à l'exception du dossier 'Sql' via FTP sur votre serveur Web.
La plupart de nos cartes comportent 3 dossiers :
Voila, notre base de carte interactive et responsive est posée, elle peut désormais recevoir des liens URl, des appels de script, une bulle info ou encore des points de localisation cliquables, mais nous verrons cela dans la deuxième partie de cet article.
Nous avons un fond de carte interactive fonctionnel (voir ci-dessus),
Selon votre projet, vous chercherez à ajouter une info-bulle avec du texte, insérer des points ou des icones sur la carte, colorer les différentes régions selon des valeurs ou des centres d'interêts... bref, personnaliser la carte pour offrir à vos visiteurs un menu géographique intuitif.
Lorsque vous survolez les régions de votre carte comme dans l'exemple ci-dessus, vous aimeriez voir apparaitre - et disparaitre - le nom de la région que survole le curseur de votre souris.
Pour ce faire, il faut que votre carte indique à votre curseur le nom de la région survolée et donc ajouter le nom des régions à l'intérieur de votre fond de carte.
Pour ce faire, le langage HTML nous fournit toutes les balises dont nous avons besoin, plus précisément, la balise 'title' ou titre en français. Nous allons donc ajouter à notre carte svg des titres correspondant à chaque path (région).
Une fois la carte renseignée, il nous faut créer une info-bulle qui apparaisse (au bon endroit) et disparaisse dès que l'on quitte cet endroit. Logique.
Créer une info-bulle est simple, une balise DIV et un peu de CSS (pour le style). Maintenant, il faut que les titres de la carte entrent dans l'info-bulle, et là, ça se complique un petit peu. C'est pourquoi nous allons faire appel à un autre langage: le JavaScript.
Vous trouverez les explications ainsi que le code source ci-dessous:
Opéra |
Safari |
I.E. |
Firefox |
Chrome |
CMS Joomla! |
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'
Téléchargez
ces cartes sur notre site cmap.comersis.com
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 :
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.
Il existe deux méthodes pour adapter les dimensions de votre carte :
<script type="text/javascript" src="js/raphael-min.js"></script>
<script type="text/javascript" src="js/raphael_2.0.2.js"></script>
var r = Raphael('Cmap', 400, 400);
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);
#container {
width: 250px;
height: 250px;
margin: 50px auto;
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