JO 2024 : la carte des restrictions de circulation à Paris et en Ile-de-France, jour après jour (2024)

Les Décodeurs
Jeux olympiques de Paris 2024

ParRomain Imbach et Adel Miliani

Publié le 30 mai 2024 à 06h00, modifié le 30 mai 2024 à 14h34

Temps de Lecture 1 min.

Ajouter à vos sélections
Ajouter à vos sélections
Partager
- Partager sur Facebook
- Envoyer par e-mail
- Partager sur Linkedin

DécryptageVisualisez l’évolution des périmètres de sécurité mis en place à l’occasion des Jeux olympiques et paralympiques en région parisienne, du15juillet au 8septembre.

Cet été, touristes et habitants de la région parisienne seront contraints de vivre au rythme des Jeux olympiques (JO).

Etablis par la Préfecture de police de Paris, différents périmètres de sécurité restreignent la circulation à proximité des sites de compétition:

Le périmètre bleu: accès libre pour les piétons, cyclistes et trottinettes – y compris électriques –, mais la circulation motorisée sera soumise à un justificatif écrit «sous forme libre».

Le périmètre rouge: accès libre pour les piétons, cyclistes et trottinettes – y compris électriques –, mais la circulation motorisée nécessitera un laissez-passer numérique, réservé aux riverains et aux travailleurs, sous certaines conditions.

Le périmètre gris: également dénommé «SILT» (car issue de la loi «Sécurité intérieure et lutte contre le terrorisme»), il concerne les abords immédiats des sites d’épreuves des JO, sera réservé aux spectateurs munis de billets, aux personnes accréditées ou disposant d’un laissez-passer numérique.

LES RESTRICTIONS PRÉVUES POUR LES JEUX DE PARIS

Choisissez une date pour afficher les restrictions correspondantes

See Also

Tickets, Fares and Route Maps

Protomaps © OpenStreetMap

Source: Préfecture de Police,COJOP et RATP

`; content += ``; let peri; if (object.properties.TYPE_PERI == "silt") { peri = "de sécurité"; } else { peri = object.properties.TYPE_PERI; } if (horaire_a_retrouver === "00h00 à 23h59") { content += `

Périmètre ${peri} toute la journée le ${jourMois(daily_selected)}

`; } else if (horaire_a_retrouver === "00h00 à 13h00") { content += `

Périmètre ${peri} de 0h00 à 13h00 le ${jourMois(daily_selected)}

`; } else if (horaire_a_retrouver === "13h00 à 23h59") { content += `

Périmètre ${peri} de 13h00 à 23h59 le ${jourMois(daily_selected)}

`; } else if ( object.properties.NOM === "Cyclisme sur route" || object.properties.NOM === "Marathon" || object.properties.NOM === "Triathlon" ) { let heure_depart = parseInt(horaire_a_retrouver.substr(0, 2)); let minutes_depart = parseInt(horaire_a_retrouver.substr(3, 2)); let heure_fin = parseInt(horaire_a_retrouver.substr(8, 2)); let minutes_fin = parseInt(horaire_a_retrouver.substr(11, 2)); // ça se passe 3h avant et 15 minutes après if (minutes_fin < 45) { if (minutes_depart == 0) { periode_restriction = `${ heure_depart - 3 }h0${minutes_depart} à ${heure_fin}h${ minutes_fin + 15 }`; } else { periode_restriction = `${ heure_depart - 3 }h${minutes_depart} à ${heure_fin}h${minutes_fin + 15}`; } } else { if (minutes_depart == 0) { periode_restriction = `${ heure_depart - 3 }h0${minutes_depart} à ${heure_fin + 1}h0${ 15 - (60 - minutes_fin) }`; } else { periode_restriction = `${ heure_depart - 3 }h${minutes_depart} à ${heure_fin + 1}h0${ 15 - (60 - minutes_fin) }`; } } content += `

Périmètre ${peri} de ${periode_restriction} le ${jourMois(daily_selected)}

