JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://nextspace-limited.github.io/nextspace-web-bundle/dist/nextspace.js?v1"></script>
<div id="VIEWER">
<div id="MSG">
Click on the point entity to select it.<br/>
Click away from it to deselect it.
</div>
</div>
CSS
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#VIEWER {
width: 100%;
height: 100%;
}
#MSG {
position: absolute;
z-index: 1;
top: 100px;
left: 100px;
color: white;
padding: 8px;
border-radius: 6px;
background: black;
}
JavaScript
BModels.ENVIRONMENT.Reset({
// Replace with your account ID.
accountId: "template",
// UAT is for early access to features, for a stable release use PROD.
env: BModels.Api.EEnv.UAT,
sessionId: "anonymous"
});
const init = async () => {
// Proxy Cesium Ion requests through the Nextspace API.
// This allows for access to Cesium Ion resources without exposing your token, or the default token.
const api = BModels.ENVIRONMENT.Api().GetBruceApi({});
await api.Loading;
Cesium.Ion.defaultServer = api.GetBaseUrl() + "proxy/cesium-ion/";
Cesium.Ion.defaultAccessToken = "proxy";
const viewer = new Cesium.Viewer("VIEWER", {
// Excluding the default imagery and terrain providers.
// This is to avoid consuming Cesium Ion or Bing Maps quota before custom tiles load.
imageryProvider: false,
baseLayerPicker: false,
terrainProvider: null
});
// Rendering some defaults that work well without requiring a Cesium token.
await BEngine.TileRenderEngine.Map.Navigator.Render({
tiles: [
{
tilesetId: BModels.ProjectViewTile.EDefaultImagery.MapBoxStreets
}
],
viewer: viewer
});
await BEngine.TileRenderEngine.Terrain.Navigator.Render({
tile: {
tilesetId: BModels.ProjectViewTile.EDefaultTerrain.FlatTerrain
},
viewer: viewer
});
BEngine.ViewerUtils.InitViewer({
viewer: viewer,
// Call if you're seeing default Cesium widgets!
destroyWidgets: false,
// This will generate default Nextspace widgets.
// We're setting to false for this example so that we can handle entity selection in this code.
nextspaceWidgets: false
});
// Fly near some land.
viewer.scene.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(174.897038, -36.760106, 500),
duration:...