To view a working implementation of the HTML-embedded Data Inspector functionality, see the HTML+JS single page application
example application in the Data Inspector Library examples .
Create an empty folder for your web app.
Download the Data Inspector
bundle archive from the portal.
Copy the contents of the bundle's root folder into the document root.
Download the Three.js library archive. The Data Inspector Library uses Three.js version 0.120.
Copy the three.min.js
file from the build
folder into your js
folder.
As a result, your website file structure should look like below:
resources/
.. .
resources files
.. .
js/
monaco-editor/
editor.worker.bundle.js
ts.worker.bundle.js
three.min.js
vendors-bundle.js
data-inspector-bundle.js
data-inspector-decoder-bundle.js
Create an index.html
file in the root directory. At the end of the page's < body>
tag, include the following:
< script src = " ./js/three.min.js" > </ script>
< script src = " ./js/vendors-bundle.js" > </ script>
< script src = " ./js/data-inspector-bundle.js" > </ script>
Note All Data Inspector Library components are exposed through the DI
object.
Create a container element for DataInspector
(the top-level component of the Data Inspector Library) and place it before the script tags:
< div id = " map-here" > </ div>
Create an instance of DataInspector
:
< script type = " text/javascript" >
new DI.DataInspector(
basicConfig,
document.getElementById("map-here"),
customDataRenderingConfig
);
</ script>
To see how it works, copy and paste the sample HTML code below into the index.html
file we created in the previous steps:
< head>
< title> Data Inspector</ title>
< style>
@font-face {
font-family : Fira Sans;
src : url ( 'https://fonts.gstatic.com/s/firasans/v8/va9E4kDNxMZdWfMOD5Vvl4jO.ttff') format ( 'truetype' ) ;
font-weight : 300;
}
@font-face {
font-family : Fira Sans;
src : url ( 'https://fonts.gstatic.com/s/firasans/v8/va9E4kDNxMZdWfMOD5Vvl4jO.ttf') format ( 'truetype' ) ;
font-weight : normal;
}
@font-face {
font-family : Fira Sans;
src : url ( 'https://fonts.gstatic.com/s/firasans/v8/va9B4kDNxMZdWfMOD5VnZKveRhf_.ttf') format ( 'truetype' ) ;
font-weight : 500;
}
@font-face {
font-family : Fira Sans;
src : url ( 'https://fonts.gstatic.com/s/firasans/v8/va9B4kDNxMZdWfMOD5VnLK3eRhf_.ttf') format ( 'truetype' ) ;
font-weight : bold;
}
body {
margin : 0;
}
#map-here {
box-sizing : border-box;
width : 100vw;
height : 100vh;
padding : 5vh 5vw;
}
#map-here.full-screen {
padding : 0;
width : 100%;
height : 100%;
}
</ style>
</ head>
< body>
< div id = " map-here" > </ div>
< script src = " ./js/three.min.js" > </ script>
< script src = " ./js/vendors-bundle.js" > </ script>
< script src = " ./js/data-inspector-bundle.js" > </ script>
< script type = " text/javascript" >
var basicConfig = {
lookupServiceEnvironment: DI.LookupEnvironment.HERE,
mapView: {
decoder: {
url: "./js/data-inspector-decoder-bundle.js"
},
theme:
"./resources/normal.reduced.night.json"
},
monacoEditorWorkersBasePath: "./js/monaco-editor",
widgets: {
authForm: {
accessKeyForm: true,
localAuthForm: true
}
},
toolbar: {
languageSelector: true
}
};
var customDataRenderingConfig = {
enableCoverage: true,
enableFiltering: true,
enableInfoPanel: true,
enableExtendedCoverage: true,
interactiveDataSource: {
hrn: "hrn:here:data::olp-here:rib-2",
layer: "topology-geometry"
}
};
new DI.DataInspector(
basicConfig,
document.getElementById("map-here"),
customDataRenderingConfig
);
</ script>
</ body>
To run the app on a local web server, install a stable version of NodeJS .
Serve the contents of the folder using a local web server:
npx serve
Use the address in the console output to run the web app locally. Usually, it is http://localhost:5000
.
Use your platform credentials to connect to the platform:
As a result, you should see the following:
Figure 1. Single-page application with platform data visualization