1

Coming from this answer to customization of marker in leafleat: remove blue background from markers, now i have the following problem:

.html file:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">

    <link rel="stylesheet" href="style.css">

    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"

    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
    crossorigin=""/>

    <title>TITLE</title>
</head>
<body>             
        <div id="map"></div>
            <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
            integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
            crossorigin=""></script>

            <script src="mapscript.js"></script>
</body>
</html>

style.css:

#map { height: 500px; }

[role=button],button,input[type=button],input[type=reset],input[type=submit]{
    --background-color:none;
    --border-color:none;
    }

[role=button]:is([aria-current],:hover,:active,:focus),button:is([aria-current],:hover,:active,:focus),input[type=button]:is([aria-current],:hover,:active,:focus),input[type=reset]:is([aria-current],:hover,:active,:focus),input[type=submit]:is([aria-current],:hover,:active,:focus){
    --background-color:none;
    --border-color:none;
    }

.leaflet-control-zoom-in, .leaflet-control-zoom-out {
    background-image: none;
    text-indent: -9999px;
    background-repeat: no-repeat;
    background-size: cover;
    border: none;
}

.leaflet-control-zoom-in {
    background-image: url('./immagini/plus-circle-svgrepo-com.svg');
}

.leaflet-control-zoom-out {
    background-image: url('./immagini/minus-circle-svgrepo-com.svg');
}

I can't understand how to remove background from zoom-in and zoom-out buttons as i'm using svg files with transparent background.

before customization on zoom-in zoom-out buttons after customization on zoom-in zoom-out buttons

Improve this question

1 Answer 1

Reset to default
0

To fix the zoom-in and zoom-out buttons weird appearance after using pico.css, you can use the following line on the buttons

padding: 0px 0px;

so the trick is to apply the following after the pico.css

<style>

[role=button],button,input[type=button],input[type=reset],input[type=submit]{
    --background-color:none;
    --border-color:none;
    padding: 0px 0px;
 
}

[role=button]:is([aria-current],:hover,:active,:focus),button:is([aria-current],:hover,:active,:focus),input[type=button]:is([aria-current],:hover,:active,:focus),input[type=reset]:is([aria-current],:hover,:active,:focus),input[type=submit]:is([aria-current],:hover,:active,:focus){
    --background-color:none;
    --border-color:none;
}

</style>

and the whole code will be (as an example) :

<!DOCTYPE html>
<html lang="en">
<head>
    <base target="_top">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Quick Start - Leaflet</title>

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">

 <link rel="stylesheet" href="pico.css">

    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

<style>

[role=button],button,input[type=button],input[type=reset],input[type=submit]{
    --background-color:none;
    --border-color:none;
padding: 0px 0px;;
 
}

[role=button]:is([aria-current],:hover,:active,:focus),button:is([aria-current],:hover,:active,:focus),input[type=button]:is([aria-current],:hover,:active,:focus),input[type=reset]:is([aria-current],:hover,:active,:focus),input[type=submit]:is([aria-current],:hover,:active,:focus){
    --background-color:none;
    --border-color:none;
}

</style>

    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>


    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        .leaflet-container {
            height: 400px;
            width: 600px;
            max-width: 100%;
            max-height: 100%;
        }
    </style>

    
</head>
<body>



<div id="map" style="width: 600px; height: 400px;"></div>
<script>

    const map = L.map('map').setView([51.505, -0.09], 13);

    const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);

//  const marker = L.marker([51.5, -0.09]).addTo(map);


const LeafIcon = L.Icon.extend({
        options: {
//          shadowUrl: '',
            iconSize:     [32, 32],
//          shadowSize:   [50, 64],
            iconAnchor:   [22, 94],
//          shadowAnchor: [4, 62],
            popupAnchor:  [-3, -76]
        }
    });

    const greenIcon = new LeafIcon({iconUrl: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/library_maps.png'});

    const mGreen = L.marker([51.5, -0.09], {icon: greenIcon}).bindPopup('StackOverflow.com is good').addTo(map);

</script>

</body>
</html>

See the result of the above

enter image description here

if you click the marker, the above code will display:

enter image description here

Feel free to further modify the above code to suit your own needs. Enjoy.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.