Display Marker on Top of the ImageOverlay

[tsemann]

Hello,

accordingly this is not a bug but would be a nice to have. Possibly one of you already got a suggestion of how to handle this:
I want to display a marker that is clickable on the map on top of the image overlay that you created. As far as the image overlay is display in a div above the map this is not possible.
I ende up with displaying a marker as an image overlay and load a marker on the map below so that it is also clickable and can show an info popup such as in the normal Leaflet.

Best regards and thanks in advance,
tsemann

[thatjpk]

You're right, the div-positioned-over-the-map thing is a hack. I did it that way because it was quick and easy, and I didn't know how to write a leaflet layer class (which would be the correct way to implement it). Converting it to a leaflet class would let you display it underneath markers and things. I have the intention of doing that, but haven't had time. :(

[tsemann]

I can imagine not having time to deeply look into leaflet code (just like me). I just want to contribute a method to display a marker hacked together using your solution:

        /*
        * Method to draw a marker onto a canvas object
        * @param lat latitude
        * @param lng longitude
        * @param imageMarker an Image containing the source of the image
        */
        function drawMarker(lat, lng, imageMarker) {
            var marker2 = latlngToContainerPoint(
                    new L.Marker(new L.LatLng(lat,lng), {
                icon: new options.icon()
            }).getLatLng());
            marker2.x = marker2.x + (imageMarker.width*0.5);
            var x0 = marker2.x-imageMarker.width;
            var y0 = marker2.y-imageMarker.height;
            var marker0 = new L.Point(x0, y0);
            
            var x1 = marker2.x;
            var y1 = marker2.y-imageMarker.height;
            var marker1 = new L.Point(x1, y1);
            var m11 = (marker1.x - marker0.x) / imageMarker.width;
            var m12 = (marker1.y - marker0.y) / imageMarker.width;
            var m21 = (marker2.x - marker1.x) / imageMarker.height;
            var m22 = (marker2.y - marker1.y) / imageMarker.height;
            var dx = marker0.x;
            var dy = marker0.y;
            ctx.setTransform(
                m11, m12,
                m21, m22,
                dx,  dy
            );
            ctx.globalAlpha = 1;
            ctx.drawImage(imageMarker, 0,0);
        }
//EXAMPLE: HOW TO USE IT
var imageMarker = new Image();
imageMarker.src = "./images/location_marker.png";
drawMarker(51.969772706350575, 7.595495581626892, imageMarker);