Remake de ma carte interactive avec OpenLayers

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.

Carte OpenLayers sans contrôles

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…

Coordonnées inversées

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 :

Régions, bons tracés

3 réflexions sur « Remake de ma carte interactive avec OpenLayers »

  1. Ping : Retour sur ma première carte interactive | Le Geek Communicant

  2. Ping : Carte interactive en SVG avec tooltip – Le Geek Communicant

  3. Ping : Carte interactive du métro de Paris avec Leaflet – Le Geek Communicant

Laisser un commentaire