Add a custom modal control to the map
This adds an info button that opens a modal clicked using Ultra's HTMLControl
---
title: Add a custom modal control to the map
description: This adds an info button that opens a modal clicked using Ultra's HTMLControl
controls:
- type: NavigationControl
- type: HTMLControl
options:
html: >
<div class="maplibregl-ctrl maplibregl-ctrl-group">
<label for="info-modal">
<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>
</label>
</div>
<input type="checkbox" id="info-modal" checked></input>
<div class="info-modal">
<label for="info-modal" class="close">✕</label>
<h1>Information!</h1>
<p>
This is a simple way to add a information modal to your map.
</p>
<p>
To have it closed by default, remove the <code>checked</code> attribute from the checkbox <code>input</code>
</p>
</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);
}
label[for=info-modal] {
cursor: pointer;
}
label[for=info-modal].close {
float: right;
text-align: center;
height: 20px;
width: 20px;
display: block;
}
#info-modal {
display: none;
}
.info-modal {
display: none;
}
#info-modal:checked + .info-modal {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
margin: 50px 20%;
padding: 20px;
background: white;
border-radius: 10px;
border: 1px solid grey;
pointer-events: initial;
box-shadow: 0 0 5px;
}
style: https://demotiles.maplibre.org/style.json
---