0

I work with the new feature from openLayers: https://openlayers.org/en/latest/examples/webgl-points-layer.html

and want to achieve to have some case transform operator like in the color array, but for the src string

thunderstorm: {
    symbol: {
        symbolType: "image",
        src: `data:image/svg+xml;utf8,${icon(faThunderstorm, {
            transform: {
               size: 14,
            },
            attributes: {
                stroke: "black",
                "stroke-width": "30",
                color: "white",
            },
        }).html[0]}`,
        color: [
            "case",
            ["==", ["get", "type"], "cloud-to-ground"],
            "rgb(247, 37, 133)",
            ["==", ["get", "type"], "inter-cloud"],
            "rgb(72, 12, 168)",
            "rgb(255, 255, 255)", // fallback
        ],
        size: [20, 20],
        anchor: [0.5, 0.5],
        rotateWithView: false,
    },
},

I tried something like this, but it doesn't resolve the string:

thunderstorm: {
    symbol: {
        symbolType: "image",
          src: [
            "case",
            ["==", ["get", "type"], "cloud-to-ground"],
            `data:image/svg+xml;utf8,${icon(faBolt, {
              transform: {
                size: 14,
              },
              attributes: {
                stroke: "black",
                "stroke-width": "30",
                color: "white",
              },
            }).html[0]}`,
            ["==", ["get", "type"], "inter-cloud"],
            `data:image/svg+xml;utf8,${icon(faThunderstorm, {
              transform: {
                size: 14,
              },
              attributes: {
                stroke: "black",
                "stroke-width": "30",
                color: "white",
              },
            }).html[0]}`,
            `data:image/svg+xml;utf8,${icon(faBolt, {
              transform: {
                size: 14,
              },
              attributes: {
                stroke: "black",
                "stroke-width": "30",
                color: "white",
              },
            }).html[0]}`, // fallback
          ],
        [...]
    },
},

and will throw these WebGL errors:

WebGL: INVALID_VALUE: texImage2D: bad image data

[.WebGL-0x12b2a1000]RENDER WARNING: texture bound to texture unit 0 is not renderable. It might be non-power-of-2 or have incompatible texture filtering (maybe)?

Any idea how to implement the transform operation, for having to different kind of icons for one style (JSON)?

(I looked into this one: https://openlayers.org/en/latest/examples/icon-sprite-webgl.html but don't know how to build the "A very simple sprite atlas is used in the form of a PNG file containing all icons on a grid.")

JGH
  • 15,928
  • 4
  • 31
  • 48
LunaMooncraft
  • 13
  • 3
  • The "case" operator **is** valid for `src` which suggests your data urls are not valid. A sprite is a single image which contains all the icons https://openlayers.org/en/latest/examples/data/ufo_shapes.png and is more efficient as only one image has to be loaded A valid svg data url could be used as a sprite. – Mike Jan 17 '22 at 11:28
  • That's strange, because the url in the upper code example works perfectly fine and will be resolved as an icon. But as soon as I paste the same string in the case transform structure, it will throw these errors (+ black squares an the map) – LunaMooncraft Jan 18 '22 at 09:57
  • I have tried it with the resolved urls: ```src: "dataurl"``` works, but ```"case", ["==", ["get", "type"], "cloud-to-ground"], "dataurl", ["==", ["get", "type"], "inter-cloud"], "dataurl2", "dataurl",``` just doesn't work :/ – LunaMooncraft Jan 18 '22 at 10:15
  • I tried again, and while it does accept the "case" syntax, it is not evaluated. – Mike Jan 18 '22 at 12:17
  • It is easy to create an svg sprite then move the case or match to the textureCoord https://codesandbox.io/s/icon-sprite-webgl-forked-dv00c?file=/main.js – Mike Jan 18 '22 at 18:08
  • Thank you a lot, but the resolution appears so poor on these icons then, I would prefer linking the svg's directly :( – LunaMooncraft Jan 20 '22 at 15:30
  • Reducing a 512 pixel image to 16 pixels does that. You can nest your original svgs https://stackoverflow.com/questions/5451135/embed-svg-in-svg – Mike Jan 20 '22 at 15:43

0 Answers0