map does not fit inside its view in vega-lite

[blset]

hello,

with a vconcat/hconcat mix of layered views representing maps, the map does not fit inside the boundary of it's layer and sometimes does not show up, or explodes outside of the boundary of it's layer

if the map is in a single view, no problem.

here the layers are materialized with stroke orange, all maps are here but only some show up if I tweek the width and height I may get other map showing up but it's not very predictable

  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "autosize": "pad",
  "config": {"concat": {"spacing": 5}},
  "vconcat": [
    {
      "hconcat": [
        {
          "vconcat": [
            {
              "height": 100,
              "layer": [
                {
                  "data": {"url": "/assets/departements/martinique.geojson"},
                  "mark": {"fill": "null", "stroke": "grey", "type": "geoshape"}
                }
              ],
              "projection": {"type": "mercator"},
              "title": "martinique",
              "view": {"fill": "null", "stroke": "orange"},
              "width": 100
            },
            {
              "height": 100,
              "layer": [
                {
                  "data": {"url": "/assets/departements/guadeloupe.geojson"},
                  "mark": {"fill": "null", "stroke": "grey", "type": "geoshape"}
                }
              ],
              "projection": {"type": "mercator"},
              "title": "guadeloupe",
              "view": {"fill": "null", "stroke": "orange"},
              "width": 100
            },
            {
              "height": 100,
              "layer": [
                {
                  "data": {
                    "url": "/assets/departements/stmartin_barth.geojson"
                  },
                  "mark": {"fill": "null", "stroke": "grey", "type": "geoshape"}
                }
              ],
              "projection": {"type": "mercator"},
              "title": "stmartin_barth",
              "view": {"fill": "null", "stroke": "orange"},
              "width": 100
            },
            {
              "height": 100,
              "layer": [
                {
                  "data": {"url": "/assets/departements/guyane.geojson"},
                  "mark": {"fill": "null", "stroke": "grey", "type": "geoshape"}
                }
              ],
              "projection": {"type": "mercator"},
              "title": "guyane",
              "view": {"fill": "null", "stroke": "orange"},
              "width": 100
            }
          ]
        },
        {
          "height": 400,
          "layer": [
            {
              "data": {"url": "/assets/departements/metropole.geojson"},
              "mark": {"fill": "null", "stroke": "grey", "type": "geoshape"}
            }
          ],
          "projection": {"type": "mercator"},
          "title": "metropole",
          "view": {"fill": "null", "stroke": "orange"},
          "width": 400
        },
        {
          "vconcat": [
            {
              "height": 100,
              "layer": [
                {
                  "data": {"url": "/assets/departements/mayotte.geojson"},
                  "mark": {"fill": "null", "stroke": "grey", "type": "geoshape"}
                }
              ],
              "projection": {"type": "mercator"},
              "title": "mayotte",
              "view": {"fill": "null", "stroke": "orange"},
              "width": 100
            },
            {
              "height": 100,
              "layer": [
                {
                  "data": {"url": "/assets/departements/reunion.geojson"},
                  "mark": {"fill": "null", "stroke": "grey", "type": "geoshape"}
                }
              ],
              "projection": {"type": "mercator"},
              "title": "reunion",
              "view": {"fill": "null", "stroke": "orange"},
              "width": 100
            },
            {
              "height": 100,
              "layer": [
                {
                  "data": {"url": "/assets/departements/polynesie.geojson"},
                  "mark": {"fill": "blue", "stroke": "grey", "type": "geoshape"}
                }
              ],
              "projection": {"type": "mercator"},
              "title": "polynesie",
              "view": {"fill": "null", "stroke": "orange"},
              "width": 100
            }
          ]
        }
      ]
    },
    {
      "hconcat": [
        {
          "height": 100,
          "layer": [
            {
              "data": {"url": "/assets/departements/ncaledonie.geojson"},
              "mark": {"fill": "null", "stroke": "grey", "type": "geoshape"}
            }
          ],
          "projection": {"type": "mercator"},
          "title": "ncaledonie",
          "view": {"fill": "null", "stroke": "orange"},
          "width": 100
        }
      ]
    }
  ]
}

[blset]

upon tweaking the width and size, like making the box rectangular for a rectangular piece of land, I can make all small maps appear within the layer boundary . but then when I layer circles for instance at some latitude longitude points, small maps explode out of the layer boundary, as if the land shape was shrinked before but adding the circle mark with a scale shared with other maps prevent map to be shinked within its layer boundary

[mattijn]

Maybe it is possible to register these composite projections, like http://geoexamples.com/d3-composite-projections/ into Vega, see https://vega.github.io/vega/docs/projections/#register how to do this.

[blset]

thanks for the tip the solution was to set the fit parameter of the projection channel, with the bounding box of the map in geojson format . https://vega.github.io/vega/docs/projections/

I thought this would have been automatic

nevertheless if the layer width and height ratio is too far from the land shape, it will not display

[kgoodrick-uu]

Hi @blset, I think this could be related to #9321. If you slightly tweak the projection precision in each of the concatenated maps, does it solve your problem?