Spain Atlas TopoJSON
This repository provides a simple script to generate TopoJSON files from the Spanish National Geographic Institute’s National Reference Geographic Equipment vector data.
Getting started
Clone or download the repository, start a terminal and run npm install in the folder. This command will download the shapefiles from the IGN, join them and convert them to TopoJSON.
If you need to make further adjustments (simplification, quantization) you can adjust the package.json config and run npm install again.
File Reference
# es/municipalities.json · Download
A TopoJSON which contains four objects: municipalities, provinces, autonomous regions and border. Every city, province and region has its corresponding National Statistics Institute identifier and name, so it's easy to get started.
# es.objects.municipalities
# es.objects.provinces
# es.objects.autonomous_regions
# es.objects.border
# es/provinces.json · Download
This file provides provinces and autonomous regions, to keep a smaller footprint on less detailed maps.
# es/autonomous_regions.json · Download
This file only provides autonomous regions, to keep a smaller footprint on less detailed maps.
Usage
To render the map I recommend using the geoConicConformalSpain projection created by Roger Veciana, included in d3-composite-projections. This projection ensures that the Canary Islands are painted closer to the mainland and include a border to mark the projection zone.
You can see an interactive example in this Observable notebook.
For the browser with d3-geo and SVG:
<!DOCTYPE html>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://d3js.org/topojson.v3.min.js"></script>
<script src="https://unpkg.com/d3-composite-projections@1.3.0"></script>
<script>
const svg = d3.select("svg");
const projection = d3.geoConicConformalSpain();
const path = d3.geoPath(projection);
d3.json("https://unpkg.com/es-atlas/es/municipalities.json")
.catch(err => console.warn(err))
.then(es => {
svg
.append('path')
.attr('d', path(topojson.mesh(es)))
.attr('fill', 'none')
.attr('stroke', 'black');
svg
.append('path')
.attr('d', projection.getCompositionBorders())
.attr('fill', 'none')
.attr('stroke', 'black');
})
</script>In Node (using d3-geo and node-canvas):
const fs = require('fs');
const d3_composite = require('d3-composite-projections');
const d3 = require('d3-geo');
const topojson = require('topojson-client');
const Canvas = require('canvas');
const es = require('./node_modules/es-atlas/es/municipalities.json');
const canvas = new Canvas(960, 500);
const context = canvas.getContext('2d');
const projection = d3_composite.geoConicConformalSpain();
const path = d3.geoPath(projection, context);
context.beginPath();
path(topojson.mesh(es));
context.stroke();
canvas.pngStream().pipe(fs.createWriteStream('preview.png'));Reference
# simplification
Removes points to reduce the file size. Set to 1e-4 by default.
# quantization
Removes information by reducing the precision of each coordinate. Set to 1e4 by default.
# autonomous_regions
Filters the result by the given autonomous region id separated by comma.
Data license
The shapefiles have a CC-BY 4.0 license. You need to accept the terms before using the files.
Inspiration
The original idea and implementation comes from Mike Bostock’s us-atlas and world-atlas.