Get point address in popup on click

jh9

Hi all, I'm following this tutorial and trying to implement in my code

https://totalapis.github.io/sample-code/get-started-popup/

However, when I implement, I get an error. 

Uncaught TypeError: Cannot read property 'view' of undefined

 

Code below. Anyone know what I might be doing wrong?

 

 

<template>
  <div id="viewDiv" class="balt-theme"></div>
</template>
<script>
  /* eslint-disable */
  import { loadModules } from 'esri-loader';


  export default {
    mounted() {
      this.loadMap();
      this.getStops();
    },
    data() {
      return {
        stops: []
      }
    },
    methods: {
      loadMap() {
        loadModules(['esri/config', "esri/tasks/Locator", 'esri/Map', 'esri/views/MapView', "esri/Basemap", "esri/layers/VectorTileLayer", "esri/symbols/PictureMarkerSymbol", 'esri/Graphic','esri/layers/GraphicsLayer', "dojo/domReady!"], {
            css: true
          })
          .then(([esriConfig, Locator, Map, MapView, Basemap, VectorTileLayer, PictureMarkerSymbol, Graphic, GraphicsLayer]) => {
            // create map with the given options
          esriConfig.apiKey = "";

          var locatorTask = new Locator({
            url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"
          });


          // Where we add in the custom colored map 
          const vectorTileLayer = new VectorTileLayer({
            portalItem: {
              id: "afff5c72b30f4102be6abe62c3591803" // ID for Map Made
            },
          });

          const basemap = new Basemap({
            baseLayers: [
              vectorTileLayer
            ]
          });


          const map = new Map ({
              basemap: basemap
          });


          // assign map to this view
          this.view = new MapView({
            container: this.$el,
            map: map,
            center: [-118.48456934438383, 34.02280292519253],
            zoom: 10,
            constraints: {
            minZoom: 23,
            maxZoom: 13
          }
          });


              this.view.on("click", function(event) {
        event.stopPropagation(); // overwrite default click-for-popup behavior

        // Get the coordinates of the click on the view
        var lat = Math.round(event.mapPoint.latitude * 1000) / 1000;
        var lon = Math.round(event.mapPoint.longitude * 1000) / 1000;

        this.view.popup.open({
          // Set the popup's title to the coordinates of the location
          title: "Reverse geocode: [" + lon + ", " + lat + "]",
          location: event.mapPoint // Set the location of the popup to the clicked location
        });

        // Display the popup
        // Execute a reverse geocode using the clicked location
        locatorTask.locationToAddress(event.mapPoint).then(function(
          response) {
          // If an address is successfully found, show it in the popup's content
          this.view.popup.content = response.address;
        }).otherwise(function(err) {
          // If the promise fails and no result is found, show a generic message
          this.view.popup.content =
            "No address was found for this location";
        });
      });


            // initialize graphics layer, add it to the map
            const graphicsLayer = new GraphicsLayer();
            map.add(graphicsLayer);





          this.stops.forEach((value) => {
            // using a for each function to create markers on the map for all the stops 
            //Create a point

            // location 
            const point = { 
            type: "point",
            longitude: value[0],
            latitude: value[1]
          };

          // const simpleMarkerSymbol = {
          //   type: "simple-marker",
          //   color: [226, 119, 40],  // Orange
          //   outline: {
          //   color: [255, 255, 255], // White
          //   width: 1
          //   }
          // };

        // we are creating the components of a graphic, then adding to graphic
        // graphic is then being added to the graphics layer

        // what it actually looks like 
        let symbol = {
          type: "picture-marker",  // autocasts as new PictureMarkerSymbol()
          url: "https://static.arcgis.com/images/Symbols/Shapes/BlackStarLargeB.png",
          width: "64px",
          height: "64px"
        };

        // what is being added to the graphic layer 
          const pointGraphic = new Graphic({
            geometry: point,
            symbol: symbol
          });




          graphicsLayer.add(pointGraphic);



        })

          });
      },
      async getStops() {

        // This is where we get big blue bus data initially 
        let stop = await fetch(
        'http://gtfs.bigbluebus.com/parsed/stops.geojson'
        ).then(res => res.json())
      
        let obj = stop.features 
        // pushing stops data to stops array 
        obj.forEach((value) => {
         this.stops.push(value.geometry.coordinates)
        })



      }
    }
  }
</script>
<style>
  /* esri styles */
  @import url('https://js.arcgis.com/4.4/esri/themes/light/main.css');
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }
  #nav {
    padding: 30px;
  }
  #nav a {
    font-weight: bold;
    color: #2c3e50;
  }
  #nav a.router-link-exact-active {
    color: #42b983;
  }
  #viewDiv {
    position: absolute;
    top: 3.5rem;
    bottom: 0;
    left: 0;
    right: 0;
  }

</style>

 

 

 

 

 

ReneRubalcava

Change your anonymous "function()" methods to arrow functions "() =>{}". The context of this isn't the same inside regular functions.

You may however run into another issue. view is not in your Vue data prop. But Vue also uses JavaScript Proxy for reactive state management. This isn't compatible with our Accessor class and how we watch for property changes yet. It's on the roadmap to update in the future, but no timeline. 

I have a blog post here on how to use Vue and the ArcGIS JSAPI together without Vue reactive state management.

https://odoe.net/blog/vue-jsapi-calcite