`; } else { // ça se passe 2h30 avant et 1h après let heure_depart = parseInt(horaire_a_retrouver.substr(0, 2)); let minutes_depart = parseInt(horaire_a_retrouver.substr(3, 2)); let heure_fin = parseInt(horaire_a_retrouver.substr(8, 2)); let minutes_fin = parseInt(horaire_a_retrouver.substr(11, 2)); //si heure de fin = 23 if (heure_fin == 23) { heure_fin = -1; } if (minutes_depart > 30) { if (minutes_fin == 0) { periode_restriction = `${heure_depart - 2}h${ minutes_depart - 30 } à ${heure_fin + 1}h0${minutes_fin}`; } else { periode_restriction = `${heure_depart - 2}h${ minutes_depart - 30 } à ${heure_fin + 1}h${minutes_fin}`; } } if (minutes_depart == 30) { if (minutes_fin == 0) { periode_restriction = `${heure_depart - 2}h0${ minutes_depart - 30 } à ${heure_fin + 1}h0${minutes_fin}`; } else { periode_restriction = `${heure_depart - 2}h0${ minutes_depart - 30 } à ${heure_fin + 1}h${minutes_fin}`; } } else { if (minutes_fin == 0) { periode_restriction = `${heure_depart - 3}h${ 60 - (30 - minutes_depart) } à ${heure_fin + 1}h0${minutes_fin}`; } else { periode_restriction = `${heure_depart - 3}h${ 60 - (30 - minutes_depart) } à ${heure_fin + 1}h${minutes_fin}`; } } content += `

Périmètre ${peri} de ${periode_restriction} le ${jourMois(daily_selected)}

`; } } else { //retrouver l'ID de la station et son nom let nomStation = object.properties.nom; let idStation = object.properties.id; content += `

${object.properties.nom}

`; content += ``; //retrouver le message // On en est là let message_a_retrouver; for (let station of dataStations) { if ( idStation == station.stationId.toString() && anneeMoisJour(daily_selected) == station.date ) { content += `

${station.message}

