This package contains the stencil components currently being deployed and registered with npm as 'acl-comp-dev2'. These are rough stencil components in early stage development.
Note: the components require an ArcGIS username/token that must be currently valid.
-
arcgis-infographic: generates an ArcGIS Infographic report for a given latitude/longitude. The component automatically generates an infographic representing data collected in 1,3, and 5 mile areas around that location.
-
arcgis-report-list: this component fetches a list of infographic report templates available to the signed-in user from public reports and those shared by the Organization. The component emits an event that the arcgis-infographic component listens for. When a report is selected in the arcgis-report-list tree, the infographic will update to display that report for the given location.
-
(other c4 UI components)
- Create a web page project with package.json
- Install this component package
npm install acl-comp-dev2@latest
- Add script element to the page that points to this component's stencil-component.js file. Example:
<!-- Runtime JS for acl-comp-dev2 components -->
<script src="./node_modules/acl-comp-dev2/dist/stencil-components.js"></script>
<!-- Calcite refs acl-comp-dev2 -->
<script type="module" src=https://js.arcgis.com/calcite-components/1.0.0-beta.69/calcite.esm.js></script>
<link rel="stylesheet" type="text/css" href="./node_modules/acl-comp-dev2/dist/assets/css/calcite.css" />
- Add the arcgis-infographic component element into your page HTML. Example:
<arcgis-infographic
id="myInfographic"
reportId="19cdb404e60843799844d1f229a3ef75"
reportLocation= "34.055569, -117.182541"
username="some_username"
token="Q9coRuBz_Gen51dIITFyLslcF3i_Ej1gp0Oaj1m7-e72BU3ekpYETE1iK0OtV_8Dob8V8q1nmmHglKAu_NvqocTbIr6QuHsR1qsTIaYAvGwDAk9e9abR7huyW5gePS3kO_TIFoTPYf1NOd5q_XCxjcJIEB-xxDt8IfQavd6NH1bG_aDO6lLmeNUfMTZQen2f-X84hOLA4pVKTBQTGE_8czpCxrOfiVCexd8vmCRVBJA."
style="position: 'relative';width: '560px';height: '440px';border: 'solid #ADD8E6';">
</arcgis-infographic>
- Add the arcgis-report-list into your page HTML. Example
<arcgis-report-list
id="myReportList"
username="some_username"
token= "Q9coRuBz_Gen51dIITFyLslcF3i_Ej1gp0Oaj1m7-e72BU3ekpYETE1iK0OtV_8Dob8V8q1nmmHglKAu_NvqocTbIr6QuHsR1qsTIaYAvGwDAk9e9abR7huyW5gePS3kO_TIFoTPYf1NOd5q_XCxjcJIEB-xxDt8IfQavd6NH1bG_aDO6lLmeNUfMTZQen2f-X84hOLA4pVKTBQTGE_8czpCxrOfiVCexd8vmCRVBJA.">
</arcgis-report-list>
Note: The 'arcgis-infograpic' component requires a reportId, reportLocation as "latitude,longitude" (like "34.055569, -117.182541"), arcgis username, and arcgis currently valid token. If any of those are missing, the component won't run and displays an '!' icon inside a triangle.