0
votes

I'm in the studio right now fiddling with settings. I set a layer to have a fill pattern with an svg, but it doesn't have the option to change the logic of the fill pattern other than changing the image on a zoom level (which might be a very dumb workaround).

The thing is, I don't want my image to multiply when I zoom in - I want it to enlarge or stay the same when I zoom in instead of splitting into multiple images of the same size. I believe I can set the pattern logic within the SVG itself, but I think mapbox has its own logic on how to tile the image according to zoom level - which would override it? Or can I export the styling and manually change the fill property to no-pattern? If that's the case, what is the correct value I can set it to?

edit: I exported my style so I could manually alter it. I basically just changed the "paint" to "symbol"

From:

    "overrides": {
        "land-and-water": {
            "landuse": {
                "paint": {
                    "fill-opacity": [
                        "interpolate",
                        ["linear"],
                        ["zoom"],
                        5,
                        0,
                        6,
                        [
                            "match",
                            ["get", "class"],
                            ["agriculture", "wood", "grass", "scrub"],
                            0,
                            "glacier",
                            0.5,
                            1
                        ],
                        15,
                        [
                            "match",
                            ["get", "class"],
                            "agriculture",
                            0.75,
                            ["wood", "glacier"],
                            0.5,
                            "grass",
                            0.4,
                            "scrub",
                            0.2,
                            1
                        ]
                    ],
                    "fill-antialias": [
                        "step",
                        ["zoom"],
                        true,
                        22,
                        true
                    ],
                    "fill-pattern": [
                        "step",
                        ["zoom"],
                        "hjtd5vuLcK%20(1)%20(2)",
                        22,
                        "hjtd5vuLcK%20(1)%20(2)"
                    ],
                    "fill-translate": [
                        "interpolate",
                        ["linear"],
                        ["zoom"],
                        7,
                        ["literal", [0, 0]],
                        22,
                        ["literal", [0, 0]]
                    ]
                }
            }
        }
    },

To This:

"overrides": {
            "land-and-water": {
                "landuse": {
                "type": "symbol",
        "source": "composite",
        "source-layer": "WCities",
        "layout": {
            "text-size": 8,
            "icon-size": 0.25,
            "icon-allow-overlap": true,
            "icon-padding": [
                "interpolate",
                ["linear"],
                ["zoom"],
                0,
                2,
                22,
                2
            ],
            "icon-image": "hjtd5vuLcK%20(1)%20(2)"
        },
                    
                }
            }
        },
1

1 Answers

0
votes

I believe I can set the pattern logic within the SVG itself, but I think mapbox has its own logic on how to tile the image according to zoom level

Mapbox GL JS does not display SVGs. It imports SVGs then rasterises them. It doesn't support most SVG features.

I'm not exactly clear on what you're trying to do, but the answer is probably "you can't".

See this ticket for discussion about enhancements.