Bonjour et merci gcyrillus,
Cela fonctionne parfaitement, J'en ai profité pour faire quelque recherche supplémentaire, surtout sur l’affichage de mes image qui posais problème (en fonction de la résolution écran) et pour mobile par exemple du coup j'ai utilisé des taille en vh, il y à peut être plus simple mais cela fonctionne. voila le code modifié avec tes recommandations.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="css/leaflet.css">
<link rel="stylesheet" href="css/L.Control.Layers.Tree.css">
<link rel="stylesheet" href="css/qgis2web.css">
<link rel="stylesheet" href="css/fontawesome-all.min.css">
<link rel="stylesheet" href="css/leaflet-search.css">
<style>
html, body, #map {
width: 100%;
height: 97%;
padding: 0;
margin: 0;
}
h1 {
font-family: "Trebuchet MS", sans-serif;
font-size: 1.5vw; /* Taille de police relative à la largeur de la fenêtre */
color: transparent;
background: linear-gradient(to right, #9b3287, #32b9c8);
-webkit-background-clip: text;
background-clip: text;
text-align: center;
}
.button-container {
position: absolute;
top: 25vh; /* Position relative à la hauteur de la fenêtre */
left: 1vw; /* Position relative à la largeur de la fenêtre */
z-index: 1000;
display: flex;
flex-direction: column;
}
.layer-button:active {
margin: 0.5vw; /* Marges relatives à la largeur de la fenêtre */
padding: 0.5vw; /* Padding relatif à la largeur de la fenêtre */
background-color: #9b3287;
border: 0.1vw solid #ffffff;
cursor: pointer;
font-family: "Trebuchet MS", sans-serif;
color: #ffffff;
font-size: 0.9vw; /* Taille de police relative à la largeur de la fenêtre */
}
.layer-button {
margin: 0.5vw;
padding: 0.5vw;
background-color: #32b9c8;
border: 0.1vw solid #ffffff;
cursor: pointer;
font-family: "Trebuchet MS", sans-serif;
color: #ffffff;
font-size: 0.9vw;
}
.layer-button:hover {
background-color: #32b9c8;
box-shadow: inset 0 0 5em #9b3287, 1px 1px 2px #9b3287;
}
.active {
margin: 5px;
padding: 10px;
background-color: #9b3287;
border: 1px solid #ffffff;
cursor: pointer;
font-family: "Trebuchet MS", sans-serif;
color: #ffffff;
font-size: 16px
}
.fixed-image {
position: absolute;
z-index: 1000;
height: auto;
}
#logo-tepa {
top: 0;
left: 0;
width: 9.5vw; /* Largeur relative à la largeur de la fenêtre */
}
#logo-actee {
bottom: 0;
left: 0;
width: 12vw; /* Largeur relative à la largeur de la fenêtre */
}
#logo-darksky {
bottom: 2vh; /* Position relative à la hauteur de la fenêtre */
right: 0;
width: 7vw; /* Largeur relative à la largeur de la fenêtre */
}
#logo-chauve-souris-left {
top: 0;
left: 28vw; /* Position relative à la largeur de la fenêtre */
width: 5vw; /* Largeur relative à la largeur de la fenêtre */
}
#logo-chauve-souris-right {
top: 0;
right: 28vw;
width: 5vw;
}
#mascotte-danse {
top: 70vh; /* Position relative à la hauteur de la fenêtre */
left: 2vw;
width: 8vw;
}
#infobulle {
top: 60vh;
left: 7vw;
width: 9vw;
}
#legende {
top: 7vh;
right: 0;
width: 14vw;
}
</style>
<title></title>
</head>
<body>
<h1 id="mapTitle">Luminosité du ciel nocturne</h1>
<div class="button-container">
<button class="layer-button" id="layer1Button">Luminosité en coeur de nuit en 2021</button>
<button class="layer-button" id="layer2Button">Luminosité en coeur de nuit en 2022</button>
<button class="layer-button" id="layer3Button">Luminosité en coeur de nuit en 2023</button>
<button class="layer-button" id="layer4Button">Luminosité en extrémité de nuit en 2022</button>
</div>
<img id="logo-tepa" class="fixed-image" src="images/Logo TE PA.jpg" alt="Logo de l'entreprise">
<img id="logo-actee" class="fixed-image" src="images/ACTEE FNCCR.jpg" alt="Logo ACTEE">
<img id="logo-darksky" class="fixed-image" src="images/DarkSky.jpg" alt="Logo DarkSkyLab">
<img id="logo-chauve-souris-left" class="fixed-image" src="images/chauve-souris 2 fond transparent.png" alt="Logo chauve souris">
<img id="logo-chauve-souris-right" class="fixed-image" src="images/chauve-souris 2 fond transparent.png" alt="Logo chauve souris">
<img id="mascotte-danse" class="fixed-image" src="images/Mascotte danse.png" alt="Mascotte danse">
<img id="infobulle" class="fixed-image" src="images/infobulle2.png" alt="infobulle">
<img id="legende" class="fixed-image" src="images/Légende.png" alt="Légende">
<div id="map">
</div>
<script src="js/qgis2web_expressions.js"></script>
<script src="js/leaflet.js"></script>
<script src="js/L.Control.Layers.Tree.min.js"></script>
<script src="js/leaflet.rotatedMarker.js"></script>
<script src="js/leaflet.pattern.js"></script>
<script src="js/leaflet-hash.js"></script>
<script src="js/Autolinker.min.js"></script>
<script src="js/rbush.min.js"></script>
<script src="js/labelgun.min.js"></script>
<script src="js/labels.js"></script>
<script src="js/leaflet-search.js"></script>
<script src="data/Commune_5.js"></script>
<script>
var highlightLayer;
function highlightFeature(e) {
highlightLayer = e.target;
highlightLayer.openPopup();
}
var map = L.map('map', {
zoomControl:false, maxZoom:28, minZoom:5
}).fitBounds([[42.386409155562305,-2.5994958809783095],[43.965087703658746,1.1874632346039724]]);
var hash = new L.Hash(map);
map.attributionControl.setPrefix('<a href="https://github.com/tomchadwin/qgis2web" target="_blank">qgis2web</a> · <a href="https://leafletjs.com" title="A JS library for interactive maps">Leaflet</a> · <a href="https://qgis.org">QGIS</a>');
var autolinker = new Autolinker({truncate: {length: 30, location: 'smart'}});
// remove popup's row if "visible-with-data"
function removeEmptyRowsFromPopupContent(content, feature) {
var tempDiv = document.createElement('div');
tempDiv.innerHTML = content;
var rows = tempDiv.querySelectorAll('tr');
for (var i = 0; i < rows.length; i++) {
var td = rows[i].querySelector('td.visible-with-data');
var key = td ? td.id : '';
if (td && td.classList.contains('visible-with-data') && feature.properties[key] == null) {
rows[i].parentNode.removeChild(rows[i]);
}
}
return tempDiv.innerHTML;
}
// add class to format popup if it contains media
function addClassToPopupIfMedia(content, popup) {
var tempDiv = document.createElement('div');
tempDiv.innerHTML = content;
if (tempDiv.querySelector('td img')) {
popup._contentNode.classList.add('media');
// Delay to force the redraw
setTimeout(function() {
popup.update();
}, 10);
} else {
popup._contentNode.classList.remove('media');
}
}
var zoomControl = L.control.zoom({
position: 'topleft'
}).addTo(map);
var bounds_group = new L.featureGroup([]);
function setBounds() {
}
map.createPane('pane_OSMStandard_0');
map.getPane('pane_OSMStandard_0').style.zIndex = 400;
var layer_OSMStandard_0 = L.tileLayer('http://tile.openstreetmap.org/{z}/{x}/{y}.png', {
pane: 'pane_OSMStandard_0',
opacity: 1.0,
attribution: '<a href="https://www.openstreetmap.org/copyright">© OpenStreetMap contributors, CC-BY-SA</a>',
minZoom: 5,
maxZoom: 28,
minNativeZoom: 0,
maxNativeZoom: 19
});
layer_OSMStandard_0;
map.addLayer(layer_OSMStandard_0);
map.createPane('pane_Luminositenextrmitdenuiten2022_1');
map.getPane('pane_Luminositenextrmitdenuiten2022_1').style.zIndex = 401;
var img_Luminositenextrmitdenuiten2022_1 = 'data/Luminositenextrmitdenuiten2022_1.png';
var img_bounds_Luminositenextrmitdenuiten2022_1 = [[42.722561281559415,-1.8198625083915316],[43.6190212768889,0.07033355976265819]];
var layer_Luminositenextrmitdenuiten2022_1 = new L.imageOverlay(img_Luminositenextrmitdenuiten2022_1,
img_bounds_Luminositenextrmitdenuiten2022_1,
{pane: 'pane_Luminositenextrmitdenuiten2022_1'});
bounds_group.addLayer(layer_Luminositenextrmitdenuiten2022_1);
map.addLayer(layer_Luminositenextrmitdenuiten2022_1);
map.createPane('pane_Luminositencoeurdenuiten2021_2');
map.getPane('pane_Luminositencoeurdenuiten2021_2').style.zIndex = 402;
var img_Luminositencoeurdenuiten2021_2 = 'data/Luminositencoeurdenuiten2021_2.png';
var img_bounds_Luminositencoeurdenuiten2021_2 = [[42.722561281559415,-1.8198625083915316],[43.6190212768889,0.07033355976265819]];
var layer_Luminositencoeurdenuiten2021_2 = new L.imageOverlay(img_Luminositencoeurdenuiten2021_2,
img_bounds_Luminositencoeurdenuiten2021_2,
{pane: 'pane_Luminositencoeurdenuiten2021_2'});
bounds_group.addLayer(layer_Luminositencoeurdenuiten2021_2);
map.addLayer(layer_Luminositencoeurdenuiten2021_2);
map.createPane('pane_Luminositencoeurdenuiten2022_3');
map.getPane('pane_Luminositencoeurdenuiten2022_3').style.zIndex = 403;
var img_Luminositencoeurdenuiten2022_3 = 'data/Luminositencoeurdenuiten2022_3.png';
var img_bounds_Luminositencoeurdenuiten2022_3 = [[42.722561281559415,-1.8198625083915316],[43.6190212768889,0.07033355976265819]];
var layer_Luminositencoeurdenuiten2022_3 = new L.imageOverlay(img_Luminositencoeurdenuiten2022_3,
img_bounds_Luminositencoeurdenuiten2022_3,
{pane: 'pane_Luminositencoeurdenuiten2022_3'});
bounds_group.addLayer(layer_Luminositencoeurdenuiten2022_3);
map.addLayer(layer_Luminositencoeurdenuiten2022_3);
map.createPane('pane_Luminositencoeurdenuiten2023_4');
map.getPane('pane_Luminositencoeurdenuiten2023_4').style.zIndex = 404;
var img_Luminositencoeurdenuiten2023_4 = 'data/Luminositencoeurdenuiten2023_4.png';
var img_bounds_Luminositencoeurdenuiten2023_4 = [[42.722427462994915,-1.8197969872118158],[43.61922676786891,0.07031011137234947]];
var layer_Luminositencoeurdenuiten2023_4 = new L.imageOverlay(img_Luminositencoeurdenuiten2023_4,
img_bounds_Luminositencoeurdenuiten2023_4,
{pane: 'pane_Luminositencoeurdenuiten2023_4'});
bounds_group.addLayer(layer_Luminositencoeurdenuiten2023_4);
map.addLayer(layer_Luminositencoeurdenuiten2023_4);
function pop_Commune_5(feature, layer) {
layer.on({
mouseout: function(e) {
if (typeof layer.closePopup == 'function') {
layer.closePopup();
} else {
layer.eachLayer(function(feature){
feature.closePopup()
});
}
},
mouseover: highlightFeature,
});
var popupContent = '<table>\
<tr>\
<th scope="row">NOM</th>\
<td>' + (feature.properties['NOM'] !== null ? autolinker.link(feature.properties['NOM'].toLocaleString()) : '') + '</td>\
</tr>\
<tr>\
<th scope="row">INSEE_COM</th>\
<td>' + (feature.properties['INSEE_COM'] !== null ? autolinker.link(feature.properties['INSEE_COM'].toLocaleString()) : '') + '</td>\
</tr>\
<tr>\
<th scope="row">POPULATION</th>\
<td>' + (feature.properties['POPULATION'] !== null ? autolinker.link(feature.properties['POPULATION'].toLocaleString()) : '') + '</td>\
</tr>\
</table>';
var content = removeEmptyRowsFromPopupContent(popupContent, feature);
layer.on('popupopen', function(e) {
addClassToPopupIfMedia(content, e.popup);
});
layer.bindPopup(content, { maxHeight: 400 });
}
function style_Commune_5_0() {
return {
pane: 'pane_Commune_5',
opacity: 1,
color: 'rgba(70,80,90,0.6274509803921569)',
dashArray: '',
lineCap: 'square',
lineJoin: 'bevel',
weight: 1,
fillOpacity: 0,
interactive: true,
}
}
map.createPane('pane_Commune_5');
map.getPane('pane_Commune_5').style.zIndex = 405;
map.getPane('pane_Commune_5').style['mix-blend-mode'] = 'normal';
var layer_Commune_5 = new L.geoJson(json_Commune_5, {
attribution: '',
interactive: true,
dataVar: 'json_Commune_5',
layerName: 'layer_Commune_5',
pane: 'pane_Commune_5',
onEachFeature: pop_Commune_5,
style: style_Commune_5_0,
});
bounds_group.addLayer(layer_Commune_5);
map.addLayer(layer_Commune_5);
map.on("zoomend", function(){
if (map.hasLayer(layer_Commune_5)) {
if (map.getZoom() <= 19 && map.getZoom() >= 19) {
layer_Commune_5.eachLayer(function (layer) {
layer.openTooltip();
});
} else {
layer_Commune_5.eachLayer(function (layer) {
layer.closeTooltip();
});
}
}
});
setBounds();
if (map.hasLayer(layer_Commune_5)) {
if (map.getZoom() <= 19 && map.getZoom() >= 19) {
layer_Commune_5.eachLayer(function (layer) {
layer.openTooltip();
});
} else {
layer_Commune_5.eachLayer(function (layer) {
layer.closeTooltip();
});
}
}
map.addControl(new L.Control.Search({
layer: layer_Commune_5,
initial: false,
hideMarkerOnCollapse: true,
propertyName: 'NOM'}));
document.getElementsByClassName('search-button')[0].className +=
' fa fa-binoculars fa4x';
L.ImageOverlay.include({
getBounds: function () {
return this._bounds;
}
});
resetLabels([layer_Commune_5]);
map.on("zoomend", function(){
resetLabels([layer_Commune_5]);
});
map.on("layeradd", function(){
resetLabels([layer_Commune_5]);
});
map.on("layerremove", function(){
resetLabels([layer_Commune_5]);
});
function updateMapTitle(title) {
document.getElementById('mapTitle').innerText = title;
}
document.getElementById('layer1Button').addEventListener('click', function() {
map.removeLayer(layer_Luminositencoeurdenuiten2022_3);
map.removeLayer(layer_Luminositenextrmitdenuiten2022_1);
map.removeLayer(layer_Luminositencoeurdenuiten2023_4);
map.addLayer(layer_Luminositencoeurdenuiten2021_2);
updateMapTitle('Luminosité en coeur de nuit en 2021'); resetActive();
this.classList.toggle("active");
});
document.getElementById('layer2Button').addEventListener('click', function() {
map.removeLayer(layer_Luminositencoeurdenuiten2021_2);
map.removeLayer(layer_Luminositenextrmitdenuiten2022_1);
map.removeLayer(layer_Luminositencoeurdenuiten2023_4);
map.addLayer(layer_Luminositencoeurdenuiten2022_3);
updateMapTitle('Luminosité en coeur de nuit en 2022'); resetActive();
this.classList.toggle("active");
});
document.getElementById('layer4Button').addEventListener('click', function() {
map.removeLayer(layer_Luminositencoeurdenuiten2021_2);
map.removeLayer(layer_Luminositencoeurdenuiten2022_3);
map.removeLayer(layer_Luminositencoeurdenuiten2023_4);
map.addLayer(layer_Luminositenextrmitdenuiten2022_1);
updateMapTitle('Luminosité en extrémité de nuit en 2022'); resetActive();
this.classList.toggle("active");
});
document.getElementById('layer3Button').addEventListener('click', function() {
map.removeLayer(layer_Luminositencoeurdenuiten2021_2);
map.removeLayer(layer_Luminositencoeurdenuiten2022_3);
map.removeLayer(layer_Luminositenextrmitdenuiten2022_1);
map.addLayer(layer_Luminositencoeurdenuiten2023_4);
updateMapTitle('Luminosité en coeur de nuit en 2023'); resetActive();
this.classList.toggle("active");
});
function resetActive(){
for (let e of document.querySelectorAll(".layer-button")) {
e.classList.remove("active");
}
}
</script>
</body>
</html>
