Focus Area | Sample | ArcGIS Maps SDK for JavaScript

This sample demonstrates the use of the Focus Areas in a Scene component.

Focus areas help to focus the viewers’ attention to a certain part of the scene. Focus areas can be captured in slides and shared as part of the webscene. The sample includes basic UI controls to choose focus area style Dark or Bright, or None to disable the focus area. A minimal UX to modify the focus area is implemented using the SketchViewModel class.

Click inside the focus area to modify it. With the first click, it is possible to move, scale or rotate the area. With the second click inside the focus area, single vertices of the shape can be adjusted.

<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <title>Focus Area | Sample | ArcGIS Maps SDK for JavaScript</title>  <script type="module" src="https://js.arcgis.com/5.0/"></script> <style> html, body { margin: 0; height: 100%; } #styleControl { text-align: center; position: absolute; bottom: 20px; max-width: 300px; margin: auto; left: 0; right: 0; align-items: center; } </style> </head> <body> <arcgis-scene basemap="satellite" ground="world-elevation" camera-position="11.57879, 48.1346375, 865" camera-tilt="57" camera-heading="321"> <arcgis-zoom slot="top-left"></arcgis-zoom> <arcgis-navigation-toggle slot="top-left"></arcgis-navigation-toggle> <arcgis-compass slot="top-left"></arcgis-compass> </arcgis-scene> <calcite-block expanded id="styleControl" label="Focus area style"> Focus area style <calcite-segmented-control> <calcite-segmented-control-item value="dark">Dark</calcite-segmented-control-item> <calcite-segmented-control-item value="bright" checked >Bright</calcite-segmented-control-item > <calcite-segmented-control-item value="none">None</calcite-segmented-control-item> </calcite-segmented-control> </calcite-block> <script type="module"> const [ SketchViewModel, SimpleFillSymbol, Graphic, Polygon, Collection, GraphicsLayer, IntegratedMeshLayer, FocusArea, ] = await $arcgis.import([ "@arcgis/core/widgets/Sketch/SketchViewModel.js", "@arcgis/core/symbols/SimpleFillSymbol.js", "@arcgis/core/Graphic.js", "@arcgis/core/geometry/Polygon.js", "@arcgis/core/core/Collection.js", "@arcgis/core/layers/GraphicsLayer.js", "@arcgis/core/layers/IntegratedMeshLayer.js", "@arcgis/core/effects/FocusArea.js", ]); const viewElement = document.querySelector("arcgis-scene"); const meshLayer = new IntegratedMeshLayer({ url: "https://tiles-eu1.arcgis.com/7cCya5lpv5CmFJHv/arcgis/rest/services/Munich_3D_Mesh_City_Mapper_2_SURE_43/SceneServer", }); await viewElement.viewOnReady(); viewElement.map.add(meshLayer); // Creating the initial focus area const initialFocusAreaGeometry = new Polygon({ spatialReference: { latestWkid: 3857, wkid: 102100, }, rings: [ [ [1288603, 6130075], [1288506, 6129722], [1288260, 6129821], [1288284, 6129899], [1288279, 6129969], [1288296, 6130009], [1288415, 6130021], [1288459, 6130133], [1288603, 6130075], ], ], }); const focusArea = new FocusArea({ title: "Focus Area", id: "focusarea-0", outline: { color: [255, 128, 128, 0.55] }, geometries: new Collection([initialFocusAreaGeometry]), }); // Adding the focus area to the map with the "bright" style viewElement.focusAreas.areas.add(focusArea); viewElement.focusAreas.style = "bright"; // UI control to change the global focus area style and enable/disable focus area const styleControl = document.getElementsByTagName("calcite-segmented-control")[0]; styleControl.addEventListener("calciteSegmentedControlChange", (e) => { const selectedValue = e.target.selectedItem.value; if (selectedValue === "none") { // Disable the focus area viewElement.focusAreas.areas.at(0).enabled = false; } else { // Apply selected style "dark" or "bright" viewElement.focusAreas.style = e.target.selectedItem.value; // Enable the focus area viewElement.focusAreas.areas.at(0).enabled = true; } }); // Setting up GraphicsLayer, Graphic and SketchViewModel for basic modification of the focus area const sketchLayer = new GraphicsLayer({ elevationInfo: { mode: "on-the-ground" }, }); const sketchGraphic = new Graphic({ geometry: viewElement.focusAreas.areas.at(0).geometries.at(0), symbol: new SimpleFillSymbol({ color: [255, 255, 255, 1 / 255], }), }); sketchLayer.graphics.add(sketchGraphic); viewElement.map.add(sketchLayer); function updateFocusArea(event) { // Using the resulting sketch graphic as input for focus area geometry focusArea.geometries = new Collection([event.graphics.at(0).geometry]); } // Using sketch view model to allow modifying the graphic and update the focus area accordingly const sketchViewModel = new SketchViewModel({ layer: sketchLayer, view: viewElement.view, }); sketchViewModel.on("update", (event) => { updateFocusArea(event); }); </script> </body> </html>