Maps API for JavaScript Developer's Guide

H.map.ViewPort

Class Summary

Implements: H.map.IInteraction

Extends: H.util.EventTarget

ViewPort object holds information about the HTML element where the map is rendered. It contains information regarding the element (view port) size and triggers events when the element size is changed.

[ For full details, see the Class Details ]

Property Summary

Table 1. Properties
Properties

element : {Element}

This property holds the HTML element, which defines the viewport.

width : {number}

This property holds this viewport's current width

height : {number}

This property holds this viewport's current height

margin : {number}

This property holds this viewport's current margin value

padding : {H.map.ViewPort.Padding}

This property holds this viewport's current padding

center : {H.math.Point}

This property holds this viewport's current center point

Method Summary

Table 2. Methods
Methods

setMargin (margin)

This method sets the margin on the viewPort

setPadding (top, right, bottom, left)

This method sets the padding on the viewport. Padding will result in shifted map center which will be the visual center of the padded area.

resize ()

This method updates size of the viewport according to container size. It must be called whenever the HTML element changed size in order to update the map's viewport values.

startInteraction (modifiers, opt_kinetics)

This method starts the interaction with the view port. Should be called every time when new interaction is started i.e mouse grab, or touch start.

interaction (x, y, opt_bx, opt_by, opt_timestamp)

This method resolves direct screen (view port) interaction. This function will modify the current view according to values passed in.

endInteraction (opt_preventKinetics)

This method ends interaction and applies kinetic movement if defined by using startInteraction method

addEventListener (type, handler, opt_capture, opt_scope)

This method allows to listen for specific event triggered by the object. Keep in mind, that you must removeEventListener manually or dispose an object when you no longer need it. Otherwise memory leak is possible.

removeEventListener (type, handler, opt_capture, opt_scope)

This method will removed previously added listener from the event target

dispatchEvent (evt)

This method will dispatch event on the event target object

dispose ()

Removes listeners from this object. Classes that extend EventTarget may need to override this method in order to remove references to DOM Elements and additional listeners.

addOnDisposeCallback (callback, opt_scope)

This method adds callback which is triggered when the object is being disposed

Events Summary

Table 3. Events
Events

update : {H.util.Event}

Fired when this view-port's properties padding, margin or size changes

sync : {H.util.Event}

Fired when the rendered map is synchronized with this viewport's properties

Class Description

ViewPort object holds information about the HTML element where the map is rendered. It contains information regarding the element (view port) size and triggers events when the element size is changed.

Constructor Details

H.map.ViewPort(element, opt_options)

Parameters:
 
element:
{Element}
 
html element were map will be rendered
opt_options:
{H.map.ViewPort.Options=} [optional]
 
optional configuration parameters

Property Details

element: {Element}

This property holds the HTML element, which defines the viewport.

width: {number}

This property holds this viewport's current width

height: {number}

This property holds this viewport's current height

margin: {number}

This property holds this viewport's current margin value

padding: {H.map.ViewPort.Padding}

This property holds this viewport's current padding

center: {H.math.Point}

This property holds this viewport's current center point

Method Details

setMargin (margin)

This method sets the margin on the viewPort

Parameters:
 
margin:
{number}
 
margin which is used to fetch map data

setPadding (top, right, bottom, left)

This method sets the padding on the viewport. Padding will result in shifted map center which will be the visual center of the padded area.

Parameters:
 
top:
{number}
 
padding from the top
right:
{number}
 
padding from the right
bottom:
{number}
 
padding from the bottom
left:
{number}
 
padding from the left

resize ()

This method updates size of the viewport according to container size. It must be called whenever the HTML element changed size in order to update the map's viewport values.

startInteraction (modifiers, opt_kinetics)

This method starts the interaction with the view port. Should be called every time when new interaction is started i.e mouse grab, or touch start.

Parameters:
 
modifiers:
{number}
 
a bitmask which specifies what operations should performed during every interaction
opt_kinetics:
{H.util.kinetics.IKinetics=} [optional]
 
specifies kinetic move at the end of interaction

interaction (x, y, opt_bx, opt_by, opt_timestamp)

This method resolves direct screen (view port) interaction. This function will modify the current view according to values passed in.

Parameters:
 
x:
{number}
 
viewport x coordinate
y:
{number}
 
viewport y coordinate
opt_bx:
{number=} [optional]
 
x coordinate for second pointer/touch if present
opt_by:
{number=} [optional]
 
y coordinate for secong pointer/touch if present
opt_timestamp:
{number=} [optional]
 
known timestamp which should be passed

endInteraction (opt_preventKinetics)

This method ends interaction and applies kinetic movement if defined by using startInteraction method

Parameters:
 
opt_preventKinetics:
{boolean=} [optional]
 
if set to true will prevent kinetics behaviour at the end of interaction

addEventListener (type, handler, opt_capture, opt_scope)

This method allows to listen for specific event triggered by the object. Keep in mind, that you must removeEventListener manually or dispose an object when you no longer need it. Otherwise memory leak is possible.

Parameters:
 
type:
{string}
 
name of event
handler:
{!Function}
 
event handler function
opt_capture:
{boolean=} [optional]
 
if set to true will listen in the capture phase (bubble otherwise)
opt_scope:
{Object=} [optional]
 
scope for the handler function

removeEventListener (type, handler, opt_capture, opt_scope)

This method will removed previously added listener from the event target

Parameters:
 
type:
{string}
 
name of event
handler:
{!Function}
 
previously added event handler
opt_capture:
{boolean=} [optional]
 
if set to true will listen in the capture phase (bubble otherwise)
opt_scope:
{Object=} [optional]
 
scope for the handler function

dispatchEvent (evt)

This method will dispatch event on the event target object

Parameters:
 
evt:
{(H.util.Event | string)}
 
event object or event name

dispose ()

Removes listeners from this object. Classes that extend EventTarget may need to override this method in order to remove references to DOM Elements and additional listeners.

addOnDisposeCallback (callback, opt_scope)

This method adds callback which is triggered when the object is being disposed

Parameters:
 
callback:
{!Function}
 
The callback function.
opt_scope:
{Object=} [optional]
 
An optional scope to call the callback in.

Event Details

update: {H.util.Event}

Fired when this view-port's properties padding, margin or size changes

sync: {H.util.Event}

Fired when the rendered map is synchronized with this viewport's properties

You cannot use this account to purchase a commercial plan on Developer Portal, as it is already associated to plans with different payment methods.

To purchase a commercial plan on Developer Portal, please register for or sign in with a different HERE Account.

Something took longer than expected.

The project should be available soon under your projects page.

Sorry, our services are not available in this region.

Something seems to have gone wrong. Please try again later.

We've detected that your account is set to Australian Dollars (AUD).
Unfortunately, we do not offer checkouts in AUD anymore.
You can continue using your current plan as normal, but to subscribe to one of our new plans,
please register for a new HERE account or contact us for billing questions on selfservesupport@here.com.