jquery – maphighlight – highlight already highlighted area

Monday, 25. July 2011

oke.. thisone is a very special usecase – but who knows – maybe it helps somebody who’s trying to accomplish the same shit 🙂

i am using jquery map highlight and jquery metadata to highlight html areas on a country map ..

first of all: every country in “countryresult list” gets permanently highlighted in a special color.  (the js code is mixed with djangos template language – it will work without it if you change the relevant parts) then a “hover” event is set to each highlighted area that will highligt it again on hover in a slightly different way.

thats all !

$(document).ready(function() {

   {% for c in countryresult_list %}
      $('area[title="{{c.ccode}}"]').addClass('{strokeWidth:1,strokeColor:"ffffff", fillColor:"{{c.map_color}}",fillOpacity:0.5,alwaysOn:true}');

     $('area[title="{{c.ccode}}"]').hover(
         function(){
         var d = $(this).data('maphilight') || {};
         d.fillOpacity=0.7;
         $(this).data('maphilight', d).trigger('alwaysOn.maphilight');
    },
   function () {
       var d = $(this).data('maphilight') || {};
       d.fillOpacity=0.5;
       $(this).data('maphilight', d).trigger('alwaysOn.maphilight');
   }
   );

  {% endfor %}

});

2 Responses to “jquery – maphighlight – highlight already highlighted area”



  1. Waut Says:

    Thanks a lot!! This was very helpfull.



  2. Bogdan Says:

    this was awesome, thanks for the help.