{"id":129,"date":"2012-09-30T14:12:41","date_gmt":"2012-09-30T12:12:41","guid":{"rendered":"http:\/\/geekcommunicant.com\/blog\/?p=129"},"modified":"2019-04-20T18:04:22","modified_gmt":"2019-04-20T16:04:22","slug":"comment-realiser-une-carte-interactive-2-sur-2","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2012\/09\/30\/comment-realiser-une-carte-interactive-2-sur-2\/","title":{"rendered":"[Illustrator\/jQuery] Comment r\u00e9aliser une carte interactive (2\/2)"},"content":{"rendered":"\n<p>\u00c0 la fin de la premi\u00e8re partie de ce tutoriel (<a href=\"https:\/\/geekcommunicant.com\/blog\/2012\/09\/29\/comment-realiser-une-carte-interactive-1-sur-2\/\">voir ici<\/a>) nous avions :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>un dossier <em>images<\/em> contenant la carte<\/li><li>un fichier HTML comprenant notre map HTML<\/li><li>notre fichier Illustrator<\/li><\/ul>\n\n\n\n<h1 class=\"wp-block-heading\">Partie 2: Rendre la carte interactive \u00e0 l&rsquo;aide de jQuery<\/h1>\n\n\n\n<p>Les zones de maps n&rsquo;\u00e9tant pas stylisables via CSS, nous sommes oblig\u00e9s de passer par jQuery (ou tout autre framework JavaScript).<\/p>\n\n\n\n<p><strong>Principe utilis\u00e9<\/strong>: la carte de France est l&rsquo;image de fond d&rsquo;une division, la map HTML est appliqu\u00e9e sur une image transparente, qui au survol d&rsquo;une zone surligne la r\u00e9gion correspondante.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>La division \u00ab\u00a0map\u00a0\u00bb doit avoir les m\u00eames dimensions que les images utilis\u00e9es.<\/p>\n\n\n\n<p>Avant toute chose, il faut cr\u00e9er toutes les images des r\u00e9gions. Pour cela, dans Illustrator, vous devez, pour chaque r\u00e9gion:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>changer le style de la zone<\/li><li>enregistrer, dans le m\u00eame dossier que la carte de France, l&rsquo;image avec le nom correspondant \u00e0 celui choisi au moment de la cr\u00e9ation de la map HTML<\/li><\/ol>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/geekcommunicant.com\/blog\/wp-content\/uploads\/lim.png\"><img loading=\"lazy\" decoding=\"async\" width=\"279\" height=\"300\" src=\"https:\/\/geekcommunicant.com\/blog\/wp-content\/uploads\/lim-279x300.png\" alt=\"\" class=\"wp-image-136\" srcset=\"https:\/\/geekcommunicant.com\/blog\/wp-content\/uploads\/lim-279x300.png 279w, https:\/\/geekcommunicant.com\/blog\/wp-content\/uploads\/lim.png 432w\" sizes=\"auto, (max-width: 279px) 100vw, 279px\" \/><\/a><figcaption>exemple d&rsquo;image \u00e0 obtenir<\/figcaption><\/figure><\/div>\n\n\n\n<p>Il reste une derni\u00e8re \u00e9tape avant de passer \u00e0 jQuery: ajouter des attributs <code>id<\/code> et <code>title<\/code> \u00e0 chaque <code>area<\/code>:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;map id=&quot;carteMap&quot;&gt;\n    &lt;area alt=&quot;&quot; coords=&quot;263,127, 263,135, 253,136, 247,146, 234,143, 230,135, 218,135, 205,122, 204,113, 202,110, 203,99, 210,97, 222,94, 228,98, 233,95, 238,101, 257,103, 257,99, 266,112, 268,123, 263,127&quot; href=&quot;.\/region.php?id=idf&quot; id=&quot;idf&quot; shape=&quot;poly&quot; title=&quot;\u00cele-de-France&quot;&gt;\n    &lt;area alt=&quot;&quot; coords=&quot;215,61, 208,56, 208,49, 208,42, 212,38, 217,40, 225,42, 232,48, 241,48, 240,52, 260,55, 264,61, 272,58, 278,60, 284,58, 290,63, 295,59, 294,69, 290,76, 287,88, 273,90, 276,98, 272,99, 272,109, 266,112, 257,99, 257,103, 238,101, 233,95, 228,98, 222,94, 210,97, 212,84, 214,81, 212,77, 215,70, 215,61&quot; href=&quot;.\/region.php?id=pic&quot; id=&quot;pic&quot; shape=&quot;poly&quot; title=&quot;Picardie&quot;&gt;\n    &lt;area alt=&quot;&quot; coords=&quot;182,77, 168,74, 170,66, 177,62, 188,59, 201,55, 208,49, 208,56, 215,61, 215,70, 212,77, 214,81, 212,84, 210,97, 203,99, 202,110, 188,115, 180,102, 176,102, 176,87, 173,77, 182,77&quot; href=&quot;.\/region.php?id=hnom&quot; id=&quot;hnom&quot; shape=&quot;poly&quot; title=&quot;Haute-Normandie&quot;&gt;\n    &lt;area alt=&quot;&quot; coords=&quot;117,110, 113,107, 115,83, 109,68, 111,64, 107,61, 110,58, 114,62, 124,63, 128,60, 132,67, 128,69, 131,77, 159,82, 173,77, 176,87, 176,102, 180,102, 188,115, 188,129, 183,130, 182,135, 172,131, 172,126, 169,124, 157,127, 157,121, 151,116, 136,121, 132,116, 128,116, 122,114, 118,119, 112,116, 112,110, 117,110&quot; href=&quot;.\/region.php?id=bnom&quot; id=&quot;bnom&quot; shape=&quot;poly&quot; title=&quot;Basse-Normandie&quot;&gt;\n    &lt;area alt=&quot;&quot; coords=&quot;128,116, 122,114, 118,119, 112,116, 112,110, 107,111, 105,107, 102,107, 100,110, 96,109, 93,111, 93,105, 87,107, 79,111, 70,98, 70,92, 61,95, 54,95, 47,103, 43,98, 40,103, 36,98, 27,101, 23,98, 15,103, 12,103, 12,107, 9,107, 11,113, 20,113, 24,110, 23,114, 26,116, 20,118, 16,116, 13,118, 17,122, 20,121, 24,125, 20,127, 9,127, 18,135, 18,140, 26,144, 27,139, 32,139, 34,142, 43,144, 49,150, 52,150, 57,153, 56,160, 59,165, 60,157, 63,155, 70,155, 70,157, 65,158, 69,163, 81,163, 88,160, 90,152, 96,152, 100,150, 106,150, 111,146, 116,150, 122,144, 122,141, 128,141, 127,135, 124,129, 128,126, 128,116&quot; href=&quot;.\/region.php?id=bret&quot; id=&quot;bret&quot; shape=&quot;poly&quot; title=&quot;Bretagne&quot;&gt;\n    &lt;area alt=&quot;&quot; coords=&quot;182,135, 172,131, 172,126, 169,124, 157,127, 157,121, 151,116, 136,121, 132,116, 128,116, 128,126, 124,129, 127,135, 128,141, 122,141, 122,144, 116,150, 111,146, 106,150, 100,150, 96,152, 90,152, 88,160, 81,163, 77,166, 76,170, 73,171, 83,174, 88,172, 99,174, 89,175, 85,179, 92,184, 87,188, 87,191, 84,193, 91,201, 95,211, 98,211, 106,220, 112,222, 123,220, 126,224, 132,220, 129,218, 128,208, 132,204, 123,197, 123,193, 115,186, 130,191, 134,186, 152,187, 156,184, 155,179, 160,175, 160,163, 176,163, 176,156, 182,152, 184,143, 188,143, 182,135&quot; href=&quot;.\/region.php?id=ploire&quot; id=&quot;ploire&quot; shape=&quot;poly&quot; title=&quot;Pays de la Loire&quot;&gt;\n    &lt;area alt=&quot;&quot; coords=&quot;156,184, 155,179, 160,175, 160,163, 176,163, 176,156, 182,152, 184,143, 188,143, 182,135, 183,130, 188,129, 188,115, 202,110, 204,113, 205,122, 218,135, 230,135, 234,143, 247,146, 249,147, 249,158, 245,166, 249,171, 245,174, 245,180, 248,184, 247,198, 249,202, 249,208, 240,211, 232,213, 232,222, 221,226, 189,225, 183,213, 183,205, 178,204, 170,193, 162,196, 162,187, 156,184&quot; href=&quot;.\/region.php?id=centre&quot; id=&quot;centre&quot; shape=&quot;poly&quot; title=&quot;Centre&quot;&gt;\n    &lt;area alt=&quot;&quot; coords=&quot;249,208, 249,202, 247,198, 248,184, 245,180, 245,174, 249,171, 245,166, 249,158, 249,147, 247,146, 253,136, 263,135, 267,139, 267,144, 273,144, 277,154, 286,155, 289,158, 304,151, 314,161, 314,168, 317,171, 327,172, 331,176, 327,181, 329,185, 328,190, 318,204, 324,211, 318,211, 322,217, 321,224, 308,224, 307,234, 304,237, 297,233, 289,240, 279,239, 274,236, 278,232, 278,223, 271,218, 267,212, 262,215, 250,212, 249,208&quot; href=&quot;.\/region.php?id=bourg&quot; id=&quot;bourg&quot; shape=&quot;poly&quot; title=&quot;Bourgogne&quot;&gt;\n    &lt;area alt=&quot;&quot; coords=&quot;120,271, 111,257, 105,254, 103,251, 95,246, 95,241, 102,244, 107,247, 114,240, 112,236, 115,235, 108,226, 112,222, 123,220, 126,224, 132,220, 129,218, 128,208, 132,204, 123,197, 123,193, 115,186, 130,191, 134,186, 152,187, 156,184, 162,187, 162,196, 170,193, 178,204, 183,205, 183,213, 189,225, 180,229, 172,236, 177,246, 167,257, 161,259, 158,269, 152,269, 152,274, 144,279, 143,282, 139,285, 134,279, 129,279, 129,273, 126,271, 120,271&quot; href=&quot;.\/region.php?id=poicha&quot; id=&quot;poicha&quot; shape=&quot;poly&quot; title=&quot;Poitou-Charentes&quot;&gt;\n    &lt;area alt=&quot;&quot; coords=&quot;167,257, 177,246, 172,236, 180,229, 189,225, 221,226, 222,233, 232,242, 232,250, 224,253, 227,257, 226,260, 230,265, 228,269, 227,276, 220,277, 219,283, 215,287, 215,291, 210,296, 189,296, 189,286, 182,280, 186,275, 186,270, 183,270, 174,258, 167,257&quot; href=&quot;.\/region.php?id=lim&quot; id=&quot;lim&quot; shape=&quot;poly&quot; title=&quot;Limousin&quot;&gt;\n    &lt;area alt=&quot;&quot; coords=&quot;210,296, 215,291, 215,287, 219,283, 220,277, 227,276, 228,269, 230,265, 226,260, 227,257, 224,253, 232,250, 232,242, 222,233, 221,226, 232,222, 232,213, 240,211, 249,208, 250,212, 262,215, 267,212, 271,218, 278,223, 278,232, 274,236, 272,247, 267,252, 271,256, 270,260, 277,273, 275,280, 285,278, 287,282, 290,281, 293,288, 292,294, 289,294, 288,297, 286,298, 285,302, 271,307, 265,305, 265,302, 263,300, 261,306, 257,307, 256,301, 252,297, 246,302, 242,314, 241,307, 238,307, 233,297, 225,313, 212,311, 213,304, 209,302, 210,296&quot; href=&quot;.\/region.php?id=auv&quot; id=&quot;auv&quot; shape=&quot;poly&quot; title=&quot;Auvergne&quot;&gt;\n    &lt;area alt=&quot;&quot; coords=&quot;121,285, 120,271, 126,271, 129,273, 129,279, 134,279, 139,285, 143,282, 144,279, 152,274, 152,269, 158,269, 161,259, 167,257, 174,258, 183,270, 186,270, 186,275, 182,280, 189,286, 189,296, 183,304, 182,310, 177,309, 177,313, 173,315, 174,322, 168,322, 171,327, 169,333, 164,335, 159,337, 153,335, 147,338, 140,336, 138,342, 136,339, 127,342, 127,354, 123,357, 133,357, 133,364, 136,365, 136,371, 127,378, 127,382, 123,382, 121,392, 110,392, 106,384, 91,378, 89,375, 85,379, 80,376, 85,368, 82,364, 78,367, 76,364, 71,363, 71,360, 80,357, 88,345, 96,320, 99,303, 106,302, 104,298, 100,300, 105,272, 105,261, 109,259, 111,264, 117,271, 121,285&quot; href=&quot;.\/region.php?id=aqu&quot; id=&quot;aqu&quot; shape=&quot;poly&quot; title=&quot;Aquitaine&quot;&gt;\n    &lt;area alt=&quot;&quot; coords=&quot;179,406, 186,405, 189,407, 188,411, 193,413, 205,404, 203,401, 199,402, 195,397, 199,393, 199,386, 192,379, 192,372, 196,372, 197,369, 201,371, 204,369, 211,373, 212,369, 221,372, 226,369, 223,363, 228,361, 232,363, 238,359, 241,359, 244,352, 248,353, 251,350, 251,346, 256,342, 251,339, 254,336, 245,333, 245,319, 242,314, 241,307, 238,307, 233,297, 225,313, 212,311, 213,304, 209,302, 210,296, 189,296, 183,304, 182,310, 177,309, 177,313, 173,315, 174,322, 168,322, 171,327, 169,333, 164,335, 159,337, 153,335, 147,338, 140,336, 138,342, 136,339, 127,342, 127,354, 123,357, 133,357, 133,364, 136,365, 136,371, 127,378, 127,382, 123,382, 121,392, 129,397, 137,397, 141,401, 144,398, 148,398, 154,401, 155,393, 159,393, 171,400, 176,400, 179,406&quot; href=&quot;.\/region.php?id=mid&quot; id=&quot;mid&quot; shape=&quot;poly&quot; title=&quot;Midi-Pyr\u00e9n\u00e9es&quot;&gt;\n    &lt;area alt=&quot;&quot; coords=&quot;193,413, 205,404, 203,401, 199,402, 195,397, 199,393, 199,386, 192,379, 192,372, 196,372, 197,369, 201,371, 204,369, 211,373, 212,369, 221,372, 226,369, 223,363, 228,361, 232,363, 238,359, 241,359, 244,352, 248,353, 251,350, 251,346, 256,342, 251,339, 254,336, 245,333, 245,319, 242,314, 246,302, 252,297, 256,301, 257,307, 261,306, 262,302, 263,300, 265,302, 265,305, 271,307, 275,323, 279,325, 279,329, 286,331, 288,328, 292,329, 292,331, 302,330, 299,335, 305,342, 305,348, 297,353, 296,361, 291,361, 291,365, 285,366, 285,371, 279,371, 277,366, 272,367, 263,376, 261,376, 253,380, 248,380, 242,385, 238,393, 238,410, 244,416, 241,419, 238,417, 228,417, 224,423, 221,418, 216,423, 207,416, 199,421, 193,413&quot; href=&quot;.\/region.php?id=lang&quot; id=&quot;lang&quot; shape=&quot;poly&quot; title=&quot;Languedoc-Roussillon&quot;&gt;\n    &lt;area alt=&quot;&quot; coords=&quot;409,391, 415,391, 415,404, 416,408, 416,427, 411,431, 409,453, 404,458, 400,452, 392,451, 394,449, 391,446, 395,441, 387,439, 391,435, 386,434, 390,428, 385,427, 385,421, 387,420, 387,414, 393,406, 401,405, 404,402, 407,404, 409,391&quot; href=&quot;.\/region.php?id=corse&quot; id=&quot;corse&quot; shape=&quot;poly&quot; title=&quot;Corse&quot;&gt;\n    &lt;area alt=&quot;&quot; coords=&quot;376,330, 389,339, 405,339, 407,345, 402,350, 398,360, 389,361, 383,369, 379,369, 374,376, 370,376, 366,379, 371,381, 366,386, 360,386, 358,390, 350,387, 350,391, 342,389, 342,391, 335,390, 331,385, 321,385, 318,382, 321,380, 317,377, 311,378, 306,373, 304,373, 302,378, 295,376, 291,371, 285,371, 285,366, 291,365, 291,361, 296,361, 297,353, 305,348, 305,342, 299,335, 302,330, 307,333, 317,329, 314,336, 318,333, 326,339, 329,337, 332,337, 335,335, 331,330, 324,325, 327,323, 334,323, 334,320, 330,317, 333,315, 337,315, 341,309, 352,305, 357,307, 357,301, 352,298, 352,294, 359,296, 368,293, 375,305, 381,305, 381,315, 378,315, 374,321, 378,326, 376,330&quot; href=&quot;.\/region.php?id=paca&quot; id=&quot;paca&quot; shape=&quot;poly&quot; title=&quot;Provence-Alpes-C\u00f4te d&#039;Azur&quot;&gt;\n    &lt;area alt=&quot;&quot; coords=&quot;368,293, 359,296, 352,294, 352,298, 357,301, 357,307, 352,305, 341,309, 337,315, 333,315, 330,317, 334,320, 334,323, 327,323, 324,325, 331,330, 335,335, 332,337, 329,337, 326,339, 318,333, 314,336, 317,329, 307,333, 302,330, 292,331, 292,329, 288,328, 286,331, 279,329, 279,325, 275,323, 271,307, 285,302, 286,298, 288,297, 289,294, 292,294, 293,288, 290,281, 287,282, 285,278, 275,280, 277,273, 270,260, 271,256, 267,252, 272,247, 274,236, 279,239, 289,240, 297,233, 304,237, 307,234, 308,224, 321,224, 323,228, 320,230, 326,237, 330,234, 335,237, 350,228, 353,236, 347,241, 349,244, 356,240, 357,233, 362,231, 376,230, 378,239, 373,240, 382,249, 381,256, 376,258, 375,263, 380,267, 382,275, 387,278, 385,281, 385,289, 380,289, 377,293, 368,293&quot; href=&quot;.\/region.php?id=rhal&quot; id=&quot;rhal&quot; shape=&quot;poly&quot; title=&quot;Rh\u00f4ne-Alpes&quot;&gt;\n    &lt;area alt=&quot;&quot; coords=&quot;350,228, 335,237, 330,234, 326,237, 320,230, 323,228, 321,224, 322,217, 318,211, 324,211, 318,204, 328,190, 329,185, 327,181, 331,176, 327,172, 331,168, 334,170, 336,168, 336,163, 342,156, 351,154, 352,158, 360,157, 364,162, 366,157, 373,164, 379,168, 379,172, 382,174, 382,179, 378,182, 382,182, 383,188, 363,203, 361,210, 354,215, 354,222, 350,228&quot; href=&quot;.\/region.php?id=frcomt&quot; id=&quot;frcomt&quot; shape=&quot;poly&quot; title=&quot;Franche-Comt\u00e9&quot;&gt;\n    &lt;area alt=&quot;&quot; coords=&quot;420,108, 418,116, 412,119, 400,151, 402,155, 397,166, 399,173, 394,180, 391,180, 388,182, 382,179, 382,174, 379,172, 379,168, 373,164, 381,152, 381,145, 386,139, 383,138, 382,130, 388,124, 392,118, 389,116, 382,118, 379,112, 383,105, 390,112, 397,109, 399,103, 404,103, 420,108&quot; href=&quot;.\/region.php?id=als&quot; id=&quot;als&quot; shape=&quot;poly&quot; title=&quot;Alsace&quot;&gt;\n    &lt;area alt=&quot;&quot; coords=&quot;341,80, 349,86, 358,83, 360,85, 365,85, 374,97, 378,94, 387,100, 392,97, 399,98, 399,103, 397,109, 390,112, 383,105, 379,112, 382,118, 389,116, 392,118, 388,124, 382,130, 383,138, 386,139, 381,145, 381,152, 373,164, 366,157, 364,162, 360,157, 352,158, 351,154, 342,156, 335,150, 338,147, 338,141, 330,139, 329,133, 314,123, 312,116, 316,116, 317,106, 314,104, 314,97, 321,81, 326,83, 327,81, 332,81, 341,80&quot; href=&quot;.\/region.php?id=lor&quot; id=&quot;lor&quot; shape=&quot;poly&quot; title=&quot;Lorraine&quot;&gt;\n    &lt;area alt=&quot;&quot; coords=&quot;295,59, 294,69, 290,76, 287,88, 273,90, 276,98, 272,99, 272,109, 266,112, 268,123, 263,127, 263,135, 267,139, 267,144, 273,144, 277,155, 286,155, 289,158, 304,151, 314,161, 314,168, 317,171, 327,172, 331,168, 334,170, 336,168, 336,163, 342,156, 335,150, 338,147, 338,141, 330,139, 329,133, 314,123, 312,116, 316,116, 317,106, 314,104, 314,97, 321,81, 326,83, 327,81, 332,81, 318,68, 314,68, 314,51, 304,58, 295,59&quot; href=&quot;.\/region.php?id=champ&quot; id=&quot;champ&quot; shape=&quot;poly&quot; title=&quot;Champagne-Ardenne&quot;&gt;\n    &lt;area alt=&quot;&quot; coords=&quot;215,16, 221,12, 246,8, 248,20, 254,24, 264,21, 269,34, 276,34, 279,43, 293,45, 295,59, 290,63, 284,58, 278,60, 272,58, 264,61, 260,55, 240,52, 241,48, 232,48, 225,42, 217,40, 212,38, 215,16&quot; href=&quot;.\/region.php?id=npc&quot; id=&quot;npc&quot; shape=&quot;poly&quot; title=&quot;Nord-Pas-de-Calais&quot;&gt;\n&lt;\/map&gt;\n<\/pre><\/div>\n\n\n<p>Nous voil\u00e0 maintenant au moment tant attendu du scriptage jQuery :<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n\/\/Au survol d&#039;une area\n$(&quot;area&quot;).hover(function(){\n    \/\/On r\u00e9cup\u00e8re l&#039;id de l&#039;area survol\u00e9e\n    var img = $(this).attr(&quot;id&quot;);\n\n    \/\/Remplace l&#039;image transparente par celle de la r\u00e9gion\n    $(&quot;#hovered&quot;).attr(&quot;src&quot;,&quot;.\/images\/&quot;+img+&quot;.png&quot;);\n}, function(){\n    \/\/Quand le pointeur quitte une area, on remet l&#039;image transparente \n    $(&quot;#hovered&quot;).attr(&quot;src&quot;,&quot;.\/images\/map.gif&quot;);\n});\n<\/pre><\/div>\n\n\n<p>Et voil\u00e0 !!!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00c0 la fin de la premi\u00e8re partie de ce tutoriel (voir ici) nous avions : un dossier images contenant la carte un fichier HTML comprenant notre map HTML notre fichier Illustrator Partie 2: Rendre la carte interactive \u00e0 l&rsquo;aide de &hellip; <a href=\"https:\/\/geekcommunicant.com\/blog\/2012\/09\/30\/comment-realiser-une-carte-interactive-2-sur-2\/\">Continuer la lecture <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[3],"tags":[14,13],"class_list":["post-129","post","type-post","status-publish","format-standard","hentry","category-jquery","tag-carte-interactive","tag-illustrator"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2IoOb-25","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":104,"url":"https:\/\/geekcommunicant.com\/blog\/2012\/09\/29\/comment-realiser-une-carte-interactive-1-sur-2\/","url_meta":{"origin":129,"position":0},"title":"[Illustrator\/jQuery] Comment r\u00e9aliser une carte interactive (1\/2)","author":"geekc","date":"29\/09\/2012","format":false,"excerpt":"Dans ce tutoriel, nous allons voir comment r\u00e9aliser une carte interactive comme celle-ci. Ce tutoriel sera divis\u00e9 en deux parties: Cr\u00e9ation de la carte et du mappage HTMLRendre la carte interactive avec jQuery Partie 1: Cr\u00e9ation de la carte et du mappage HTML Comme pour toute vectorisation, il faut trouver\u2026","rel":"","context":"Dans &quot;jQuery&quot;","block_context":{"text":"jQuery","link":"https:\/\/geekcommunicant.com\/blog\/category\/jquery\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/geekcommunicant.com\/blog\/wp-content\/uploads\/carte-france-region.gif?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":848,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/07\/01\/carte-interactive-rues-sans-megots-openlayers\/","url_meta":{"origin":129,"position":1},"title":"Carte interactive des rues sans m\u00e9gots avec OpenLayers","author":"geekc","date":"01\/07\/2019","format":false,"excerpt":"Bon, je suppose que vous commencez \u00e0 avoir l\u2019habitude que je vous pr\u00e9sente la mani\u00e8re de cr\u00e9er une carte interactive \u00e0 l\u2019aide des deux librairies majeures OpenLayers et Leaflet. Apr\u00e8s avoir rapidement cr\u00e9\u00e9 la carte des rues et sections de rue concern\u00e9es par l\u2019op\u00e9ration \u00ab\u00a0Des rues sans m\u00e9gots\u00a0\u00bb avec Leaflet,\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":808,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/06\/11\/carte-interactive-metro-paris-leaflet\/","url_meta":{"origin":129,"position":2},"title":"Carte interactive du m\u00e9tro de Paris avec Leaflet","author":"geekc","date":"11\/06\/2019","format":false,"excerpt":"Si on vous parle de solution pour int\u00e9grer une carte sur votre site, la premi\u00e8re qui vous vient \u00e0 l\u2019esprit est surement Google Maps. Mais il existe plusieurs solutions open-source et gratuites. Je vous ai d\u00e9j\u00e0 parl\u00e9 d\u2019OpenLayers, avec laquelle j\u2019ai d\u00e9j\u00e0 refait une carte r\u00e9alis\u00e9e pr\u00e9c\u00e9demment avec jQuery. Mais\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":835,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/06\/24\/carte-interactive-rues-sans-megots-leaflet\/","url_meta":{"origin":129,"position":3},"title":"Carte interactive des rues sans m\u00e9gots avec Leaflet","author":"geekc","date":"24\/06\/2019","format":false,"excerpt":"Cette carte interactive des rues sans m\u00e9gots de Paris a \u00e9t\u00e9 r\u00e9alis\u00e9e suite \u00e0 la suite de la consultation de la page d\u2019actualit\u00e9s de la ville de Paris concernant cette action de propret\u00e9, qui ne contenait qu\u2019une image pour pr\u00e9senter la cartographie des diff\u00e9rentes rues concern\u00e9es par cette op\u00e9ration. Sources\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":790,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/05\/20\/carte-interactive-svg-tooltip\/","url_meta":{"origin":129,"position":4},"title":"Carte interactive en SVG avec tooltip","author":"geekc","date":"20\/05\/2019","format":false,"excerpt":"Apr\u00e8s la premi\u00e8re version de ma carte interactive (voir ici), j\u2019en ai cr\u00e9\u00e9 une deuxi\u00e8me \u00e0 l\u2019aide de la librairie OpenLayers. Cette solution fonctionne, mais c\u2019est comme disposer d'un outil multifonction mais d'en n'utiliser qu'une ou deux, OpenLayers \u00e9tant une librairie permettant de faire beaucoup plus. Une autre solution un\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/geekcommunicant.com\/blog\/wp-content\/uploads\/svg-map-style.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":25,"url":"https:\/\/geekcommunicant.com\/blog\/2012\/09\/12\/un-compteur-de-caracteres-en-jquery\/","url_meta":{"origin":129,"position":5},"title":"Un compteur de caract\u00e8res en jQuery","author":"geekc","date":"12\/09\/2012","format":false,"excerpt":"Aujourd'hui nous allons voir comment faire un plugin jQuery, qui permet de compter le nombre de caract\u00e8res pouvant encore \u00eatre accept\u00e9 dans des champs de texte. Pour commencer, il faut d\u00e9cider du nombre de variables utiles \u00e0 ce genre de r\u00e9alisation. Une longueur maximale autoris\u00e9e est un minimum. Ensuite, comme\u2026","rel":"","context":"Dans &quot;jQuery&quot;","block_context":{"text":"jQuery","link":"https:\/\/geekcommunicant.com\/blog\/category\/jquery\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/129","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/comments?post=129"}],"version-history":[{"count":0,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/129\/revisions"}],"wp:attachment":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/media?parent=129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/categories?post=129"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/tags?post=129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}