Leaflet OSM Marker Popup Positioning
<p>I'm working a map website using OpenStreetMap, and I'm using image marker rather the default one. The first problem when zooming map in or out, marker's position slightly changing... So I set anchor point using L.point. However, the chain reaction happened also to pop up, which described by this picture : </p>

<p><a href="https://i.stack.imgur.com/jmD3b.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jmD3b.png" alt="enter image description here"></a></p>

<p>Popup covered the marker, and the positioning doesn't seem right. Any suggestion how to tinkering popup's point? Here's my code :</p>

<pre><code>var locations = data;

for ( var i=0; i &lt; locations.length; i++) {

    if (locations[i][0] == 'panic') {
        var icon = L.icon({iconUrl:"{{asset('assets/splash4.gif')}}", iconAnchor: new L.Point(36,41) });

        var marker = L.marker( [locations[i][1], locations[i][2]], {icon: icon});

        marker.bindPopup( locations[i][5] + " &lt;br&gt;" + locations[i][6] + " &lt;br&gt;" + locations[i][7] + " &lt;br&gt;&lt;br&gt;" + locations[i][3] + " &lt;br&gt;" + locations[i][4] ).addTo( map );

        if(i == locations.length - 1){

            map.setView(new L.LatLng(locations[i][1], locations[i][2]), 18);

            marker.bindPopup(locations[i][5] + " &lt;br&gt;" + locations[i][6] + " &lt;br&gt;" + locations[i][7] + " &lt;br&gt;&lt;br&gt;" + locations[i][3] + " &lt;br&gt;" + locations[i][4]).openPopup().addTo( map );
        }

    } else {
        var icon2 = L.icon({iconUrl:"{{asset('assets/opmarkerblue1.png')}}", iconAnchor: new L.Point(0,32)});

        var marker = L.marker( [locations[i][1], locations[i][2]], {icon: icon2});

        marker.bindPopup( locations[i][5] + " &lt;br&gt;" + locations[i][6] + " &lt;br&gt;" + locations[i][7] + " &lt;br&gt;&lt;br&gt;" + locations[i][3] + " &lt;br&gt;" + locations[i][4] ).addTo( map );
    }
}
</code></pre>

<p>Any help appreciated.</p>