(A) For Leaflet library It is found that you are using pico.css
FirstFor your information, pico css will apply background and border color to a number of allelements, and it affects your marker
For your case, if you want to remove the blue color around the marker, please 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;
</style>
On the other hand, if you do not need shadow then comment them out:
// shadowUrl: '',
// shadowSize: [50, 64],
// shadowAnchor: [4, 62],
and you also need to remove the pico css
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
So the whole code as follows(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;
</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: '© <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:
Result (if pico.css not removed)
(B) For Openlayer library
In case someone wants to use this library instead of leaflet:
normally we specify the custom marker (yourown.png) when creating a new icon thru OpenLayers.icon() and then pass this icon as a parameter to OpenLayers.Marker, as follows:
var size = new OpenLayers.Size(32,32);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon("https://developers.google.com/maps/documentation/javascript/examples/full/images/library_maps.png", size, offset);
var markers = new OpenLayers.Layer.Markers("Markers")
map.addLayer(markers);
markers.addMarker(new OpenLayers.Marker(position, icon));
So you may try the following (fully workingabove code)
<div id="Map" style="height: 250px; width: 400px" ></div>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<!--<script src="js/osm/api/OpenLayers.js"></script>-->
<script>
var lat = 55.676098;
var lon = 12.568337;
var zoom = 11;
var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984
var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
var position = new OpenLayers.LonLat(lon, lat).transform(fromProjection, toProjection);
map = new OpenLayers.Map("Map");
var mapnik = new OpenLayers.Layer.OSM();
map.addLayer(mapnik);
//////////////////
var size = new OpenLayers.Size(32,32);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon("https://developers.google.com/maps/documentation/javascript/examples/full/images/library_maps.png", size, offset);
var markers = new OpenLayers.Layer.Markers("Markers")
map.addLayer(markers);
markers.addMarker(new OpenLayers.Marker(position, icon));
////////////////// disable default marker
// var markers = new OpenLayers.Layer.Markers("Markers");//("Images/Icons/map-marker.png");
// map.addLayer(markers);
// markers.addMarker(new OpenLayers.Marker(position));
//////////////// END
map.setCenter(position, zoom);
</script>
The result will be
