javascriptangularlayerarcgis-js-apiesri-maps

Displaying all layers in ArcGIS feature service in Angular application

As you can see in the below living atlas layer, there are multiple layers inside (state,county,tract etc..)

But when I add this link, it will display only the first layer.(State). Then, when I zoom in the map, that layer disappears.

I want to display all the 4 layers of that feature service.(state,county, tract, blockgroups)

How do I achieve this?

.ts

const genderLayer = new FeatureLayer({
    url: "https://services2.arcgis.com/FiaPA4ga0iQKduv3/ArcGIS/rest/services/US_Census_Age_Gender/FeatureServer",
    });
    const layersToCreateMyPopupTemplate = [ageLayer,genderLayer];

const map = new Map({
      basemap: 'topo-vector',
      layers: layersToCreateMyPopupTemplate
  });

const view = new MapView({
  container,
  map: map,
  zoom: 3,
  center: [-97.63, 38.34],
});

.html

<!-- Map Div -->
<div #mapViewNode></div>
Solution

  • The issue you are having is that,

    1. you are trying to use FeatureLayer with the whole map service, that means in that service you have 4 FeatureLayers, one for each layer of the service,
    1. it disappear because the state layer, the first one (number 0), it is only visible until Max. Scale: 20000001

    That type of service it is made on purpose in that way, to make it efficient (easy to understand) and with good performance. That is, it shows what it need to show at each scale.

    Usually is better to display using MapImageLayer or similar and then query the using the feature service. Sadly, in this case it does not offer that kind of service (MapServer), so you will have to creat four FeatureLayer, one for each.