Mapping with Svelte by rveciana

First example of a map drawn with Svelte and the d3 projections.

Check this blog post from Geoexamples for more explanations.

To test it, clone the standard svelte template by

npx degit sveltejs/template svelte-app
cd svelte-app

And copy the App.svelte file into the src directory.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />

    <title>Svelte app</title>

    <link rel="stylesheet" href="global.css" />
    <link rel="stylesheet" href="bundle.css" />

    <script defer src="bundle.js"></script>
  </head>

  <body></body>
</html>

App.svelte

<script>
  import { geoAlbers, geoPath } from "d3-geo";
  import { onMount } from "svelte";
  import { feature } from "topojson";
  let data;
  const projection = geoAlbers();
  const path = geoPath().projection(projection);

  onMount(async function() {
    const response = await fetch(
      "https://gist.githubusercontent.com/rveciana/a2a1c21ca1c71cd3ec116cc911e5fce9/raw/79564dfa2c56745ebd62f5655a6cc19d2cffa1ea/us.json"
    );
    const json = await response.json();
    const land = feature(json, json.objects.land);
    data = path(land);
  });
</script>

<style>
  svg {
    width: 960px;
    height: 500px;
  }
  .border {
    stroke: #444444;
    fill: #cccccc;
  }
</style>

<svg width="960" height="500">
  <path d={data} class="border" />
</svg>

bundle.css

svg.svelte-n55sv5 {
  width: 960px;
  height: 500px;
}
.border.svelte-n55sv5 {
  stroke: #444444;
  fill: #cccccc;
}

/*# sourceMappingURL=bundle.css.map */