remove blue background from markers

Question

remove blue background from markers

100 views Asked by Den At 28 March 2024 at 00:37

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>

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);

Original Q&A

There are 1 answers

**Ken Lee** · Answer 1 · 2024-03-28T02:00:37+00:00

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

TechQA.

remove blue background from markers

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in LEAFLET

Related Questions in OPENSTREETMAP

Popular Questions

Popular Tags

Trending Questions