Search code examples
pythonaltairvega-lite

Plotting image on maps with Vega-Lite / Altair


Edit: bug report here

I am trying to display images on maps. For the example, let's say I want tomake a map with regions and their coats of arms. There is a simple example below.

The text appears (Vega-Lite editor) but the images only appear with the x and y channels, not with latitude and longitude.

Is this about me, about a known limitation, or about a bug?

Linked question: is it possible to use SVG files rather than PNG ?

{
  "config": {"view": {"continuousWidth": 300, "continuousHeight": 400}},
  "layer": [
    {
      "mark": {"type": "text", "font": "Ubuntu", "fontSize": 18},
      "encoding": {
        "latitude": {"field": "latitude", "type": "quantitative"},
        "longitude": {"field": "longitude", "type": "quantitative"},
        "text": {"type": "nominal", "field": "name"}
      }
    },
    {
      "mark": {"type": "image", "height": 50, "width": 50},
      "encoding": {
        "latitude": {"field": "latitude", "type": "quantitative"},
        "longitude": {"field": "longitude", "type": "quantitative"},
        "url": {"type": "nominal", "field": "url"}
      }
    }
  ],
  "data": {"name": "data"},
  "$schema": "https://vega.github.io/schema/vega-lite/v5.0.0.json",
  "datasets": {
    "data": [
      {
        "name": "Unterfranken",
        "wikidata": "Q10547",
        "latitude": 50.011166583816824,
        "longitude": 9.94760069351192,
        "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Unterfranken_Wappen.svg/512px-Unterfranken_Wappen.svg.png"
      },
      {
        "name": "Oberfranken",
        "wikidata": "Q10554",
        "latitude": 50.05097220003501,
        "longitude": 11.376017810598547,
        "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Wappen_Bezirk_Oberfranken2.svg/500px-Wappen_Bezirk_Oberfranken2.svg.png"
      },
      {
        "name": "Niederbayern",
        "wikidata": "Q10559",
        "latitude": 48.70663162458262,
        "longitude": 12.78636846158091,
        "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Wappen_Bezirk_Niederbayern.svg/352px-Wappen_Bezirk_Niederbayern.svg.png"
      },
      {
        "name": "Oberpfalz",
        "wikidata": "Q10555",
        "latitude": 49.399491050485366,
        "longitude": 12.117024154659765,
        "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Wappen_Oberpfalz.svg/177px-Wappen_Oberpfalz.svg.png"
      },
      {
        "name": "Mittelfranken",
        "wikidata": "Q10551",
        "latitude": 49.348122683559716,
        "longitude": 10.786147287006969,
        "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Mittelfranken_Wappen.svg/393px-Mittelfranken_Wappen.svg.png"
      },
      {
        "name": "Schwaben",
        "wikidata": "Q10557",
        "latitude": 48.1625551901062,
        "longitude": 10.519367235613796,
        "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Wappen_Schwaben_Bayern.svg/450px-Wappen_Schwaben_Bayern.svg.png"
      },
      {
        "name": "Oberbayern",
        "wikidata": "Q10562",
        "latitude": 48.10116954364846,
        "longitude": 11.753750582859597,
        "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Wappen_Oberbayern.svg/200px-Wappen_Oberbayern.svg.png"
      }
    ]
  }
}

Solution

  • This feature does not yet exist but will be added in future versions of Vega-Lite/Altair as per this PR https://github.com/vega/vega-lite/pull/7296.