Hi Community,
I am trying to do a simple task in which I would like to view the pop-up of features when clicked on it using ArcGIS Maps SDK for JavaScript. I came across the following link https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/defaultpopuptemplateenabled-not-w... which suggests to add the following line : view.popup.defaultPopupTemplateEnabled = true;
However, when I am trying to do the same in my code, there are no errors however, when I click on any feature it just gets highlighted and pop-up doesn't open. Am attaching the code here.
The layer on which I am running this code is a hosted feature layer published via Survey123 to ArcGIS Online
Am not sure if I am missing something here.
Any insights on this would be really helpful.
require(["esri/config", "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer"], function(esriConfig, Map, MapView, FeatureLayer){
esriConfig.apiKey = ""
var map = new Map({
basemap: "arcgis-topographic"
});
var view = new MapView({
map: map,
center: [77.18108, 28.53337],
zoom: 15,
container: "viewDiv"
})
view.popup.defaultPopupTemplateEnabled = true;
const floralayer = new FeatureLayer({
url: "XXXXXXX",
});
map.add(floralayer)
});
Solved! Go to Solution.
I made a mistake in my previous code. popup is a property of MapView, not Map. Try this.
require(["esri/config", "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/widgets/Popup"], function(esriConfig, Map, MapView, FeatureLayer, Popup){
esriConfig.apiKey = ""
var map = new Map({
basemap: "arcgis-topographic"
});
var view = new MapView({
map: map,
center: [77.18108, 28.53337],
zoom: 15,
container: "viewDiv",
popup: new Popup({
defaultPopupTemplateEnabled: true
})
})
const floralayer = new FeatureLayer({
url: "XXXXXXX",
});
map.add(floralayer)
});
The latest version of the API (4.27) dramatically changed how popups work, so old Community posts may not be accurate anymore. https://developers.arcgis.com/javascript/latest/release-notes/#breaking-changes
require(["esri/config", "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/widgets/Popup"], function(esriConfig, Map, MapView, FeatureLayer, Popup){
esriConfig.apiKey = ""
var map = new Map({
basemap: "arcgis-topographic",
popup: new Popup({
defaultPopupTemplateEnabled: true
})
});
var view = new MapView({
map: map,
center: [77.18108, 28.53337],
zoom: 15,
container: "viewDiv"
})
const floralayer = new FeatureLayer({
url: "XXXXXXX",
});
map.add(floralayer)
});
These modifications should work for you, but you will not see the initial loading speed improvement of the latest API.
Thank you for sharing your insights I modified the code as suggested by you however, I still don't see any pop-up opening when clicking on the feature and now feature is also not getting highlighted like before.
Please let me know if I might be missing something here.
I made a mistake in my previous code. popup is a property of MapView, not Map. Try this.
require(["esri/config", "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/widgets/Popup"], function(esriConfig, Map, MapView, FeatureLayer, Popup){
esriConfig.apiKey = ""
var map = new Map({
basemap: "arcgis-topographic"
});
var view = new MapView({
map: map,
center: [77.18108, 28.53337],
zoom: 15,
container: "viewDiv",
popup: new Popup({
defaultPopupTemplateEnabled: true
})
})
const floralayer = new FeatureLayer({
url: "XXXXXXX",
});
map.add(floralayer)
});
Thank you for your prompt response however, even after adding the popup template property in Map View object, no pop-up is displayed when I click on the feature, the feature does get highlighted however, no pop-up box appears. I have made sure that pop-up is enabled for the feature layer.
Am not sure if I am missing something here.
Can you try adding another featureLayer to your map? It would be helpful to see if it is a problem with your map or the layer.
Are there any console errors?
Here are a couple other tricks to try.
var view = new MapView({
map: map,
center: [77.18108, 28.53337],
zoom: 15,
container: "viewDiv",
popup: new Popup({
defaultPopupTemplateEnabled: true,
popupEnabled: true
})
})
var view = new MapView({
map: map,
center: [77.18108, 28.53337],
zoom: 15,
container: "viewDiv",
popup: new Popup(...)
})
@JeffreyThompson2 I added a feature layer from sample server 6 and made modifications to the code as suggested however, still having the same issue.
I have also checked console however, no errors are shown in console as well.
I'm stumped. Just to confirm you are using 4.27? The solutions above will not work on any lower version.
I assume that the other feature layer did not show a popup as well.
Do you get a popup in the ArcGIS Online map viewer?
Have you tried adding popupEnabled: true to your featureLayer declaration?
You are getting no popup at all, not a popup with only a Zoom To button? The later happens when the popupTemplate is not properly defined.
I am not sure what happened here but, today when I added the same code in a new file everything started to work and I was able to see the popups after clicking on the feature. A slight modification that I made was adding outFields key when creating feature layer object.
Maybe a new file was all that was needed for it to work.
Thank you for your patience and persistence on this.