block by HarryStevens 30daa8a31d0d444aceb55a58adedf7c8

Swiftmap Graticule

Full Screen

In Swiftmap, you can add a graticule with one line of code.

index.html

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        margin: 0;
      }
      #map {
        width: 100%;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <!-- Use d3-request to load a TopoJSON file. -->
    <script src="https://d3js.org/d3-collection.v1.min.js"></script>
    <script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
    <script src="https://d3js.org/d3-dsv.v1.min.js"></script>
    <script src="https://d3js.org/d3-request.v1.min.js"></script>

    <script src="https://unpkg.com/swiftmap@0.2.9/dist/swiftmap.min.js"></script>
    <script>
      d3.json("countries.json", ready);

      function ready (error, data){
        var map = swiftmap.map("#map")
          .graticule([18, 18])
          .projection("equirectangular")
          .layerPolygons(data)
            .fit()
            .drawPolygons();

        var colors = ["#66c2a5", "#fc8d62", "#8da0cb", "#e78ac3", "#a6d854", "#ffd92f"];
        map.layers[0].polygons
          .transition().duration(2000)
            .style("fill", (d, i) => colors[i % colors.length] );        

        window.onresize = () => map.resize();
      }
    </script>
  </body>
</html>