As of a few weeks ago, it is now possible to add Mapbox Vector Tile (MVT) layers to JOSM. I have been playing around with these to learn how to apply basic styling to the layer. For this tutorial we will use a postcodes layer in Great Britain.

Styling requires us to first create a style.json file. Copy the contents below in to a plain text file (notepad) and save as style.json. If doing this on Windows you will want to make sure it doesn’t also have a .txt extension.

{
  "version": 8,
  "name": "Postcodes",
  "owner": "Postcodes",
  "id": "postcodes",
  "sources": {
    "postcodes-source": {
      "maxzoom": 13,
      "tiles": [
        "https://api.mapbox.com/v4/robjn.3uur23nz/{zoom}/{x}/{y}.mvt?access_token=pk.eyJ1Ijoicm9iam4iLCJhIjoid0dYNkY1QSJ9.A-0lzQOawGYICYPfURsjDA"
      ],
      "type": "vector"
    }
  },
  "layers": [
    {
      "id": "something",
      "type": "circle",
      "source": "postcodes-source",
      "source-layer": "results-4326-deduped",
      "minzoom": 13,
      "paint": {
        "circle-color": "#C70039",
        "circle-radius": 6
      }
    },
    {
      "id": "secondthing",
      "type": "symbol",
      "source": "postcodes-source",
      "source-layer": "results-4326-deduped",
      "minzoom": 13,
      "layout": {
        "text-field": "{postcode}",
        "text-size": 18,
        "text-allow-overlap": true,
        "text-ignore-placement": true
      },
      "paint": {
        "text-color": "#C70039",
        "text-halo-color": "#000000"
      }
    }
  ]
}

Next you will want to find where this file was saved and construct it’s path using the file:// protocol. For me the file is in “file:///home/rob/Documents/OSM/style.json”. For those using Windows yours is likely to start with “file:///C:/” (and I believe all backslashes in the Windows filepath should be changed to forward slashes). Avoid spaces in the filepath as I suspect that will break. You can test you have the right path by pasting it in your web browser as if it was like any other URL.

Finally in JOSM, go to Imagery -> Imagery preferences and click the +MVT button. Paste the filepath in the top box and type a suitable name in box 5 (e.g. postcodes).

The layer can now be added just like any other. If you want to edit the style (e.g. a different hex colour code) then you can do that by editing the style.json file. If you edit the style you will also need to find where JOSM stores it’s cache on you computer and delete postcodes-source.mapcss from the cache folder. The reason for this is because JOSM converts the style.json into a .mapcss format and doesn’t re-create this unless it is first deleted.

There is a lot more that can be done to style MVT layers. For those interest the full MVT style spec is here, however I don’t think it is all implemented in JOSM yet. For example, I couldn’t not get text sizes to vary by zoom level (interpolation). Hopefully that will come soon or someone can show me what I was doing wrong if already available.

I hope this helps. If stuck, give me a shout.