Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    using jQuery to zoom a map

    I am trying to use the tools available in jQuery to make a zoomable map, but I haven't yet managed to do this. I am new in this field of programming, so don't be surprised if the following code seems too primitive for you

    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Map Zooming</title>
    
    <script type="text/javascript" src="jquery-1.6.4.min.js"></script> 
    <script type="text/javascript" src="jquery.mousewheel.js"></script> 
    
    <style type="text/css"> 
        #viewport { 
        	position:relative;
        	left:50px;
        	top:50px;
        	border:solid red 1px;
            width: 800px; 
            height: 500px; 
            cursor: move; 
            margin: 20px auto; 
            overflow: hidden; 
        } 
    </style> 
    
    </head>
    
    <body>
    
    <div id="viewport"> 
         <img id="scia" src="scia_no2_trop_2009.gif" alt="img" />
    </div>
    
    <script type="text/javascript"> 
        $(document).ready(function() { 
            $("#viewport").mapbox({mousewheel: true}); 
        }); 
    </script> 
    
    
    </body>
    
    </html>
    what I would like to do is to zoom the map by using mousewheel and also display the zoom factor if possible.

    Any help would be much appreciated.
    Last edited by ground0; 09-21-2011 at 10:09 AM.

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    I will assume you have seen this page:

    http://wayfarerweb.com/jquery/plugins/mapbox/

    At the bottom is a link for the mapbox.js. You need that other wise:

    Code:
    $("#viewport").mapbox({mousewheel: true});
    means nothing
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    just a note, your script block should go in the <head> section if your going to use dom ready

  • #4
    New Coder
    Join Date
    Aug 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the tips. Yes you are right harbingerOTV, I took it from that site. Now I have included the mapbox.js file, but still it doesn't work. I think the files I include as scripts are outdated or corrupted. Or is it something wrong with the code? Could you please have a look at the code and point the error/problem if there is some?

    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Map Zooming</title>
    
    <style type="text/css"> 
        #viewport { 
        	position:relative;
        	left:50px;
        	top:50px;
        	border:solid red 1px;
            width: 800px; 
            height: 500px; 
            cursor: move; 
            margin: 20px auto; 
            overflow: hidden; 
        } 
    </style> 
    
    <script type="text/javascript" src="jquery-1.6.4.min.js"></script> 
    <script type="text/javascript" src="jquery.mousewheel.js"></script>
    <script type="text/javascript" src="mapbox.min.js"></script>  
    
    <script type="text/javascript"> 
        $(document).ready(function() { 
            $("#viewport").mapbox({mousewheel: true}); 
        }); 
    </script>
    
    
    </head>
    
    <body>
    
    <div id="viewport"> 
         <img  src="http://upload.wikimedia.org/wikipedia/commons/3/38/Europe_topography_map_en.png" alt="img" />
    </div>
    
     
    </body>
    
    </html>

  • #5
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    You're getting closer

    read the page again. Your HTML is not built like the tutorial says to build it. Notably the part that starts:

    Code:
    <div id="viewport"> 
        <div style="background: url(images/layer1.png) no-repeat; width: 469px; height: 400px;"> 
            <!--top level map content goes here--> 
        </div> 
        <div style="height: 1097px; width: 1286px;"> 
            <img src="images/layer2.jpg" alt="" />
    If you notice, layer1.png, layer2.png, layer3.png and layer4.png are the same image with each one being larger that than previous.

    So you need multiple images. Then for your HTML like their example.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #6
    New Coder
    Join Date
    Aug 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Now it works. Thanks! But one little problem still exists. It only shows the upper left part of the bigger image in the beginning (it shows only the part of the large image specified by width and height settings). When zooming, it works normal.

    I tried resizing it by including class attribute in the <div> part, but nothing change.
    What options/attributes should I put in the first <div> part of the html body to solve this?

  • #7
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Now we're going to need a link to an example.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #8
    New Coder
    Join Date
    Aug 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry for not including the code. So, here is my last version of it:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Map Zooming</title>
    
    <style type="text/css"> 
        #viewport { 
        	border:solid red 1px;   
            width: 708px; 
            height: 462px; 
            cursor: move; 
            margin: 20px auto; 
            overflow: hidden; 
        } 
        
        .resize {
    		width: 708px;
    		height : auto;
    	}
        
    </style> 
    
    <script type="text/javascript" src="jquery-1.6.4.min.js"></script> 
    <script type="text/javascript" src="jquery.mousewheel.min.js"></script>
    <script type="text/javascript" src="mapbox.min.js"></script>  
    
    
    <script type="text/javascript"> 
        $(document).ready(function() { 
            $("#viewport").mapbox({mousewheel: true}); 
        }); 
    </script>
    
    </head>
    
    <body>
    
    <div id="viewport"> 
        <div style="background: url(http://upload.wikimedia.org/wikipedia/commons/3/38/Europe_topography_map_en.png); width: 708px; height: 462px;"> 
            <!--top level map content goes here--> 
        </div> 
        <div style="height: 924px; width: 1416px;"> 
            <img src="http://upload.wikimedia.org/wikipedia/commons/3/38/Europe_topography_map_en.png" alt="" /> 
            <div class="mapcontent"> 
                <!--map content goes here--> 
            </div> 
        </div> 
        <div style="height: 1386px; width: 2124px;"> 
            <img src="http://upload.wikimedia.org/wikipedia/commons/3/38/Europe_topography_map_en.png" alt="" /> 
             <div class="mapcontent"> 
                <!--map content goes here--> 
            </div> 
        </div> 
        <div style="height: 1850px; width: 2833px;"> 
            <img src="http://upload.wikimedia.org/wikipedia/commons/3/38/Europe_topography_map_en.png" alt="" /> 
             <div class="mapcontent"> 
                <!--map content goes here--> 
            </div> 
        </div>
    
    </div> 
    
     
    </body>
    
    </html>

  • #9
    New Coder
    Join Date
    Aug 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I managed to find a workaround for this. Basically, I just rescale the image to smaller size in image program and then include it. I guess the creator of the mapbox actually intended to use small size image in the first <div> part of the html code hence the reason for different layers for different images or image sizes.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •