Skip to main content

HTMLMapmlViewerElement

The HTMLMapmlViewerElement interface represents the <mapml-viewer> element.

Properties

Property nameDescription
controlsTurns native map controls on or off. Reflects the controls attribute.
controlslistAllows to change the set of native controls. Reflects the controlslist attribute.
extentReturns the extent of the current map view. Read only.
latGet the map's latitude. Reflects the lat attribute. Read only.
lonGet the map's longitude. Reflects the lon attribute. Read only.
projectionThe map's projection. Reflects the projection attribute.
zoomThe map's zoom level. Reflects the zoom attribute.

controls

To add controls to the map:

let map = document.querySelector('mapml-viewer');
map.controls = true; // or false to remove controls

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

let map = document.querySelector('mapml-viewer');
let controlsAdded = map.controls;

controlslist

To set the controlslist attribute:

let map = document.querySelector('mapml-viewer');
map.controlslist = "noreload"; // values can be noreload | nofullscreen | nozoom | nolayer

To get the value of the controlslist:

let map = document.querySelector('mapml-viewer');
let controlsList = map.controlslist;

extent

To get the map's extent:

let map = document.querySelector('mapml-viewer');
let extent = map.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:

caution

Needs to be implemented, currently doesn't pan the map on changes

let map = document.querySelector('mapml-viewer');
map.lat = 21.4; // if it's an invalid value, nothing happens

To get the latitude:

let map = document.querySelector('mapml-viewer');
let latitude = map.lat;

lon

To set the longitude:

caution

Needs to be implemented, currently doesn't pan the map on changes

let map = document.querySelector('mapml-viewer');
map.lon = 21.4; // if it's an invalid value, nothing happens

To get the longitude:

let map = document.querySelector('mapml-viewer');
let longitude = map.lon;

projection

To set/update the projection:

let map = document.querySelector('mapml-viewer');
map.projection = "CBMTILE"; // if it's an invalid/undefined projection, nothing happens

To get the projection:

let map = document.querySelector('mapml-viewer');
let projection = map.projection;

zoom

To set the zoom:

caution

Needs to be implemented, currently doesn't zoom the map on changes

let map = document.querySelector('mapml-viewer');
map.zoom = 3; // if it's an invalid value, nothing happens

To get the longitude:

let map = document.querySelector('mapml-viewer');
let zoom = map.zoom;

Methods

MethodDescription
back()Navigates back one state in the map's movement history.
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.
defineCustomProjection()Define a custom projection for use by the page.
zoomTo(lat, lon, zoom)Fly or pan the map to a (new) location and zoom level.

back()

To go back in the map's history:

let map = document.querySelector('mapml-viewer');
map.back();

forward()

To go forward in the map's history:

let map = document.querySelector('mapml-viewer');
map.forward();

reload()

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

let map = document.querySelector('mapml-viewer');
map.reload();

toggleDebug()

To toggle the map's debug mode:

let map = document.querySelector('mapml-viewer');
map.toggleDebug();

viewSource()

To view the map's view source:

let map = document.querySelector('mapml-viewer');
map.viewSource();

zoomTo(lat, lon, zoom)

To change the map's center location and zoom level:

var options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};

function success(pos) {
var crd = pos.coords;

let map = document.querySelector('mapml-viewer');
map.zoomTo(crd.latitude,crd.longitude, 17); // hard-coded zoom
// could calculate a zoom based on accuracy of position
console.log(`More or less ${crd.accuracy} meters.`);
}

function error(err) {
console.warn(`ERROR(${err.code}): ${err.message}`);
}

navigator.geolocation.getCurrentPosition(success, error, options);

Events

Event nameDescription
layerchangeFired when a layer changes src, usually by the user following a link.
loadFired when all layers have finished loading content
clickFired when the map receives both mousedown and mouseup events
dblclickFired when the user double clicks or taps the map
mousemoveFired repeatedly as the mouse cursor traverses the map
mouseoverFired once as the mouse cursor enters the map
mouseoutFired once as the mouse cursor exits the map
mousedownFired when the mouse's primary key is pressed down with cursor over the map
mouseupFired when the mouse's primary key is released with cursor over the map
movestartFired before the map starts to move / viewport changes
moveFired repeatedly as the map moves.
moveendFired after the map stops moving
zoomstartFired before the map changes zoom level
zoomFired repeatedly as the map changes zoom
zoomendFired after the map has changed zoom level
preclickFired before a click on the map is triggered. May not be a primitive.
contextmenuFired when user right-clicks or long presses on map. May not be a primitive.