Skip to main content

<mapml-viewer> API

In this section we'll learn different API methods on the <mapml-viewer>. It allows you to interact with the viewer through JavaScript.

Setters and/or GettersMethods
MethodFunctionality
controlsSetter & getter related to the controls on the map.
controlslistSetter & getter related to the controlslist attribute.
extentReturns the extent of the current map view.
latSetter & getter related to the map's latitude.
lonSetter & getter related to the map's longitude.
projectionSetter & getter related to the map's projection.
zoomSetter & getter related to the map's zoom level.
MethodFunctionality
back()Navigates back in the map's panning history.
defineCustomProjection()Visit the Custom Projections API for more information.
forward()Navigates forward in the map's panning history.
reload()Clear the map's panning history and return to the starting location.
toggleDebug()Toggle the debug functionality of the map.
viewSource()View the source of the map.

Setters & Getters#

controls#

To set the controls simply:

<mapml-viewer>.controls = true; // or false to remove controls

To check whether the map has controls toggled on or off:

let controlsAdded = <mapml-viewer>.controls;

controlslist#

To set the controlslist attribute:

<mapml-viewer>.controlslist = "noreload"; // values can be noreload | nofullscreen | nozoom | nolayer

To get the value of the controlslist:

let controlsList = <mapml-viewer>.controlslist;

extent#

To get the map's extent:

let extent = <mapml-viewer>.extent;
View Sample Extent
/**
*extent =
* {
* {
* "topLeft": {
* "tcrs": [
* {
* "horizontal": 906.7586206896551,
* "vertical": 981.7241379310345
* },
* ...
* ],
* "tilematrix": [
* {
* "horizontal": 3.5420258620689653,
* "vertical": 3.8348599137931036
* },
* ...
* ],
* "gcrs": {
* "horizontal": -93.05456518322721,
* "vertical": 63.783997873304855
* },
* "pcrs": {
* "horizontal": 131686.24163915217,
* "vertical": 1646487.1729743406
* }
* },
* "bottomRight": {
* "tcrs": [
* {
* "horizontal": 914.9655172413793,
* "vertical": 1015.5172413793102
* },
* ...
* ],
* "tilematrix": [
* {
* "horizontal": 3.574084051724138,
* "vertical": 3.9668642241379306
* },
* ...
* ],
* "gcrs": {
* "horizontal": -85.62509797700041,
* "vertical": 52.14641630380798
* },
* "pcrs": {
* "horizontal": 446541.0380154103,
* "vertical": 350026.2467191592
* }
* },
* "projection": "CBMTILE",
* "zoom": {
* "minZoom": 0,
* "maxZoom": 25
* }
* }
* }
*/

lat#

To set the latitude simply:

caution

Needs To Be Implemented, Currently doesn't pan the map on changes

<mapml-viewer>.lat = 21.4; // if it's an invalid value, nothing happens

To get the latitude:

let latitude = <mapml-viewer>.lat;

lon#

To set the longitude simply:

caution

Needs To Be Implemented, Currently doesn't pan the map on changes

<mapml-viewer>.lon = 21.4; // if it's an invalid value, nothing happens

To get the longitude:

let longitude = <mapml-viewer>.lon;

projection#

To set/update the projection simply:

<mapml-viewer>.projection = "CBMTILE"; // if it's an invalid/undefined projection, nothing happens

To get the projection:

let projection = <mapml-viewer>.projection;

zoom#

To set the zoom simply:

caution

Needs To Be Implemented, Currently doesn't zoom the map on changes

<mapml-viewer>.zoom = 3; // if it's an invalid value, nothing happens

To get the longitude:

let zoom = <mapml-viewer>.zoom;

Methods#

back()#

To go back in the map's history:

<mapml-viewer>.back();

forward()#

To go forward in the map's history:

<mapml-viewer>.forward();

reload()#

To clear the map's history and return to the initial location:

<mapml-viewer>.reload();

toggleDebug()#

To toggle the map's debug mode:

<mapml-viewer>.toggleDebug();

viewSource()#

To view the map's view source:

<mapml-viewer>.viewSource();