Swiftmap Multi-Layer Map by HarryStevens

A remake of an earlier block, most of the work here is being done by Swiftmap. Swiftmap provides far greater notational efficiency, as well as the added benefit of making it trivial to resize the map in response to changes in the window’s dimensions.

index.html

<!DOCTYPE html>
<html>
  <head>
      <style>
        body {
          margin: 0;
        }
        .polygon-1 {
          fill: none;
          stroke: #000;
        }
        .label {
          text-shadow: 1px 1px 1px #fcfcfc, 1px 1px 1px #eee, 0 -1px 0 #fff, -1px 0 0 #fff;
        }
      </style>
  </head>
  <body>
      <!-- To load data, we use modules for d3-request & d3-queue -->
      <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://d3js.org/d3-queue.v3.min.js"></script>

      <script src="https://unpkg.com/swiftmap@0.2.7/dist/swiftmap.min.js"></script>
      <script>
        var map = swiftmap.map();

        d3.queue()
          .defer(d3.json, "ac.json")
          .defer(d3.json, "states.json")
          .await(ready);

        function ready(error, ac, states){
          if (error) throw error;

          map
            .layerPolygons(ac)
              .drawPolygons()
            .layerPolygons(states)
              .draw()
            .layerPoints(ac)
              .drawPoints()
              .drawLabels(d => d.properties.name, true);

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