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