{"id":13505645,"url":"https://github.com/Esri/react-sceneview","last_synced_at":"2025-03-30T00:31:19.644Z","repository":{"id":46155323,"uuid":"153608371","full_name":"Esri/react-sceneview","owner":"Esri","description":"React component that wraps the ArcGIS JS API 4.x SceneView","archived":false,"fork":false,"pushed_at":"2021-11-10T17:19:36.000Z","size":267,"stargazers_count":11,"open_issues_count":2,"forks_count":5,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-11-14T21:36:54.129Z","etag":null,"topics":["arcgis-js-api","react","react-components","web"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Esri.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-18T10:48:06.000Z","updated_at":"2022-07-08T09:22:10.000Z","dependencies_parsed_at":"2022-09-11T15:31:05.236Z","dependency_job_id":null,"html_url":"https://github.com/Esri/react-sceneview","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Esri%2Freact-sceneview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Esri%2Freact-sceneview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Esri%2Freact-sceneview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Esri%2Freact-sceneview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Esri","download_url":"https://codeload.github.com/Esri/react-sceneview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246262490,"owners_count":20749170,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["arcgis-js-api","react","react-components","web"],"created_at":"2024-08-01T00:01:11.014Z","updated_at":"2025-03-30T00:31:14.624Z","avatar_url":"https://github.com/Esri.png","language":"JavaScript","funding_links":[],"categories":["Helpers"],"sub_categories":[],"readme":"# **DEPRECATED**\n\nThis project is no longer actively maintained.\n\n---\n\n# react-sceneview\n\nA simple Esri [SceneView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html) react component that builds on the [ArcGIS API for JavaScript](https://developers.arcgis.com/javascript/index.html).\n\n## Table of Contents\n\n- [Installing](#installing)\n- [Examples](#examples)\n- [Props](#props)\n- [Issues](#issues)\n- [Contributing](#contributing)\n- [Licensing](#licensing)\n\n## Installing\n\n```\n$ npm install --save react-sceneview\n```\n\nThen, just import to your React component:\n\n```jsx\nimport { SceneView, Scene } from 'react-sceneview';\n```\n\n## Examples\n\n```jsx\nimport React from 'react';\nimport { render } from 'react-dom';\nimport { SceneView, Scene, Webscene } from 'react-sceneview';\n\nrender(\n  \u003cSceneView id=\"sceneview\"\u003e\n    \u003cScene\u003e\n      \u003cWebscene  portalItem={{ id: '34859cee6739438d93262a5aa91bf834' }} /\u003e\n    \u003c/Scene\u003e\n  \u003c/SceneView\u003e,\n  document.getElementById('root'),\n);\n```\n\nAdd a [WebScene](https://developers.arcgis.com/javascript/latest/api-reference/esri-WebScene.html) and/or individual layers:\n\n```jsx\n\u003cSceneView id=\"sceneview\"\u003e\n  \u003cScene\u003e\n    \u003cLayer id=\"buildings\" layerType=\"scene\" url={SCENE_LAYER_URL} /\u003e\n    \u003cLayer id=\"districts\" layerType=\"feature\" url={FEATURE_LAYER_URL} /\u003e\n  \u003c/Scene\u003e\n\u003c/SceneView\u003e\n```\n\nSupports various features such as UI widgets, custom basemaps, selection, highlights, definitionExpression, etc...\n\n```jsx\n\u003cSceneView id=\"sceneview\" onClick={handleSelect}\u003e\n  \u003cUI.Zoom position=\"top-left\" /\u003e\n  \u003cScene\u003e\n    \u003cCustomBasemap portalItem={{ id: 'ae53cf192181425ab999e8a19e41a6dc' }} /\u003e\n    \u003cLayer id=\"1\" url={URL1} layerType=\"scene\" selectable highlight={selection} /\u003e\n    \u003cLayer id=\"2\" url={URL2} layerType=\"feature\" definitionExpression=\"Scenario IN (1,2)\" /\u003e\n    \u003cLayer id=\"3\" url={URL3} layerType=\"feature\" visible={false} /\u003e\n  \u003c/Scene\u003e\n\u003c/SceneView\u003e\n```\n\nDynamically add and remove layers:\n\n```jsx\n  \u003cSceneView\n    id=\"sceneview\"\n  \u003e\n    \u003cScene\u003e\n      {layers.map(({ layerId, ...layerSettings }) =\u003e (\n        \u003cLayer\n          key={layerId}\n          id={layerId}\n          {...layerSettings}\n        /\u003e\n      ))}\n    \u003c/Scene\u003e\n  \u003c/SceneView\u003e\n```\n\nSupports client-side graphics: dynamically add and remove graphics from feature layer.\n\n```jsx\n\u003cSceneView id=\"sceneview\"\u003e\n  \u003cScene\u003e\n    \u003cLayer\n      id=\"points\"\n      layerType=\"feature\"\n      geometryType=\"polygon\"\n      fields={fields}\n      objectIdField=\"OID\"\n    \u003e\n      {graphics.map(graphic =\u003e (\n        \u003cGraphic geometry={graphic.geometry} attributes={graphic.attributes} symbol={graphic.symbol} /\u003e\n      )}\n    \u003c/Layer\u003e\n  \u003c/Scene\u003e\n  \u003cDrawingTool onDraw={handleDrawUpdate} /\u003e\n\u003c/SceneView\u003e\n```\n\n## Props\n\n### SceneView\n\n| Name          | Type           | Default | Description |\n| :------------ | :------------- | :------ | :---------- |\n| id            | string         |         | Unique id of this sceneview. This id is used to handle hot module reloading and other component refreshes. |\n| environment   | object         |         | Environment parameters of the sceneview. |\n| goTo          | object |  | Sets the view to a given target `camera` or `geometry`.  |\n| onClick       | function |   | Callback fired after a click in the SceneView. Returns hit test results. |\n| onMouseMove   | function |   | Callback fired after a mouse move (hover) in the SceneView. Returns hit test results. |\n| onCameraChange | function |  | A callback fired after the camera has been changed. Returns the new `camera` object. |\n\n### Scene\n\n| Name          | Type           | Default | Description |\n| :------------ | :------------- | :------ | :---------- |\n| basemap       | string | `gray-vector` | Specifies a basemap for the map. One of `['streets', 'satellite', 'hybrid', 'topo', 'gray', 'dark-gray', 'oceans', 'national-geographic', 'terrain', 'osm', 'dark-gray-vector', 'gray-vector', 'streets-vector', 'topo-vector', 'streets-night-vector', 'streets-relief-vector', 'streets-navigation-vector']`. |\n| ground        | string | `world-elevation` | Specifies the surface properties for the map. |\n| initialViewProperties | object |  | This object contains properties such as `viewpoint`, `spatialReference`, `viewingMode`, and `environment` that should be applied to the SceneView when the scene loads. |\n\n### Layer\n\n| Name          | Type           | Default | Description |\n| :------------ | :------------- | :------ | :---------- |\n| id            | string         |         | Unique id used to reference the layer. |\n| url          | string         |  | URL of scene or feature layer. If omitted, a layer `source` is required. |\n| visible        | bool | `true` | Indicates if the layer is visible in the SceneView. |\n| selectable     | bool | `false` | Indicates if features on this layer are returned in `onClick` and `onMouseMove` events, as well as from the selection tools. |\n| highlight | array | `[]` | Feature object ids to be highlighted (usually selection). |\n| definitionExpression | string |  | The SQL where clause used to filter features on the client. |\n| renderer | object | | The renderer assigned to the layer, supplied as an [Auto-casting object](https://developers.arcgis.com/javascript/latest/guide/autocasting/index.html). |\n| rendererJson | object | | The renderer assigned to the layer, supplied as a JSON object generated from a product in the ArcGIS platform. |\n| labelingInfo | object | | The label definition for this layer, specified as an array of [LabelClass](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-support-LabelClass.html). |\n| labelsVisible | bool | `false` | Indicates whether to display labels for this layer. |\n| refresh | number |  | Change value to refresh the layer. |\n| outFields | array | | Attribute fields which will be exposed (_e.g._, through selection callbacks). |\n\nIf using client-side graphics, the following props are required:\n\n| Name          | Type           | Default | Description |\n| :------------ | :------------- | :------ | :---------- |\n| geometryType | string | | Geometry type when using client-side graphics. |\n| fields | array | | Attribute fields when using client-side graphics. |\n| objectIdField | string | | Object id field when using client-side graphics.|\n\n### Graphic\n\n| Name          | Type           | Default | Description |\n| :------------ | :------------- | :------ | :---------- |\n| geometry      | object         |  | The geometry that defines the graphic's location. |\n| attributes    | array          |  | Name-value pairs of fields and field values associated with the graphic. |\n| symbol        | object         |  | The Symbol for the graphic. |\n\n### CustomBasemap\n\n| Name          | Type           | Default | Description |\n| :------------ | :------------- | :------ | :---------- |\n| portalItem    | object         |  | The portal item (WebMap or [WebScene](https://developers.arcgis.com/javascript/latest/api-reference/esri-WebScene.html)) containing the custom base map. |\n\n### CustomElevationLayer\n\n| Name          | Type           | Default | Description |\n| :------------ | :------------- | :------ | :---------- |\n| url    | string         |  | URL pointing to the Elevation layer resource on an ArcGIS Image Server. |\n\n### UI.Zoom, UI.Compass, UI.NavigationToggle\n\n| Name          | Type           | Default | Description |\n| :------------ | :------------- | :------ | :---------- |\n| position            | string         |         | Position of the UI widget. One of `['top-left', 'top-right', 'bottom-right', 'bottom-left']`. Default is `'top-left'`. |\n\n## Issues\n\nFind a bug or want to request a new feature?  Please let us know by submitting an issue.\n\n## Contributing\n\nEsri welcomes contributions from anyone and everyone. Please see our [guidelines for contributing](https://github.com/esri/contributing).\n\n## Licensing\nCopyright 2019 Esri\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n   http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n\nA copy of the license is available in the repository's [license.txt](/license.txt) file.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FEsri%2Freact-sceneview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FEsri%2Freact-sceneview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FEsri%2Freact-sceneview/lists"}