28139 sujets

CSS et mise en forme, CSS3

Bonjour à tous, débutant en html/css/javascript, j'ai réalisé une carte avec le plugin qgis2web qui utilise la bibliothèque leaflet, j'ai modifié le html pour y inclure des boutons de sélection de couche qui désactive les autres couches, je voudrais que la couleur de fond du bouton actif change lorsqu'il est actif, je n'y arrive pas, voici le code pour mes bouton ainsi que le style utilisé. il y a bien entendu le reste du code qui initialise la map, les zoom, etc. Merci pour votre aide

</style>
        html, body, #map {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        h1 {
            font-family: "Trebuchet MS", sans-serif;
            font-size: 32px;
            text-align: center;
            color: #46505a;
        }
        .button-container {
            position: absolute;
            top: 240px;
            left: 10px;
            z-index: 1000;
            display: flex;
            flex-direction: column;
        }
        .layer-button {
            margin: 5px;
            padding: 10px;
            background-color: #32b9c8;
            border: 1px solid #ffffff;
            cursor: pointer;
            font-family: "Trebuchet MS", sans-serif;
            color: #ffffff;
            font-size: 16px;
        }
        .layer-button.active {
            background-color: #9b3287;
        }
        .layer-button:hover {
            background-color: #32b9c8;
        }
    </style>
    <title>Luminosité du ciel nocturne</title>
</head>
<body>
    <h1>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 extrémité de nuit en 2022</button>
    </div>"
 <div id="map"></div>


   document.getElementById('layer1Button').addEventListener('click', function() {
                map.removeLayer(layer_Luminositencoeurdenuiten2022_2);
                map.removeLayer(layer_Luminositenextrmitdenuiten2022_3);
                map.addLayer(layer_Luminositencoeurdenuiten2021_1);
            });

            document.getElementById('layer2Button').addEventListener('click', function() {
                map.removeLayer(layer_Luminositencoeurdenuiten2021_1);
                map.removeLayer(layer_Luminositenextrmitdenuiten2022_3);
                map.addLayer(layer_Luminositencoeurdenuiten2022_2);
            });

            document.getElementById('layer3Button').addEventListener('click', function() {
                map.removeLayer(layer_Luminositencoeurdenuiten2021_1);
                map.removeLayer(layer_Luminositencoeurdenuiten2022_2);
                map.addLayer(layer_Luminositenextrmitdenuiten2022_3);
            });

        </script>
    </body>
</html>"


Edit: merci d'utiliser la coloration syntaxique , cela aide grandement à se faire aider
Modifié par gcyrillus (26 Jun 2024 - 12:26)
Modérateur
Bonjour,

Déjà, c'est <style> et non pas </style> pour la première ligne. Je me suis arrêté là !

Amicalement,
Modérateur
Comme parsimonhi te l'indique, les portions de code que tu montre sont pleines d'erreurs avant même de démontrer le soucis que tu décrit. ... pas de balise script d'ouverture non plus Smiley decu

pistes :
- ajouter/enlever la class active au click
- inverser la position des selecteur :hover et .active dans la feuille de style pour garder le visuel du bouton actif au survol

exemple js , c'est pas forcement le plus efficace
document.getElementById('layer1Button').addEventListener('click', function() {
  // les map. ...
  resetActive();
  this.classList.toggle("active");
});

document.getElementById('layer2Button').addEventListener('click', function() {
  // les map. ...
  resetActive();
  this.classList.toggle("active");
});

document.getElementById('layer3Button').addEventListener('click', function() {
  // les map. ...
  resetActive();
  this.classList.toggle("active");
});

function resetActive(){
  for (let e of document.querySelectorAll(".layer-button")) {
    e.classList.remove("active");
  }
}

ou pour le css, par exemple pour le survol au lieu d'une couleur de fond :

.layer-button:hover {
box-shadow:inset 0 0 5em #0003, 1px 1px 2px black
}


bonne continuation
Modifié par gcyrillus (26 Jun 2024 - 13:52)
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> &middot; <a href="https://leafletjs.com" title="A JS library for interactive maps">Leaflet</a> &middot; <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>