Skip to main content

<map-a>

In this section we'll learn about the <map-a> element. This element allows you to wrap parts of coordinates and feature types entirely, changing the interaction of the location/area that is wrapped. When a feature is wrapped it places a blue outline that is 1 pixel wide around the feature, that lets the user know it's a "linked feature".

Attributes#

  • href

    • The URL that the wrapped location points to. Note - If the type of the <map-a> is text/mapml you can provide fragments, more on fragments below.
  • target

    • This is where the linked URL will be displayed. See table below for more details.
    • Defaults to _self, in the absence of a valid value.
  • type

    • This is the mime type of the linked URL's format. Options are text/html & text/mapml.
    • Defaults to text/mapml, in the absence of a valid type value.

Target Behavior for text/mapml#

Target ValueBehavior
_selfReplaces the current layer with the linked URL layer.
_blankAdds the linked URL layer to the map.
_parentReplace all the layers with the linked URL layer.
_topNavigate the webpage to the linked URL.

Target Behavior for text/html#

Target ValueBehavior
_selfNavigate the webpage to the linked URL.
_blankOpen the linked URL in a new tab.
_parentNavigate the webpage to the linked URL.
_topNavigate the webpage to the linked URL.

Location fragments#

If the type attribute's value is text/mapml, you have the ability add a location fragment to the URL. This will pan & zoom the map to the given location.

Fragments are in the following format #zoom, longitude, latitude.

URL's solely defined in terms of location fragments pan and zoom the map to the given location regardless of the target value. i.e. <map-a href="#1, 20, 30">...</map-a> will pan to latitude: 30, longitude: 20 and zoom to level 1.


Examples#

Styling Linked Features#

To style linked features simply target the map-a class in your CSS, once a link is clicked you can target the map-a-visited class. See the example below:

<layer->
<style>
.map-a {
stroke: red;
}
.map-a-visited {
stroke: green;
}
</style>
<feature>
<properties>
<h1>Basic</h1>
</properties>
<geometry>
<map-a href="../externalMapML.mapml#2,-98,37">
<polygon>
<coordinates>2771 3106 2946 3113 2954 3210 2815 3192 2771 3106</coordinates>
</polygon>
</map-a>
</geometry>
</feature>
</layer->

Wrapping a Feature Type + Location Fragment#

<feature>
<properties>
<h1>Basic</h1>
</properties>
<geometry>
<map-a href="../externalMapML.mapml#2,-98,37">
<polygon>
<coordinates>2771 3106 2946 3113 2954 3210 2815 3192 2771 3106</coordinates>
</polygon>
</map-a>
</geometry>
</feature>

This will replace the current layer with the layer within externalMapML.mapml, once it's added the map will then goto zoomlevel: 2, longitude: -98, latitude: 37.

Wrapping a point coordinate with target="_blank"#

<feature>
<properties>
<h1>_blank target</h1>
</properties>
<geometry>
<polygon>
<coordinates>2771 3106 2946 3113 <map-a href="file.mapml" target="_blank"> 2954 3210 </map-a> 2815 3192 2771 3106</coordinates>
</polygon>
</geometry>
</feature>

In this example, a point will be created at (2954, 3210) which, once clicked, adds a new layer to the map.

Nested <map-a> definition and behavior#

<feature>
<properties>
<h1>Advanced Example</h1>
</properties>
<geometry>
<map-a href="parent.mapml" target="_blank">
<multipolygon>
<polygon>
<coordinates>2771 3106 2946 3113 <map-a href="webpage.html" target="_blank" type="text/mapml"> 2954 3210 </map-a> 2815 3192 2771 3106</coordinates>
</polygon>
<map-a href="nested.mapml" target="_top">
<polygon>
<coordinates>11 11 12 11 12 12 11 12</coordinates>
</polygon>
</map-a>
</multipolygon>
</map-a>
</geometry>
</feature>

In this advanced example there are multiple nested <map-a>. The simple behavior is, the closest <map-a> is the link behavior that the given location/area will adopt.