Les élections municipales de 2026 seront un puissant microscope pour observer la vitalité politique de la France. Positionné un peu plus d’un an avant l’élection présidentielle, ce scrutin déterminera le nom des maires et des équipes municipales pour les six prochaines années. Mais les résultats des deux tours, prévus les 15 et 22 mars, permettront aussi de mesurer l’implantation du Rassemblement national, de faire un état des lieux du macronisme et de sonder les failles entre La France insoumise et le reste de la gauche, notamment le Parti socialiste et Les Ecologistes, à la tête de nombreuses villes.
Ces élections, cruciales politiquement, sont aussi passionnantes géographiquement et humainement, les Français ayant conservé un lien puissant avec leurs maires. Depuis des mois, les journalistes du Monde, correspondants, rédacteurs politiques, grands reporters et photographes ont sillonné les treize régions métropolitaines et plusieurs communes des outre-mer.
Objectif ? Aller à la rencontre des élus sortants, des nouveaux candidats, des opposants acharnés pour décrire les enjeux au plus près du terrain. A la veille du premier tour, Le Monde aura publié plus d’une centaine d’articles sur des petites bourgades, des villes moyennes et des métropoles, toutes représentatives d’un petit morceau de France et percutées par les grandes questions du XXIe siècle. Un aperçu édifiant des tensions et de la richesse de la vie démocratique du pays, à l’orée d’échéances électorales majeures.
`,
)
.join(« »);
const content = « ;
// Fill tooltip
tooltip
.select(« .tooltipcontent »)
.attr(« aria-label », « Articles politiquess »)
.html(content);
tooltip.select(« .tooltipcross »).on(« click », onMouseOut);
// Display and translate tooltip
console.log(« isMobile », isMobile);
if (isMobile) {
tooltip
.classed(« tooltip–hidden », false)
.style(« bottom », 0)
.style(« left », 0);
} else {
tooltip
.classed(« tooltip–hidden », false)
.style(« bottom », `${y}px`)
.style(« left », `${x}px`);
}
}
// Hide tooltip
function onMouseOut() {
// document.querySelector(‘canvas’).style.cursor= »unset »;
tooltip.classed(« tooltip–hidden », true);
}
const mapSettings = {
center: [4.7, 47],
zoom: 4,
minZoom: 4,
maxZoom: 12,
bearing: 0,
pitch: 0,
};
const themeUrl = isDark
? « https://assets-decodeurs.lemonde.fr/decodeurs/assets/protomaps/contrast_daltoniens_darkmode_fr_v0.0.5.json »
: « https://assets-decodeurs.lemonde.fr/decodeurs/assets/protomaps/contrast_daltoniens_fr_v0.0.5.json »;
const theme = await d3.json(themeUrl);
const map = new maplibregl.Map({
container: « carte_reportage_municipales »,
style: {
version: 8,
glyphs: « https://assets-decodeurs.lemonde.fr/decodeurs/assets/protomaps_fonts/{fontstack}/{range}.pbf »,
sources: {
protomaps: {
type: « vector »,
maxzoom: 15,
tiles: [
« https://prd-protomap.8084.lemonde.io/20240111/{z}/{x}/{y}.mvt »,
],
},
},
layers: theme,
},
center: mapSettings.center,
zoom: mapSettings.zoom,
minZoom: mapSettings.minZoom,
maxZoom: mapSettings.maxZoom,
//pitch: mapSettings.pitch,
//bearing: mapSettings.bearing,
//maxBounds: mapSettings.bounds
});
const deckOverlay = new deck.MapboxOverlay({
onClick: ({ x, y, object }) => {
if (object == undefined) return onMouseOut();
const mapContainer = document.getElementById(
« carte_reportage_municipales »,
);
const adjustedY = mapContainer.offsetHeight – y;
return (
object && fillTooltip({ x, y: adjustedY, object })
);
},
onDragStart: () => onMouseOut(),
onResize: () => onMouseOut(),
pickingRadius: isMobile ? 20 : 8,
});
// Add deck layer
map.addControl(deckOverlay);
let scale = new maplibregl.ScaleControl({
maxWidth: 80,
unit: « metric »,
});
map.addControl(scale);
// Enable exploration
map.boxZoom.disable();
map.keyboard.disable();
map.doubleClickZoom.disable();
map.touchZoomRotate.disable();
map.dragRotate.disable();
map.touchPitch.disable();
map.scrollZoom.enable();
map.boxZoom.enable();
map.touchZoomRotate.enable();
map.dragPan.enable();
map.fitBounds(boundsMetropole);
// map.flyTo({
// center: mapSettings.center,
// zoom: mapSettings.zoom + 0.2,
// speed: 0.25,
// curve: 0.2,
// });
map.addControl(
new maplibregl.NavigationControl({ showCompass: false }),
« top-left »,
);
// Render layerspolys
function render() {
const layerArticles = new deck.IconLayer({
id: « layerarticles »,
data: data,
getPosition: (d) => {
return [+d[« Longitude »], +d[« Latitude »], 0];
},
getColor: [0, 0, 0, 220],
mask: false,
getIcon: (d) => ({
url: isDark? »https://assets-decodeurs.lemonde.fr/decodeurs/assets/2410-gaza-1an-medias/marker-svg-test.svg »: »https://assets-decodeurs.lemonde.fr/decodeurs/medias/icon lemonde article/picto.png »,
width: 254,
height: 376,
anchorY: 376,
}),
getSize: 25,
pickable: true,
//parameters: {
// blendFunc: [1, 100], // GL.ONE, GL.ONE_MINUS_SRC_ALPHA
//},
loadOptions: {
imagebitmap: {
premultiplyAlpha: « none »,
},
},
});
deckOverlay.setProps({ layers: [layerArticles] });
}
// Render first view
render();
// Watch flyto
document
.querySelectorAll(« .carte_reportage_municipales__flytobtn »)
.forEach((btn) => {
btn.onclick = () => {
const place = btn.getAttribute(« data-attr »);
switch (place) {
case « reset »:
map.fitBounds(boundsMetropole, {
animate: false,
});
break;
case « reunion »:
map.fitBounds(boundsReunion, {
center: [55.558823, -21.109403],
animate: false,
});
break;
case « guyane »:
map.fitBounds(boundsGuyane, {
center: [-53.14191, 4.113978],
animate: false,
});
break;
case « antilles »:
map.fitBounds(boundsAntilles, {
center: [-61.235294, 15.125274],
animate: false,
});
break;
case « mayotte »:
map.fitBounds(boundsMayotte, {
center: [45.150284, -12.800424],
animate: false,
});
break;
case « polynesie »:
map.fitBounds(boundsPolynesie, {
animate: false,
});
break;
default:
map.fitBounds(boundsMetropole, {
animate: false,
});
break;
}
};
});
/* AUTOCOMPLETE*/
let max_n_to_display = 6;
let min_char_to_search = 1;
let format_to_search = slugify;
let no_results_message = « Aucun résultat avec cette recherche »;
const reset_func = () => {
};
const func_to_treat_result_donnees = (result) => {
map.flyTo({
center: [result[« Longitude »], result[« Latitude »]],
zoom: 10,
});
};
const dedupedData = Array.from(
new Set(data.map((d) => d[« Ville »].trim().toLowerCase())),
).map((ville) => {
return data.find((d) => d[« Ville »].trim().toLowerCase() === ville.trim().toLowerCase());
});
const get_text_in_data = (x) => x[« Ville »] + (x[« Département »]? ` (${x[« Département »]})`: « »);
autocomplete_decodeurs(
// L’id du lmui-search
« ecoles-pesticides-search »,
// Les données dans lesquelles chercher
dedupedData,
// Une fonction qui s’execute quand on sélectionne un item, elle prend en argument
// l’objet sélectionné
func_to_treat_result_donnees,
// Une fonction qui s’execute quand on désélectionne / reset
reset_func,
// Une fonction qui sélectionne le texte à chercher dans le tableau (optionnel si vos données
// ne sont que du texte)
get_text_in_data,
// Nombre de choix dans le autocomplete, par défaut 5
max_n_to_display,
// Nombre de lettres avant le déclenchement de l’autocomplete, par défaut 3
min_char_to_search,
// Une fonction qui normalise les input pour la recherche, par défaut slugify, c’est à dire que la casse
// et les accents sont ignorés
format_to_search,
// Texte à afficher si aucun resultat, par défaut « Aucun résultat avec cette recherche »
no_results_message,
);
}
}
// const INIT_DELAY = 2000; // 2 secondes
document.addEventListener(« DOMContentLoaded », () => {
initMap();
});
window.onresize = () => {
isMobile = window.innerWidth <= 600;
};
}
initViz();
