Листовка: Значок-маркер не отображается в правой части карты

Question

Я размещаю пользовательский значок маркера на карте листовки.

В первый раз, когда карта загружена, маркер значка не отображается в соответствующих координатах. Он «перемещается», а затем, если вы увеличиваете масштаб до минимума, значок появляется в правой точке. Мне было интересно, что случилось.

var map = L.map('map').setView([-36.60664, -72.10342], 4); 
 
\t \t map.options.minZoom = 4; 
 
\t \t map.options.maxZoom = 18; 
 

 
\t L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
 
\t \t attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
 
\t }).addTo(map); 
 

 
\t var LeafIcon = L.Icon.extend({ 
 
\t \t options: { 
 
\t \t \t //shadowUrl: 'leaf-shadow.png', 
 
\t \t \t iconSize:  [30, 30], 
 
\t \t \t //shadowSize: [50, 64], 
 
\t \t \t iconAnchor: [22, 94], 
 
\t \t \t //shadowAnchor: [4, 62], 
 
\t \t \t popupAnchor: [-3, -76] 
 
\t \t } 
 
\t }); 
 

 
\t var myIcon = new LeafIcon({iconUrl: 'http://icons.veryicon.com/128/System/Small%20%26%20Flat/map%20marker.png'}); 
 

 

 
L.marker([-33.4247, -70.67877], {icon: myIcon}).bindPopup("Parque Fluvial Renato Poblete").addTo(map);

\t #map { 
 
\t \t width: 100%; 
 
\t \t height: 600px; 
 
\t }

<link href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" rel="stylesheet"/> 
 
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script> 
 

 
<div id='map'></div>

Answer 1

значок вы используете 128x128. Вы должны изменить его размер до 30x30, размер которого вы указываете в своих вариантах.

Если вы хотите использовать пользовательский значок, вам также необходимо понять, как определены iconAnchor и popupAnchor.

В вашем случае, возможные значения могут быть:

iconSize: [30, 30], 
iconAnchor: [15, 30], 
popupAnchor: [0, -25],