Develop Reference

In leaflet, how to set a marker to a fixed position on map?

For example, I want to set a leaflet marker always pin to the bottom-right corner of the leaflet map.
Does anyone have ideas about this?

There are a couple of ways to approach this, depending on what you want to accomplish.
This request for a centered "floating" crosshairs icon sounds very similar to your request. You essentially use getCenter() to create a fixed reference point, then use setLatLng() to update your marker's location relative to the map's center each time the user pans.
If the point you'd like to pin is purely cosmetic, you could just use HTML and CSS to position it on the page. This example, which is also referenced in the previous example, uses CSS to position an icon within a span as a visual reference point, then takes advantage of getCenter() to add lat/lon values to the form on the left of the page.

You can make use of getCenter(), getSize(), and L.marker() to pin to the bottom-right.
Reference: http://leafletjs.com/reference.html

On click have a second image zoom into place and cover the previous image

I have an image of a map area. I also have a second image which is a zoomed in area of the same map. I want to click a button and have the second image replace the first one, but I want some kind of an animation zoom effect to take place, also it would be nice to have a reverse animation effect for when the user clicks to see the entire map. I have no idea what approach to take on this. Any help would be much appreciated. Thank you guys!
The map image I use is a very stylized and minimalistic version of an actual map so I really rather just due some simple image manipulation and not use a real map api.
If there's a way to use a larger image and be able to click on a mapped area inside the image and have it zoom in and out, that I think would be the best way to handle this.

Image map coordinates for different browsers

I am trying to create an image map, where I define on the images coordinates that are links to the some other pages. Now the problem I am facing is that the position of coordinates is not relative.
If the image is on a different browser or in a different screen size, then the coordinates are not preserved. I mean a link which was at a particular place in the image is now on some other place of image.
Can anyone provide a piece of code where I can have some relative positioning where even the browser size or the image size will change the coordinates position also with it.
I tried to user percentage tags like COORDSCALE "50%,50%" but it seems like a wrong attribute for the Area tag. Even this COORDSCALE="ABSOLUTE|RELATIVE" is also not working.
First of all, are these the right attributes? Is there a possibility of relative positioning? Any CSS, or Javascript code will be great.

Wrap the image with div that has relative position. Inside it use absolutely positioned elements to imitate the same thing imagemap is supposed to do.
Google "CSS image map" to find more information about the technique.

disable clicking on javascript element beneath mask

I have the following problem;
I have a circle (square div made round with css3) where I want to put a clickable Google Maps map in it. So what I did is;
load the Google Maps element in my page
give the div where Google Maps is loaded in a mask
-webkit-mask-image: url(../images/maps_mask.png);
-webkit-mask-repeat: no-repeat;
looks great! but when i click in the corners (which are hided because of the mask) I can still drag the Google Maps map around !
And I don't want this!
Is there a simple solution for this?
kind regards,
Carl

You could try to catch all mouse-events that land onto the google map, calculate (by position) if the hit is outside of the visible area and cancel them if they do.

Display PNG over Google Maps without creating dead spot?

I'm overlaying a (mostly transparent) PNG on Google Maps using CSS, but it's creating a large dead spot on the map where the user can't drag the map.
Could anyone suggest how to get round this?
The obvious solution would be to use a marker overlay, but I can't do this - see Keep Google Maps marker in centre of map while dragged?
Thanks!

Try adding pointer-events:none; to the CSS for the overlay image, and see if this allows you to click through the image to the map. I tested this in Mozilla Firefox 6. You can click through the semi-transparent image and select the text:
http://jsfiddle.net/tJQWx/