VisioWeb 1.9.5

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 units is in degrees. value of 0 points to the north, 90 to the east. Default value points towards the "natural" top of the map (visioweb.cameraNorthRotation), it depends how it was prepared. 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)
maxPitch Controls the maximum pitch of the camera. The value units is in degrees. Default value is -45
maxRadius Controls the radius of the camera's position. Default value is such that one can see the whole map.
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
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.
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 units is in degrees (counter clockwise). Default value is 0. 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)
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
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), "trackball", 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 units is in degrees. value of 0 points to the north, 90 to the east. Default value points towards the "natural" top of the map (visioweb.cameraNorthRotation), it depends how it was prepared. 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
Example
// 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)';
        });

maxPitch :number

Controls the maximum pitch of the camera. The value units is in degrees. Default value is -45
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

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

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.

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 units is in degrees (counter clockwise). Default value is 0. 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

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

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), "trackball", 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), "trackball", or "none" Note with the "none" manipulator, there will be no mouseover or clicks to places.
Parameters:
Name Type Description
manipulatorType string "map" (default), "trackball", or "none"
Since:
  • 1.7.13