Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Commits on Aug 15, 2013
  1. Merge pull request #83 from Reddine/stable

    added political map of Algeria
Commits on Jul 18, 2013
  1. @Reddine

    added political map of Algeria

    Reddine authored
Commits on Apr 2, 2013
  1. @BFallert

    Update germany.html

    BFallert authored
    without this line the german umlauts will not shown korrekt
Commits on Feb 15, 2013
  1. @adeelnawaz

    This revision adds the functionality to place (html) pins on countrie…

    adeelnawaz authored
    …s. In addition to that, it adds zoomIn, zoomOut methods which can be called to zoom in or out of the map. It adds three events, bound to map's container. The details are as follows.
    Added events:
    "drag": When the map is dragged, map.container triggers this event.
    "zoomIn": When the map is zoomed in, map.container triggers this event.
    "zoomOut": When the map is zoomed out, map.container triggers this event.
    Added parameters:
    "pins": JSON which specifies the pins to be placed on the map.
    	"pk" : "pk_pin_metadata",
    	"ru" : "ru_pin_metadata",
    There are two modes for placing pins:
    	1) "content" (default)
    	2) "id"
    If the pin mode is "content" (or not specified) then the parameter "pins" contains the html content to be placed in place of the pin.
    	"pk" : "\u003cimg src=\"images/pin.png\" /\u003e", //serialized <img src="images/pin.png" /> tag
    If the pin mode is "id" then the parameter "pins" contains the "id" attribute of the html (DOM) object to be placed as pin.
    	"pk" : "pin_pk_id",
    	"ru" : "pin_for_russia",
    <div style="display:none">
    	<img id="pin_pk_id" src="images/pin.png" />
    	<div id="pin_for_russia">...</div>
    The parameters "pins" and "pinMode" can be specified at the time of initialization:
    jQuery(document).ready(function() {
    		map: 'world_en',
    		pins: {"ru":"\u003ca href=\"#\"\u003epin_ru\u003c/a\u003e", "pk":"\u003ca href=\"#\"\u003epin_pk\u003c/a\u003e"},
    		pinMode: 'content'
    To add pins later, use placePins method (explained in the methods list).
    1) The pin is placed at the center of the bounding box of related country. So depending on the shape of the country's map, the pin might not land on the country itself :(. For instance the pin for 'US' lands in the center of the united states and the state of alaska, and it is not ACTUALLY on the land of 'US'. It is rather placed in the ocean between them :P.
    2) If the "pinMode" is set as "id", then the html DOM element having the given id is NOT COPIED to the desired position, it IS MOVED. This means that the element will be removed from it's original position and will be added to the desired location on the map.
    Methods (functions):
    zoomIn(): It has the same effect as clicking on the zoom in button.
    zoomOut(): It has the same effect as clicking on the zoom out button.
    //Methods related to pinning
    getPinId(cc): Returns the html attribute "id" of the pin belonging to the country whose country code is provided in "cc". This method does not check if the pin physically exists.
    var pinId = jQuery('#vmap').vectorMap('getPinId', 'pk');
    placePins(pins, pinMode): This method is provided to place pins after the initialization of the map. The parameters "pins" and "pinMode" are explained earlier.
    jQuery('#vmap').vectorMap('placePins', pins[, pinMode]);
    If pinMode is unspecified, it is considered as "content".
    Note: Only one pin can be placed at a time on one country. So if a pin is placed on a country already having a pin, the older pin will be removed.
    positionPins(): To position the pins to their proper places (center of the bounding box of their respective country). This method is called automatically upon placing the pins, dragging, or zooming in/out.
    Usage: (Not so usable though)
    getPin(cc): Returns a string containing the html of the pin placed on the country whose country code was specified in "cc".
    var pinContent = jQuery('#vmap').vectorMap('getPin', 'pk');
    getPins(): Returns a json STRING containing html strings of all the pins associated with the respective country codes.
    Example: {"ru":"\u003ca href=\"#\"\u003epin_ru\u003c/a\u003e", "pk":"\u003ca href=\"#\"\u003epin_pk\u003c/a\u003e"}
    var pins = jQuery('#vmap').vectorMap('getPins');
    removePin(cc): Removes the pin from the country whose country code is specified in "cc".
    jQuery('#vmap').vectorMap('removePin', 'pk');
    removePins(): Removes all the pins from the map.
    Variables (properties):
    pinHandlers: (bool)
    It is false by default. When the pins are placed for the first time, it is set to true. It performs as a check to make sure the pins are being placed for the first time. If so, the plugin binds the method "positionPins()" with the events "drag", "zoomIn", and "zoomOut". This makes sure that the event listener is assigned only once.
    Note: Not to be messed with externally.
Commits on Feb 14, 2013
  1. @adeelnawaz
Commits on Oct 12, 2012
  1. @nikbelikov

    added russian map

    nikbelikov authored
Commits on May 28, 2012
  1. @rudrud

    Mutiselect regions

    rudrud authored
    coding style ?
Commits on May 7, 2012
  1. Version 1.0

Something went wrong with that request. Please try again.