Hi there,
I currently have a pop up window template associated with a point graphic. I would like the popup window to automatically open WITH the marker (not have it show only when it is clicked). I tried doing it via the view but it is not working. Any idea what I'm doing wrong? here is my code:
<script>
/* eslint-disable */
import { loadModules } from 'esri-loader';
export default {
mounted() {
this.loadMap();
this.getStops();
},
data() {
return {
stops: []
}
},
methods: {
loadMap() {
loadModules(['esri/config', 'esri/Map', 'esri/views/MapView', "esri/Basemap", "esri/layers/VectorTileLayer", "esri/symbols/PictureMarkerSymbol", 'esri/Graphic','esri/layers/GraphicsLayer', "esri/layers/FeatureLayer"], {
css: true
})
.then(([esriConfig, ArcGISMap, MapView, Basemap, VectorTileLayer, PictureMarkerSymbol, Graphic, GraphicsLayer, FeatureLayer]) => {
// create map with the given options
esriConfig.apiKey =
// 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 ArcGISMap({
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
}
});
// initialize graphics layer, add it to the map
const graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
// view.popup.open({
// features: GraphicsLayer // array of graphics or a single graphic in an array
// });
const template = {
"title": "Parking",
"content": "<p>99%</p>",
}
// const parkingLots = new FeatureLayer({
// url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads_Styled/FeatureServer/0",
// outFields: ["PARKING"],
// popupTemplate: parkingPopup
// });
// map.add(parkingLots);
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,
popupTemplate: template
});
graphicsLayer.add(pointGraphic);
})
// const point = { //Create a point
// type: "point",
// longitude: -118.80657463861,
// latitude: 34.0005930608889
// };
// const simpleMarkerSymbol = {
// type: "simple-marker",
// color: [226, 119, 40], // Orange
// outline: {
// color: [255, 255, 255], // White
// width: 1
// }
// };
// const pointGraphic = new Graphic({
// geometry: point,
// symbol: simpleMarkerSymbol
// });
// 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>
