Open PopUp Template Automatically on Graphic

2945
6
09-07-2021 11:49 AM
jh9
by
New Contributor II

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>

 

 

Tags (2)
6 Replies
ReneRubalcava
Frequent Contributor

You can do this via the Popup open() method.

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Popup.html#open

view.popup.open({
    features: [pointGraphic],
    location: pointGraphic.geometry
});
jh9
by
New Contributor II

Hey Rene, Thanks so much for your response. BTW, I really enjoy your youtube videos as I am very new to Esri. I tried implementing your solution but only one of the popup windows opens, and it is overridden as soon as the graphics layer loads. Not sure if I've place it in the wrong place?

Also - what is the difference between a popup widget and just a regular popup? I was a little confused by that and wasn't sure that methods for the pop up widget would apply to a popup template/popup. 

 

 

    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);

          this.view.popup.open({
            features: [pointGraphic],
            location: pointGraphic.geometry
          });


        })



             

          });
      },

 

 

 

0 Kudos
ReneRubalcava
Frequent Contributor

The main popup and Popup widget are the same.

Are you trying to open multiple popups? You can only have one popup open at a time. The popup can have multiple features and you can scroll through them, but only one at a time. 

If you need to show data from multiple features at once, you can use the Feature widget.

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Feature.html

This sample places it in a side panel.

https://developers.arcgis.com/javascript/latest/sample-code/widgets-feature-sidepanel/

The Feature widget can display the information from the popup template from a feature, just like a popup, but you have more control over it.

0 Kudos
KenBuja
MVP Esteemed Contributor

@ReneRubalcava 

Esri should improve that sample so the chart isn't refreshed every time the cursor is moved within the same feature.

jh9
by
New Contributor II

I'm trying to have multiple pop ups open like this - 

 

Screen Shot 2021-09-20 at 2.01.54 PM.png

 

just to confirm, you're saying no more than one info window can be open at a time, even if theyre really simple?

0 Kudos
ReneRubalcava
Frequent Contributor

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

0 Kudos