New composite border in es-atlas

The new version of es-atlas will incorporate the option to preproject the TopoJSON's. With this option a new object is included within the TopoJSON that lets you to draw a composition border for the Canary Islands as usual in this kind of maps.

<!DOCTYPE html>
<script src="https://unpkg.com/d3-composite-projections"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/topojson.v3.min.js"></script>
<svg></svg>
<script>
  const margin = { top: 20, right: 20, bottom: 20, left: 20 },
    width = window.innerWidth - margin.left - margin.right,
    height = width * 0.8 - margin.top - margin.bottom;

const svg = d3
    .select("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("municipalities.json")
    .then(es => {
      const projection = d3
        .geoIdentity()
        .reflectY(false)
        .fitSize(
          [width - margin.left - margin.right, height],
          topojson.feature(es, es.objects.border)
        );

const path = d3.geoPath(projection);

svg
        .datum(topojson.feature(es, es.objects.municipalities))
        .append("path")
        .attr("fill", "none")
        .attr("stroke", "black")
        .attr("d", path);

svg
        .append("path")
        .datum(topojson.feature(es, es.objects.composite_border))
        .attr("d", d => path(d))
        .attr("fill", "none")
        .attr("stroke", "black");
    })
    .catch(err => console.warn(err));
</script>

https://unpkg.com/d3-composite-projections

https://d3js.org/d3.v5.min.js

https://d3js.org/topojson.v3.min.js