1"use strict";(globalThis.webpackChunkmapml_viewer_doc=globalThis.webpackChunkmapml_viewer_doc||[]).push([[5840],{8791(e,t,n){n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>a,default:()=>h,frontMatter:()=>r,metadata:()=>i,toc:()=>d});const i=JSON.parse('{"id":"api/map-extent-api","title":"HTMLExtentElement","description":"Properties","source":"@site/docs/api/map-extent-api.md","sourceDirName":"api","slug":"/api/map-extent-api","permalink":"/web-map-doc/docs/api/map-extent-api","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"id":"map-extent-api","title":"HTMLExtentElement","slug":"/api/map-extent-api"},"sidebar":"sidebar","previous":{"title":"HTMLFeatureElement","permalink":"/web-map-doc/docs/api/map-feature-api"},"next":{"title":"HTMLLinkElement","permalink":"/web-map-doc/docs/api/map-link-api"}}');var l=n(4848),s=n(8453);const r={id:"map-extent-api",title:"HTMLExtentElement",slug:"/api/map-extent-api"},a="HTMLExtentElement",c={},d=[{value:"Properties",id:"properties",level:2},{value:"units",id:"units",level:3},{value:"checked",id:"checked",level:3},{value:"hidden",id:"hidden",level:3},{value:"disabled",id:"disabled",level:3},{value:"label",id:"label",level:3},{value:"opacity",id:"opacity",level:3},{value:"extent",id:"extent",level:3},{value:"Methods",id:"methods",level:2},{value:"zoomTo()",id:"zoomto",level:3},{value:"Events",id:"events",level:2},{value:"Examples",id:"examples",level:2},{value:"Specifications",id:"specifications",level:2},{value:"Requirements",id:"requirements",level:2}];function o(e){const t={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,s.R)(),...e.components},{Details:n}=t;return n||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Details",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(t.header,{children:(0,l.jsx)(t.h1,{id:"htmlextentelement",children:"HTMLExtentElement"})}),"\n",(0,l.jsx)(t.h2,{id:"properties",children:"Properties"}),"\n",(0,l.jsx)(t.h3,{id:"units",children:"units"}),"\n",(0,l.jsxs)(t.p,{children:["The ",(0,l.jsx)(t.code,{children:"units"})," property is read-only, and returns the initial value of the ",(0,l.jsxs)(t.a,{href:"../elements/extent/#units",children:[(0,l.jsx)(t.code,{children:"units"}),"\ncontent attribute"]}),"."]}),"\n",(0,l.jsx)(t.hr,{}),"\n",(0,l.jsx)(t.h3,{id:"checked",children:"checked"}),"\n",(0,l.jsxs)(t.p,{children:[(0,l.jsx)(t.code,{children:"HTMLExtentElement.checked"})," is a boolean read/write value that turns the map-extent\non and off, and reflects the ",(0,l.jsx)(t.code,{children:"checked"})," attribute. The ",(0,l.jsx)(t.code,{children:"checked"})," state is\nreflected in the layer control user interface for the map-extent, if it is not\nin the ",(0,l.jsx)(t.code,{children:"hidden"})," state, via a checkbox next to the map-extent name. The checked\nproperty can be used to programatically change the checked state of the extent.\nThe checked property can't be changed if the disabled property is set."]}),"\n",(0,l.jsx)(t.p,{children:"To set the checked state of a map-extent to on:"}),"\n",(0,l.jsx)(t.pre,{children:(0,l.jsx)(t.code,{className:"language-js",children:"let extent = document.querySelector('map-extent');\nextent.checked = true; // valid values are true | false\n"})}),"\n",(0,l.jsx)(t.p,{children:"To read the checked state of the map-extent:"}),"\n",(0,l.jsx)(t.pre,{children:(0,l.jsx)(t.code,{className:"language-js",children:"let extent = document.querySelector('map-extent');\nlet isChecked = extent.checked;\n"})}),"\n",(0,l.jsx)(t.hr,{}),"\n",(0,l.jsx)(t.h3,{id:"hidden",children:"hidden"}),"\n",(0,l.jsxs)(t.p,{children:[(0,l.jsx)(t.code,{children:"HTMLExtentElement.hidden"})," is a boolean read/write value that hides or unhides the\nmap-extent in the layer control only. The ",(0,l.jsx)(t.code,{children:"hidden"})," state has no bearing on the presence\nof map-extent content on the map, it only affects the map-extent presence in the\nlayer control. This can be useful for simplifying the layer control representation\nof a single- map-extent containing parent layer without cluttering the user\ninterface."]}),"\n",(0,l.jsx)(t.p,{children:"To set/update whether the map-extent is hidden in the layer control:"}),"\n",(0,l.jsx)(t.pre,{children:(0,l.jsx)(t.code,{className:"language-js",children:"let extent = document.querySelector('map-extent');\nextent.hidden = true; // valid values are true | false\n"})}),"\n",(0,l.jsxs)(t.p,{children:["To get the ",(0,l.jsx)(t.code,{children:"<map-extent>"}),"'s hidden value:"]}),"\n",(0,l.jsx)(t.pre,{children:(0,l.jsx)(t.code,{className:"language-js",children:"let extent = document.querySelector('map-extent');\nlet isHidden = extent.hidden;\n"})}),"\n",(0,l.jsx)(t.hr,{}),"\n",(0,l.jsx)(t.h3,{id:"disabled",children:"disabled"}),"\n",(0,l.jsxs)(t.p,{children:[(0,l.jsx)(t.code,{children:"HTMLExtentElement.disabled"})," provides READ-ONLY access to the disabled state of the\nmap-extent. A map-extent becomes disabled if its contents are not rendered,\neither by being completely outside the current map-extent's bounds or by having\nan error associated to the map-extent processing, such as being in a projection\nthat is incompatible with the projection of the map. When a map-extent is\ndisabled, the user can still interact with it in some ways in the layer control, but it will\nnot be visible in the map viewport. If a map-extent becomes enabled, through\nmanipulation of the map, for example, the map-extent will become fully interactive\nin the layer control, and should be visible in the map viewport (although\npossibly hard to see, depending on ",(0,l.jsx)(t.code,{children:"opacity"})," and feature size, among other\nconsiderations)."]}),"\n",(0,l.jsx)(t.hr,{}),"\n",(0,l.jsx)(t.h3,{id:"label",children:"label"}),"\n",(0,l.jsxs)(t.p,{children:[(0,l.jsx)(t.code,{children:"HTMLExtentElement.label"})," reflects the ",(0,l.jsx)(t.code,{children:"label"})," content attribute, and specifies\na fallback accessible name for the map-extent in the layer control. If the\n",(0,l.jsx)(t.code,{children:"label"}),' content attribute is not supplied, an internationalized variation of\n"Sub-Layer" will be returned as the default value.']}),"\n",(0,l.jsxs)(t.p,{children:["To set/update the ",(0,l.jsx)(t.code,{children:"<map-extent>"}),"'s label:"]}),"\n",(0,l.jsx)(t.pre,{children:(0,l.jsx)(t.code,{className:"language-js",children:"let extent = document.querySelector('map-extent');\nextent.label = \"New Accessible Name\";\n"})}),"\n",(0,l.jsxs)(t.p,{children:["To get the ",(0,l.jsx)(t.code,{children:"<map-extent>"}),"'s label value:"]}),"\n",(0,l.jsx)(t.pre,{children:(0,l.jsx)(t.code,{className:"language-js",children:"let extent = document.querySelector('map-extent');\nlet label = extent.label;\n"})}),"\n",(0,l.jsx)(t.hr,{}),"\n",(0,l.jsx)(t.h3,{id:"opacity",children:"opacity"}),"\n",(0,l.jsxs)(t.p,{children:[(0,l.jsx)(t.code,{children:"HTMLExtentElement.opacity"})," provides read/write access to the ",(0,l.jsx)(t.code,{children:"opacity"}),' value,\nand is reflected in the layer control for each map-extent, under "Opacity". If no\n',(0,l.jsx)(t.code,{children:"opacity"})," content attribute is set, setting the ",(0,l.jsx)(t.code,{children:"opacity"})," property will not\ncreate the attribute, though the opacity of the map-extent on the map and in\nthe layer control representation (slider input) will be changed."]}),"\n",(0,l.jsxs)(t.p,{children:["To set/update the ",(0,l.jsx)(t.code,{children:"<map-extent>"}),"'s opacity:"]}),"\n",(0,l.jsx)(t.pre,{children:(0,l.jsx)(t.code,{className:"language-js",children:"let extent = document.querySelector('map-extent');\nextent.opacity = 0.5; // valid values from 0 to 1\n"})}),"\n",(0,l.jsxs)(t.p,{children:["To get the ",(0,l.jsx)(t.code,{children:"<map-extent>"}),"'s opacity value:"]}),"\n",(0,l.jsx)(t.pre,{children:(0,l.jsx)(t.code,{className:"language-js",children:"let extent = document.querySelector('map-extent');\nlet opacity = extent.opacity;\n"})}),"\n",(0,l.jsx)(t.h3,{id:"extent",children:"extent"}),"\n",(0,l.jsxs)(t.p,{children:[(0,l.jsx)(t.code,{children:"HTMLExtentElement.extent"})," provides READ-ONLY access to the top left\nand bottom right coordinates of the layer's minimum bounding rectangle\nas an object value."]}),"\n",(0,l.jsxs)(t.p,{children:["To get the ",(0,l.jsx)(t.code,{children:"<map-extent>"}),"'s extent value:"]}),"\n",(0,l.jsx)(t.pre,{children:(0,l.jsx)(t.code,{className:"language-js",children:"let map-extent = document.querySelector('map-extent');\nlet extent = map-extent.extent;\n"})}),"\n",(0,l.jsx)(t.p,{children:"The extent object is structured as follows:"}),"\n",(0,l.jsxs)(n,{children:[(0,l.jsx)("summary",{children:"Click to view the extent object"}),(0,l.jsx)(t.pre,{children:(0,l.jsx)(t.code,{className:"language-js",children:'{\n "projection": "CBMTILE",\n "topLeft": {\n "tcrs": [\n {\n "horizontal": 942.662039991251,\n "vertical": 1029.0945982508472\n },\n/* an object with "horizontal" and "vertical" properties for each zoom level in the array */\n {\n "horizontal": 546743983.1949257,\n "vertical": 596874866.9854914\n }\n ],\n "tilematrix": [\n {\n "horizontal": 3.6822735937158244,\n "vertical": 4.019900774417372\n },\n/* an object with "horizontal" and "vertical" properties for each zoom level in the array */\n {\n "horizontal": 2135718.6843551784,\n "vertical": 2331542.4491620758\n }\n ],\n/* gcrs stands for "geographic coordinate reference system" */\n "gcrs": {\
1n "horizontal": -75.73195696514524,\n "vertical": 45.40761073808424\n },\n/* pcrs stands for "projected coordinate reference system" */\n "pcrs": {\n "horizontal": 1509108.7182317898,\n "vertical": -170864.4342066869\n }\n },\n "bottomRight": {\n "tcrs": [\n {\n "horizontal": 942.7503158533199,\n "vertical": 1029.1828741129164\n },\n {\n "horizontal": 546795183.1949255,\n "vertical": 596926066.9854914\n }\n ],\n "tilematrix": [\n {\n "horizontal": 3.6826184213020308,\n "vertical": 4.0202456020035795\n },\n {\n "horizontal": 2135918.684355178,\n "vertical": 2331742.4491620758\n }\n ],\n "gcrs": {\n "horizontal": -75.67858731979081,\n "vertical": 45.387937810298354\n },\n "pcrs": {\n "horizontal": 1512495.3916717991,\n "vertical": -174251.10764670372\n }\n }\n}\n'})})]}),"\n",(0,l.jsx)(t.hr,{}),"\n",(0,l.jsx)(t.h2,{id:"methods",children:"Methods"}),"\n",(0,l.jsx)(t.h3,{id:"zoomto",children:"zoomTo()"}),"\n",(0,l.jsxs)(t.p,{children:[(0,l.jsx)(t.code,{children:"HTMLExtentElement.zoomTo()"})," Zoom to the sub-layer's extent in the map, at the maximum\nzoom level in which the extent fits completely."]}),"\n",(0,l.jsx)(t.pre,{children:(0,l.jsx)(t.code,{className:"language-js",children:"let map-extent = document.querySelector('map-extent');\nmap-extent.zoomTo();\n"})}),"\n",(0,l.jsx)(t.hr,{}),"\n",(0,l.jsx)(t.h2,{id:"events",children:"Events"}),"\n",(0,l.jsxs)(t.table,{children:[(0,l.jsx)(t.thead,{children:(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.th,{children:"Event name"}),(0,l.jsx)(t.th,{children:"Description"})]})}),(0,l.jsx)(t.tbody,{children:(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{children:"map-change"}),(0,l.jsx)(t.td,{children:"Fired when the extent is checked or unchecked through the layer menu (by clicking or using the keyboard)"})]})})]}),"\n",(0,l.jsx)(t.hr,{}),"\n",(0,l.jsx)(t.h2,{id:"examples",children:"Examples"}),"\n",(0,l.jsx)(t.hr,{}),"\n",(0,l.jsx)(t.h2,{id:"specifications",children:"Specifications"}),"\n",(0,l.jsxs)(t.table,{children:[(0,l.jsx)(t.thead,{children:(0,l.jsx)(t.tr,{children:(0,l.jsx)(t.th,{children:"Specification"})})}),(0,l.jsx)(t.tbody,{children:(0,l.jsx)(t.tr,{children:(0,l.jsx)(t.td,{children:(0,l.jsx)(t.a,{href:"https://maps4html.org/MapML-Specification/spec/#dom-htmlextentelement",children:"HTMLExtentElement"})})})})]}),"\n",(0,l.jsx)(t.hr,{}),"\n",(0,l.jsx)(t.h2,{id:"requirements",children:"Requirements"}),"\n",(0,l.jsx)(t.p,{children:(0,l.jsx)(t.a,{href:"https://github.com/Maps4HTML/HTML-Map-Element-UseCases-Requirements/issues/new?title=-SUMMARIZE+THE+PROBLEM-&body=-DESCRIBE+THE+PROBLEM-",children:"Report problems with these requirements on GitHub"})}),"\n",(0,l.jsx)("p",{children:(0,l.jsxs)("b",{children:[(0,l.jsx)("span",{class:"requirement",children:"requirement"}),"\n",(0,l.jsx)("span",{class:"enhancement",children:"enhancement"}),"\n",(0,l.jsx)("span",{class:"impractical",children:"impractical"}),"\n",(0,l.jsx)("span",{class:"undecided",children:"undecided"}),"\n",(0,l.jsx)("span",{class:"discussion",children:"under discussion"})]})}),"\n",(0,l.jsxs)(t.table,{children:[(0,l.jsx)(t.thead,{children:(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.th,{style:{textAlign:"left"}}),(0,l.jsx)(t.th,{style:{textAlign:"center"},children:"Spec"}),(0,l.jsx)(t.th,{style:{textAlign:"center"},children:"Viewer"}),(0,l.jsx)(t.th,{style:{textAlign:"center"},children:"API"})]})}),(0,l.jsxs)(t.tbody,{children:[(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"#properties",children:(0,l.jsx)(t.strong,{children:"Properties"})})}),(0,l.jsx)(t.td,{style:{textAlign:"center"},children:"full"}),(0,l.jsx)(t.td,{style:{textAlign:"center"},children:"full"}),(0,l.jsx)(t.td,{style:{textAlign:"center"},children:"full"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"#methods",children:(0,l.jsx)(t.strong,{children:"Methods"})})}),(0,l.jsx)(t.td,{style:{textAlign:"center"},children:"n/a"}),(0,l.jsx)(t.td,{style:{textAlign:"center"},children:"n/a"}),(0,l.jsx)(t.td,{style:{textAlign:"center"},children:"n/a"})]}),(0,l.jsxs)(t.tr,{children:[(0,l.jsx)(t.td,{style:{textAlign:"left"},children:(0,l.jsx)(t.a,{href:"#events",children:(0,l.jsx)(t.strong,{children:"Events"})})}),(0,l.jsx)(t.td,{style:{textAlign:"center"},children:"n/a"}),(0,l.jsx)(t.td,{style:{textAlign:"center"},children:"n/a"}),(0,l.jsx)(t.td,{style:{textAlign:"center"},children:"n/a"})]})]})]}),"\n",(0,l.jsx)(t.hr,{}),"\n",(0,l.jsxs)(t.blockquote,{children:["\n",(0,l.jsxs)(t.ul,{children:["\n",(0,l.jsx)(t.li,{children:(0,l.jsxs)(t.a,{href:"https://github.com/Maps4HTML/web-map-doc/edit/main/docs/api/extent-api.md",children:["Edit this page on ",(0,l.jsx)(t.strong,{children:"Github"})]})}),"\n",(0,l.jsx)(t.li,{children:(0,l.jsxs)(t.a,{href:"https://gitter.im/Maps4HTML/chat",children:["Chat with us on ",(0,l.jsx)(t.strong,{children:"Gitter"})]})}),"\n"]}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,l.jsx)(t,{...e,children:(0,l.jsx)(o,{...e})}):o(e)}},8453(e,t,n){n.d(t,{R:()=>r,x:()=>a});var i=n(6540);const l={},s=i.createContext(l);function r(e){const t=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:r(e.components),i.createElement(s.Provider,{value:t},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.