Center in <vl-view> is not pointing map to coordinates

[ghost]

Hello,

I am developing my personal website and I am having trouble configuring the center coordinates for my map view, although I am following the instructions and docs as closely as possible. Here is my code:

<template>
    <div>
    <h1>Buffalo Belt Line • Reformed</h1>
        <vl-map
                :load-tiles-while-animating="true"
        :load-tiles-while-interacting="true"
        style="height: 575px;"
        >
            <vl-view
            :zoom.sync="zoom"
            :center.sync="center"
            :rotation.sync="rotation"
            ></vl-view>

            <vl-layer-tile>
            <vl-source-osm></vl-source-osm>
            </vl-layer-tile>
        </vl-map>
    </div>
</template>

<script>
export default {
    data() {
        return {
            zoom: 5,
            center: [42, -78],
            rotation: 0,
        };
    },
};
</script>

<style scoped>
h1 {
    font-family: "Nunito", sans-serif;
    font-weight: 200;
}
</style>

[ghettovoice]

Hello @theoriginalwelte , I guess this coords [42, -78] in EPSG:4326, but vuelayers by default uses EPSG:3857 as data projection.

To change default data projection:

<vl-map data-projection="EPSG:4326" ....>
  ...
</vl-map>

[ghost]

Thank you @ghettovoice!

That was the issue I was experiencing apparently. I found an online tool to convert the coordinates I needed as well. Maybe this tool can be useful for those who are having the same issue?

https://epsg.io/transform#s_srs=3857&t_srs=4326