Logo
Developer

VisioWeb 1.17.1

Class

visioweb.Camera

Mapviewer's Camera class.
Controls position, pitch of camera and map rotation.

Constructor

new Camera(pViewer)

This object is constructed by Mapviewer during initialization.
Parameters:
Name Type Description
pViewer visioweb.MapviewerPrivate

Members summary


Name Description
heading Controls the heading of the map. The value unit is in degrees.
Default value equals visioweb.Mapviewer#cameraNorthRotation and points towards the "natural" top of the map, i.e. the top of the canvas in VisioMapEditor.
Can be set with any value, and it will always return a value between greater or equal to 0 and less than 360: [0,360).
This angular value evolves in the opposite direction of visioweb.Camera#rotation: 0 points to the north, 90 to the east.
inertiaDuration inertia animation duration in milliseconds (ms)
maxAltitude Controls the maximum altitude of the camera's position. Default value is such that one can see the whole map.
maxPitch Controls the maximum pitch of the camera. The value units is in degrees. Default value is -45, but can be overriden by visioweb.MultiBuildingView different pitch modes.
maxRadius Controls the radius of the camera's position. Default value is such that one can see the whole map.
minAltitude Controls the minimum altitude of the camera's position. Default value is 1
minPitch Controls the minimum pitch of the camera. The value units is in degrees. Default value is -90
minRadius Controls the minimum radius of the camera's position. Default value is 10
panInertiaEnabled Enables/disable inertia on pan
panManipulatorEnabled Enables/disables pan manipulation (drag)
pitch Controls the camera pitch. The value units is in degrees. -90 is looking down, 90 is looking up. Trying to set its value greater than its minimum or maximum will clamp its value.
pitchInertiaEnabled Enables/disable inertia on pitch
pitchManipulatorEnabled Enables/disables right mouse button control of pitch.
position The resulting position object contains x,y,radius attributes. Attributes .x, .y and optionally .radius are in meters. The camera has a default Field of View of 45 degrees vertically. To position the map so it fits on the screen, place the camera at half the width of your map / tan(45.0 deg / 2.0 ). The initial value is such that one can see the whole map. setting its value is equivalent to a goTo() with 0ms animationDuration.
rotation Controls the rotation of the map. The value unit is in degrees (counter clockwise).
Default value is 0 and points towards the "natural" top of the map, i.e. the top of the canvas in VisioMapEditor.
Can be set with any value, and it will always return a value between greater or equal to 0 and less than 360: [0,360).
rotationInertiaEnabled Enables/disable inertia on rotation
rotationManipulatorEnabled Enables/disables right mouse button control of map rotation.
track track camera position and send that to stat system. Default value is false. Can be set with true or false
zoomInertiaEnabled Enables/disable inertia on zoom
zoomManipulatorEnabled Enables/disables zoom control (radius of the position attribute) of map by mousewheel, drag with middle mouse button or two finger pinch. Default value is false.

Methods summary


Name Description
getBoundary returns the current camera boundaries. The initial boundaries are such that the map footprint is the same as the one seen on the VisioMapEditor. This boundary uses local points and is axis aligned. NOTE: it is possible that if the map represents a small portion of the VisioMapEditor footprint the map could be moved off the screen.
getCustomPostManipulatorListener retrieve the custom post manipulator listener. This manipulator will be called after the currently selected manipulator.
getCustomPreManipulatorListener retrieves the current custom pre manipulator listener This manipulator will be called before the currently selected manipulator.
getManipulator
goTo This method will animate the camera so that is can see the specified place (Object3D). If the previous animation has not been completed, it will be stopped. If the placeObject is on another floor, the camera will be animated to the postion of the placeObject without changing floors.
removeCustomPostManipulatorListener removes the custom post-manipulator listener is there is one.
removeCustomPreManipulatorListener removes the custom pre-manipulator listener is there is one.
setBoundary sets the current camera boundaries. The position on the center of the map container never be outside this boundary. If you want to have the previous version unbounded behaviour, you can set a very large boundary for example: mapviewer.camera.setBoundary({min: {x:-1e9,y:-1e9}, max: {x:1e9,y:1e9}})
setCustomPostManipulatorListener set the custom manipulator listener to create your own custom interactive behavior. This manipulator will be called after the currently selected manipulator.
setCustomPreManipulatorListener set the custom manipulator listener to create your own custom interactive behavior. This manipulator will be called before the currently selected manipulator.
setManipulator controls behavior or camera: 'map' (default), 'hybrid' or 'none' Note with the 'none' manipulator, there will be no mouseover or clicks to places.

Members detail

heading :number

