Non scaling of markers

[monsieurpommedeterre]

Hello,

I'm kinda new to using vuelayers, and went through all kind of examples and discussions about this matter but couldnt find an answer. My issue is the following :

• I'm using an icon as a marker, but the icon always scales to be the same "absolute" size on my screen when I zoom in or out. I would like it to get bigger as I zoom in, and smallest as I zoom out, as if I was zooming on a regular image.
• I've read that I could try to add custom projection to it but couldnt find out how, since it keeps scaling anyway no matter the projection.
• I've also read I could play with the "scale" prop of the icon, but cant find the right formula (i'm always ending up with something bigger or smaller than it should be compared to just zooming on an image). And even if I found the right formula, it would recalcultate the scale after each zoom, creating some kind of laggy display. I dont want it to be "resized" after each zoom, I'd like it to just "go with the flow" of the zoom, smoothly.

So my question is, is there any "good" way to achieve this. If the solution is to use the scale, how do I calculate the right formula ? (like, just binding the scale to the zoom of the map doesnt give satisfying result)

right now my code looks something like this :

<vl-layer-vector key="'markerTest" ref="markerLayer" render-mode="image">
      <vl-source-vector
        ref="markerSource"
        projection="EPSG:3857"
        :features="[
          {
            type: 'Feature',
            id: 'marker-1',
            geometry: {
              type: 'Point',
              coordinates: [570, 350],
            },
          },
        ]"
      >
        <vl-style-box>
          <vl-style-icon
            src="https://ressource.arthurbazin.com/demo/open_layer/ressource/placeholder_black.svg"
            :anchor="[0.5, 1]"
            :scale="0.5"
          ></vl-style-icon>
        </vl-style-box>
      </vl-source-vector>
    </vl-layer-vector>

also, I'm a bit lost with all the components, I use, is there any simpler way to achieve this ? (I will have to use a loop on the layer vector and display more than 3000 points so I was using source vector component for better perfomances as opposed to geom)

Thank you

[ghettovoice]

Hello @monsieurpommedeterre ,

I'm using an icon as a marker, but the icon always scales to be the same "absolute" size on my screen when I zoom in or out. I would like it to get bigger as I zoom in, and smallest as I zoom out, as if I was zooming on a regular image.

I've read that I could try to add custom projection to it but couldnt find out how, since it keeps scaling anyway no matter the projection.

Icon style (and actually any style) are not bound to the projection or zoom. They are working as simple canvas 2d context objects. This is why the size, scale and other size properties are usually in pixels, not in coordinates.

I've also read I could play with the "scale" prop of the icon, but cant find the right formula (i'm always ending up with something bigger or smaller than it should be compared to just zooming on an image). And even if I found the right formula, it would recalcultate the scale after each zoom, creating some kind of laggy display. I dont want it to be "resized" after each zoom, I'd like it to just "go with the flow" of the zoom, smoothly.

Yes, and actually scale is the only way to dynamically change icon rendered size. It is float relative value, by default 1 = image size. As I know OpenLayers doesn't provide anything else. And as I see from the OpenLayers sources, changing scale only changes a scale value in the style, this scale value will be used on the next map render tick. So I don't think it should have a great impact on the performance. Or maybe it would be easy to change scale only some "breakpoint" zooms. In this case you also don't need to find some formula, because sometimes it can be sometimes difficult to find that can return a good-looking scale

[monsieurpommedeterre]

Ok I'm gonna work with that. Thank you