Integrate Swiss map with latitude-longitude locations in D3

Some official Swiss maps from swisstopo use a somewhat exotic coordinate system called CH1903, in which the coordinates are already projected: locations in this system are specified as 2D coordinates. Most geographical APIs on the web use a latitude and a longitude to represent the position of a point on the globe, in the standard spherical coordinate system WGS84. Therefore, if you want to integrate geodata from other APIs with official swisstopo maps, you need to project the maps back to spherical coordinates.

This project gives a minimal example of integrating regular latitudes/longitudes locations in WGS84, e.g. obtained from an external geo API, into a Swiss map, in D3.

Demo http://evequoz.name/opendata/valais-map-latlon/ (actually only the canton of Valais and 3 cities defined in regular latitudes-longitudes coordinates)

Generating the maps in spherical coordinates

First, get this nice project. It lets you generate Swiss maps in TopoJSON from original swisstopo geodata. By default, it generates already projected maps. They are fine if you are using nothing else and you are not trying to embed geographical data from other sources (like Google Geocoding API, Leaflet,...) that use spherical coordinates.

If you want to combine your Swiss map with external APIs, you will have to reproject it to spherical coordinates. Luckily, you can do this using the above mentioned project by simply running

make clean
make topo/vs-municipalities.json REPROJECT=true

(this example generates the municipalities boundaries in the canton of Valais)

Displaying the maps in D3 and integrating locations in spherical coordinates

The example code you'll find in index.html is pretty straightforward. On top of the map generated as described above, three red dots are added at the location of three cities specified in spherical coordinates [latitude, longitude]. There are two tricks to understand, though. First, your map is in spherical coordinates, therefore, you need to project it to 2D when you draw it, and make sure the paths from the TopoJSON file containing your map gets projected, too.

    var projection = d3.geo.albers()
        .rotate([0, 0])
        .center([8.3, 46.8])   
        .scale(16000)          
        .translate([width / 2, height / 2])
        .precision(.1);
    var path = d3.geo.path()
      .projection(projection);

Second, the geolocations of the cities are in spherical coordinates. It is usual to have spherical coordinates as latitude first, then longitude.

coords = [latitude, longitude]

When projected, the two coordinates will be mapped to the x and y axes in 2D: the latitude (North-South) is actually an y coordinate, and the longitude (East-West) is an x coordinate. This is exactly what those two seeminlgy counterintuitive functions do:

    var x = function(coords) {
      return projection([coords[1],coords[0]])[0];
    }
    var y = function(coords) {
      return projection([coords[1],coords[0]])[1];
    }

Those functions are called later on when the cities are actually drawn on top of the map

    svg.selectAll("circle")
        .data(cities)
        .enter().append("circle")
        .attr("r", 5)
        .attr("cx", function(d){return x(d)})
        .attr("cy", function(d){return y(d)});

License

https://github.com/interactivethings/swiss-maps is under BSD License