nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Popups only access top layer and Popups display beyond the map extent.

LauraTeisl

If you are zoomed out on my map, points overlap and I need my popups to list all of the layers (similar to ArcGIS Online maps, where the popup will list "1 of 4" if layers overlap.) My code is available at www.laurateisl.com.

Also, some of my popups display beyond the extent of the map. Is there any way to restrict this behavior?

Any advice would be appreciated.
Thanks, Laura

Vind meer berichten getagd met

Accepted answers

All comments

TimWitt

Laura,

Maybe try to incorporate this type of infowindow. With this you will be able to flip through all the points that have been selected.

Tim

LauraTeisl

Hate to say, but I am an ArcGIS API for JavaScript beginner. I tried to incorporate the code from the example you suggested and seem to have lost my layers. I commented out my old popup code as a reference. Perhaps someone can look at my code at www.laurateisl.com and give me some suggestions/hints as to how to move forward. I only added two of the feature layers to the new popup code to make sure I was doing this correctly (which I am not). Again, I'm a newbie....

TracySchloss

I don't know what the advantage would be for using PopupTemplate vs. InfoTemplate. I thought PopupTemplate was an AGOL thing and I'm not using it here. If you define a popup for your map and then infoTemplates for your featureLayer, that should do the trick. The syntax for the template isn't the same as what you're using, but this is a pretty straight forward way to handle it.

 var highlightMarkerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 22,
    new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
    new Color([255,255,0]), 2),new Color([255,255,0,0.5]));
var highlightFillSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, 
    new Color([255,200,0]), 2), new Color([255,255,0,0.50]));
       
 var popup = new Popup({
            fillSymbol: highlightFillSymbol,
            markerSymbol: highlightMarkerSymbol
        }, domConstruct.create("div"));

       var map = new Map("mapDiv", {
            infoWindow: popup,
            basemap: "streets",
            center: [-92.593, 38.5],
            zoom: 7
        });
  var infoTemplate = new InfoTemplate();       
    infoTemplate.setTitle("<b>${FACILITY}</b>");       
    infoTemplate.setContent( "${ADDRESS}<br/>"
     + "${CITY},  ${STATE}<br/>"
     + "Phone: ${PHONE}"
     );
    pointLayer = new FeatureLayer(servicePathName+"/arcgis/rest/services/myLayerName/MapServer/0",
    {mode: FeatureLayer.MODE_SNAPSHOT,
    id: "pointLayer",
    outFields: ["FACILITY", "ADDRESS", "CITY" , "STATE" , "PHONE"],
    infoTemplate: infoTemplate      
    });

I like to use popup using symbols styled in yellow because I get a highlight effect when I click on the feature. This will give you the 'stepping through multiples' you're looking for. I think infoWindows, infoTemplates and PopupTemplates are confusing to sort through.

LauraTeisl

