Using different projections in 0.12.x

[Soren-Knudsen]

I'm having some trouble upgrading my current solution with 0.11.x to 0.12.x. My working solution with 0.11.x is depicted below together with my first try on upgrading to 0.12.x.

Version 0.11.x

<vl-map ref="map" projection="EPSG:25832">
  <vl-view
    ref="view"
    projection="EPSG:25832"
    :zoom.sync="zoom"
    :extent="extent"
    :center.sync="center"
    :resolutions="resolutions"
    :enable-rotation="false"
  ></vl-view>
  <vl-layer-tile :z-index="0">
    <vl-source-wmts
      projection="EPSG:25832"
      :url="url"
      :resolutions="resolutions"
      :matrix-ids="matrixIds"
      :style-name="styleName"
      :layer-name="layerName"
      :matrix-set="matrixSet"
    ></vl-source-wmts>
  </vl-layer-tile>
  <vl-layer-vector  z-index="1">
    <vl-source-vector :features="features" projection="EPSG:4326"></vl-source-vector>
  </vl-layer-vector>
</vl-map>

After some fiddling, I added the data-projection="EPSG:25832" and tile-grid-factory (because the matrix ids are strings) which made the background layer work but I still can get my vector layer to render? It seems to be ignoring the projection on vl-layer-vector when converting the GeoJson objects to Features?

Version 0.12.0-rc.4

<vl-map data-projection="EPSG:25832">
    <vl-view
    :projection="EPSG:25832"
    :zoom.sync="zoom"
    :extent="extent"
    :center.sync="center"
    :resolutions="resolutions"
    :enable-rotation="false"
    ></vl-view>
    <vl-layer-tile :z-index="0">
    <vl-source-wmts
        :projection="EPSG:25832"
        :url="url"
        :style-name="styleName"
        :layer-name="layerName"
        :tile-grid-factory="tileGridFactory"
        :matrix-set="matrixSet"
    ></vl-source-wmts>
    </vl-layer-tile>
    <vl-layer-vector :z-index="1">
      <vl-source-vector :features="features" projection="EPSG:4326"></vl-source-vector>
    </vl-layer-vector>
</vl-map>

[ghettovoice]

Hello @Soren-Knudsen , thanks for response. I found that there is incorrect data projection resolving in source components.

Wait a bit, I will publish a patched version

[Soren-Knudsen]

@ghettovoice: Awesome, thanks for a quick reply 👍

[ghettovoice]

@Soren-Knudsen upgrade please

[Soren-Knudsen]

@ghettovoice: The fix works! 👍

I stumbled upon another issue with either the z-index or when the rendering is triggered. The features are not rendered when the map first mounts. If I manually clear the features list and add the items again after the map is mounted the features renders as expected.

<vl-layer-vector :z-index="1">
    <vl-source-vector :features="features" projection="EPSG:4326"></vl-source-vector>
</vl-layer-vector>

[ghettovoice]

I don't see any problems with this in my local setup. Maybe you forget to register EPSG:25832 projection with proj4. Can you show full code?

[Soren-Knudsen]

The computed property looks as follows:

...
computed: {
    features(): GeoJSONFeature[] {
        const features = [...]
        // this.map.updateSize();
        return features;
    }
    ...
}
...

No problems with the projection. When I add the map.updateSize() the issue disappears. So it seems to be a missing rerender when the computed property changes. If you are still not able to reproduce the issue I will create an example.

[ghettovoice]

I will create an example

Yes, it would be helpful. I tried through data property and through computed. Actually there is no difference between them for vl-source-vector component.

[Soren-Knudsen]

Hi @ghettovoice

I looked into the issue. When the vector layer first renders, the currentFeaturesViewProj uses a wrong projection. If I after the map is rendered, triggers a change (The features property above) currentFeaturesViewProj is recalculated with the correct projection. That is why the features are not a shown on the map.

[ghettovoice]

Ok, let me check

[ghettovoice]

Do you sure that features in the correct projection at the start? They should be in the resolved data projection, you can check resolvedDataProjection of the vl-source-vector. In your case it should be EPSG:4326.

I'm still not see any problems with this. I have made simple demo with different projections on components https://jsfiddle.net/ghettovoice/8upykq9g/. Maybe I missed something meaningful in your use case...

[Soren-Knudsen]

@ghettovoice, I tried to recreate the issue in jsfiddle - Please have a look https://jsfiddle.net/75fyx10a/1/. If you e.g. wrap the code in the created hook with a setTimeout the data gets rendered otherwise it doesn't.

[ghettovoice]

Thanks, now I got it. Publishing fixed release...

UPD your demo based on v0.12.0-rc.6 https://jsfiddle.net/ghettovoice/vt8gdqrx/

[Soren-Knudsen]

@ghettovoice Awesome! The demo works! I tried it on the actual solution where I get one step closer 🙌 The solution renders the map after bumping but afterward throws an exception and the map is blank. The exception below.

[ghettovoice]

This is interesting... I didn't saw any problems with this.

Post me your code pls. Especially the place where "The solution renders the map after bumping"