Open PopUp Template Automatically on Graphic

jh9

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>

 

 

ReneRubalcava

That's right, only one popup at a time. It's a popup on the map, not per feature.