7.2 Basic Usage of the Spatial Studio Web Component
Learn how to embed the Spatial Studio web component in an HTML page to load and view your published project in your web application.
The following shows the basic usage of the Spatial Studio web component for
embedding in JavaScript code. Note that the <script> tag
references embeddable.js in your HTML file.
<script src="https://<host_name>:4040/spatialstudio/api/v1/embeddable.js"></script>
<div style="width:100%; height: 75vh;">
<spatial-studio-project
id="spatial-studio-project-1"
server-url="https://<host_name>:4040/spatialstudio/"
project-id="7c6301f4fdcc1f3dee64f05f84d5f96c"
token="eyJ.…."
project-header="off"
layers-list="on">
</spatial-studio-project>
</div>Table 7-1 Supported Attributes for Embedding the Spatial Studio Web Component
| Attribute Name | Description |
|---|---|
id |
Unique ID for element identification and access to its methods. |
server-url |
URL of the Spatial Studio server. |
project-id |
The published project ID to be loaded. |
token |
The oauth token generated in the Spatial Studio application. |
project-header |
"on" or "off" to show the project
header.
|
layers-list |
"on" or "off" to show the layers
list and all the styling panels.
|