topic Re: Open PopUp Template Automatically on Graphic in ArcGIS JavaScript Maps SDK Questions

Open PopUp Template Automatically on Graphic

jh9 — Tue, 07 Sep 2021 18:49:34 GMT

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:

Re: Open PopUp Template Automatically on Graphic

ReneRubalcava — Tue, 07 Sep 2021 19:05:26 GMT

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

Re: Open PopUp Template Automatically on Graphic

jh9 — Tue, 07 Sep 2021 19:57:20 GMT

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

Re: Open PopUp Template Automatically on Graphic

ReneRubalcava — Tue, 07 Sep 2021 19:54:27 GMT

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.

Re: Open PopUp Template Automatically on Graphic

KenBuja — Wed, 08 Sep 2021 11:59:48 GMT

@ReneRubalcava

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

Re: Open PopUp Template Automatically on Graphic

jh9 — Mon, 20 Sep 2021 21:31:00 GMT

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

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

Re: Open PopUp Template Automatically on Graphic

ReneRubalcava — Mon, 20 Sep 2021 22:24:48 GMT

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