3

how to remove the blue background from the markers? this happen using default icon and a custom one (png with transparent background)

am I doing something wrong?

<!DOCTYPE html>
<html lang="en">
<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="https://unpkg.com/[email protected]/dist/leaflet.css" />
    <title>Map with OpenStreetMap</title>
    <style>
        #map {
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <script>
        var map = L.map('map').setView([45.418393, 10.969487], 13); // Replace with your default map center

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);

        var marker = L.marker([45.410051797705904, 10.90330758434609]).addTo(map);

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

enter image description here

tried with a custom icon but still got the same problem

var LogoPin = L.icon({
    backgroundColor: 'transparent',
    iconUrl: './pin.png',
    shadowUrl: './shad.png',
    iconSize:     [30, 47], // size of the icon [38,95]
    shadowSize:   [50, 64], // size of the shadow*/
    iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],  // the same for the shadow*/
    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
    
});

L.marker([place.lat, place.lng], {icon: LogoPin}).addTo(map);
Improve this question
3
  • done already in first attemp. pin.png has a transparent background, and problem is showing up even with default icon
    – Den
    Commented Mar 28 at 0:54
  • Looks like downgrading to Leaflet version 1.7.1 restores the correct appearance: plnkr.co/edit/1bFOvZhrNQFrvDSK
    – ghybs
    Commented Mar 28 at 2:18
  • Picocss seems to be the culprit: plnkr.co/edit/2C4336ncy8Kkersl
    – ghybs
    Commented Mar 28 at 2:20

1 Answer 1

Reset to default
2

It is found that you are using pico.css (I believe for your specific purposes)

For your information, pico css will apply background and border color to a number of elements, and it affects your marker background and border

For your case, if you want to remove the blue color around the marker, one of the ways is to add the following below the pico.css:

<style>

[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;
}

</style>

On the other hand, if you do not need shadow then comment them out:

//          shadowUrl: '',
//          shadowSize:   [50, 64],
//          shadowAnchor: [4, 62],

So the whole code (without background color around the marker) but preserving the use of pico.css will be

<!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="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;
}

[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>

Result of the above code

enter image description here

Improve this answer
4
  • Please note that OP explicitly uses Leaflet, not OpenLayers.
    – ghybs
    Commented Mar 28 at 2:06
  • @ghybs, Thank you. I have further edited my answer and now it allows OP to continue using pico.css but at the same time fixing the problem of background color of marker
    – Ken Lee
    Commented Mar 28 at 5:20
  • @KenLee thank you for your help. I just fixed all following official guide of leaflet: leafletjs.com/examples/quick-start
    – Den
    Commented Mar 28 at 19:58
  • @KenLee. I kept pico.css and followed your instructions. I still have some problems with the zoom-in and zoom-out buttons as posted here: stackoverflow.com/questions/78261514/… . Can you help me to understand how pico.css and leaflet work together? Any documentation? Thanks a lot
    – Den
    Commented Apr 2 at 14:25

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