Désactivation des contrôles et interactions
Mais, avec ce code, les interactions (zoom avec la molette de la souris, déplacement de la carte au clic de la souris) et les contrôles (boutons + et -) basiques d’une carte restent actifs.
Pour désactiver ces contrôles et interactions, on va préciser les attributs « interactions » et « controls » de notre map :
var map = new ol.Map({
layers: [
new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'lien_vers_votre_image',
projection: projection,
imageExtent: extent
})
})
],
target: 'map',
view: new ol.View({
projection: projection,
center: ol.extent.getCenter(extent),
resolution: 1
}),
interactions: ol.interaction.defaults({
altShiftDragRotate: false, // rotation de la carte
doubleClickZoom: false, // zoom au double-clic
mouseWheelZoom: false, // zoom avec la molette de la souris
shiftDragZoom: false, // zoom avec déplacement souris + Shift
dragPan: false // déplacement avec souris
}),
controls:[] // aucun contrôle
});
On obtient alors une carte sans contrôles et complètement statique.
Ajout des régions cliquables
Pour ajouter les régions cliquables, on va rajouter à la carte une couche vectorielle.
Disposant déjà des coordonnées des différentes régions dans le mapping HTML, on va utiliser celles-ci dans un objet GeoJSON.
Avec la magie des expressions régulière dans mon éditeur de texte, je me suis rapidement retrouvé avec un objet GeoJSON correspondant à une région (dans ce cas, l’Île-de-France).
var geojsonObject = {
'type': 'FeatureCollection',
'features': [{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'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]]]
}
}]
};
Il suffit ensuite d’effectivement rajouter la couche vectorielle à notre carte :
var map = new ol.Map({
layers: [
new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'lien_vers_votre_image',
projection: projection,
imageExtent: extent
})
}),
new ol.layer.Vector({
source: new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
})
})
],
target: 'map',
view: new ol.View({
projection: projection,
center: ol.extent.getCenter(extent),
resolution: 1
}),
interactions: ol.interaction.defaults({
altShiftDragRotate: false,
doubleClickZoom: false,
mouseWheelZoom: false,
shiftDragZoom: false,
dragPan: false
}),
controls:[]
});
Et là, c’est le drame…
La région est bien tracée, mais inversée.
Au début j’ai été surpris, mais après quelques recherches en ligne, je me suis vite aperçu d’où venait le problème.
La raison de cette inversion viens d’une différence d’origine du repère sur l’axe Y (vertical). Dans les images, l’origine du repère se situe en haut à gauche, alors que pour les coordonnées géographiques, le repère se trouve en bas à gauche.
Pour inverser les coordonnées, rien de plus simple. Les coordonnées Y actuelles doivent être remplacées par la hauteur de l’image (ici, 463) – la coordonnée actuelle.
Après transformations par expressions régulières et quelques copier-coller entre l’éditeur de texte et un tableur, on se retrouve avec l’objet GeoJSON suivant :
var geojsonObject = {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'geometry' : {
'type': 'Polygon',
'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]]]
},
'properties': {
'name': 'Île-de-France',
'wiki': 'https://fr.wikipedia.org/wiki/%C3%8Ele-de-France'
}
},
{
'type': 'Feature',
'geometry' : {
'type': 'Polygon',
'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]]]
},
'properties': {
'name': 'Picardie',
'wiki': 'https://fr.wikipedia.org/wiki/Picardie_(ancienne_r%C3%A9gion_administrative)'
}
},
{
'type': 'Feature',
'geometry' : {
'type': 'Polygon',
'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]]]
},
'properties': {
'name': 'Haute-Normandie',
'wiki': 'https://fr.wikipedia.org/wiki/Haute-Normandie'
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'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]]]
},
'properties': {
'name': 'Basse-Normandie',
'wiki': 'https://fr.wikipedia.org/wiki/Basse-Normandie'
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'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]]]
},
'properties': {
'name': 'Bretagne',
'wiki': 'https://fr.wikipedia.org/wiki/R%C3%A9gion_Bretagne'
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'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]]]
},
'properties': {
'name': 'Pays de la Loire',
'wiki': 'https://fr.wikipedia.org/wiki/Pays_de_la_Loire'
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'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]]]
},
'properties': {
'name': 'Centre',
'wiki': 'https://fr.wikipedia.org/wiki/Centre-Val_de_Loire'
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'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]]]
},
'properties': {
'name': 'Bourgogne',
'wiki': 'https://fr.wikipedia.org/wiki/Bourgogne_(ancienne_r%C3%A9gion_administrative)'
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'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]]]
},
'properties': {
'name': 'Poitou-Charentes',
'wiki': 'https://fr.wikipedia.org/wiki/Poitou-Charentes'
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'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]]]
},
'properties': {
'name': 'Limousin',
'wiki': 'https://fr.wikipedia.org/wiki/Limousin_(ancienne_r%C3%A9gion_administrative)'
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'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]]]
},
'properties': {
'name': 'Auvergne',
'wiki': 'https://fr.wikipedia.org/wiki/Auvergne'
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'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]]]
},
'properties': {
'name': 'Aquitaine',
'wiki': 'https://fr.wikipedia.org/wiki/Aquitaine_(ancienne_r%C3%A9gion)'
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'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]]]
},
'properties': {
'name': 'Midi-Pyrénées',
'wiki': 'https://fr.wikipedia.org/wiki/Midi-Pyr%C3%A9n%C3%A9es'
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'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]]]
},
'properties': {
'name': 'Languedoc-Roussillon',
'wiki': 'https://fr.wikipedia.org/wiki/Languedoc-Roussillon'
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'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]]]
},
'properties': {
'name': 'Corse',
'wiki': 'https://fr.wikipedia.org/wiki/Collectivit%C3%A9_territoriale_de_Corse'
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'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]]]
},
'properties': {
'name': 'Provence-Alpes-Côte d\'Azur',
'wiki': 'https://fr.wikipedia.org/wiki/Provence-Alpes-C%C3%B4te_d%27Azur'
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'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]]]
},
'properties': {
'name': 'Rhône-Alpes',
'wiki': 'https://fr.wikipedia.org/wiki/Rh%C3%B4ne-Alpes'
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'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]]]
},
'properties': {
'name': 'France-Comté',
'wiki': 'https://fr.wikipedia.org/wiki/Franche-Comt%C3%A9'
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'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]]]
},
'properties': {
'name': 'Alsace',
'wiki': 'https://fr.wikipedia.org/wiki/R%C3%A9gion_Alsace'
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'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]]]
},
'properties': {
'name': 'Lorraine',
'wiki': 'https://fr.wikipedia.org/wiki/Lorraine_(ancienne_r%C3%A9gion_administrative)'
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'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]]]
},
'properties': {
'name': 'Champagne-Ardenne',
'wiki': 'https://fr.wikipedia.org/wiki/Champagne-Ardenne'
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'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]]]
},
'properties': {
'name': 'Nord-Pas-de-Calais',
'wiki': 'https://fr.wikipedia.org/wiki/Nord-Pas-de-Calais'
}
}
]
}
Notez pour chaque région l’attribut ‘properties’. Les données présentes dans cet array servirons pour nos interactivités sur la carte.
En utilisant ce nouvel objet on obtient alors le résultat suivant :
