Sometimes you need to add some informations over the map, as: statistic data (percentage values of voters) or icons, etc. which are dynamically changing. There’s an easy way to do that. Just watch the video tutorial or get the sample code below.

Watch video

Step by step guide of the proper script installation and the sample functions usage.

Get the sample function

The Markup

Before any changes in the script, add numbers (or any other informations you want to display over the map) after links in the list of regions, example:

<li class="pl7"><a href="#mazowieckie">Mazowieckie</a> <b>45 %</b></li>
<li class="pl8"><a href="#opolskie">Opolskie</a> <b>13 %</b></li>
<li class="pl9"><a href="#podkarpackie">Podkarpackie</a> <b>25 %</b></li>
<li class="pl10"><a href="#podlaskie">Podlaskie</a> <b>89 %</b></li>
<li class="pl11"><a href="#pomorskie">Pomorskie</a> <b>55 %</b></li>

If you want to use other HTML tag to wrap you number (the <b /> tag used in this example) you have to change the numberTag = "B" variable in the script below.

The <span /> tags are reserved for the region areas and can’t be used!

The script

To place numbers over the regions we can get position of the static tooltip, which is close to the center of each region. In our new function setNumbers(region) we have to get position of the link and calculate negative margins for the new elements to place them in the middle of the region:

setNumbers = function(region){
  var getLink = region.querySelector("A"),
      getNumber = region.querySelector(numberTag),
      leftPosition = $(getLink).position().left,
      topPosition = $(getLink).position().top,
      numberMarginTop = Math.ceil($(getNumber).outerHeight() / -2),
      numberMarginLeft = Math.ceil($(getNumber).outerWidth() / -2);
}; // END setNumbers(region);

Now, we can create an object for the jQuery’s $.css() function to place numbers over each region:

setPosition = {
  left: leftPosition + "px",
  marginLeft: numberMarginLeft + "px",
  marginTop: numberMarginTop + "px",
  position: "absolute",
  top: topPosition + "px",
  zIndex: 88;
};

The zIndex: 88 will place layer with number between region’s state and the cities (if set up).

Ready to use script

Use the function below to add numbers over the map. Don’t forget to change ID of your map’s container (or class if you are using multiple maps on one page) :
mapObject = $("yourSelectorHere").

<script type="text/javascript">
(function($,w,d){

var mapObject = $("#map-poland"), // SET YOUR MAP'S OBJECT;
    numberTag = "B", // SET HTML WRAPPER OF THE NUMBER;
    setNumbers = function(region){
      var getLink = region.querySelector("A"),
          getNumber = region.querySelector(numberTag),
          leftPosition = $(getLink).position().left,
          topPosition = $(getLink).position().top,
          numberMarginTop = Math.floor($(getNumber).outerHeight()/-2),
          numberMarginLeft = Math.floor($(getNumber).outerWidth()/-2),
          setPosition = {
            left: leftPosition + "px",
            marginLeft: numberMarginLeft + "px",
            marginTop: numberMarginTop + "px",
            position: "absolute",
            top: topPosition + "px",
            zIndex: 88 // MOST IMPORTANT HERE;
          };

      $(getNumber).css(setPosition);
    }; // END setNumbers(region);

mapObject.CSSMap({
  size: 960,

  onLoad: function(e){
    var getItems = e.find("LI");

    for(var i=0, region; region = getItems[i]; i++){
      setNumbers(region);
    } // END for(getItems[i]);

  } // END onLoad(e);
});

})(jQuery, window, document);
</script>