Get point address in popup on click

jh9 — Thu, 09 Sep 2021 16:43:28 GMT

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>

Re: Get point address in popup on click

ReneRubalcava — Thu, 09 Sep 2021 16:52:41 GMT

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

topic Re: Get point address in popup on click in ArcGIS JavaScript Maps SDK Questions

Get point address in popup on click

Re: Get point address in popup on click