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>
