I’ve mentioned Kartograph before. It’s a framework for building interactive map applications without Google Maps or any other mapping service. It was created with the needs of designers and data journalists in mind.

For the past months I’ve been working on a project involving semi-schematic rendering of rivers on a map, and the logical choice for mapping was to use OpenLayers with WMS sources. This goes a very long way but has obvious shortcomings:

  • Lots of parts: postgis, geoserver, openlayers, custom code, caching, 3rd party WMS
  • Makes a complicated technical stack
  • Lots of server side configuration
  • Interactivity is hard
  • Styling is possible but limited (graphs via Google Charts is as good as it gets?)
  • Too detailed (not every project needs to be able to zoom in to my backyard)

Kartograph seems to find a nice middle ground here:

As an experiment, I converted some shapefiles to WGS84 and loaded them using Kartograph. They need to be configured in config.json as such:

    "layers": {
        "pkb": {
            "class": "pkb",
            "src": "pkb.wgs.shp"	
        "ivm": {
            "class": "ivm",
            "src": "ivm.wgs.shp"
        "kms": {
            "class": "kms",
            "src": "kms.wgs.shp"
        "nederland": {
            "src": "NLD_adm3.shp"
    "bounds": {
        "mode": "bbox", 
        "data": [3.18,50.7,7.30,53.6]

Next, I wrote a basic stylesheet:

.pkb {
    stroke-width: 2px;
    fill: #1e5799;
.kms {
    stroke-width: 4px;
    fill: #ccc;

Then I ran:

$ kartograph -s style.css config.json -o pkb.svg

The resulting SVG file can be loaded using kartograph.js Demo here (not simplified, so takes a while)