I am pretty sure I replicated your example. For some reason, my layers are not showing up. Any help would be appreciated! Here is the code:

 var findTask, findParams;
        var map, center, zoom;
        var grid, store;
  var highlightMarkerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 22,
      new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
      new Color([255,255,0]), 2),new Color([255,255,0,0.5]));
  var highlightFillSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
      new Color([255,200,0]), 2), new Color([255,255,0,0.50]));

   var popup = new Popup({
   titleInBody: false,
            fillSymbol: highlightFillSymbol,
            markerSymbol: highlightMarkerSymbol
        }, domConstruct.create("div"));


  parser.parse();

        center = [-69, 45.5];
        zoom = 6;
        map = new esri.Map("map", {
          basemap : "topo",
          center : center,
          zoom : zoom,
    infoWindow : popup
        });
  
  var scalebar = new Scalebar({
          map: map,
          scalebarUnit: "dual"
        });

  var home = new HomeButton({
          map: map
          }, "HomeButton");
          home.startup();

        map.on("load", function() {
          findParams = new FindParameters();
          findParams.returnGeometry = true;
          findParams.layerIds = [0];
          findParams.searchFields = ["ORG_NAME"];
          findParams.outSpatialReference = map.spatialReference;

          findParams2 = new FindParameters();
          findParams2.returnGeometry = true;
          findParams2.layerIds = [0];
          findParams2.searchFields = ["org_name"];
          findParams2.outSpatialReference = map.spatialReference;

          findParams3 = new FindParameters();
          findParams3.returnGeometry = true;
          findParams3.layerIds = [0];
          findParams3.searchFields = ["org_name"];
          findParams3.outSpatialReference = map.spatialReference;
    
   findParams4 = new FindParameters();
          findParams4.returnGeometry = true;
          findParams4.layerIds = [0];
          findParams4.searchFields = ["org_name"];
          findParams4.outSpatialReference = map.spatialReference;

        });

        function doFind() {
          findParams.searchText = dom.byId("processorName").value;
          findTask.execute(findParams, showResults);
        }

        function doFind2() {
          findParams2.searchText = dom.byId("specialtyName").value;
          findTask2.execute(findParams2, showResults);
        }

        function doFind3() {
          findParams3.searchText = dom.byId("buyingclubName").value;
          findTask3.execute(findParams3, showResults);
        }

        function doFind4() {
          findParams4.searchText = dom.byId("farmName").value;
          findTask4.execute(findParams4, showResults);
        }

        registry.byId("search").on("click", doFind);
        registry.byId("search2").on("click", doFind2);
  registry.byId("search3").on("click", doFind3);
  registry.byId("search4").on("click", doFind4);


        domClass.add(map.infoWindow.domNode, "myTheme");        


        var template = new InfoTemplate();
          infoTemplate.setTitle("<b>${ORG_NAME}</b>");
       infoTemplate.setContent( "${ADDRESS}<br/>"
       + "${CITY_TOWN},  ${STATE}<br/>"
        + "Phone: ${PHONE}"
      );


        var template2 = new InfoTemplate();
          infoTemplate.setTitle("<b>${org_name}</b>");
       infoTemplate.setContent( "${address}<br/>"
       + "${city_town},  ${state}<br/>"
        + "Phone: ${phone}"
      );
  
    
  var template3 = new InfoTemplate();
          infoTemplate.setTitle("<b>${org_name}</b>");
       infoTemplate.setContent( "${address}<br/>"
       + "${city_town},  ${state}<br/>"
        + "Phone: ${phone}"
      );
  

     var template4 = new InfoTemplate();
          infoTemplate.setTitle("<b>${org_name}</b>");
       infoTemplate.setContent( "${address}<br/>"
       + "${city_town},  ${state}<br/>"
        + "Phone: ${phone}"
      );



        var featureLayer = new FeatureLayer("http://ummgis.umm.maine.edu:6080/arcgis/rest/services/testing/ProcessorsGIS428/MapServer/0",{
          mode: FeatureLayer.MODE_SNAPSHOT,
       id: "featureLayer",
       outFields: ["*"],
       infoTemplate: template
     });

        var query = new Query();
        query.where = "1=1";

        featureLayer.queryFeatures(query, function(featureSet) {
          var nameList = [];


          dojo.map(featureSet.features, function(feature) {
            nameList.push(feature.attributes.ORG_NAME);
          });

          arrayUtils.forEach(nameList, function(feature){
                registry.byId("processorName").get('store').add({ name: feature});
          })
        });

        findTask = new FindTask("http://ummgis.umm.maine.edu:6080/arcgis/rest/services/testing/ProcessorsGIS428/MapServer");
  


  var featureLayer2 = new FeatureLayer("http://ummgis.umm.maine.edu:6080/arcgis/rest/services/testing/SpecFoodProdGIS428/MapServer/0",{
     mode: FeatureLayer.MODE_SNAPSHOT,
       id: "featureLayer2",
       outFields: ["*"],
       infoTemplate: template2
        });

        var query2 = new Query();
        query2.where = "1=1";

        featureLayer2.queryFeatures(query, function(featureSet) {
          var nameList2 = [];

          dojo.map(featureSet.features, function(feature) {
            nameList2.push(feature.attributes.org_name);
          });

          arrayUtils.forEach(nameList2, function(feature){
                registry.byId("specialtyName").get('store').add({ name: feature});
          })
        });

        findTask2 = new FindTask("http://ummgis.umm.maine.edu:6080/arcgis/rest/services/testing/SpecFoodProdGIS428/MapServer");


        var featureLayer3 = new FeatureLayer("http://ummgis.umm.maine.edu:6080/arcgis/rest/services/testing/BuyingClubsGIS428/MapServer/0",{
           mode: FeatureLayer.MODE_SNAPSHOT,
       id: "featureLayer3",
       outFields: ["*"],
       infoTemplate: template3
       });

        var query3 = new Query();
        query3.where = "1=1";

        featureLayer3.queryFeatures(query, function(featureSet) {
          var nameList3 = [];

          dojo.map(featureSet.features, function(feature) {
            nameList3.push(feature.attributes.org_name);
          });

          arrayUtils.forEach(nameList3, function(feature){
                registry.byId("buyingclubName").get('store').add({ name: feature});
          })
        });

        findTask3 = new FindTask("http://ummgis.umm.maine.edu:6080/arcgis/rest/services/testing/BuyingClubsGIS428/MapServer");




        var featureLayer4 = new FeatureLayer("http://ummgis.umm.maine.edu:6080/arcgis/rest/services/testing/FarmsGIS428/MapServer/0",{
           mode: FeatureLayer.MODE_SNAPSHOT,
       id: "featureLayer4",
       outFields: ["*"],
       infoTemplate: template4
       });

        var query4 = new Query();
        query4.where = "1=1";

        featureLayer4.queryFeatures(query, function(featureSet) {
          var nameList4 = [];

          dojo.map(featureSet.features, function(feature) {
            nameList4.push(feature.attributes.org_name);
          });

          arrayUtils.forEach(nameList4, function(feature){
                registry.byId("farmName").get('store').add({ name: feature});
          })
        });

        findTask4 = new FindTask("http://ummgis.umm.maine.edu:6080/arcgis/rest/services/testing/FarmsGIS428/MapServer");



       map.on("layers-add-result", function (evt) {
        var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
           return {layer:layer.layer, title:layer.layer.name};
        });
        if (layerInfo.length > 0) {
          var legendDijit = new Legend({
            map: map,
            layerInfos: layerInfo
          }, "legendDiv");
          legendDijit.startup();
         }
       });

        map.addLayers([featureLayer, featureLayer2, featureLayer3, featureLayer4]);
   
        function showResults(results) {
          map.graphics.clear();
          console.log(results);
          var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 15,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL, new Color([255, 0, 0, 1]), 1), new Color([255, 0, 0, 1])
          );

          var items = arrayUtils.map(results, function(result) {
            var graphic = result.feature;
            graphic.setSymbol(symbol);
            map.graphics.add(graphic);

            return result.feature.attributes;
          });

          var data = {
            identifier : "Name",
            label : "Name",
            items : items
          };

          store = new ItemFileReadStore({
            data : data
          });
          var grid = registry.byId("grid");

          grid.setStore(store);
          grid.on("rowclick", onRowClickHandler);

          map.centerAndZoom(center, zoom);
        }

        function onRowClickHandler(evt) {
          var clickedOrgName = evt.grid.getItem(evt.rowIndex).ORG_NAME;
          var selectedOrgName = arrayUtils.filter(map.graphics.graphics, function(graphic) {
            return ((graphic.attributes) && graphic.attributes.ORG_NAME === clickedOrgName);
          });
          if (selectedOrgName.length) {
            var center = [selectedOrgName[0].geometry.getLongitude(), selectedOrgName[0].geometry.getLatitude()];
            var zoom = 15;
            map.centerAndZoom(center, zoom);
          }
        }

      });

TracySchloss

Have you tried making a stripped down version that just has the map and the layers? You have quite a bit going on here with all your finds and your searches. There's definitely a better way to handle that BTW, but off the top of my head I don't have an example to share.

I tried your link with Firebug turned on and it's generating errors. If you have anything wrong in the definition of a layer, it's not going to load. It looks like you're telling featureLayer you have an infoTemplate called infotemplate, but that's not defined.

Also an FYI, you have at least one place you have dojo.map. Since you're using AMD style, that should be arrayUtils.map, not dojo.

LauraTeisl

Tracy, thanks. I think I have reached a point where I need to start over with a clean slate. It is my first venture into ArcGIS API for JavaScript and wanted to see how far I could take it before I got bogged down and thanks to the Forum, I have learned quite a bit.

Thanks for taking a look at my code. I will look into your suggestions.
Laura

TracySchloss

I've never had any luck trying to put everything into my code all at once. Lots of times my individual processes will work just fine and I never do spot what was wrong in my original code.

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.