Home » Ressources » Comment créer une carte cliquable Html/Js /SVG
Comment créer une carte cliquable Html/Js /SVG
Comment créer une carte cliquable Html/Js /SVG
Voici un deuxième procédé pour créer des cartes cliquables sur son site. Nous avons vu précédemment comment créer une carte avc Gimp. Ici on va travailler avec le format de fichier SVG, un format pour créer des dessins vectoriels, basé sur le langage XML. Le rendu sera meilleur qu’avec la méthode Gimp.
On trouve des cartes svg sur le site wiki dédié aux images SVG.
Sur la majorité des tutos, on trouve des explications pour créer la carte de France, ici je vais tenter de vous expliquer le principe pour créer tout type de carte..
On part de l’exemple de l’Ile de France pour changer. Le principe est le suivant :
On télécharge Raphael.js (version 2.1.0) puis une image au format SVG. On pourra aussi télécharger scaleraphael.js pour pouvoir redimensionner la carte facilement. Le fichier svg contient une image, dessinée à l’aide de coordonnées. On récupère ces coordonnées et on les place dans un fichier Js, dans lequel on va appliquer des fonctions pour colorer la carte, créer des liens sur des zones précises etc..
c’est parti!!
Mon fichier index je l’organise de la façon suivante:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Carte SVG des départements français</title> </head> <body> <!-- Calque dans lequel sera affichée la carte --> <div id="container"></div> <!-- Appel de la librairie JS Raphael --> <script src="js/raphael.js" charset="utf-8" ></script> <!-- Coordonnées de notre carte --> <script src="js/france_region_11.js" charset="utf-8" ></script> <script src="js/scaleraphael.js" charset="utf-8" ></script> <!--<script src="js/script.js" charset="utf-8" ></script>--> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> </body> </html>
Je relie donc ma page à la version de raphael.js que j’ai téléchargé. Je crée un fichier js que je nomme france_region_11.
Dans ce fichier, je vais traiter toutes les coordonnées de mon fichier SVG. Celui que j’ai téléchargé se nomme Ile_de_France_-_fond.svg. Ce fichier contient les coordonnées qui nous intéressent et qui ressemblent à ca:
"M 297.65625 225.5 L 289.8125 225.6875 L 286.25 228.875 L 283.625 230.53125 L 278.96875 230 L 278.03125 (...) L 297.65625 225.5 z ".
Nous allons donc récupérer chacune de ces lignes et les insérer dans notre fichier france_region_11.js, mais avant on y insère la fonction suivante:
window.onload = function() { //var paper = new Raphael(document.getElementById('canvas_france'), 587.5, 550);(constructeur sans le redimensionnement, renommer la div si chgt var paper = new ScaleRaphael("container", 800, 600); // Les styles visuels pour tous les departements var attr = { fill: "#e5e5e5", /* Couleur de remplissage par defaut */ stroke: "#959595", /* Couleur des bordures par defaut */ "stroke-width": 1, "stroke-linejoin": "round" };
Au chargement de notre page on applique notre fonction : on instancie un nouvel objet Raphael avec le ‘constructeur’ du plugin ScaleRaphael.js. Ce plugin a l’avantage de me laisser changer la taille de mon image. Dans le constructeur on défini la taille de notre image contenue dans la div « container » de la page html : var paper = new ScaleRaphael(« container », 800, 600);
On applique des attributs comme la couleur ou les bordures à nos départements.
Enfin on récupère ensuite tous nos départements.
var departement = {}; departement.valdoise = paper.path("M 115.5625 92.5625 L 114.8125 97.8125 L 107.3125 104.15625 L 106.9375 118 L 102.84375 127.71875 L 104.71875 129.96875 L 97.21875 140.4375 L 97.59375 149.03125 L 97.09375 149.40625 L 97.96875 150.53125 L 104.34375 149.40625 L 111.0625 153.125 L 112.1875 158 L 121.53125 158.75 L 126.03125 160.25 L 129 155.375 L 134.625 157.625 L 136.125 152.78125 L 143.59375 150.15625 L 147.71875 156.5 L 151.0625 156.5 L 150.3125 161.75 L 148.46875 166.96875 L 151.8125 171.84375 L 157.0625 169.21875 L 156.3125 165.84375 L 162.65625 161 L 166.78125 168.46875 L 174.625 166.96875 L 175.75 171.46875 L 181.75 169.96875 L 186.96875 177.8125 L 200.4375 176.3125 L 202.3125 171.84375 L 206.78125 172.96875 L 210.0625 171.34375 L 210.53125 171.09375 L 211.65625 180.0625 L 216.125 181.1875 L 220.25 183.4375 L 222.875 187.90625 L 223.625 192.78125 L 229.21875 194.28125 L 229.96875 204.75 L 227.59375 209.1875 L 232.21875 206.25 L 236.34375 202.875 L 241.1875 198.375 L 243.4375 196.53125 L 246.0625 195.78125 L 249.03125 195.40625 L 248.65625 191.28125 L 248.78125 191.15625 L 250.90625 189.03125 L 255.40625 192.40625 L 259.5 193.15625 L 261.75 189.03125 L 264.375 189.40625 L 266.25 185.6875 L 271.09375 187.15625 L 275.96875 192.03125 L 281.21875 190.90625 L 286.4375 193.53125 L 290.9375 188.28125 L 298.40625 185.3125 L 302.90625 181.9375 L 307 175.5625 L 311.125 174.46875 L 311.125 172.21875 L 307.375 171.46875 L 307.375 168.84375 L 313 167.71875 L 316.34375 160.625 L 318.21875 160.25 L 318.21875 155.75 L 313.75 156.125 L 318.28125 148.34375 L 317.84375 148.65625 L 309.625 140.0625 L 309.625 134.4375 L 306.625 134.4375 L 306.25 141.5625 L 294.28125 138.9375 L 296.90625 134.8125 L 287.1875 127.34375 L 283.4375 131.0625 L 283.4375 125.46875 L 273.71875 124.71875 L 268.5 120.59375 L 264.75 123.59375 L 264.6875 123.53125 L 264.6875 123.5 L 255.78125 111.625 L 250.90625 112 L 245.6875 120.59375 L 232.96875 123.96875 L 235.96875 119.125 L 231.46875 113.125 L 219.875 120.59375 L 218.75 116.875 L 219.125 114.25 L 215.03125 110.875 L 203.8125 110.125 L 203.4375 104.53125 L 199.6875 104.15625 L 181 115 L 176.125 112.375 L 168.65625 118.75 L 166.03125 116.125 L 156.3125 120.21875 L 152.9375 115.75 L 144.71875 117.625 L 136.125 111.25 L 132 111.625 L 128.25 114.25 L 123.40625 112.75 L 118.53125 105.65625 L 123.40625 98.53125 L 118.90625 96.3125 L 118.15625 92.9375 L 115.5625 92.5625 z " ).attr(attr); departement.valdoise.attr({title: 'Val d Oise',href:"http://www.yuyazz.com"}); departement.yvelines = paper.path("M 92 147.90625 L 80.40625 153.125 L 69.1875 152.03125 L 68.8125 155.75 L 63.1875 159.875 L 57.96875 153.125 L 57.59375 165.09375 L 63.5625 172.59375 L 58.34375 182.3125 L 68.8125 181.9375 L 70.3125 184.9375 L 65.8125 189.03125 L 70.3125 203.25 L 75.53125 202.875 L 78.125 208.5 L 81.90625 216.71875 L 77.03125 221.9375 L 86 226.4375 L 86 231.28125 L 89.75 232.78125 L 85.625 242.875 L 86 258.96875 L 96.84375 266.0625 L 84.5 282.53125 L 90.8125 287.75 L 91.25 288.125 L 91.25 296.375 L 95.34375 301.59375 L 99.84375 300.84375 L 104.34375 311.6875 L 116.65625 318.0625 L 114.4375 325.15625 L 126.40625 327.03125 L 131.625 336 L 130.5 351.34375 L 138.34375 363.65625 L 143.21875 361.8125 L 146.21875 372.28125 L 158.5625 375.625 L 163.40625 369.8125 L 163.40625 359.9375 L 173.125 344.21875 L 173.5 341.59375 L 166.78125 335.625 L 166.78125 331.875 L 168.28125 330 L 170.90625 331.5 L 175.75 331.875 L 179.5 333.75 L 183.96875 333.75 L 186.96875 331.875 L 186.21875 328.15625 L 189.96875 324.03125 L 192.21875 322.15625 L 189.96875 318.78125 L 189.96875 316.1875 L 194.0625 316.9375 L 196.3125 312.8125 L 191.09375 310.5625 L 189.59375 303.46875 L 186.96875 303.84375 L 183.21875 300.09375 L 183.96875 296.375 L 189.59375 294.875 L 193.3125 287.375 L 199.6875 288.5 L 201.5625 284.78125 L 204.53125 283.65625 L 209.40625 277.65625 L 208.90625 276.34375 L 206.78125 270.9375 L 209.03125 268.3125 L 212.03125 269.4375 L 216.5 263.4375 L 218.75 264.9375 L 222.125 262.34375 L 227.34375 263.8125 L 228.09375 257.09375 L 231.09375 257.84375 L 233.71875 255.96875 L 234.09375 251.5 L 229.59375 250 L 224.75 248.125 L 223.625 242.125 L 219.8125 235.78125 L 219.125 234.65625 L 217.25 223.4375 L 219.875 217.46875 L 221.75 213.71875 L 226.59375 211.09375 L 229.96875 204.75 L 229.21875 194.28125 L 223.625 192.78125 L 222.875 187.90625 L 220.25 183.4375 L 216.125 181.1875 L 211.65625 180.0625 L 210.53125 171.09375 L 206.78125 172.96875 L 202.3125 171.84375 L 200.4375 176.3125 L 186.96875 177.8125 L 185.0625 174.9375 L 181.75 169.96875 L 175.75 171.46875 L 174.625 166.96875 L 166.78125 168.46875 L 162.65625 161 L 156.3125 165.84375 L 157.0625 169.21875 L 151.8125 171.84375 L 148.46875 166.96875 L 150.3125 161.75 L 151.0625 156.5 L 147.71875 156.5 L 143.59375 150.15625 L 136.125 152.78125 L 134.625 157.625 L 129 155.375 L 126.03125 160.25 L 121.53125 158.75 L 112.1875 158 L 111.0625 153.125 L 104.34375 149.40625 L 97.96875 150.53125 L 97.09375 149.40625 L 94.59375 151.28125 L 92 147.90625 z " ).attr(attr); departement.yvelines.attr({title: 'yvelines',href:"carte.html?departement=25"}); departement.essonne = paper.path("M 233.75 255.65625 L 233.71875 255.96875 L 231.09375 257.84375 L 228.09375 257.09375 L 227.34375 263.8125 L 222.125 262.34375 L 218.75 264.9375 L 216.5 263.4375 L 212.03125 269.4375 L 209.03125 268.3125 L 206.78125 270.9375 L 209.40625 277.65625 L 204.53125 283.65625 L 201.5625 284.78125 L 199.6875 288.5 L 193.3125 287.375 L 189.59375 294.875 L 183.96875 296.375 L 183.21875 300.09375 L 186.96875 303.84375 L 189.59375 303.46875 L 191.09375 310.5625 L 196.3125 312.8125 L 194.0625 316.9375 L 193.90625 316.90625 L 189.96875 316.1875 L 189.96875 318.78125 L 192.21875 322.15625 L 189.96875 324.03125 L 186.21875 328.15625 L 186.96875 331.875 L 183.96875 333.75 L 179.5 333.75 L 175.75 331.875 L 170.90625 331.5 L 168.28125 330 L 166.78125 331.875 L 166.78125 335.625 L 173.5 341.59375 L 173.125 344.21875 L 163.40625 359.9375 L 163.40625 369.8125 L 164.15625 368.90625 L 168.65625 375.25 L 166.03125 385.71875 L 176.5 386.46875 L 179.125 401.0625 L 174.25 408.90625 L 175.75 413.03125 L 170.90625 420.5 L 176.875 428 L 194.0625 428.75 L 196.6875 425 L 202.6875 425 L 204.53125 420.875 L 207.90625 423.5 L 216.875 422 L 218 418.25 L 223.625 419.375 L 230.71875 408.53125 L 237.4375 412.28125 L 238.1875 425 L 251.28125 419.75 L 257.28125 408.90625 L 257.34375 409 L 265.125 420.125 L 275.75 419.46875 L 275.96875 418.625 L 273.34375 412.65625 L 275.59375 410.40625 L 284.5625 409.65625 L 283.8125 404.0625 L 285.6875 402.9375 L 284.1875 400.3125 L 287.5625 396.5625 L 290.5625 398.0625 L 295.78125 395.09375 L 293.15625 391.34375 L 293.53125 389.46875 L 299.53125 390.21875 L 303.28125 386.46875 L 308.125 386.46875 L 305.125 380.5 L 299.15625 377.125 L 298.78125 357.6875 L 301.78125 352.8125 L 300.28125 345.71875 L 296.90625 345.71875 L 297.28125 341.96875 L 299.90625 340.125 L 298.78125 336 L 300.65625 334.5 L 302.90625 328.90625 L 302.53125 322.90625 L 308.875 318.0625 L 308.875 313.5625 L 304 310.9375 L 302.53125 306.46875 L 307.375 304.96875 L 309.625 300.84375 L 304.75 297.84375 L 310.375 291.125 L 314.125 294.125 L 317.46875 289.625 L 316.59375 286.125 L 310.75 287 L 305.5 282.90625 L 304.375 278.78125 L 300.65625 270.5625 L 287.1875 273.9375 L 287.1875 277.65625 L 283.4375 276.90625 L 278.21875 277.28125 L 277.46875 275.03125 L 276.1875 275.15625 L 269.625 275.78125 L 267 267.5625 L 261.75 267.5625 L 258.78125 264.1875 L 255.03125 265.6875 L 255.03125 272.0625 L 252.03125 272.4375 L 251.28125 268.3125 L 248.28125 271.3125 L 246.0625 268.6875 L 249.03125 265.3125 L 245.3125 261.21875 L 240.0625 261.96875 L 234.46875 255.96875 L 233.75 255.65625 z " ).attr(attr); departement.essonne.attr({title: 'Essonne' , href:"http://www.copiercoller.com"}); departement.seineetmarne = paper.path("M 430.03125 135.5625 L 425.53125 140.0625 L 427.78125 147.90625 L 412.46875 143.40625 L 408.34375 150.90625 L 405.71875 143.78125 L 399.75 145.65625 L 399.75 149.03125 L 389.65625 147.90625 L 380.3125 153.5 L 377.6875 148.65625 L 373.1875 148.65625 L 368.71875 142.65625 L 361.21875 148.28125 L 362.34375 150.90625 L 353.75 155.75 L 348.5 148.65625 L 344.03125 154.25 L 337.28125 144.15625 L 329.0625 140.4375 L 318.28125 148.34375 L 313.75 156.125 L 318.21875 155.75 L 318.21875 160.25 L 316.34375 160.625 L 313 167.71875 L 307.375 168.84375 L 307.375 171.46875 L 311.125 172.21875 L 311.125 173.21875 L 314.125 172.96875 L 317.46875 181.9375 L 313.375 184.5625 L 318.6875 195.21875 L 320.46875 198.75 L 323.46875 198.75 L 318.96875 204.75 L 317.46875 214.09375 L 313.75 216.34375 L 313.75 223.8125 L 317.84375 225.6875 L 317.84375 227.9375 L 314.84375 229.0625 L 318.59375 237.28125 L 320.84375 242.125 L 320.84375 250 L 317.84375 253.71875 L 317.84375 257.84375 L 323.09375 258.21875 L 323.03125 258.3125 L 320.84375 261.96875 L 320.84375 264.9375 L 316.71875 267.9375 L 318.21875 270.5625 L 320.09375 270.5625 L 319.34375 273.1875 L 313.375 280.65625 L 316.34375 285.15625 L 317.46875 289.625 L 314.125 294.125 L 310.375 291.125 L 304.75 297.84375 L 309.625 300.84375 L 307.375 304.96875 L 302.53125 306.46875 L 304 310.9375 L 308.875 313.5625 L 308.875 318.0625 L 302.53125 322.90625 L 302.90625 328.90625 L 300.65625 334.5 L 298.78125 336 L 299.90625 340.125 L 297.28125 341.96875 L 296.90625 345.71875 L 300.28125 345.71875 L 301.78125 352.8125 L 298.78125 357.6875 L 299.15625 377.125 L 305.125 380.5 L 308.125 386.46875 L 308 386.46875 L 303.28125 386.46875 L 299.53125 390.21875 L 293.53125 389.46875 L 293.15625 391.34375 L 295.78125 395.09375 L 290.5625 398.0625 L 287.5625 396.5625 L 284.1875 400.3125 L 285.6875 402.9375 L 283.8125 404.0625 L 284.5625 409.65625 L 275.59375 410.40625 L 273.34375 412.65625 L 275.96875 418.625 L 275.75 419.46875 L 277.09375 419.375 L 279.71875 425.375 L 277.46875 432.84375 L 281.5625 438.84375 L 293.15625 440.3125 L 293.15625 443.6875 L 302.53125 447.4375 L 305.5 459.03125 L 300.28125 473.96875 L 294.28125 469.5 L 284.5625 484.4375 L 287.9375 485.9375 L 290.1875 482.21875 L 303.28125 482.21875 L 307.75 478.09375 L 314.46875 479.59375 L 314.84375 481.84375 L 324.96875 482.59375 L 330.1875 478.46875 L 335.4375 484.4375 L 345.53125 482.59375 L 357.5 476.96875 L 357.5 470.25 L 372.4375 469.5 L 369.09375 479.21875 L 375.8125 482.96875 L 386.28125 472.875 L 402 472.125 L 401.25 462.375 L 408.34375 459.40625 L 408.34375 455.65625 L 416.5625 452.28125 L 425.90625 438.46875 L 425.90625 432.09375 L 422.5625 430.96875 L 419.9375 419.375 L 422.46875 413 L 425.90625 404.4375 L 439 403.3125 L 443.875 398.8125 L 456.96875 396.9375 L 460.3125 399.9375 L 475.65625 398.8125 L 482.75 393.59375 L 501.09375 395.46875 L 501.09375 387.59375 L 512.3125 390.21875 L 512.6875 380.875 L 507.8125 376 L 510.8125 367.78125 L 504.0625 357.6875 L 516.40625 352.4375 L 515.65625 345.34375 L 510.4375 342.71875 L 513.78125 338.625 L 519.40625 340.125 L 528.375 331.875 L 522.40625 323.65625 L 529.5 319.53125 L 534.375 318.4375 L 532.125 313.9375 L 543.71875 309.4375 L 541.09375 303.46875 L 535.46875 303.46875 L 537.71875 300.09375 L 529.875 298.59375 L 520.53125 304.21875 L 521.65625 295.25 L 518.28125 289.625 L 524.625 284.03125 L 523.53125 266.8125 L 516.78125 266.8125 L 516.40625 260.46875 L 506.3125 260.09375 L 508.9375 251.875 L 516.78125 250.375 L 516.40625 244 L 509.3125 244.375 L 510.0625 240.28125 L 517.90625 241.75 L 526.875 239.53125 L 526.875 226.0625 L 516.40625 229.0625 L 516.40625 229 L 517.15625 223.8125 L 512.3125 220.4375 L 508.1875 221.9375 L 502.1875 218.21875 L 501.84375 212.96875 L 499.96875 211.09375 L 499.21875 197.625 L 490.25 206.625 L 486.875 202.875 L 483.125 192.78125 L 474.53125 197.25 L 471.53125 193.53125 L 470.40625 184.9375 L 465.9375 183.0625 L 465.1875 177.0625 L 450.21875 167.34375 L 457.34375 158 L 448.71875 145.65625 L 449.09375 141.1875 L 430.03125 135.5625 z "
).attr(attr); departement.seineetmarne.attr({title: 'Seine et Marne',href:"carte.html?departement=27"}); departement.stdenis= paper.path("M 314.125 172.96875 L 311.125 173.21875 L 311.125 174.46875 L 307 175.5625 L 302.90625 181.9375 L 298.40625 185.3125 L 290.9375 188.28125 L 286.4375 193.53125 L 286.1875 193.40625 L 281.21875 190.90625 L 275.96875 192.03125 L 275.90625 191.96875 L 271.09375 187.15625 L 266.25 185.6875 L 264.375 189.40625 L 261.75 189.03125 L 259.5 193.15625 L 255.40625 192.40625 L 250.90625 189.03125 L 248.65625 191.28125 L 249.03125 195.40625 L 254.5625 195.5 L 256.4375 196.0625 L 258.21875 196.90625 L 259.59375 198.28125 L 260.25 199.125 L 260.25 201.84375 L 259.3125 204 L 258.03125 205.40625 L 255.6875 207 L 254.9375 207.5625 L 257.09375 211 L 257.03125 211.03125 L 273.8125 211.4375 L 275.78125 217.46875 L 278.96875 221.9375 L 278.96875 230 L 283.625 230.53125 L 286.25 228.875 L 289.8125 225.6875 L 297.34375 225.5 L 297.65625 225.5 L 300.46875 227.5625 L 306.25 231.46875 L 310.5625 234.84375 L 310.75 237.09375 L 316.71875 242.6875 L 320.84375 244.0625 L 320.84375 242.125 L 318.59375 237.28125 L 314.84375 229.0625 L 317.84375 227.9375 L 317.84375 225.6875 L 313.75 223.8125 L 313.75 216.34375 L 317.46875 214.09375 L 318.96875 204.75 L 323.46875 198.75 L 320.46875 198.75 L 313.375 184.5625 L 317.46875 181.9375 L 314.125 172.96875 z "
).attr(attr); departement.stdenis.attr({title: 'St Denis',href:"chttp://www.st-denis.fr"}); departement.hautdeseine = paper.path("M 249.03125 195.40625 L 246.0625 195.78125 L 243.4375 196.53125 L 241.1875 198.375 L 236.34375 202.875 L 232.21875 206.25 L 227.59375 209.1875 L 226.59375 211.09375 L 221.75 213.71875 L 219.875 217.46875 L 217.25 223.4375 L 218.3125 229.84375 L 219.125 234.65625 L 223.625 242.125 L 224.75 248.125 L 229.59375 250 L 234.09375 251.5 L 233.96875 253.03125 L 233.75 255.65625 L 234.46875 255.96875 L 240.0625 261.96875 L 245.3125 261.21875 L 249.03125 265.3125 L 246.0625 268.6875 L 248.28125 271.3125 L 251.28125 268.3125 L 252.03125 272.4375 L 255.03125 272.0625 L 255.03125 265.6875 L 256.875 264.9375 L 255.40625 261.78125 L 257.09375 256.71875 L 258.40625 252.96875 L 256.71875 250.5625 L 257.28125 246.625 L 258.40625 244.5625 L 258.21875 241.9375 L 248 237.21875 L 243.625 235.21875 L 235.34375 227.65625 L 235.21875 227.5625 L 236.15625 224.75 L 238.375 221.1875 L 240.625 219.5 L 247.5625 218.96875 L 249.96875 215.78125 L 253.53125 212.59375 L 257.09375 211 L 254.9375 207.5625 L 255.6875 207 L 258.03125 205.40625 L 259.3125 204 L 260.25 201.84375 L 260.25 199.125 L 259.59375 198.28125 L 258.21875 196.90625 L 256.4375 196.0625 L 254.5625 195.5 L 249.03125 195.40625 z "
).attr(attr); departement.hautdeseine.attr({title: 'Haut de Seine',href:"carte.html?departement=29"}); departement.valdemarne = paper.path("M 297.65625 225.5 L 289.8125 225.6875 L 286.25 228.875 L 283.625 230.53125 L 278.96875 230 L 278.03125 234.96875 L 279.75 235.375 L 280.53125 233 L 282.40625 231.8125 L 288.875 232.0625 L 290.71875 234.0625 L 290.46875 237.34375 L 288.875 240.75 L 288.875 240.78125 L 282.25 240.25 L 275.90625 238.15625 L 271.03125 241.0625 L 267.46875 242.78125 L 267.1875 242.90625 L 258.21875 241.96875 L 258.40625 244.5625 L 257.28125 246.625 L 256.71875 250.5625 L 258.40625 252.96875 L 257.09375 256.71875 L 255.40625 261.78125 L 256.875 264.9375 L 258.78125 264.1875 L 261.75 267.5625 L 266.8125 267.5625 L 267 267.5625 L 269.625 275.78125 L 277.46875 275.03125 L 278.21875 277.28125 L 283.4375 276.90625 L 287.1875 277.65625 L 287.1875 273.9375 L 300.65625 270.5625 L 304.375 278.78125 L 305.5 282.90625 L 310.75 287 L 316.59375 286.125 L 316.34375 285.15625 L 313.375 280.65625 L 319.34375 273.1875 L 320.09375 270.5625 L 318.21875 270.5625 L 316.71875 267.9375 L 320.84375 264.9375 L 320.84375 261.96875 L 321.0625 261.59375 L 323.09375 258.21875 L 317.84375 257.84375 L 317.84375 253.71875 L 320.84375 250 L 320.84375 244.0625 L 316.71875 242.6875 L 310.75 237.09375 L 310.5625 234.84375 L 306.25 231.46875 L 300.46875 227.5625 L 297.65625 225.5 z "
).attr(attr); departement.valdemarne.attr({title: 'Val de Marne',href:"carte.html?departement=30"}); departement.paris = paper.path("M 258.21875 241.96875 L 267.1875 242.90625 L 271.03125 241.0625 L 275.90625 238.15625 L 282.25 240.25 L 288.875 240.78125 L 290.46875 237.34375 L 290.71875 234.0625 L 288.875 232.0625 L 282.40625 231.8125 L 280.53125 233 L 279.75 235.375 L 278.03125 234.96875 L 278.96875 230 L 278.96875 229.9375 L 278.96875 221.9375 L 275.78125 217.46875 L 273.8125 211.4375 L 257.03125 211.03125 L 253.53125 212.59375 L 249.96875 215.78125 L 247.5625 218.96875 L 240.625 219.5 L 238.375 221.1875 L 236.15625 224.75 L 235.21875 227.5625 L 243.625 235.21875 L 258.21875 241.9375 L 258.21875 241.96875 z "
).attr(attr); departement.paris.attr({title: 'Paris',"href":"carte.html?departement=31"}); var current = null; for (var state in departement) { departement[state].color = "#c6d2ec"; /* Couleur de remplissage au rollover */ (function (st, state) { st[0].style.cursor = "pointer";
st[0].onmouseover = function () { st.animate({fill: st.color}, 100); paper.safari(); };
} paper.scaleAll(0.4);//ici pour redimmensionner la carte }
La dernière ligne de ce script nous permet de régler la taille de la carte
paper.scaleAll(0.4);//ici pour redimmensionner la carte
Les deux fonctions onmouseout et onmouseover permettent de définir le comportement au survol de la souris. Concernant les liens (« href ») contenus dans les attr de nos departements, le href ne fonctionne plus de cette manière avec la dernière version de raphael.js.I l faut donc impérativement utiliser la version en lien en haut de page.
Voila, vous avez en principe une jolie carte d’ile de france avec changement de couleur au survol, liens cliquables etc..
Plusieurs cartes sur le site wiki n’ont pas la même structure. Si jamais vous tombez sur une carte faites de polygones, vous pouvez en modifier la structure et le rendre compatible avec raphael.js en allant sur le site SVG To RaphaelUS converter. En téléchargeant le code svg sur leur page vous pourrez récupérer la version avec les paper.path. et travailler votre carte normalement.
