{"id":512,"date":"2019-04-08T10:54:35","date_gmt":"2019-04-08T08:54:35","guid":{"rendered":"https:\/\/geekcommunicant.com\/blog\/?p=512"},"modified":"2019-05-02T14:50:20","modified_gmt":"2019-05-02T12:50:20","slug":"remake-carte-openlayers","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2019\/04\/08\/remake-carte-openlayers\/","title":{"rendered":"Remake de ma carte interactive avec OpenLayers"},"content":{"rendered":"\n

Il n’y a pas tr\u00e8s longtemps, en faisant la maintenance de mon site (oui, m\u00eame si le contenu n’\u00e9volue quasiment pas, le site n’est pas \u00e0 l’abandon) je suis retomb\u00e9 sur la carte interactive<\/a> que j’avais r\u00e9alis\u00e9es plusieurs ann\u00e9es auparavant.<\/p>\n\n\n\n

Cette carte reposait sur l’utilisation d’une image comme fond de carte, et d’une map HTML<\/a> plus un script jQuery.<\/p>\n\n\n\n

J’avais r\u00e9sum\u00e9 le processus de cr\u00e9ation dans deux articles :<\/p>\n\n\n\n

  1. Cr\u00e9ation de la carte et du mappage<\/a><\/li>
  2. Ajout interactivit\u00e9 avec jQuery<\/a><\/li><\/ol>\n\n\n\n

    L’inconv\u00e9nient de cette solution est quelle ne fonctionne pas sur Chrome. Et Chrome \u00e9tant le navigateur avec la plus grosse part de march\u00e9 cela est probl\u00e9matique.<\/p>\n\n\n\n

    Derni\u00e8rement, lors de ma mission chez Orange, j’ai \u00e9t\u00e9 amen\u00e9 \u00e0 travailler sur une partie de cartographie. Pour des raisons de confidentialit\u00e9, il avait \u00e9t\u00e9 d\u00e9cid\u00e9 de ne pas utiliser de solution commerciale (celle de big G dans ce cas), mais une solution open-source.<\/p>\n\n\n\n

    Le choix final c’est arr\u00eat\u00e9 sur la librairie OpenLayers<\/a>, avec un fond OpenStreetMap<\/a>.<\/p>\n\n\n\n

    Or cette librairie (compatible avec tous les navigateurs modernes) permet l’utilisation d’une image statique comme fond de carte (voir cet exemple<\/a>). C’est donc pourquoi j’ai d\u00e9cid\u00e9 de refaire une carte interactive \u00e0 l’aide de cette librairie.<\/p>\n\n\n\n

    Cr\u00e9ation de la carte<\/h2>\n\n\n\n

    Pr\u00e9paratifs<\/h3>\n\n\n\n

    Comme avec toute librairie, il faut d’abord l’int\u00e9grer \u00e0 votre page (via un CDN ou en local), ainsi que sa feuille de style.<\/p>\n\n\n\n

    Ensuite, il faut cr\u00e9er dans le corps de la page une div qui sera utilis\u00e9e par OpenLayers pour cr\u00e9er la carte. De plus, cette div doit \u00eatre pr\u00e9alablement dimensionn\u00e9e, si vous ne souhaitez pas qu’elle occupe toute la largeur disponible.<\/p>\n\n\n\n

    Le script de cr\u00e9ation de la carte, quant \u00e0 lui, doit \u00eatre plac\u00e9 \u00e0 la fin du body de la page.<\/p>\n\n\n\n

    Bon, tout est pr\u00e8s ? Il est temps de passer \u00e0 la cr\u00e9ation de notre carte.
    <\/p>\n\n\n\n\n\n\n\n

    Utilisation d’une image comme fond de carte<\/h3>\n\n\n\n

    OpenLayers \u00e9tant une librairie de cartographie, il lui faut une projection. Comme ici on utilise une image comme fond de carte, il faut cr\u00e9er une projection fictive.<\/p>\n\n\n\n

    Avec OpenLayers, cela ce fait comme \u00e7a :<\/p>\n\n\n

    \nvar extent = [0,0,432,463]; \/\/ coordonn\u00e9es des coins sup\u00e9rieur gauche et inf\u00e9rieur droit\n\nvar projection = new ol.proj.Projection({\n    code: 'custom',\n    units: 'pixels', \/\/ unit\u00e9 utilis\u00e9e par la projection\n    extent: extent\n});\n<\/pre><\/div>\n\n\n
    Il est ensuite temps d’initialiser la carte :<\/p>\n\n\n
    \nvar map = new ol.Map({\n    layers: [ \/\/ tableau contenant les couches de carte\n        new ol.layer.Image({ \/\/ couche de type image\n            source: new ol.source.ImageStatic({ \/\/ source de type image statique\n                url: 'lien_vers_votre_image',\n                projection: projection,\n                imageExtent: extent\n            })\n        })\n    ],\n    target: 'map', \/\/ id de la div destin\u00e9e \u00e0 contenir la carte\n    view: new ol.View({\n        projection: projection,\n        center: ol.extent.getCenter(extent), \/\/ on centre la carte au milieu de l'image\n        resolution: 1 \/\/ zoom \u00e0 l'\u00e9chelle 1\n    })\n}); \n<\/pre><\/div>\n\n\n
    On obtient alors le r\u00e9sultat suivant.<\/p>\n\n\n\n
    \"Carte<\/figure><\/div>\n\n\n\n
    Le r\u00e9sultat est bien ce \u00e0 quoi on s’attend.<\/p>\n\n\n\n\n\n\n\n
    D\u00e9sactivation des contr\u00f4les et interactions<\/h3>\n\n\n\n
    Mais, avec ce code, les interactions (zoom avec la molette de la souris, d\u00e9placement de la carte au clic de la souris) et les contr\u00f4les (boutons + et -) basiques d’une carte restent actifs.<\/p>\n\n\n\n
    Pour d\u00e9sactiver ces contr\u00f4les et interactions, on va pr\u00e9ciser les attributs \u00ab\u00a0interactions\u00a0\u00bb et \u00ab\u00a0controls\u00a0\u00bb de notre map :<\/p>\n\n\n
    \nvar map = new ol.Map({\n    layers: [\n        new ol.layer.Image({\n            source: new ol.source.ImageStatic({\n                url: 'lien_vers_votre_image',\n                projection: projection,\n                imageExtent: extent\n            })\n        })\n    ],\n    target: 'map',\n    view: new ol.View({\n        projection: projection,\n        center: ol.extent.getCenter(extent),\n        resolution: 1\n    }),\n    interactions: ol.interaction.defaults({\n        altShiftDragRotate: false, \/\/ rotation de la carte\n        doubleClickZoom: false, \/\/ zoom au double-clic\n        mouseWheelZoom: false, \/\/ zoom avec la molette de la souris\n        shiftDragZoom: false, \/\/ zoom avec d\u00e9placement souris + Shift\n        dragPan: false \/\/ d\u00e9placement avec souris\n    }),\n    controls:[] \/\/ aucun contr\u00f4le\n});\n<\/pre><\/div>\n\n\n
    On obtient alors une carte sans contr\u00f4les et compl\u00e8tement statique.<\/p>\n\n\n\n
    \"Carte<\/figure><\/div>\n\n\n\n
    Ajout des r\u00e9gions cliquables<\/h3>\n\n\n\n
    Pour ajouter les r\u00e9gions cliquables, on va rajouter \u00e0 la carte une couche vectorielle.<\/p>\n\n\n\n
    Disposant d\u00e9j\u00e0 des coordonn\u00e9es des diff\u00e9rentes r\u00e9gions dans le mapping HTML, on va utiliser celles-ci dans un objet GeoJSON<\/a>.<\/p>\n\n\n\n
    Avec la magie des expressions r\u00e9guli\u00e8re dans mon \u00e9diteur de texte, je me suis rapidement retrouv\u00e9 avec un objet GeoJSON correspondant \u00e0 une r\u00e9gion (dans ce cas, l’\u00cele-de-France).<\/p>\n\n\n
    \nvar geojsonObject = {\n    'type': 'FeatureCollection',\n    'features': [{\n        'type': 'Feature',\n\t'geometry': {\n\t    'type': 'Polygon',\n\t    'coordinates': [[[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]]]\n\t}\n    }]\n};\n<\/pre><\/div>\n\n\n
    Il suffit ensuite d’effectivement rajouter la couche vectorielle \u00e0 notre carte :<\/p>\n\n\n
    \nvar map = new ol.Map({\n\tlayers: [\n\t\tnew ol.layer.Image({\n\t\t\tsource: new ol.source.ImageStatic({\n\t\t\t    url: 'lien_vers_votre_image',\n\t\t\t    projection: projection,\n\t\t\t    imageExtent: extent\n\t\t\t})\n\t\t}),\n\t\tnew ol.layer.Vector({\n\t\t    source: new ol.source.Vector({\n\t\t    \tfeatures: (new ol.format.GeoJSON()).readFeatures(geojsonObject)\n\t\t\t})\n\t\t})\n\t],\n\ttarget: 'map',\n\tview: new ol.View({\n\t\tprojection: projection,\n\t\tcenter: ol.extent.getCenter(extent),\n\t\tresolution: 1\n\t}),\n\tinteractions: ol.interaction.defaults({\n\t\taltShiftDragRotate: false,\n\t\tdoubleClickZoom: false,\n\t\tmouseWheelZoom: false,\n\t\tshiftDragZoom: false,\n\t\tdragPan: false\n\t}),\n\tcontrols:[]\n});\n<\/pre><\/div>\n\n\n
    Et l\u00e0, c’est le drame…<\/p>\n\n\n\n
    \"Coordonn\u00e9es<\/figure><\/div>\n\n\n\n
    La r\u00e9gion est bien trac\u00e9e, mais invers\u00e9e.<\/p>\n\n\n\n
    Au d\u00e9but j’ai \u00e9t\u00e9 surpris, mais apr\u00e8s quelques recherches en ligne, je me suis vite aper\u00e7u d’o\u00f9 venait le probl\u00e8me.<\/p>\n\n\n\n
    La raison de cette inversion viens d’une diff\u00e9rence d’origine du rep\u00e8re sur l’axe Y (vertical). Dans les images, l’origine du rep\u00e8re se situe en haut \u00e0 gauche, alors que pour les coordonn\u00e9es g\u00e9ographiques, le rep\u00e8re se trouve en bas \u00e0 gauche.<\/p>\n\n\n\n
    Pour inverser les coordonn\u00e9es, rien de plus simple. Les coordonn\u00e9es Y actuelles doivent \u00eatre remplac\u00e9es par la hauteur de l’image (ici, 463) – la coordonn\u00e9e actuelle.<\/p>\n\n\n\n
    Apr\u00e8s transformations par expressions r\u00e9guli\u00e8res et quelques copier-coller entre l’\u00e9diteur de texte et un tableur, on se retrouve avec l’objet GeoJSON suivant :<\/p>\n\n\n
    \nvar geojsonObject = {\n\t'type': 'FeatureCollection',\n\t'features': [\n\t\t{\n\t\t\t'type': 'Feature',\n\t\t\t'geometry' : {\n\t\t\t\t'type': 'Polygon',\n\t\t\t\t'coordinates': [[[263, 336], [263, 328], [253, 327], [247, 317], [234, 320], [230, 328], [218, 328], [205, 341], [204, 350], [202, 353], [203, 364], [210, 366], [222, 369], [228, 365], [233, 368], [238, 362], [257, 360], [257, 364], [266, 351], [268, 340], [263, 336]]]\n\t\t\t},\n\t\t\t'properties': {\n\t\t\t\t'name': '\u00cele-de-France',\n\t\t\t\t'wiki': 'https:\/\/fr.wikipedia.org\/wiki\/%C3%8Ele-de-France'\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\t'type': 'Feature',\n\t\t\t'geometry' : {\n\t\t\t\t'type': 'Polygon',\n\t\t\t\t'coordinates': [[[215, 402], [208, 407], [208, 414], [208, 421], [212, 425], [217, 423], [225, 421], [232, 415], [241, 415], [240, 411], [260, 408], [264, 402], [272, 405], [278, 403], [284, 405], [290, 400], [295, 404], [294, 394], [290, 387], [287, 375], [273, 373], [276, 365], [272, 364], [272, 354], [266, 351], [257, 364], [257, 360], [238, 362], [233, 368], [228, 365], [222, 369], [210, 366], [212, 379], [214, 382], [212, 386], [215, 393], [215, 402]]]\n\t\t\t},\n\t\t\t'properties': {\n\t\t\t\t'name': 'Picardie',\n\t\t\t\t'wiki': 'https:\/\/fr.wikipedia.org\/wiki\/Picardie_(ancienne_r%C3%A9gion_administrative)'\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\t'type': 'Feature',\n\t\t\t'geometry' : {\n\t\t\t\t'type': 'Polygon',\n\t\t\t\t'coordinates': [[[182, 386], [168, 389], [170, 397], [177, 401], [188, 404], [201, 408], [208, 414], [208, 407], [215, 402], [215, 393], [212, 386], [214, 382], [212, 379], [210, 366], [203, 364], [202, 353], [188, 348], [180, 361], [176, 361], [176, 376], [173, 386], [182, 386]]]\n\t\t\t},\n\t\t\t'properties': {\n\t\t\t\t'name': 'Haute-Normandie',\n\t\t\t\t'wiki': 'https:\/\/fr.wikipedia.org\/wiki\/Haute-Normandie'\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\t'type': 'Feature',\n\t\t\t'geometry': {\n\t\t\t\t'type': 'Polygon',\n\t\t\t\t'coordinates': [[[117, 353], [113, 356], [115, 380], [109, 395], [111, 399], [107, 402], [110, 405], [114, 401], [124, 400], [128, 403], [132, 396], [128, 394], [131, 386], [159, 381], [173, 386], [176, 376], [176, 361], [180, 361], [188, 348], [188, 334], [183, 333], [182, 328], [172, 332], [172, 337], [169, 339], [157, 336], [157, 342], [151, 347], [136, 342], [132, 347], [128, 347], [122, 349], [118, 344], [112, 347], [112, 353], [117, 353]]]\n\t\t\t},\n\t\t\t'properties': {\n\t\t\t\t'name': 'Basse-Normandie',\n\t\t\t\t'wiki': 'https:\/\/fr.wikipedia.org\/wiki\/Basse-Normandie'\n\t\t\t} \n\t\t},\n\t\t{\n\t\t\t'type': 'Feature',\n\t\t\t'geometry': {\n\t\t\t\t'type': 'Polygon',\n\t\t\t\t'coordinates': [[[128, 347], [122, 349], [118, 344], [112, 347], [112, 353], [107, 352], [105, 356], [102, 356], [100, 353], [96, 354], [93, 352], [93, 358], [87, 356], [79, 352], [70, 365], [70, 371], [61, 368], [54, 368], [47, 360], [43, 365], [40, 360], [36, 365], [27, 362], [23, 365], [15, 360], [12, 360], [12, 356], [9, 356], [11, 350], [20, 350], [24, 353], [23, 349], [26, 347], [20, 345], [16, 347], [13, 345], [17, 341], [20, 342], [24, 338], [20, 336], [9, 336], [18, 328], [18, 323], [26, 319], [27, 324], [32, 324], [34, 321], [43, 319], [49, 313], [52, 313], [57, 310], [56, 303], [59, 298], [60, 306], [63, 308], [70, 308], [70, 306], [65, 305], [69, 300], [81, 300], [88, 303], [90, 311], [96, 311], [100, 313], [106, 313], [111, 317], [116, 313], [122, 319], [122, 322], [128, 322], [127, 328], [124, 334], [128, 337], [128, 347]]]\n\t\t\t},\n\t\t\t'properties': {\n\t\t\t\t'name': 'Bretagne',\n\t\t\t\t'wiki': 'https:\/\/fr.wikipedia.org\/wiki\/R%C3%A9gion_Bretagne'\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\t'type': 'Feature',\n\t\t\t'geometry': {\n\t\t\t\t'type': 'Polygon',\n\t\t\t\t'coordinates': [[[182, 328], [172, 332], [172, 337], [169, 339], [157, 336], [157, 342], [151, 347], [136, 342], [132, 347], [128, 347], [128, 337], [124, 334], [127, 328], [128, 322], [122, 322], [122, 319], [116, 313], [111, 317], [106, 313], [100, 313], [96, 311], [90, 311], [88, 303], [81, 300], [77, 297], [76, 293], [73, 292], [83, 289], [88, 291], [99, 289], [89, 288], [85, 284], [92, 279], [87, 275], [87, 272], [84, 270], [91, 262], [95, 252], [98, 252], [106, 243], [112, 241], [123, 243], [126, 239], [132, 243], [129, 245], [128, 255], [132, 259], [123, 266], [123, 270], [115, 277], [130, 272], [134, 277], [152, 276], [156, 279], [155, 284], [160, 288], [160, 300], [176, 300], [176, 307], [182, 311], [184, 320], [188, 320], [182, 328]]]\n\t\t\t},\n\t\t\t'properties': {\n\t\t\t\t'name': 'Pays de la Loire',\n\t\t\t\t'wiki': 'https:\/\/fr.wikipedia.org\/wiki\/Pays_de_la_Loire'\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\t'type': 'Feature',\n\t\t\t'geometry': {\n\t\t\t\t'type': 'Polygon',\n\t\t\t\t'coordinates': [[[156, 279], [155, 284], [160, 288], [160, 300], [176, 300], [176, 307], [182, 311], [184, 320], [188, 320], [182, 328], [183, 333], [188, 334], [188, 348], [202, 353], [204, 350], [205, 341], [218, 328], [230, 328], [234, 320], [247, 317], [249, 316], [249, 305], [245, 297], [249, 292], [245, 289], [245, 283], [248, 279], [247, 265], [249, 261], [249, 255], [240, 252], [232, 250], [232, 241], [221, 237], [189, 238], [183, 250], [183, 258], [178, 259], [170, 270], [162, 267], [162, 276], [156, 279]]]\n\t\t\t},\n\t\t\t'properties': {\n\t\t\t\t'name': 'Centre',\n\t\t\t\t'wiki': 'https:\/\/fr.wikipedia.org\/wiki\/Centre-Val_de_Loire'\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\t'type': 'Feature',\n\t\t\t'geometry': {\n\t\t\t\t'type': 'Polygon',\n\t\t\t\t'coordinates': [[[249, 255], [249, 261], [247, 265], [248, 279], [245, 283], [245, 289], [249, 292], [245, 297], [249, 305], [249, 316], [247, 317], [253, 327], [263, 328], [267, 324], [267, 319], [273, 319], [277, 309], [286, 308], [289, 305], [304, 312], [314, 302], [314, 295], [317, 292], [327, 291], [331, 287], [327, 282], [329, 278], [328, 273], [318, 259], [324, 252], [318, 252], [322, 246], [321, 239], [308, 239], [307, 229], [304, 226], [297, 230], [289, 223], [279, 224], [274, 227], [278, 231], [278, 240], [271, 245], [267, 251], [262, 248], [250, 251], [249, 255]]]\n\t\t\t},\n\t\t\t'properties': {\n\t\t\t\t'name': 'Bourgogne',\n\t\t\t\t'wiki': 'https:\/\/fr.wikipedia.org\/wiki\/Bourgogne_(ancienne_r%C3%A9gion_administrative)'\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\t'type': 'Feature',\n\t\t\t'geometry': {\n\t\t\t\t'type': 'Polygon',\n\t\t\t\t'coordinates': [[[120, 192], [111, 206], [105, 209], [103, 212], [95, 217], [95, 222], [102, 219], [107, 216], [114, 223], [112, 227], [115, 228], [108, 237], [112, 241], [123, 243], [126, 239], [132, 243], [129, 245], [128, 255], [132, 259], [123, 266], [123, 270], [115, 277], [130, 272], [134, 277], [152, 276], [156, 279], [162, 276], [162, 267], [170, 270], [178, 259], [183, 258], [183, 250], [189, 238], [180, 234], [172, 227], [177, 217], [167, 206], [161, 204], [158, 194], [152, 194], [152, 189], [144, 184], [143, 181], [139, 178], [134, 184], [129, 184], [129, 190], [126, 192], [120, 192]]]\n\t\t\t},\n\t\t\t'properties': {\n\t\t\t\t'name': 'Poitou-Charentes',\n\t\t\t\t'wiki': 'https:\/\/fr.wikipedia.org\/wiki\/Poitou-Charentes'\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\t'type': 'Feature',\n\t\t\t'geometry': {\n\t\t\t\t'type': 'Polygon',\n\t\t\t\t'coordinates': [[[167, 206], [177, 217], [172, 227], [180, 234], [189, 238], [221, 237], [222, 230], [232, 221], [232, 213], [224, 210], [227, 206], [226, 203], [230, 198], [228, 194], [227, 187], [220, 186], [219, 180], [215, 176], [215, 172], [210, 167], [189, 167], [189, 177], [182, 183], [186, 188], [186, 193], [183, 193], [174, 205], [167, 206]]]\n\t\t\t},\n\t\t\t'properties': {\n\t\t\t\t'name': 'Limousin',\n\t\t\t\t'wiki': 'https:\/\/fr.wikipedia.org\/wiki\/Limousin_(ancienne_r%C3%A9gion_administrative)'\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\t'type': 'Feature',\n\t\t\t'geometry': {\n\t\t\t\t'type': 'Polygon',\n\t\t\t\t'coordinates': [[[210, 167], [215, 172], [215, 176], [219, 180], [220, 186], [227, 187], [228, 194], [230, 198], [226, 203], [227, 206], [224, 210], [232, 213], [232, 221], [222, 230], [221, 237], [232, 241], [232, 250], [240, 252], [249, 255], [250, 251], [262, 248], [267, 251], [271, 245], [278, 240], [278, 231], [274, 227], [272, 216], [267, 211], [271, 207], [270, 203], [277, 190], [275, 183], [285, 185], [287, 181], [290, 182], [293, 175], [292, 169], [289, 169], [288, 166], [286, 165], [285, 161], [271, 156], [265, 158], [265, 161], [263, 163], [261, 157], [257, 156], [256, 162], [252, 166], [246, 161], [242, 149], [241, 156], [238, 156], [233, 166], [225, 150], [212, 152], [213, 159], [209, 161], [210, 167]]]\n\t\t\t},\n\t\t\t'properties': {\n\t\t\t\t'name': 'Auvergne',\n\t\t\t\t'wiki': 'https:\/\/fr.wikipedia.org\/wiki\/Auvergne'\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\t'type': 'Feature',\n\t\t\t'geometry': {\n\t\t\t\t'type': 'Polygon',\n\t\t\t\t'coordinates': [[[121, 178], [120, 192], [126, 192], [129, 190], [129, 184], [134, 184], [139, 178], [143, 181], [144, 184], [152, 189], [152, 194], [158, 194], [161, 204], [167, 206], [174, 205], [183, 193], [186, 193], [186, 188], [182, 183], [189, 177], [189, 167], [183, 159], [182, 153], [177, 154], [177, 150], [173, 148], [174, 141], [168, 141], [171, 136], [169, 130], [164, 128], [159, 126], [153, 128], [147, 125], [140, 127], [138, 121], [136, 124], [127, 121], [127, 109], [123, 106], [133, 106], [133, 99], [136, 98], [136, 92], [127, 85], [127, 81], [123, 81], [121, 71], [110, 71], [106, 79], [91, 85], [89, 88], [85, 84], [80, 87], [85, 95], [82, 99], [78, 96], [76, 99], [71, 100], [71, 103], [80, 106], [88, 118], [96, 143], [99, 160], [106, 161], [104, 165], [100, 163], [105, 191], [105, 202], [109, 204], [111, 199], [117, 192], [121, 178]]]\n\t\t\t},\n\t\t\t'properties': {\n\t\t\t\t'name': 'Aquitaine',\n\t\t\t\t'wiki': 'https:\/\/fr.wikipedia.org\/wiki\/Aquitaine_(ancienne_r%C3%A9gion)'\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\t'type': 'Feature',\n\t\t\t'geometry': {\n\t\t\t\t'type': 'Polygon',\n\t\t\t\t'coordinates': [[[179, 57], [186, 58], [189, 56], [188, 52], [193, 50], [205, 59], [203, 62], [199, 61], [195, 66], [199, 70], [199, 77], [192, 84], [192, 91], [196, 91], [197, 94], [201, 92], [204, 94], [211, 90], [212, 94], [221, 91], [226, 94], [223, 100], [228, 102], [232, 100], [238, 104], [241, 104], [244, 111], [248, 110], [251, 113], [251, 117], [256, 121], [251, 124], [254, 127], [245, 130], [245, 144], [242, 149], [241, 156], [238, 156], [233, 166], [225, 150], [212, 152], [213, 159], [209, 161], [210, 167], [189, 167], [183, 159], [182, 153], [177, 154], [177, 150], [173, 148], [174, 141], [168, 141], [171, 136], [169, 130], [164, 128], [159, 126], [153, 128], [147, 125], [140, 127], [138, 121], [136, 124], [127, 121], [127, 109], [123, 106], [133, 106], [133, 99], [136, 98], [136, 92], [127, 85], [127, 81], [123, 81], [121, 71], [129, 66], [137, 66], [141, 62], [144, 65], [148, 65], [154, 62], [155, 70], [159, 70], [171, 63], [176, 63], [179, 57]]]\n\t\t\t},\n\t\t\t'properties': {\n\t\t\t\t'name': 'Midi-Pyr\u00e9n\u00e9es',\n\t\t\t\t'wiki': 'https:\/\/fr.wikipedia.org\/wiki\/Midi-Pyr%C3%A9n%C3%A9es'\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\t'type': 'Feature',\n\t\t\t'geometry': {\n\t\t\t\t'type': 'Polygon',\n\t\t\t\t'coordinates': [[[193, 50], [205, 59], [203, 62], [199, 61], [195, 66], [199, 70], [199, 77], [192, 84], [192, 91], [196, 91], [197, 94], [201, 92], [204, 94], [211, 90], [212, 94], [221, 91], [226, 94], [223, 100], [228, 102], [232, 100], [238, 104], [241, 104], [244, 111], [248, 110], [251, 113], [251, 117], [256, 121], [251, 124], [254, 127], [245, 130], [245, 144], [242, 149], [246, 161], [252, 166], [256, 162], [257, 156], [261, 157], [262, 161], [263, 163], [265, 161], [265, 158], [271, 156], [275, 140], [279, 138], [279, 134], [286, 132], [288, 135], [292, 134], [292, 132], [302, 133], [299, 128], [305, 121], [305, 115], [297, 110], [296, 102], [291, 102], [291, 98], [285, 97], [285, 92], [279, 92], [277, 97], [272, 96], [263, 87], [261, 87], [253, 83], [248, 83], [242, 78], [238, 70], [238, 53], [244, 47], [241, 44], [238, 46], [228, 46], [224, 40], [221, 45], [216, 40], [207, 47], [199, 42], [193, 50]]]\n\t\t\t},\n\t\t\t'properties': {\n\t\t\t\t'name': 'Languedoc-Roussillon',\n\t\t\t\t'wiki': 'https:\/\/fr.wikipedia.org\/wiki\/Languedoc-Roussillon'\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\t'type': 'Feature',\n\t\t\t'geometry': {\n\t\t\t\t'type': 'Polygon',\n\t\t\t\t'coordinates': [[[409, 72], [415, 72], [415, 59], [416, 55], [416, 36], [411, 32], [409, 10], [404, 5], [400, 11], [392, 12], [394, 14], [391, 17], [395, 22], [387, 24], [391, 28], [386, 29], [390, 35], [385, 36], [385, 42], [387, 43], [387, 49], [393, 57], [401, 58], [404, 61], [407, 59], [409, 72]]]\n\t\t\t},\n\t\t\t'properties': {\n\t\t\t\t'name': 'Corse',\n\t\t\t\t'wiki': 'https:\/\/fr.wikipedia.org\/wiki\/Collectivit%C3%A9_territoriale_de_Corse'\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\t'type': 'Feature',\n\t\t\t'geometry': {\n\t\t\t\t'type': 'Polygon',\n\t\t\t\t'coordinates': [[[376, 133], [389, 124], [405, 124], [407, 118], [402, 113], [398, 103], [389, 102], [383, 94], [379, 94], [374, 87], [370, 87], [366, 84], [371, 82], [366, 77], [360, 77], [358, 73], [350, 76], [350, 72], [342, 74], [342, 72], [335, 73], [331, 78], [321, 78], [318, 81], [321, 83], [317, 86], [311, 85], [306, 90], [304, 90], [302, 85], [295, 87], [291, 92], [285, 92], [285, 97], [291, 98], [291, 102], [296, 102], [297, 110], [305, 115], [305, 121], [299, 128], [302, 133], [307, 130], [317, 134], [314, 127], [318, 130], [326, 124], [329, 126], [332, 126], [335, 128], [331, 133], [324, 138], [327, 140], [334, 140], [334, 143], [330, 146], [333, 148], [337, 148], [341, 154], [352, 158], [357, 156], [357, 162], [352, 165], [352, 169], [359, 167], [368, 170], [375, 158], [381, 158], [381, 148], [378, 148], [374, 142], [378, 137], [376, 133]]]\n\t\t\t},\n\t\t\t'properties': {\n\t\t\t\t'name': 'Provence-Alpes-C\u00f4te d\\'Azur',\n\t\t\t\t'wiki': 'https:\/\/fr.wikipedia.org\/wiki\/Provence-Alpes-C%C3%B4te_d%27Azur'\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\t'type': 'Feature',\n\t\t\t'geometry': {\n\t\t\t\t'type': 'Polygon',\n\t\t\t\t'coordinates': [[[368, 170], [359, 167], [352, 169], [352, 165], [357, 162], [357, 156], [352, 158], [341, 154], [337, 148], [333, 148], [330, 146], [334, 143], [334, 140], [327, 140], [324, 138], [331, 133], [335, 128], [332, 126], [329, 126], [326, 124], [318, 130], [314, 127], [317, 134], [307, 130], [302, 133], [292, 132], [292, 134], [288, 135], [286, 132], [279, 134], [279, 138], [275, 140], [271, 156], [285, 161], [286, 165], [288, 166], [289, 169], [292, 169], [293, 175], [290, 182], [287, 181], [285, 185], [275, 183], [277, 190], [270, 203], [271, 207], [267, 211], [272, 216], [274, 227], [279, 224], [289, 223], [297, 230], [304, 226], [307, 229], [308, 239], [321, 239], [323, 235], [320, 233], [326, 226], [330, 229], [335, 226], [350, 235], [353, 227], [347, 222], [349, 219], [356, 223], [357, 230], [362, 232], [376, 233], [378, 224], [373, 223], [382, 214], [381, 207], [376, 205], [375, 200], [380, 196], [382, 188], [387, 185], [385, 182], [385, 174], [380, 174], [377, 170], [368, 170]]]\n\t\t\t},\n\t\t\t'properties': {\n\t\t\t\t'name': 'Rh\u00f4ne-Alpes',\n\t\t\t\t'wiki': 'https:\/\/fr.wikipedia.org\/wiki\/Rh%C3%B4ne-Alpes'\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\t'type': 'Feature',\n\t\t\t'geometry': {\n\t\t\t\t'type': 'Polygon',\n\t\t\t\t'coordinates': [[[350, 235], [335, 226], [330, 229], [326, 226], [320, 233], [323, 235], [321, 239], [322, 246], [318, 252], [324, 252], [318, 259], [328, 273], [329, 278], [327, 282], [331, 287], [327, 291], [331, 295], [334, 293], [336, 295], [336, 300], [342, 307], [351, 309], [352, 305], [360, 306], [364, 301], [366, 306], [373, 299], [379, 295], [379, 291], [382, 289], [382, 284], [378, 281], [382, 281], [383, 275], [363, 260], [361, 253], [354, 248], [354, 241], [350, 235]]]\n\t\t\t},\n\t\t\t'properties': {\n\t\t\t\t'name': 'France-Comt\u00e9',\n\t\t\t\t'wiki': 'https:\/\/fr.wikipedia.org\/wiki\/Franche-Comt%C3%A9'\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\t'type': 'Feature',\n\t\t\t'geometry': {\n\t\t\t\t'type': 'Polygon',\n\t\t\t\t'coordinates': [[[420, 355], [418, 347], [412, 344], [400, 312], [402, 308], [397, 297], [399, 290], [394, 283], [391, 283], [388, 281], [382, 284], [382, 289], [379, 291], [379, 295], [373, 299], [381, 311], [381, 318], [386, 324], [383, 325], [382, 333], [388, 339], [392, 345], [389, 347], [382, 345], [379, 351], [383, 358], [390, 351], [397, 354], [399, 360], [404, 360], [420, 355]]]\n\t\t\t},\n\t\t\t'properties': {\n\t\t\t\t'name': 'Alsace',\n\t\t\t\t'wiki': 'https:\/\/fr.wikipedia.org\/wiki\/R%C3%A9gion_Alsace'\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\t'type': 'Feature',\n\t\t\t'geometry': {\n\t\t\t\t'type': 'Polygon',\n\t\t\t\t'coordinates': [[[341, 383], [349, 377], [358, 380], [360, 378], [365, 378], [374, 366], [378, 369], [387, 363], [392, 366], [399, 365], [399, 360], [397, 354], [390, 351], [383, 358], [379, 351], [382, 345], [389, 347], [392, 345], [388, 339], [382, 333], [383, 325], [386, 324], [381, 318], [381, 311], [373, 299], [366, 306], [364, 301], [360, 306], [352, 305], [351, 309], [342, 307], [335, 313], [338, 316], [338, 322], [330, 324], [329, 330], [314, 340], [312, 347], [316, 347], [317, 357], [314, 359], [314, 366], [321, 382], [326, 380], [327, 382], [332, 382], [341, 383]]]\n\t\t\t},\n\t\t\t'properties': {\n\t\t\t\t'name': 'Lorraine',\n\t\t\t\t'wiki': 'https:\/\/fr.wikipedia.org\/wiki\/Lorraine_(ancienne_r%C3%A9gion_administrative)'\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\t'type': 'Feature',\n\t\t\t'geometry': {\n\t\t\t\t'type': 'Polygon',\n\t\t\t\t'coordinates': [[[295, 404], [294, 394], [290, 387], [287, 375], [273, 373], [276, 365], [272, 364], [272, 354], [266, 351], [268, 340], [263, 336], [263, 328], [267, 324], [267, 319], [273, 319], [277, 308], [286, 308], [289, 305], [304, 312], [314, 302], [314, 295], [317, 292], [327, 291], [331, 295], [334, 293], [336, 295], [336, 300], [342, 307], [335, 313], [338, 316], [338, 322], [330, 324], [329, 330], [314, 340], [312, 347], [316, 347], [317, 357], [314, 359], [314, 366], [321, 382], [326, 380], [327, 382], [332, 382], [318, 395], [314, 395], [314, 412], [304, 405], [295, 404]]]\n\t\t\t},\n\t\t\t'properties': {\n\t\t\t\t'name': 'Champagne-Ardenne',\n\t\t\t\t'wiki': 'https:\/\/fr.wikipedia.org\/wiki\/Champagne-Ardenne'\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\t'type': 'Feature',\n\t\t\t'geometry': {\n\t\t\t\t'type': 'Polygon',\n\t\t\t\t'coordinates': [[[215, 447], [221, 451], [246, 455], [248, 443], [254, 439], [264, 442], [269, 429], [276, 429], [279, 420], [293, 418], [295, 404], [290, 400], [284, 405], [278, 403], [272, 405], [264, 402], [260, 408], [240, 411], [241, 415], [232, 415], [225, 421], [217, 423], [212, 425], [215, 447]]]\n\t\t\t},\n\t\t\t'properties': {\n\t\t\t\t'name': 'Nord-Pas-de-Calais',\n\t\t\t\t'wiki': 'https:\/\/fr.wikipedia.org\/wiki\/Nord-Pas-de-Calais'\n\t\t\t}\n\t\t}\n\t] \n}\n<\/pre><\/div>\n\n\n
    Notez pour chaque r\u00e9gion l’attribut ‘properties’. Les donn\u00e9es pr\u00e9sentes dans cet array servirons pour nos interactivit\u00e9s sur la carte.<\/p>\n\n\n\n
    En utilisant ce nouvel objet on obtient alors le r\u00e9sultat suivant :<\/p>\n\n\n\n
    \"R\u00e9gions,<\/figure><\/div>\n\n\n\n\n\n\n\n
    Ajout d’interactivit\u00e9s<\/h3>\n\n\n\n
    Maintenant, il reste \u00e0 rajouter de l’interactivit\u00e9 sur la carte.<\/p>\n\n\n\n
    Les interactivit\u00e9s que nous allons rajouter sont :<\/p>\n\n\n\n