Layers

[Tom Wayson]

API ideas:

From an item

useLayer(view.map, 'af1ad38816814b7eba3fe74a3b84412d')

Feature Layer

useLayer(view.map, 'FeatureLayer', { url })

Scene Layer

useLayer(view.map, 'SceneLayer', { portalItem, usePopup: false, renderer }); -

MapImage Layer

useLayer(view.map, 'MapImageLayer', { portalItem }); -

Image Layer

useLayer(view.map, 'ImageryLayer', { url, format })

Vector Tile Layer

useLayer(view.map, 'VectorTileLayer', { url })

Multiple layers

An array whose elements are the arguments to useLayer()?

const layers = [
  'af1ad38816814b7eba3fe74a3b84412d',
  ['FeatureLayer', { url }],
  ['MapImageLayer', { portalItem }]
];
useLayers(view.map, layers);

Layers are added in the order of the array?

[Tom Wayson]

Another idea that I've had would be instead of adding another hook, to instead take the layers array as part of the useMap()/useView() options, so:

import React from 'react';
import { useMap } from 'esri-loader-hooks';

function MapView() {
  const map = {
    basemap: "streets"
  };
  const options = {
    view: {
      center: [15, 65],
      zoom: 4
    },
    /* new API here */
    layers: [
      'af1ad38816814b7eba3fe74a3b84412d',
      ['FeatureLayer', { url }],
      ['MapImageLayer', { portalItem }]
   ]
  };
  const [ref] = useMap(map, options);
  return <div style={{ height: 400 }} ref={ref} />;
}

Like all other options, these would not be updated even if they were derived from component props/state.

This makes sense to me b/c it's rare that you are dynamically adding/removing a layer based on changes to component properties, and in those cases, you can still add your own effect to do that.

I could always start w/ options.layers and add useLayer()/useLayers() later if needed. I'm leaning towards this ^^^.

I considered doing graphics this way instead of adding the graphics hooks, so useMap(map, {view, graphics: [point]}) but it seemed more likely that a graphic or graphics would be updated in response to changes in props/state.