1

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

5
  • Which file from cited resource are you using? I tried one (data.gouv.fr/fr/datasets/r/d993e112-848f-4446-b93b-0a9d5997c4a4) and it works as regular GeoJSON, not TopoJSON.
    – TomazicM
    Commented Jun 26, 2022 at 15:36
  • @TomazicM i used this one static.data.gouv.fr/resources/…
    – Orsu
    Commented Jun 26, 2022 at 15:43
  • 1
    What is CRS of your TopoJSON data? Leaflet expects standard GeoJSON CRS, which is EPSG:4326.
    – TomazicM
    Commented Jun 26, 2022 at 15:56
  • It was 4326. Thank you
    – Orsu
    Commented Jun 26, 2022 at 16:04
  • It is definitely not 4326, this is start of data: {"type":"Topology","arcs":[[[105863,72333]. This is much too big for 4326.
    – TomazicM
    Commented Jun 26, 2022 at 16:07

1 Answer 1

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.

1
  • hey, in the end i opened my json in qgis and saved it as ws84,but i'll write your answer as "the answer". Thanks!
    – Orsu
    Commented Jun 26, 2022 at 19:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.