Controls the heading of the map. The value unit is in degrees.
Default value equals visioweb.Mapviewer#cameraNorthRotation and points towards the "natural" top of the map, i.e. the top of the canvas in VisioMapEditor.
Can be set with any value, and it will always return a value between greater or equal to 0 and less than 360: [0,360).
This angular value evolves in the opposite direction of visioweb.Camera#rotation: 0 points to the north, 90 to the east.
Since:
  • 1.7.21 returned value is always >= 0 and < 360
See:
Example
mapviewer.camera.heading = mapviewer.cameraNorthRotation;
// is equivalent to
mapviewer.camera.rotation = 0;

// to create a compass
// assuming you have a DIV with id mycompass, at the bottom of your page.
// Do not place this in the map container as this will be emptied at map initialization.
<img src="../media/test.png" id="mycompass" style="position: absolute; top: 10px; right: 10px; width: 64px; height: 64px"/>

var mycompassdiv = document.querySelector('#mycompass');
mapviewer.on('redraw', function(){
    mycompassdiv.style.transform = 'rotate('+mapviewer.camera.heading+'deg)';
});

inertiaDuration :boolean

inertia animation duration in milliseconds (ms)
Since:
  • 1.9.9
Default Value:
  • 2000

maxAltitude :number

Controls the maximum altitude of the camera's position. Default value is such that one can see the whole map.
Since:
  • 1.13

maxPitch :number

Controls the maximum pitch of the camera. The value units is in degrees. Default value is -45, but can be overriden by visioweb.MultiBuildingView different pitch modes.
Since:
  • 1.8.0 corrected doc, max pitch is -45

maxRadius :number

Controls the radius of the camera's position. Default value is such that one can see the whole map.
Since:
  • 1.6

minAltitude :number

Controls the minimum altitude of the camera's position. Default value is 1
Since:
  • 1.13

minPitch :number

Controls the minimum pitch of the camera. The value units is in degrees. Default value is -90
Since:
  • 1.6 initial version

minRadius :number

Controls the minimum radius of the camera's position. Default value is 10
Since:
  • 1.6

panInertiaEnabled :boolean

Enables/disable inertia on pan
Since:
  • 1.9.9
Default Value:
  • true

panManipulatorEnabled :boolean

Enables/disables pan manipulation (drag)
Since:
  • 1.7.11

pitch :number

Controls the camera pitch. The value units is in degrees. -90 is looking down, 90 is looking up. Trying to set its value greater than its minimum or maximum will clamp its value.

pitchInertiaEnabled :boolean

Enables/disable inertia on pitch
Since:
  • 1.9.9
Default Value:
  • true

pitchManipulatorEnabled :boolean

Enables/disables right mouse button control of pitch.

position :positionObject

The resulting position object contains x,y,radius attributes. Attributes .x, .y and optionally .radius are in meters. The camera has a default Field of View of 45 degrees vertically. To position the map so it fits on the screen, place the camera at half the width of your map / tan(45.0 deg / 2.0 ). The initial value is such that one can see the whole map. setting its value is equivalent to a goTo() with 0ms animationDuration.
Since:
  • 1.7.21 will work without .radius attribute (keep current radius)

rotation :number

Controls the rotation of the map. The value unit is in degrees (counter clockwise).
Default value is 0 and points towards the "natural" top of the map, i.e. the top of the canvas in VisioMapEditor.
Can be set with any value, and it will always return a value between greater or equal to 0 and less than 360: [0,360).
Since:
  • 1.7.21 returned value is always >= 0 and < 360
See:
Example
mapviewer.camera.rotation = 0;
// is equivalent to
mapviewer.camera.heading = mapviewer.cameraNorthRotation;

rotationInertiaEnabled :boolean

Enables/disable inertia on rotation
Since:
  • 1.9.9
Default Value:
  • true

rotationManipulatorEnabled :boolean

Enables/disables right mouse button control of map rotation.

track :boolean

track camera position and send that to stat system. Default value is false. Can be set with true or false

zoomInertiaEnabled :boolean

Enables/disable inertia on zoom
Since:
  • 1.9.9
Default Value:
  • true

zoomManipulatorEnabled :boolean

Enables/disables zoom control (radius of the position attribute) of map by mousewheel, drag with middle mouse button or two finger pinch. Default value is false.

Methods detail

getBoundary() → {BoundaryObject}

returns the current camera boundaries. The initial boundaries are such that the map footprint is the same as the one seen on the VisioMapEditor. This boundary uses local points and is axis aligned. NOTE: it is possible that if the map represents a small portion of the VisioMapEditor footprint the map could be moved off the screen.
Since:
  • 1.7.11
Returns:
object with {min: {x: .., y: ..}, max: {x: .., y:..} }
Type
BoundaryObject

getCustomPostManipulatorListener() → {function}

