This sample demonstrates how to create an application with three composite Map components that each have different spatial references. The main map displays U.S. counties in the 48 contiguous states, while the other two maps display counties in Alaska and Hawaii. Move the cursor over a county to view information about it.
Each component contains its own FeatureLayer which supports projection to different spatial references. To accomplish this, add the map components to the DOM.
<arcgis-map id="main-view-element" popup-disabled>
<arcgis-popup alignment="top-right" dock-enabled hide-action-bar hide-close-button hide-collapse-button
hide-feature-menu-heading hide-spinner include-default-actions-disabled slot="popup"></arcgis-popup>
<arcgis-map id="alaska-view-element" popup-disabled slot="bottom-left"></arcgis-map>
<arcgis-map id="hawaii-view-element" popup-disabled slot="bottom-left"></arcgis-map>
<arcgis-legend slot="bottom-right"></arcgis-legend>
</arcgis-map>Then, create layers with spatial references set to the desired coordinate system alongside definitionExpressions so that only the relevant features are rendered. Add each configured layer to its corresponding map, then set the component's extent to center on the desired region.
const mainWKID = { wkid: 5070 }; // NAD_1983_Contiguous_USA_Albers
const alaskaWKID = { wkid: 5936 }; // WGS_1984_EPSG_Alaska_Polar_Stereographic
const hawaiiWKID = { wkid: 102007 }; // Hawaii_Albers_Equal_Area_Conic
const createFeatureLayer = (spatialReference, definitionExpression) => {
return new FeatureLayer({
definitionExpression, // filters the features
outFields: ["NAME", "STATE_NAME", "VACANT", "HSE_UNITS"],
portalItem: { id: "b234a118ab6b4c91908a1cf677941702" },
spatialReference, // sets the projection
title: "U.S. counties",
});
};
const createExtent = (xmin, xmax, ymin, ymax, spatialReference) => {
return new Extent({ xmin, xmax, ymin, ymax, spatialReference });
};
const mainViewElement = document.getElementById("main-view-element");
const alaskaViewElement = document.getElementById("alaska-view-element");
const hawaiiViewElement = document.getElementById("hawaii-view-element");
// Await the components until their methods are ready to use.
await mainViewElement.componentOnReady();
await alaskaViewElement.componentOnReady();
await hawaiiViewElement.componentOnReady();
// Add each layer with its spatial reference and region query.
mainViewElement.map.add(createFeatureLayer(mainWKID, "STATE_NAME not in ('Alaska', 'Hawaii')"));
alaskaViewElement.map.add(createFeatureLayer(alaskaWKID, "STATE_NAME = 'Alaska'"));
hawaiiViewElement.map.add(createFeatureLayer(hawaiiWKID, "STATE_NAME = 'Hawaii'"));
// Set each bounding box's coordinates and spatial reference.
mainViewElement.extent = createExtent(-3094834, 2752687, -44986, 3271654, mainWKID);
alaskaViewElement.extent = createExtent(-188023, 3393803, -2456235, 230133, alaskaWKID);
hawaiiViewElement.extent = createExtent(-362200, 252533, 604983, 1043355, hawaiiWKID);By default, the view will use the spatial reference of the basemap. If the basemap isn't specified, then the spatial reference of the first operational layer is used. That is why each layer is given its own spatial reference and passed to its corresponding map in this sample. The spatial reference of the layer in this sample is WGS-84 Web Mercator Auxiliary Sphere. See the images below, which compares the visual difference of Alaska between these two spatial references.
| Alaska Polar Stereographic | Web Mercator |
|---|---|
|
|
The ability to reproject on the fly separates Feature from other static layers, such as VectorTileLayer, which only displays data with the spatial reference in which the data is cooked.