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.
Unzip 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.127.
Copy the three.min.js
file 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>
Add fonts to < head>
:
< link rel = " preconnect" href = " https://fonts.googleapis.com" >
< link rel = " preconnect" href = " https://fonts.gstatic.com" crossorigin >
< link rel = " prefetch" href = " https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap" as = " style" >
< link rel = " prefetch" href = " https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;700&display=swap" as = " style" >
< link href = " https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap" rel = " stylesheet" >
< link href = " https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;700&display=swap" rel = " stylesheet" >
Add styles to < head>
:
< style>
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>
Create an instance of DataInspector
:
< 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>
To see how it works, copy and paste the full sample HTML code below into the index.html
file we created in the previous steps:
< head>
< meta charset = " utf-8" >
< title> Data Inspector</ title>
< link rel = " preconnect" href = " https://fonts.googleapis.com" >
< link rel = " preconnect" href = " https://fonts.gstatic.com" crossorigin >
< link rel = " prefetch" href = " https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap" as = " style" >
< link rel = " prefetch" href = " https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;700&display=swap" as = " style" >
< link href = " https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap" rel = " stylesheet" >
< link href = " https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;700&display=swap" rel = " stylesheet" >
< style>
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