Custom widgets with Vue

This sample shows how to use Vue to create a custom widget.

1. Set up Vue

First, you need to load the necessary libraries.

<script>
  window.dojoConfig = {
    packages: [
      {
        name: "vue",
        location: "https://unpkg.com/vue/dist/",
        main: "vue"
      }
    ]
  };
</script>

<script src="https://js.arcgis.com/4.18/"></script>

2. Create a simple map and view

Create a simple map and add it to either a MapView or a SceneView. If you are unfamiliar with views or how to create a basic map see the following resources:

const map = new Map({
  basemap: "hybrid",
  ground: "world-elevation"
});

const view = new SceneView({
  container: "viewDiv",
  map: map,
  camera: {
    position: [7.654, 45.919, 5184],
    tilt: 80
  }
});

3. Create a custom Vue component

Create a custom Vue component with an HTML template and JavaScript logic. For more information on this, see the Vue documentation. To display the Views Camera details, we can define the camera as a property to the Vue component. Then we can add a method for a button click that will clone the Camera, update the position and tilt and then use the Views goTo() method to animate to the updated location.

Custom Vue Component
Vue.component("camera-info", {
  props: ["camera"],
  template: [
    "<div>",
    "<h2>Camera Details</h2>",
    "<p><strong>Heading</strong>: {{ camera.heading.toFixed(3) }}</p>",
    "<p><strong>Tilt</strong>: {{ camera.tilt.toFixed(3) }}</p>",
    "<p><strong>Latitude</strong>: {{ camera.position.latitude.toFixed(3) }}</p>",
    "<p><strong>Longitude</strong>: {{ camera.position.longitude.toFixed(3) }}</p>",
    "<button v-on:click='reset'>Reset Camera</button>",
    "</div>"
  ].join(""),
  methods: {
    reset: function() {
      var camera = this.camera.clone();
      camera.set({
        position: [7.654, 45.919, 5184],
        tilt: 80
      });
      view.goTo(camera);
    }
  }
});

4. Initialize the Vue component

Add your custom element to the DOM and a binding to the camera property. You can then initialize the Vue component and easily add it to the Views ui. You can watch for the Views camera to change and update the camera of the Vue component.

<div id="info" class="esri-widget">
  <camera-info v-bind:camera="camera"></camera-info>
</div>

view.when(function() {
  const info = new Vue({
    el: "#info",
    data: {
      camera: view.camera
    }
  });
  view.ui.add(info.$el, "top-right");
  watchUtils.watch(view, "camera", function() {
    info.camera = view.camera;
  });
});

SceneView

Widget

frameworks

vue

4.3

watchUtils

ArcGIS API for JavaScript

Custom widgets with Vue

Was this page helpful?