Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Impossible to display a TopoJson map with Svelte

I’m trying to view a TopoJson map with Svelte (and D3), but I can’t figure out what’s wrong because there is absolutely nothing displayed and yet the console output does not return any errors.
Does anyone have a clue?

I put below the link of a Svelte repl and the code used :

https://svelte.dev/repl/1cadb042523d40a5803171b9d29367af?version=3.48.0

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

<script>
  import { geoAlbers, geoPath, geoAlbersUsa, } from "d3-geo";
  import { onMount } from "svelte";
  import * as topojson from 'topojson-client';
    import { draw } from 'svelte/transition';
  
  const path = geoPath().projection(null);
    let deps = [];
    let mesh;

onMount(async () => {
    const france = await fetch('https://gist.githubusercontent.com/Fralacticus/b6584c5865607300b2b5a0559ae47cbb/raw/8287c28f9a3eab4e3d1aa5f7e6181f064957c9de/deptopo.json'
    ).then(d => d.json());  
    console.log({ france });
    
    deps = topojson.feature(france, france.objects.dep).features;   
    console.log({ deps });
    
    mesh = topojson.mesh(france, france.objects.dep, (a, b) => a !== b);
});
</script>


<svg viewBox="0 0 910 610">
  <g fill="white" stroke="black">
        {#each deps as feature, i}
            <path d={path(feature)} />
        {/each} 
    </g>
</svg>

The map viewer and what it displays (this is the expected result):

https://mapshaper.org/?files=https://gist.githubusercontent.com/Fralacticus/b6584c5865607300b2b5a0559ae47cbb/raw/8287c28f9a3eab4e3d1aa5f7e6181f064957c9de/deptopo.json

Expected map

>Solution :

If you look at the data, you will see that the values are huge and just do not fit the current dimensions of the SVG. You can e.g. increase the viewBox to make the map show up:

<svg viewBox="0 0 10000000 10000000">
  <!-- stroke-width adjusted for large viewBox -->
  <g stroke="black" stroke-width="1000px" fill="none">

REPL

france.transform appears to contain some additional information, but I do not know how that is supposed to be used. You can always calculate the bounding box yourself from the data and there appears to be function for this: bbox.

If the large scale of the data points is maintained, the stroke-width needs to be very high (e.g. 1000px), because it gets scaled down by the viewBox.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading