heliware-js is a library for 3D Geo-Spatial data visualization & analytics built by Heliware (https://heliware.co.in) using three js & webgl.
npm install heliware-jssh
Node Module
npm install heliware-js --save
yarn add heliware-js
bower install heliware-js --save
CDN
`
Usage
`html
Test
integrity="sha512-LF8ZB1iTwi4Qvkm4pekHG4a437Y9Af5ZuwbnW4GTbAWQeR2E4KW8WF+xH8b9psevV7wIlDMx1MH9YfPqgKhA/Q=="
crossorigin="anonymous">
`
`sh
Output should be
'0 Downloaded'
'25 Downloaded'
'50 Downloaded'
'80 Downloaded'
'100 Downloaded'
'Scene_object'
'Model_object'
'Camera_object'
'OrbitControl_object'
'WebGLRenderer_object'
`
$3
`typescript
interface SceneConfiguration {
background?: string, // Scene background CSS background property
panoramaURL?: string, // Panorama Url
showAxisHelper?: boolean, // Axis Helper
modelRotation?: { // Model Rotation
x: number,
y: number,
z: number,
},
camera?: { // Camera
fov?: number,
near?: number,
far?: number,
position?: {
x: number,
y: number,
z: number,
}
},
lights: { // Lights
'ambient'?: {
color?: string | number,
intensity?: number,
},
'directionalLights'?: {
lights: {
directedAt?: {
x: number,
y: number,
z: number,
},
position: {
x: number,
y: number,
z: number,
},
color?: string | number,
intensity?: number
}[],
},
'point'?: {
color?: string | number,
intensity?: number,
position?: {
x: number,
y: number,
z: number,
},
},
'spotLight'?: {
color?: string | number,
intensity?: number,
radius?: number
}
},
orbitControl?: {
autoRotate: boolean
},
infoElements?: {
polygon?: HTMLElement,
line?: HTMLElement
},
access_token?: string, // Heliware access token
map_access_token?: string, // Mapbox access token
position?: { // latitude and longitude
lat: number,
lng: number
},
zoom?: number, // map zoom level
maxZoom?: number, // map max zoom level
pitch?: number // map pitch
}
interface ModelAnimationOption {
duration: number; // in milliseconds
followModel: boolean; // camera follows model
}
`
Time Animation
`
HELIWARE.timeAnimation(parameters)
`
#### Single latlong Data parameters
`
parameters = {
map: map, // mapboxgl Map
data:data,
index:1, // Optional : any whole number for multiple layer
type: "Single",
latitude: "store_latitude",
longitude: "store_longitude",
time:"store_time",
fillColor:"yellow", // Optional : any color name - red, yellow etc.
radius:200, // Optional
duration:300 // Optional (in milli Seconeds) : deafult - 1000
}
`
#### Double/Pair latlong Data parameters
`
parameters = {
map: map, // mapboxgl Map
data:data,
index:1, // Optional : any whole number for multiple layer
type: "Pair",
latitude_1: "latitude_1",
longitude_1: "longitude_1",
latitude_2:"latitude_2",
longitude_2:"longitude_2",
time:"time",
color_1:"yellow", // Optional : any color name - red, yellow etc.
color_2:"yellow", // Optional : any color name - red, yellow etc.
radius:10, // Optional
duration:300 // Optional (in milli Seconeds) : deafult - 1000
}
`
Geospatial Layers
`
HELIWARE.geojsonLayer(parameters)
HELIWARE.geojson3DLayer(parameters)
HELIWARE.iconLayer(parameters)
HELIWARE.textLayer(parameters)
`
#### Geojson layer 2D : HELIWARE.geojsonLayer(parameters)
`
parameters = {
id: "layer-1", // string as layer id shpuld be unique for each layer
map: map,
data: GeojsonData, // geojson feature collection
center : [longitude, latitude],
pointType: "circle", //"square" | "circle"
pointSize: 1, // control size of point in 2D
lineType: "line", // "flow" | "line",
elevation: 100, // above to map position control
fillColor: "#000a44",
strokeColor: "#0faaaa",
opacity: 0.3,
getdetails : d=>{console.log(d)} // On hover get information
}
`
#### Geojson layer 3D : HELIWARE.geojson3DLayer(parameters)
`
parameters = {
id:"layer-2", // string as layer id shpuld be unique for each layer
center : [longitude, latitude],
map: map, // Mapbox Map vaiable
data: GeojsonData, // geojson feature collection
elevation: 100, // above to map position control
fillColor: "#00aaaa",
strokeColor: "#aaaaaa",
opacity: 0.6,
pointType : "cube", // "cube" | "sphere"
pointSize: 20, // control size ogf sphere & cube
lineType: "pipe" , // "pipe" | "flow"
buildingHeight: 100,
getdetails : d=>{console.log(d)}, // On hover get information
}
`
#### Icon layer : HELIWARE.iconLayer(parameters)
`
parameters = {
id:"icon-layer",
map:map,
data:point, // json with position property atleast
elevation: 1000, // above to map position control
iconSource : "single", // "single" | "attribute"
iconSvgUrl: "./cafe.svg", // single icon for all points, for single type iconSource
size: 10, // control size of icons
center : [Longitude, latitude], // attributes stores coordinates
getPosition: d=>d.coordinates, // attributes stores position coordinates
getIcon: d=>d.ic, // attributes stores icon url
getdetails : d=>{console.log(d)} // On hover get information
}
`
#### Text layer : HELIWARE.textLayer(parameters)
`
parameters = {
id:"text-layer",
map:map,
data:point, // json with position property atleast & test display property
center : [Longitude, latitude],
elevation: 1000, // above to map position control
color: "#00aaaa", // text color
fontSize:100, // control font size
textAttribute : attribute_name , // select attribute for text
positionAttribute:"coordinates", // select attribute for position
getPosition: d=>d.coordinates, // attribute stores position
getText: d=>d.re, // attribute stores text
getdetails : d=>{console.log(d)} // get information on hover
}
`
#### Hexagon layer : HELIWARE.hexagonLayer(parameters)
`
parameters = {
id:"xyz",
center : center : [Longitude, latitude],
map:map,
data:point, // geojson feature collection
getcolor: d=> d.co, // attribute store color
getHeight: d=> d.he, // attribute store height
getPosition : d=> d.coordinates, // attribute store Position
getdetails : d=>{console.log(d)},
}
`
Debug Errors
If your project uses typescript of version less than 3.7 then you may face the following error
`
An accessor cannot be declared in ambient context
`
To resolve this in your tsc.config.json file
Set "skipLibCheck": true
`json
"compilerOptions": {
"skipLibCheck": true
}
`
This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
`json
"compilerOptions": {
"allowSyntheticDefaultImports": true
}
`
If you are using Angular 7 you may face the following error
`
ERROR in node_modules/heli-3d-viewer/node_modules/three/src/core/BufferAttribute.d.ts(21,6): error
TS1086: An accessor cannot be declared in an ambient context.
node_modules/heli-3d-viewer/node_modules/three/src/core/InterleavedBufferAttribute.d.ts(19,6): error
TS1086: An accessor cannot be declared in an ambient context.
node_modules/heli-3d-viewer/node_modules/three/src/core/InterleavedBufferAttribute.d.ts(20,6): error
TS1086: An accessor cannot be declared in an ambient context.
`
To resolve install these dev dependencies
`sh
npm install --save-dev @types/offscreencanvas
npm install --save-dev @types/webgl2
`
Update your tsconfig.app.json
`json
"types": ["node", "webgl2", "offscreencanvas"]
``