Use HTMLControl to add a link button to your map
This adds an info button that opens a link in a new window when clicked using Ultra's HTMLControl
---
title: Use HTMLControl to add a link button to your map
description: This adds an info button that opens a link in a new window when clicked using Ultra's HTMLControl
controls:
- type: NavigationControl
- type: HTMLControl
options:
html: >
<div class="maplibregl-ctrl maplibregl-ctrl-group">
<a href="https://overpass-ultra.us/docs" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 80a48 48 0 1 1 96 0A48 48 0 1 1 48 80zM0 224c0-17.7 14.3-32 32-32l64 0c17.7 0 32 14.3 32 32l0 224 32 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 512c-17.7 0-32-14.3-32-32s14.3-32 32-32l32 0 0-192-32 0c-17.7 0-32-14.3-32-32z"/></svg>
</a>
</div>
css: >
.maplibregl-ctrl svg {
height: 16px;
width: 16px;
padding: 6.5px;
float: right;
}
.maplibregl-ctrl svg:hover {
background-color: rgba(0, 0, 0, 0.05);
}
style: https://demotiles.maplibre.org/style.json
---