vl-multi-feature different style

[RaminMT]

Hi, First I should thank you for your amazing plugin, then I have a question. I should show many points on my map but with different markers/pin, Is it possible to differently style features in vl-multi-feature? If yes, how it is possible?

Thanks in advance

[ghettovoice]

Hello @RaminMT , there is no something like multi-feature. What you need is a layer (probably vector) with array of point features. For vector layers by default you can use array of GeoJSON encoded features. Then to dynamically style each feature, you can use style function that will be called for each feature at render tick.

There is an old demo with dynamic styling based on feature color property. https://jsfiddle.net/ghettovoice/m3j0zydr/

[RaminMT]

Oops! sorry I meant vl-geom-multi-point I really appreciate your help, You put me on the correct way, that's what I was looking for. I tried solutions over internet to fit the view to extent of my layer, but I failed. When I tried to getSource() of my layer it returns nothing, I also tried setting ref on the vl-source-vector so I have the source but then I can't do getExtent

[RaminMT]

I searched a bit more and saw in previous issues that you used these methods into setTimeout() and I'm wondering why we should use them with a delay? is there any event in replace of it?

[ghettovoice]

One of the way to achieve this you can check in this demo https://jsfiddle.net/ghettovoice/1qdh3cLa/.

is there any event in replace of it?

Sure, each vuelayers component that wraps some ol instance have those events:

• created - when underlying ol instance created
• mounted - when underlying ol instance inject to some parent ol instance (for example source injected to the layer).

[RaminMT]

Great! I think it's a good idea to create a wiki page or etc and put links to these fiddles The example worked greatly but after a change started to produce errors! I should do more investigations. And about those two events, I tried them but I faced same error, I did like this:

<vl-layer-vector ref="featuresLayer">
    <vl-source-vector :features.sync="features" @mounted="() => autoFit()></vl-source-vector>
    <vl-style-func :factory="getMarkerStyleFactory"></vl-style-func>
</vl-layer-vector>

<script>
export default {
    methods: {
        autoFit() {
            const map = this.$refs.map.$map
            const extent = this.$refs.featuresLayer.getSource().getExtent();
            map.getView().fit(extent, { size: map.getSize(), padding: [30, 30, 30, 30], duration: 2000})
        }
   }
}
</script>

[ghettovoice]

That is strange, I have just reproduced your sample https://jsfiddle.net/ghettovoice/ed4onpar/. Nothing wrong with it. What's actually states the error text?

[RaminMT]

Actually the error was: Cannot read property 'getExtent' of null But I used your previous example with some tunes and that helped me a lot so I have no problem now

Really thank you