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.

<!-- add Vue as a package to dojoConfig -->
<script>
  window.dojoConfig = {
    packages: [
      {
        name: "vue",
        location: "https://unpkg.com/vue/dist/",
        main: "vue"
      }
    ]
  };
</script>
<!-- load Esri JSAPI -->
<script src="https://js.arcgis.com/4.4"></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:

• Get started with MapView
• Get started with SceneView
• API reference - View
• API reference - Map

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

var 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.

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.then(function() {
  var 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;
  });
});