I've read everything I can find, and maybe I'm overlooking something simple. I have a map of my campus, and everything highlights and selects properly. The only issue I'm having is this: when clicked, each building pops up an information bubble. There a 'X' close button on those bubbles. I'm trying to get the building to deselect when it's clicked. (I can't provide a live link unfortunately, currently staff/student access only).
Here's the map setup:
<img id="campus" style="top:420px; right:600px;" class=map src="localhost/display/images/map_off.jpg" usemap="#world" >
<map id="world" name="world" >
<area data-name="12" id="22" onclick="show_me(''12'')" shape="poly" coords="717,219,725" href="#/" alt="Building 1" />
<area data-name="22" id="22" onclick="show_me(''22'')" shape="poly" coords="693,459,699,459,693,472" href="#/" />
<area data-name="1" id="1" onclick="show_me(''1'')" shape="poly" coords="50,103,303,103,303,154,50,154,50,103" href="#/" alt="Building 2 /">
<area data-name="2" id="2" onclick="show_me(''2'')" shape="poly" coords="311,103,455,103,476,123,476,194,315,194" href="#/" alt="Building 3" />
And so on...
The setup:
$(document).ready(function() {
map = $("#campus");
map.mapster({
fillOpacity: 1,
singleSelect: true,
render_highlight: {
altImage: "localhost/display/images/map_on.jpg"
},
render_select: {
altImage: "localhost/display/images/map_on.jpg"
}
});
});
and my close function:
the close function:
function closeWindow() {
var selected_area = map.mapster(''get'');
alert(selected_area); //this shows the correct map_key
var select_status = map.mapster("get",map_key);
alert(select_status); //but this shows 'false'
$("#display_bubble").css("display","none");
}
Any ideas? I get the feeling I'm overlooking something small, but I just can't find it.
In case this happens with anyone else, I had the 'mapKey' set under options:, instead of :
$(document).ready(function() {
map = $("#campus");
map.mapster({
fillOpacity: 1,
...
});
options:({
mapKey: "data-name",
...
});
it needed to be :
$(document).ready(function() {
map = $("#campus");
map.mapster({
mapKey: "data-name",
fillOpacity: 1,
...
});
options:({
...
});