Swiss map does not fit in leaflet

[mikepziegler]

I want to add a layer with the map of the canton "Thurgau". I am using the code from https://gist.github.com/zross/11186669, which does display the state of california. This is the my version of the javascript code. I have changed the variables according to the topojson "tg-municipalities-lakes.json".

`var map = new L.Map("map", {center: [37.8, -96.9], zoom: 1})
.addLayer(new L.TileLayer("http:https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"));

var svg = d3.select(map.getPanes().overlayPane).append("svg"),
    g = svg.append("g").attr("class", "leaflet-zoom-hide");



d3.json("tg-municipalities-lakes.json", function(error, tg) {
    if (error) throw error;

    tg = topojson.feature(tg, tg.objects.municipalities);
    var transform = d3.geo.transform({point: projectPoint}),
        path = d3.geo.path().projection(transform);

    var feature = g.selectAll("path")
        .data(tg.features)
        .enter().append("path");

    map.on("viewreset", reset);
    reset();
    function reset() {
        var bounds = path.bounds(tg),
            topLeft = bounds[0],
            bottomRight = bounds[1];

        svg.attr("width", bottomRight[0] - topLeft[0])
            .attr("height", bottomRight[1] - topLeft[1])
            .style("left", topLeft[0] + "px")
            .style("top", topLeft[1] + "px");

        g.attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")");
        console.log(bottomRight)
        console.log(topLeft)


        feature.attr("d", path);
    }

    function projectPoint(x, y) {
        var point = map.latLngToLayerPoint(new L.LatLng(y, x));
        this.stream.point(point.x, point.y);
    }
});`

First, it did not display the d3.js layer. But after that I am playing with the scale and translate of the json file and tested a lot of variants. The latest version of the json file is:

"transform":{"scale":[0.0108,0.0045],"translate":[1840,4700]}

and

function projectPoint(x, y) {
        var point = map.latLngToLayerPoint(new L.LatLng((y / 1000) + 42.675, (x / 1000) + 6.825));
        this.stream.point(point.x, point.y);
}

Currently it looks like this:

As you can see, the d3 map does not fit in well. How can I place "tg-municipalities-lakes.json" on the openstreetmap easily without making any gaps?

[jstcki]

By default, the generated TopoJSON uses a different coordinate system than Leaflet. Set REPROJECT=true, so they have the same coordinate system.

See https://github.com/interactivethings/swiss-maps/blob/master/README.md#projections-and-dimensions and https://github.com/interactivethings/swiss-maps/blob/master/README.md#reproject-to-spherical-coordinates in particular.

[mikepziegler]

Oh my god, thank you for your help. I forgot to include the reprojection when I typed make topo/tg-municipalities-lakes.json in the console.

[mikepziegler]

Oh my god, thank you for your help. I forgot to include the reprojection when I typed make topo/tg-municipalities-lakes.json.