homepage Welcome to WebmasterWorld Guest from 54.161.191.154
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
jquery - refresh of dynamic map image
ran_dizolph

5+ Year Member



 
Msg#: 4342206 posted 2:34 pm on Jul 21, 2011 (gmt 0)

Howdy folks!

Been working on a project based on HIFI's Zoommap [gethifi.com], which works quite well out of the box.

You can see my version of it here [chrwec.gpxsites.com]. What I'm trying to accomplish is allowing users to refine the locations that show up via the select boxes in the drop down form, but I need to have this happen without actually refreshing the page.

As of right now, you can make a selection from the drop down, manually refresh the page, zoom back in on a map section, and the results that are displayed are refined as they should be. It just needs to refresh on a select change.

Here's what I've got for the script:

$(document).ready(function(){

// SOCIAL HOUSING TYPE VARIABLES
var social_housing_type = $("#social_housing_type").val() ;
var sht='';
if (social_housing_type !=0) { sht='&social_housing_type=' + social_housing_type ; }

// BEDROOM LAYOUT
var layout = $("#layout").val() ;
var bl='';
if (layout !=0) { bl='&layout=' + layout ; }

// HOUSING TYPE VARIABLES
var housing_type = $("#housing_type").val() ;
var ht='';
if (housing_type !=0) { ht='&housing_type=' + housing_type ; }

$('#map').zoommap({

// Width and Height of the Map
width: '960px',
height: '960px',

//Misc Settings
blankImage: 'images/blank.gif',
zoomDuration: 400,
bulletWidthOffset: '10px',
bulletHeightOffset: '10px',

//ids and classes
zoomClass: 'zoomable',
popupSelector: 'div.popup',
popupCloseSelector: 'a.close',

//Return to Parent Map Link
showReturnLink: false,
returnId: 'returnlink',
returnText: 'return to main map',

//Initial Region to be shown
map: {
id: 0,
image: 'images/Windsor-Map.jpg',
data: 'popups/Windsor.php',
maps:
[
{
id: 2,
parent: 0,
image: 'images/Windsor-Central.png',
data: 'popups/sub-map.php?location=2'+sht+bl+ht,
width: '196px',
height: '625px',
top: '50px',
left: '332px'
},
{
id: 1,
parent: 0,
image: 'images/Windsor-East.png',
data: 'popups/sub-map.php?location=1'+sht+bl+ht,
width: '480px',
height: '625px',
top: '50px',
left: '530px'
},
{
id: 3,
parent: 0,
image: 'images/Windsor-West.png',
data: 'popups/sub-map.php?location=3'+sht+bl+ht,
width: '333px',
height: '625px',
top: '50px',
left: '0'
}
]
}
});
});


I'm at a total loss here, and this project is long overdue. Any help would be greatly appreciated!

 

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved