Skip to main content
added 264 characters in body
Source Link
Orsu
  • 113
  • 5

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

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

added 2 characters in body; edited title
Source Link
TomazicM
  • 27k
  • 24
  • 31
  • 42

Displaying french topojsonFrench TopoJSON data in leafletLeaflet

I am trying to display a topojsonTopoJSON 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

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

Displaying french topojson data in leaflet

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

I tried : displaying the data in qgis (it works) converting the file to epsg3857 saving to geojson

Displaying French TopoJSON data in Leaflet

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

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

added 2618 characters in body
Source Link
Orsu
  • 113
  • 5

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: 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

deleted 25 characters in body
Source Link
TomazicM
  • 27k
  • 24
  • 31
  • 42
Loading
Source Link
Orsu
  • 113
  • 5
Loading