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

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
    Jun 26 at 19:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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