Imagemapster de-select issue

Question

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.

You can replace those naughty `onclick=` attributes with a single jQuery call: `$('#world area').on('click', function(e) { show_me($(this).data('name')); })` — Blazemonger, Jul 12 '12 at 15:33
Can you share the `show_me` function? Or possibly build a working model on http://jsfiddle.net ? — Blazemonger, Jul 12 '12 at 15:35
The function doesn't have any code for Imagemapster, but I put show_me() here: http://jsfiddle.net/5bKUH/ - can't do a working model, it currently requires a campus login. — ini, Jul 12 '12 at 15:50
in the `closeWindow` function what is `map_key`? It's hard to figure out exactly what's going on without something to look at - actually i'm not even sure what is supposed to be happening. If you can't share the actual image to set up a working jsfiddle example for some reason, use `http://placekitten.com/width/height` as the source URL for in image instead e.g. http://placekitten.com/200/300 — Jamie Treworgy, Jul 12 '12 at 16:12
When the closeWindow function is called, im just trying to get the selected building to be deselected. I've tried various combinations of area.mapster(deselect) and area/img.mapster(set), but can't get it to fire correctly. map_key is the key for the building that is selected — ini, Jul 12 '12 at 16:22
By the way I think you had emailed me about this before (this is the author of imagemapster) and I don't remember if I dropped the ball.. but I'm glad you asked the question on SO, it's easier to deal with back & forth. I'll take a look at the fiddle if you can demonstrate the issue there. — Jamie Treworgy, Jul 12 '12 at 16:31
Oh np, could be useful for others :) Do you have a public host for the js file I can link to? — ini, Jul 12 '12 at 16:33
https://raw.github.com/jamietre/ImageMapster/master/dist/jquery.imagemapster.js or http://www.outsharked.com/scripts/jquery.imagemapster.js is using IE (github doesn't send the right mime type & IE cares) — Jamie Treworgy, Jul 12 '12 at 16:37
I updated the fiddle with a working version. the top left 3 buildings have the ids and keys set. but bubble doesn't move, but that's not important. The goal is to deselect the building when the X in the bubble is clicked — ini, Jul 12 '12 at 17:11
I got it working. for some reason the map_key isn't holding the value. So, call the selected key with selected_area = map.mapster(''get'') and use that to map.mapster("set",false,selected_area) — ini, Jul 12 '12 at 17:47
I'm wrong. It fixes the close function, but now clicking the building again doesn't deselect it, but closes the bubble. I'll look into that — ini, Jul 12 '12 at 18:20

score 1 · Accepted Answer · answered Aug 11 '12 at 00:37

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:({
          ...

});

Imagemapster de-select issue

1 Answers1