Witam serdecznie.
Mam mapkę w Open Street Maps: http://serwer1356363.home.pl/pub/test/mapa.html
Podgląd: https://ibb.co/x8mqR62
Mój kod wygląda następująco:
<script type="text/javascript">
function onLocationFound(e) {
var radius = e.accuracy / 2;
lat = e.latlng.lat;
lng = e.latlng.lng;
L.marker(e.latlng).addTo(map).bindPopup("Tutaj jesteś!!!");
//L.circle(e.latlng, radius).addTo(map);
map.setView([lat, lng], 12);
}
function onLocationError(e) {
//alert(e.message);
console.log(e.message);
}
var map = L.map('mapdiv', {
editable: true,
fadeAnimation: false
}).setView([54.35070881441067, 18.641191756395074], 12);
L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
// L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://osm.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 18, zoomControl: true, detectRetina: true
}).addTo(map);
let myFilter = ['grayscale:100%'];
let myTileLayer = L.tileLayer.colorFilter('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', {
attribution: '<a href="https://wikimediafoundation.org/wiki/Maps_Terms_of_Use">Wikimedia</a>',
filter: myFilter,
}).addTo(map);
// lc = L.control.locate({
// strings: {
// title: "Pokaż gdzie jestem"
// }
// }).addTo(map);
var LeafIcon = L.Icon.extend({
options: {
iconSize: [25, 29],
iconAnchor: [25, 29],
popupAnchor: [-12, -22]
}
});
L.icon = function (options) {
return new L.Icon(options);
};
var icons = {
greenIcon: new LeafIcon({iconUrl: '{{asset('assets/images/ikon19.png')}}'}),
redIcon: new LeafIcon({iconUrl: '{{asset('assets/images/ikon20.png')}}'}),
blackIcon: new LeafIcon({iconUrl: '{{asset('assets/images/ikon20.png')}}'})
}
var image = '';
$.ajax({
url: '{{url('/getPointForMap')}}',
method: 'get',
cache: false,
success: function (data) {
$.each(JSON.parse(data), function(i, poi) {
if (poi.photo != ''){
image = '<img src="'+poi.photo+'" class="mapImgF"><br/>';
}
L.marker([poi.lat, poi.lng], {icon: icons[poi.marker]}).addTo(map).addTo(map).bindPopup('<a href="'+poi.url+'">' + image + '<div class="mapTitleF">' + poi.name + '</div>' + '<div class="mapDescF"> ocena: ' + poi.score + '<br/>' + poi.price + ' </div></a>', {maxWidth: "auto", closeOnClick: true});
});
}
});
map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);
map.locate({setView: true, maxZoom: 18});
</script>
<style type="text/css">
#mapdiv {
height: 600px;
width:100%;
}
</style>
W jaki sposób można naprawić to szare tło?