`; } } } // Fill tooltip tooltip .select(".tooltipcontent") .attr("aria-label", "Zone inondée") .html(content); // Display and translate tooltip if (isMobile) { tooltip .style("display", "block") .transition() .duration(200) .style("transform", "translate(0, -100px)"); } else { tooltip.style("display", "block"); } if (!isMobile) { tooltip.style( "transform", `translate(` + `calc(-50% + ${x}px),` + `calc(-100% + ${y - 6}px))` ); } } // Hide tooltip function onMouseOut() { document.querySelector("canvas").style.cursor = "unset"; if (isMobile) { tooltip .transition() .duration(200) .style("transform", "translate(0, 100px)") .transition() .delay(200) .style("display", "none"); } else { tooltip.style("display", "none"); } } const mapSettings = { center: [2.3540166974033485, 48.856728936168736], zoom: 9, minZoom: 8, maxZoom: 15.9, bearing: 0, pitch: 0, bounds: [ [1.64, 48.52], [3.05, 49.276], ], }; const theme = await d3.json( "https://assets-decodeurs.lemonde.fr/decodeurs/assets/protomaps/contrast_light_fr_v0.0.3.json" ); const restrictionsJoProtoMap = new maplibregl.Map({ container: "map_example", style: { version: 8, glyphs: "https://cdn.protomaps.com/fonts/pbf/{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({ onHover: ({ x, y, object }) => { if (object == undefined) return onMouseOut(); return object && fillTooltip({ x, y, object }); }, pickingRadius: isMobile ? 20 : 5, }); // Add deck layer restrictionsJoProtoMap.addControl(deckOverlay); let scale = new maplibregl.ScaleControl({ maxWidth: 80, unit: "metric", }); restrictionsJoProtoMap.addControl(scale); // Enable exploration restrictionsJoProtoMap.boxZoom.disable(); restrictionsJoProtoMap.keyboard.disable(); restrictionsJoProtoMap.doubleClickZoom.disable(); restrictionsJoProtoMap.touchZoomRotate.disable(); restrictionsJoProtoMap.dragRotate.disable(); restrictionsJoProtoMap.touchPitch.disable(); restrictionsJoProtoMap.scrollZoom.enable(); restrictionsJoProtoMap.boxZoom.enable(); restrictionsJoProtoMap.touchZoomRotate.enable(); restrictionsJoProtoMap.dragPan.enable(); restrictionsJoProtoMap.flyTo({ center: mapSettings.center, zoom: mapSettings.zoom + 0.2, speed: 0.2, curve: 0.2, }); restrictionsJoProtoMap.addControl( new maplibregl.NavigationControl({ showCompass: false }), "top-left" ); const layerVisibility = { all: true, }; const daily_min = d3.min(daily, (d) => d.Date); const daily_max = d3.max(daily, (d) => d.Date); let daily_selected = parseTime("26/07/2024"); const sliderRange = d3 .sliderBottom() .min(daily_min) .max(daily_max) .width(300) .tickFormat(d3.timeFormat("%d/%m")) .ticks(5) .default(daily_selected) //.domain([parseTime("26/07/2024"), parseTime("11/08/2024")]) .fill("none"); const gRange = d3 .select("#slider-range") .append("svg") .attr("class", "slidergRange") .append("g") .attr("transform", "translate(" + "12" + ",30)"); const xScale = d3 .scaleTime() .domain([daily_min, daily_max]) .range([0, 300]); const group_slider_jo = gRange .append("g") .attr("class", "slider-range_jo") .attr( "transform", `translate(${xScale(new Date(2024, 6, 26))}, -2)` ); group_slider_jo .append("rect") .attr( "width", xScale(new Date(2024, 7, 11)) - xScale(new Date(2024, 6, 26)) ) .attr("height", 4); group_slider_jo .append("text") .text("JEUX OLYMPIQUES") .attr("id", "label_slide_jo") .attr("class", "leg_label slider_text_label periode_slider") .attr("y", "-8") .attr( "x", (xScale(new Date(2024, 7, 11)) - xScale(new Date(2024, 6, 26))) / 2 ); const group_slider_jp = gRange .append("g") .attr("class", "slider-range_jo") .attr( "transform", `translate(${xScale(new Date(2024, 7, 28))}, -2)` ); group_slider_jp .append("rect") .attr( "width", xScale(new Date(2024, 8, 8)) - xScale(new Date(2024, 7, 28)) ) .attr("height", 4); group_slider_jp .append("text") .text("JEUX PARALYMPIQUES") .attr("id", "label_slide_jp") .attr("class", "leg_label slider_text_label") .attr("y", "-8") .attr( "x", (xScale(new Date(2024, 8, 8)) - xScale(new Date(2024, 7, 28))) / 2 ); gRange.call(sliderRange); sliderRange.on("onchange", (val) => { const date_formatted = d3.timeFormat("%d/%m/%Y")(val); const data_date = new_daily[d3.timeFormat("%d/%m/%Y")(val)]; daily_selected = val; render(daily_selected); fillLegend(daily_selected); //dans le slider, mettre les textes en bold si on est dans la période var typo_jo_selected = document.querySelector("#label_slide_jo"); var typo_jp_selected = document.querySelector("#label_slide_jp"); typo_jo_selected.classList.remove("periode_slider"); typo_jp_selected.classList.remove("periode_slider"); if ( daily_selected < parseTime("12/08/2024") && daily_selected > parseTime("26/07/2024") ) { // ajouter classe periode_slider à l'objet label_slide_jo typo_jo_selected.classList.add("periode_slider"); } else if ( daily_selected < parseTime("09/09/2024") && daily_selected > parseTime("27/08/2024") ) { // ajouter classe periode_slider à l'objet label_slide_jp typo_jp_selected.classList.add("periode_slider"); } }); // function fillLegend(daily_selected) { const container = document.querySelector(".legend_choices"); container.innerHTML = ""; for (const [key, value] of Object.entries(LEGEND_ITEMS)) { if (key === "Périmètre silt") { container.innerHTML += `

