[question] Center map at pre-defined coordinates via @click="function"

[empereira]

Hello,

I'm trying to center the map on the coordinates and zoom I set, but I'm not getting it.

Maybe with $refs?

:zoom.sync="zoom"
:center.sync="center"
ref="view"

[become-iron]

Programmatic zooming:

this.$refs.view.$view.fit(extent)

https://openlayers.org/en/latest/apidoc/module-ol_View-View.html#fit

[become-iron]

Use props of VlView:

<template>
  <vl-view :zoom.sync="zoom" center.sync="center" />
</template>

<script>
  export default {
    data() {
      return {
        center: [0, 0],
        zoom: 1
      }
    },

    methods: {
      zoomToCoordinate(center, zoom) {
        this.center = center
        this.zoom = zoom
      }
    }
  }
</script>

[empereira]

Use props of VlView:

<template>
  <vl-view :zoom.sync="zoom" center.sync="center" />
</template>

<script>
  export default {
    data() {
      return {
        center: [0, 0],
        zoom: 1
      }
    },

    methods: {
      zoomToCoordinate(center, zoom) {
        this.center = center
        this.zoom = zoom
      }
    }
  }
</script>

Edit: works!! Thanks

<button @click="zoomToCoordinate([0, 0], 6)">
    <img src="../assets/center_map.png" title="Center Map" />
</button>

[become-iron]

Yes

It seems firstly you need to learn the basics of working with Vue and "pure" OpenLayers

[empereira]

Yes, thanks!!!

[empereira]

@become-iron another question! :)

I can use the "center" and "zoom" variables already defined by:

export default {
    data() {
      return {
        center: [0, 0],
        zoom: 1
      }
    },

in the zoomToCoordinate() function in the button tag?

<button @click="zoomToCoordinate("HERE")">
    <img src="../assets/center_map.png" title="Center Map" />
</button>

[become-iron]

Sync modifier means that zoom and center properties will be changed periodically (https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier). So it hasn't a sense to use them in zoomToCoordinate

Just create variables for default center and zoom before "export default" and then use them in zoomToCoordinate

[empereira]

Ok! Now that I have noticed my mistake in the title of the question and consequently in the understanding of it.

I should have put that it is "center the map" at pre-defined coordinates. So I asked you about using the variables "center" and "zoom".

[become-iron]

<template>
  <vl-view :zoom.sync="zoom" center.sync="center" />
</template>

<script>
  const center = [0, 0]
  const zoom = 1

  export default {
    data() {
      return {
        center: center,
        zoom: zoom
      }
    },

    methods: {
      zoomToInitialCoordinate() {
        this.center = center
        this.zoom = zoom
      }
    }
  }
</script>

[empereira]

Thanks @become-iron!!!