none
How to get position on clicking of image of Map. RRS feed

  • Question

  • I have some what unique requirement for my current development..

    On page launch User will be presented with an image of Bing map (with some information). 

    As the user double clicks on the map IMAGE he will be directed to the actual map, near about same place where he clicked, zoomed at a certain level.

    The position doesn't have to be very accurate.

    Can anyone please guide me how to do this, or if its already been discussed, point me to the right place.

    Thanks

    Saturday, October 27, 2012 12:21 AM

Answers

  • No, I think image map will only give you which hotarea was clicked on, not where within that area (it's been a while since I did one, so that may not be correct).

    To grab the coordinates of the mouse cursor when the users, you could use jquery as follows (not tested, but it should be about right):

    var mouseX;
    var mouseY;
    
    // Update variables when mouse moves over the map element
    $(el).mousemove(function(e){
        mouseX = e.pageX;
        mouseY = e.pageY;
    });
    
    // Action when user clicks on the map element
    $(el).click(function(e)
    {
        // Get the dimensions of the map image to compare
        W = $(el).width();
        H = $(el).height();
        X = $(el).position().left;
        Y = $(el).position().top;
    
        // If the mouse coordinates lie within the range of the map
        if (mouseX>X   && 
            mouseY>Y   && 
            mouseX<X+W && 
            mouseY<Y+H)
        {
            // Add your code here to take different actions
            // depending on the mouse coordinates
        }
    });


    twitter: @alastaira blog: http://alastaira.wordpress.com/ | Pro Spatial with SQL Server 2012

    Monday, October 29, 2012 6:57 AM
    Moderator

All replies

  • Image maps - i.e. images with clickable "hotspots" have long been supported by the HTML standard - http://www.w3schools.com/tags/tag_map.asp

    So you could have a static image map with various rectangular hotspots defined that, when clicked on, direct the user to the "actual" map centred on the appropriate location.

    I'm not quite sure why you would want to do it this way.... what's wrong with just giving the user the "actual" map in the first place?


    twitter: @alastaira blog: http://alastaira.wordpress.com/ | Pro Spatial with SQL Server 2012

    Saturday, October 27, 2012 7:00 AM
    Moderator
  • Well, that's just business requirement, there will be lot of information that will keep on changing, its easy for them to update image.

    Lets say if we know the coordinates/bounding box of IMAGE map and then we detect where exactly user clicked on image, can we pixel map it to the real Map?

    Saturday, October 27, 2012 6:51 PM
  • No, I think image map will only give you which hotarea was clicked on, not where within that area (it's been a while since I did one, so that may not be correct).

    To grab the coordinates of the mouse cursor when the users, you could use jquery as follows (not tested, but it should be about right):

    var mouseX;
    var mouseY;
    
    // Update variables when mouse moves over the map element
    $(el).mousemove(function(e){
        mouseX = e.pageX;
        mouseY = e.pageY;
    });
    
    // Action when user clicks on the map element
    $(el).click(function(e)
    {
        // Get the dimensions of the map image to compare
        W = $(el).width();
        H = $(el).height();
        X = $(el).position().left;
        Y = $(el).position().top;
    
        // If the mouse coordinates lie within the range of the map
        if (mouseX>X   && 
            mouseY>Y   && 
            mouseX<X+W && 
            mouseY<Y+H)
        {
            // Add your code here to take different actions
            // depending on the mouse coordinates
        }
    });


    twitter: @alastaira blog: http://alastaira.wordpress.com/ | Pro Spatial with SQL Server 2012

    Monday, October 29, 2012 6:57 AM
    Moderator