${key}

`; } else { container.innerHTML += `

${key}

`; } } if ( daily_selected < parseTime("27/07/2024") && daily_selected > parseTime("18/07/2024") ) { const container = document.querySelector(".legend_choices"); container.innerHTML += `

Pont neutralisé

`; } const containerStations = document.querySelector(".legend_stations"); containerStations.innerHTML = `

Station fermée (détail au survol)

`; } // Render layers function function render(daily_selected) { const date_formatted = d3.timeFormat("%d/%m/%Y")(daily_selected); const date_reformatted = d3.timeFormat("%Y/%m/%d")(daily_selected); const data_date = new_daily[d3.timeFormat("%d/%m/%Y")(daily_selected)]; let perimetres_a_afficher = []; let stations_a_afficher = []; // Remplissage du programme du jour sous la carte let daily_programme_container = document.querySelector( "#resultat-daily-selected" ); daily_programme_container.innerHTML = ""; let content = `

HORAIRE DES DIFFÉRENTS LIEUX

${ dicoJour[d3.timeFormat("%d")(daily_selected)] } ${dicoMois[d3.timeFormat("%B")(daily_selected)]}

${site_row.Nom} : ${heure}

`; daily_programme_container.innerHTML = content; let filteredFeatures = data.features .filter((d) => { return perimetres_a_afficher.includes(d.properties.file_path); }) .sort((a, b) => { const order = { bleu: 1, rouge: 2, silt: 3, "ferm\u00e9": 4 }; return ( order[a.properties.TYPE_PERI] - order[b.properties.TYPE_PERI] ); }); let filteredData = { type: "FeatureCollection", features: filteredFeatures, }; //rechercher l'ID des stations qui sont fermées le jourJ for (let station of dataStations) { if (station.date == date_reformatted) { stations_a_afficher.push(station.stationId.toString()); } } //filtrer le geojson des stations avec les ID récupérés let filteredStation = geoStations.features.filter((d) => { return stations_a_afficher.includes(d.properties.id); }); //on affiche toutes les stations let AllfilteredStations = { type: "FeatureCollection", features: filteredStation, }; const layerRestrictions = new deck.GeoJsonLayer({ id: "layer-restrictions", data: filteredData, pickable: true, stroked: false, filled: true, extruded: false, getFillColor: (d) => { const restriction = d.properties.TYPE_PERI; return COLORS_ALL[restriction]; }, autoHighlight: true, highlightColor: [225, 225, 225, 128], getLineWidth: 1, getElevation: 0, }); const layerStations = new deck.GeoJsonLayer({ id: "layer-stations", data: AllfilteredStations, pickable: true, stroked: true, filled: true, extruded: false, getFillColor: [255, 255, 255], // getFillColor: (d) => { // const restriction = d.properties.TYPE_PERI; // return COLORS_ALL[restriction]; // }, autoHighlight: true, highlightColor: [225, 225, 225, 128], getLineWidth: 1, lineWidthUnits: "pixels", getLineColor: [0, 0, 0], getElevation: 0, getPointRadius: 1.5, pointRadiusUnits: "pixels", pointRadiusScale: 2, }); //const layers = [layerRestrictions]; const layers = [layerRestrictions, layerStations]; //const layers = [layerStations]; deckOverlay.setProps({ layers }); } // Render first view render(daily_selected); } } window.onload = () => { initMap(); setTimeout(function () { isMobile = document.querySelector(".map_example_container").offsetWidth <= 600 ? true : false; }, 1000); }; window.onresize = () => { isMobile = document.querySelector(".map_example_container").offsetWidth <= 600; };

Quand ces règles entreront-elles en vigueur?

Avant même les épreuves, la préparation de la cérémonie d’ouverture impliquera la mise en place d’un large périmètre de sécurité englobant la Seine une semaine avant l’ouverture officielle des Jeux.

Pendant les JO, les règles de circulation entrent en vigueur deux heures et demie avant le début de la première épreuve sur un site et sont levées une heure après la fin de la dernière – hormis pour les compétitions sur routede disciplines comme le cyclisme, le triathlon et le marathon, où les périmètres seront alors mis en place trois heures avant le départ des courses et levés un quart d’heure après le passage du dernier concurrent.

Lire la synthèse | JO 2024: les questions pratiques sur les déplacements àParis, à pied, en métro, en voiture…

Nous avons établi une carte des restrictions jour par jour à partir des périmètres de la Préfecture de police de Paris et du calendrier mis à disposition par le Comité d’organisation des Jeux olympiques et paralympiques (Cojop). A la fin du mois de mai, les périmètres associés àcertaines épreuves (marche, marathon, natation ou paratriathlon) n’avaient pas encore été donnés par la Préfecture.

Des incohérences dans les cartes diffusées par la préfecture et le ministère

Afin de réaliser la carte interactive des restrictions de circulation, nous avons contacté la Préfecture de police de Paris (PP), pour obtenir le dessin précis des périmètres concernés. Il n’est pas mis à disposition dans un format numérique géoréférencé librement accessible et réutilisable, et n’est diffusé que sous forme d’image de mauvaise qualité, sur laquelle il est difficile de distinguer les limites des trois périmètres. La PP nous a pourtant assuré que ces cartes ont valeur juridique.

Sur le portail «Anticiper les jeux», le ministère des transports publie une carte qui offre une granularité supplémentaire par rapport aux documents de la PP puisqu’elle détaille heure par heure les restrictions déployées. Mais celle-ci présente également des lacunes.

Nous avons relevé des imprécisions dans le tracé. Par exemple, le périmètre «SILT», le plus restrictif, est approximatif sur le quai des Grands-Augustins (6^earrondissem*nt de Paris): il englobe certains immeubles, mais pas d’autres bâtiments voisins. Il est donc difficile pour les administrés de savoir dans quel périmètre se trouve leur logement, bureau ou commerce – donc de savoir s’ils doivent demander un laissez-passer numérique pour circuler.

Les cartes diffusées par la PP et celles du ministère sont censées avoir la même source, mais présentent des incohérences. Pour le cyclisme sur route, la première ne fait pas figurer de périmètre bleu, alors que la seconde en comporte un. Pour certaines épreuves sur route (marathon et cyclisme), les périmètres du ministère sont plus larges que ceux dessinés par la PP.

Enfin, à deux mois des Jeux, ni les cartes de la PP ni celles du ministère des transports n’ont diffusé les restrictions de circulation de plusieurs événements, comme les épreuves de marche, de natation en eaux libres, de paratriathlon ou encore des cérémonies des Jeux paralympiques.

Interrogée depuis début mai à propos de ces imprécisions et incohérences, la PP n’a pas encore apporté de réponse détaillée au Monde, en expliquant qu’elle attendait «la transmission des cartes au format vectoriel par le service en charge de les concevoir». En attendant, pour dessiner notre carte, nous avons donc croisé plusieurs sources:

le site Cartodesjo, qui a publié des tracés en open data;
les versions les plus zoomées du site Anticiperlesjeux;
les informations du Comité d’organisation des Jeux olympiques et paralympiques sur les horaires des épreuves.

Nous n’avons pas fait figurer les bâtiments qui n’accueillent pas de compétitions et qui ne sont pas associés à des périmètres de restriction (rouges ou bleus) sur la voie publique – bâtiment presse, centre d’entraînement, voir le détail complet ici. La préfecture nous a assuré qu’un arrêté précisant par écrit les restrictions rue par rue était en cours de préparation – nous le prendrons en compte pour préciser notre tracé.