Displaying French TopoJSON data in Leaflet

Question

I am trying to display a TopoJSON file i took here : https://www.data.gouv.fr/en/datasets/contours-des-communes-de-france-simplifie-avec-regions-et-departement-doutre-mer-rapproches/#resources

In Leaflet, and I am having some troubles.

I followed this tutorial : http://bl.ocks.org/hpfast/2fb8de57c356d8c45ce511189eec5d6a

And tried different things, but got nothing.

I tried : displaying the data in qgis (it works) converting the file to EPSG:3857 saving to GeoJSON.

I stay in front of a blank map.

Edit: added relevant code

Here is the code i use : As advertised, the exact same as the tutorial i mentioned

    var map = L.map('map').setView([42.098115, 9.131013], 7);

    var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);

    var json_data;

    //extend Leaflet to create a GeoJSON layer from a TopoJSON file
    L.TopoJSON = L.GeoJSON.extend({
        addData: function (data) {
        var geojson, key;
        if (data.type === "Topology") {
            json_data = data;
            console.log(data.type);
            for (key in data.objects) {
                console.log(key);
                console.log(data.objects.hasOwnProperty(key));
                if (data.objects.hasOwnProperty(key)) {
                    console.log(data.objects[key]);
                    geojson = topojson.feature(data, data.objects[key]);
                    L.GeoJSON.prototype.addData.call(this, geojson);
                }
            }
            return this;
        }
        L.GeoJSON.prototype.addData.call(this, data);
        return this;
        }
    });

    L.topoJson = function(json, options) {
        return new L.TopoJSON(json, options);
    };

    //create an empty geojson layer
    //with a style and a popup on click
    var geojson = L.topoJson(null, {
        style: function(feature){
        return {
            color: "#000",
            opacity: 1,
            weight: 1,
            fillColor: '#35495d',
            fillOpacity: 0.8
        }
        },
        onEachFeature: function(feature, layer) {
        layer.bindPopup('<p>'+feature.properties.name+'</p>')
        }
    }).addTo(map);
    //fill: #317581;
    //define a function to get and parse geojson from URL
    async function getGeoData(url) {
        let response = await fetch(url);
        let data = await response.json();
        console.log(data)
        return data;
    }
    
    //fetch the geojson and add it to our geojson layer
    getGeoData('communes_corse_espg.topojson').then(data => geojson.addData(data));

the topojson file is local, but i see in the console and my various console.log that it was correctly loaded

Edit:

When i carefuly inspect my json, i see that the coordinates calculated by the topojs library are absolutely insane, like for instance 846981.4360214358, 6564107.359928558 While the ones from the demo are closer to 6.887404954866349, 53.29824733215662

Answer 1

Looking at the name of your downloaded TopoJSON a-com2022-topo-2154.json gave a hint that data CRS is EPSG:2154 (see https://epsg.io/2154). This means that you have to use proj4Leaflet plugin to either reproject your TopoJSON or find base map in that CRS an then use EPSG:2154 as map's CRS.

If your L.topoJson works, then reprojection can be done like this (link to proj4js library is needed: https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.8.0/proj4.js):

var crs2154 = "+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs";
var crsWGS84 = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs ";

var geojson = L.topoJson(null, {
  coordsToLatLng: function (coords) {
    var lngLat = proj4(crs2154, crsWGS84, coords);
    return [lngLat[1], lngLat[0]];
  },
 style: function(feature){
  return {
    color: "#000",
    opacity: 1,
    weight: 1,
    fillColor: '#35495d',
    fillOpacity: 0.8
  }
  },
  onEachFeature: function(feature, layer) {
    layer.bindPopup('<p>'+feature.properties.name+'</p>')
  }
}).addTo(map);

Just a warning that because of huge number of coordinates this is going to be slow.