Skip to main content

HTMLLayerElement

Properties​

checked​

HTMLLayerElement.checked is a boolean read/write value that turns the layer on and off, and reflects the checked attribute. The checked state is reflected in the layer control user interface for the layer via a checkbox next to the layer name. The checked property can be used to programatically change the checked state of the layer. The checked property can't be changed if the disabled property is set.

To set the checked state of a layer to on:

let layer = document.querySelector('layer-');
layer.checked = true; // valid values are true | false

To read the checked state of the layer:

let layer = document.querySelector('layer-');
let isChecked = layer.checked;

hidden​

HTMLLayerElement.hidden is a boolean read/write value that hides or unhides the layer in the layer control only. The hidden state has no bearing on the presence of layer content on the map, it only affects the layer presence layer control. This can be useful for managing short-lived layers, such as search results, to the map without forcing the user to manage the layer state, which is done by your application. It can also be useful for managing a permanent base layer without cluttering the user interface.

To set/update whether the layer is "hidden":

let layer = document.querySelector('layer-');
layer.hidden = true; // valid values are true | false

To get the <layer->'s hidden value:

let layer = document.querySelector('layer-');
let isHidden = layer.hidden;

disabled​

HTMLLayerElement.disabled provides READ-ONLY access to the disabled state of the layer. A layer becomes disabled if its contents are not rendered, either by being completely outside the current map extent or by having an error associated to the layer processing, such as being in a projection that is incompatible with the projection of the map. When a layer is disabled, the user can't interact with it in the layer control, and it will not be visible in the map viewport. If a layer becomes not-disabled, through manipulation of the map, for example, the layer will become interactable in the layer control, and should be visible in the

map viewport.​

HTMLLayerElement.label provides read/write access to the label used in the layer control for the layer.

To set/update the <layer->'s label:

caution

Needs To Be Implemented, Currently doesn't update the label in layer controls

let layer = document.querySelector('layer-');
layer.label = "New Title";

To get the <layer->'s label value:

let layer = document.querySelector('layer-');
let label = layer.label;

src​

HTMLLayerElement.src reflects the src HTML attribute, and specifies the URL of the MapML document for the layer. The src property may be undefined if the layer contains inline content. If the src property returns a value, any inline content will be ignored. To set/update the <layer->'s src:

let layer = document.querySelector('layer-');
layer.src = "https://example.org";

To get the <layer->'s src value (URL):

let layer = document.querySelector('layer-');
let url = layer.src;

opacity​

HTMLLayerElement.opacity read/write access to the opacity % value, reflected in the layer control opacity input slider control.

To set/update the <layer->'s opacity:

let layer = document.querySelector('layer-');
layer.opacity = 0.5; // valid values from 0 to 1

To get the <layer->'s opacity value:

let layer = document.querySelector('layer-');
let opacity = layer.opacity;

Methods​

focus()​

HTMLLayerElement.focus() Zoom to the layer's extent. Note: this method is mis-named. It will be renamed, per this issue.

To fit the layer's extent in the map as much as possible:

let layer = document.querySelector('layer-');
layer.focus();

mapml2geojson(options)​

HTMLLayerElement.mapml2geojson(options) returns the layer in GeoJSON format.

FunctionReturnsDescription
mapml2geojson( <Object> options)A JavaScript (GeoJSON) feature collection objectThis function transforms the <feature> element children of a <layer-> element to a GeoJSON FeatureCollection object. You supply options to control the transformation. This function must be used inside a windows.onload event.
caution

mapml2geojson must be called inside a windows.onload event to work properly. i.e.

window.onload = (event) => {
  let layer = document.querySelector('layer-');
  layer.mapml2geojson();
};

Parameters​

ParameterDescription
<Object> optionsOptional. You supply parameters via an options object with predefined option names.

Options​

<Object> A set of key/value pairs that customize the output GeoJSON object. All are optional and detailed below.

OptionTypeDefaultDescription
propertyFunction<Function>n/aA function you supply that maps the features' <map-properties> element to a GeoJSON "properties" member, since only you know the markup design in your <map-properties> value. If you don't supply this option, a default function will attempt to reverse a <table> child of the <map-properties> element, as if that table was generated by the default properties option function from geojson2mapml.
transform<Boolean>trueTransform <map-coordinates> values to gcrs (longitude,latitude) values, if they are not already so. GeoJSON recommends using WGS 84 longitude,latitude coordinates, so this is the default behaviour.
Notes​

mapml2geojson, by default, will transform coordinates to gcrs before serialization, if necessary. Note that all geographic CRS are not equivalent, and the interpretation of such coordinates is not guaranteed to conform to WGS 84 / GPS coordinates, and therefore may not conform to the GeoJSON recommendation, which requires longitude,latitude coordinates that are encoded as WGS 84. The projection engine used to implement this conversion is not capable of transforming coordinates from one ellipsoid to another, and so the resulting JSON SHOULD (somehow, tbd) be tagged with the datum in use by the projection of the layer.

Events​

Event nameDescription
changestyleFired before the layer changes src due to user selecting alternate style in layer control
changeprojectionFired before the layer changes projection due to its declared projection being not equal to that of the map
extentloadFired when the metadata for a layer has loaded, but before loading tiles, features and other content

Examples​

mapml2geojson​

Default options​

An example showcasing default GeoJSON output when no options are provided.

<layer- label="Point Geometry" checked="">
   <map-meta name="extent" content="top-left-longitude=-75.916809, top-left-latitude=45.886964, bottom-right-longitude=-75.516809,bottom-right-latitude=45.26964"></map-meta>
   <map-meta name="projection" content="OSMTILE"></map-meta>
   <map-meta name="cs" content="gcrs"></map-meta>
   <map-feature>
      <map-featurecaption>Point Geometry</map-featurecaption>
      <map-geometry>
         <map-point>
            <map-coordinates>-75.6916809 45.4186964</map-coordinates>
         </map-point>
      </map-geometry>
      <map-properties>
         <table>
            <thead>
               <tr>
                  <th role="columnheader" scope="col">Property name</th>
                  <th role="columnheader" scope="col">Property value</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <th scope="row">prop0</th>
                  <td itemprop="prop0">This is a Point</td>
               </tr>
            </tbody>
         </table>
      </map-properties>
   </map-feature>
</layer->
<script>
window.onload = (event) => {
   let layer = document.querySelector('layer-');
   let output = layer.mapml2geojson();
};
</script>
Click to view the output GeoJSON
{
 "title": "Point Geometry",
 "bbox": [-75.916809, 45.886964, -75.516809, 45.26964],
 "type": "FeatureCollection",
 "features": [{
     "type": "Feature",
     "geometry": {
         "type": "Point",
         "coordinates": [-75.6916809, 45.4186964]
     },
     "properties": {
         "prop0": "This is a Point"
     }
 }]
}