retrieve the custom post manipulator listener. This manipulator will be called after the currently selected manipulator.
Since:
  • 1.7.18
See:
Returns:
Type
function

getCustomPreManipulatorListener() → {function}

retrieves the current custom pre manipulator listener This manipulator will be called before the currently selected manipulator.
Since:
  • 1.7.18
See:
Returns:
Type
function

getManipulator() → {string}

Since:
  • 1.7.13
Returns:
name of current manipulator: 'map' (default), 'hybrid' or 'none'
Type
string

goTo(element, parameters) → {Promise}

This method will animate the camera so that is can see the specified place (Object3D). If the previous animation has not been completed, it will be stopped. If the placeObject is on another floor, the camera will be animated to the postion of the placeObject without changing floors.
Parameters:
Name Type Description
element visioweb.Place | string | object the placeObject or place ID or positionObject {.x,.y,.radius (optional)} to go to.
parameters object a parameter map supporting the following values:
Properties
Name Type Attributes Description
animationDuration string <optional>
 duration of animation in milliseconds. default 500ms. if animationDuration is 0, the change is not immediate, the function will return, and done() will be called as soon as possible. If you want immediate change use mapviewer.camera.position = locationObject.
Since:
  • 1.7.21 will work without .radius attribute (keep current radius)
Returns:
where then(fulfilled(), rejected()) callbacks can be added.
Type
Promise

removeCustomPostManipulatorListener()

removes the custom post-manipulator listener is there is one.
Since:
  • 1.7.13

removeCustomPreManipulatorListener()

removes the custom pre-manipulator listener is there is one.
Since:
  • 1.7.13

setBoundary(pBoundary)

sets the current camera boundaries. The position on the center of the map container never be outside this boundary. If you want to have the previous version unbounded behaviour, you can set a very large boundary for example: mapviewer.camera.setBoundary({min: {x:-1e9,y:-1e9}, max: {x:1e9,y:1e9}})
Parameters:
Name Type Description
pBoundary BoundaryObject Object with {min: {x: .., y: ..}, max: {x: .., y:..} }
Since:
  • 1.7.11

setCustomPostManipulatorListener(listener)

set the custom manipulator listener to create your own custom interactive behavior. This manipulator will be called after the currently selected manipulator.
Parameters:
Name Type Description
listener function function taking an event as parameter, event has .type which can be 'panstart','panmove','pinch','pinchmove','rotatestart','rotatemove','tap','wheel' and .center which has attributes .x and .y which are on visible coordinates of the screen Returning false from an event handler stop the handling subsequent handling of the event (ie stop propagation) in the case of the post manipulator listener, this does not currently make a difference.
Since:
  • 1.7.13
See:
Example
// To show the latitude longitude of a clicked point, asuming map is in div with id '#container'
        var container = document.querySelector('#container');
        var rect = container.getBoundingClientRect();
        var offset = {
            top: rect.top + document.body.scrollTop,
            left: rect.left + document.body.scrollLeft
        };

        mapviewer.camera.setCustomPostManipulatorListener(function(ev)
        {
            var position = mapviewer.camera.position;
            alert('type: '+ev.type+' positon at end of manipulation '+ position.x + ',' + position.y);
            return true;
        });

setCustomPreManipulatorListener(listener)

set the custom manipulator listener to create your own custom interactive behavior. This manipulator will be called before the currently selected manipulator.
Parameters:
Name Type Description
listener function function taking an event as parameter, event has .type which can be 'panstart','panmove','pinch','pinchmove','rotatestart','rotatemove','tap' and .center which has attributes .x and .y which are on visible coordinates of the screen; or type 'wheel' and attribute 'delta' Returning false from an event handler stop the handling subsequent handling of the event (ie stop propagation)
Since:
  • 1.7.13
See:
Example
// To show the latitude longitude of a clicked point, asuming map is in div with id '#container'
        var container = document.querySelector('#container');
        var rect = container.getBoundingClientRect();
        var offset = {
            top: rect.top + document.body.scrollTop,
            left: rect.left + document.body.scrollLeft
        };

        mapviewer.camera.setCustomPreManipulatorListener(function(ev)
        {
            var center = {left: ev.center.x - offset.left, top: ev.center.y - offset.top };
            var panCenterPoint = mapviewer.convertScreenToPoint(center);
            var latLng = false;
            if (ev.type == 'tap')
            {
                latLng = mapviewer.convertPointToLatLon(panCenterPoint)
            }
            return true;
        });

setManipulator(manipulatorType)

controls behavior or camera: 'map' (default), 'hybrid' or 'none' Note with the 'none' manipulator, there will be no mouseover or clicks to places.
Parameters:
Name Type Description
manipulatorType string 'map' (default), 'hybrid' or 'none'
Since:
  • 1.7.13