### Check Pip Installation

Source: https://github.com/10bestdesign/jqvmap/blob/master/create/README.md

Verify that Python's package installer, pip, is correctly installed and accessible in your system's PATH.

```bash
which pip
```

--------------------------------

### Initialize Croatia Map with JQVMap

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/croatia.html

This snippet shows the basic setup for displaying a Croatia map using JQVMap. It configures map settings, colors, and interactivity.

```javascript
jQuery(document).ready(function () {
    jQuery('#vmap').vectorMap({
        map: 'croatia',
        backgroundColor: '#333333',
        color: '#ffffff',
        hoverOpacity: 0.7,
        selectedColor: '#999999',
        enableZoom: true,
        showTooltip: true,
        scaleColors: ['#C8EEFF', '#006491'],
        normalizeFunction: 'polynomial'
    });
});
```

--------------------------------

### Install Required Python Packages

Source: https://github.com/10bestdesign/jqvmap/blob/master/create/README.md

Install the GDAL Python package, Shapely, and Booleano using easy_install and pip. Ensure Python and GDAL binaries are installed first.

```bash
sudo easy_install GDAL
pip install shapely
pip install booleano
```

--------------------------------

### Install GDAL via Homebrew (macOS)

Source: https://github.com/10bestdesign/jqvmap/blob/master/create/README.md

Install the GDAL library using the Homebrew package manager on macOS. Note that this method may sometimes lead to issues.

```bash
brew update
brew install gdal
```

--------------------------------

### Handle Map Drag Event

Source: https://github.com/10bestdesign/jqvmap/blob/master/README.md

This example shows how to bind a custom callback function to the 'drag' event, which is triggered whenever the map is being dragged.

```javascript
jQuery('#vmap').on('drag', function(event)
{
    console.log('The map is being dragged');
    //Do something
});
```

--------------------------------

### Get All Pins Data

Source: https://github.com/10bestdesign/jqvmap/blob/master/README.md

Retrieves a JSON string containing the stringified HTML content of all pins currently on the map.

```javascript
var pins = jQuery('#vmap').vectorMap('getPins');
```

--------------------------------

### Get Pin HTML Content by Country Code

Source: https://github.com/10bestdesign/jqvmap/blob/master/README.md

Retrieves the stringified HTML content of a pin associated with a specific country code.

```javascript
var pinContent = jQuery('#vmap').vectorMap('getPin', 'pk');
```

--------------------------------

### Get Pin HTML ID by Country Code

Source: https://github.com/10bestdesign/jqvmap/blob/master/README.md

Retrieves the HTML 'id' attribute of a pin associated with a specific country code.

```javascript
var pinId = jQuery('#vmap').vectorMap('getPinId', 'pk');
```

--------------------------------

### Run Sample Map Creation Commands

Source: https://github.com/10bestdesign/jqvmap/blob/master/create/README.md

Execute the jqvmap.py script with pre-defined configuration files for different maps.

```bash
cd /path/to/jqvmap/create
python jqvmap.py config/continent.json
```

```bash
python jqvmap.py config/new-york.json
```

```bash
python jqvmap.py config/syria.json
```

--------------------------------

### Sample Map Configuration JSON

Source: https://github.com/10bestdesign/jqvmap/blob/master/create/README.md

A sample JSON file for configuring map creation. Pay attention to 'code_field' and 'name_field' which correspond to columns in your data.

```json
[
  {
    "name": "read_data",
    "file_name": "./source/some-folder/some-file.shp"
  },
  {
    "name": "write_data",
    "format": "jqvmap",
    "file_name": "./output/jquery.vmap.my-map.js",
    "params": {
      "code_field": "iso_column",
      "name_field": "name_column",
      "name": "my-map"
    }
  }
]
```

--------------------------------

### Load World Map with Default Settings

Source: https://github.com/10bestdesign/jqvmap/blob/master/README.md

This snippet shows how to initialize the JQVMap plugin to display a world map with default configurations. It includes basic event handling for region hovers.

```javascript
jQuery('#vmap').vectorMap({
    map: 'world_en',
    backgroundColor: '#333',
    color: '#ffffff',
    hoverOpacity: 0.7,
    selectedColor: '#666666',
    enableZoom: true,
    showTooltip: true,
    onRegionClick: function(event, code)
    {
        //example common data format
        var country data = {
            "us" : {
                "name" : "United States",
                "value" : "100"
            },
            "ru" : {
                "name" : "Russia",
                "value" : "100"
            },
            "cn" : {
                "name" : "China",
                "value" : "100"
            }
        };

        if (country data[code]) {
            label.html(country data[code].name + " (" + country data[code].value + ")");
        } else {
            label.html('Country code is: ' + code);
        }
    },
    onRegionOver: function(event, code)
    {
        if (code == 'ca')
        {
            event.preventDefault();
        }
    },
});
```

--------------------------------

### Initialize Russia Map with JQVMap

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/russia.html

Use this snippet to display an interactive map of Russia. Configure colors, zoom, and tooltips as needed.

```javascript
jQuery(document).ready(function () {
    jQuery('#vmap').vectorMap({
        map: 'russia_en',
        backgroundColor: '#333333',
        color: '#ffffff',
        hoverOpacity: 0.7,
        selectedColor: '#999999',
        enableZoom: true,
        showTooltip: true,
        scaleColors: ['#C8EEFF', '#006491'],
        normalizeFunction: 'polynomial'
    });
});
```

--------------------------------

### Initialize Iran Map with JQVMap

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/iran.html

Initializes the JQVMap plugin with the 'iran_ir' map and customizes its appearance and behavior. Includes a click handler for regions.

```javascript
jQuery(document).ready(function () {
    jQuery('#vmap').vectorMap({
        map: 'iran_ir',
        backgroundColor: '#fff',
        borderColor: '#818181',
        borderOpacity: 0.25,
        borderWidth: 2,
        color: '#eee',
        enableZoom: false,
        hoverColor: '#DA251D',
        hoverOpacity: null,
        normalizeFunction: 'linear',
        selectedColor: '#fff',
        showTooltip: true,
        onRegionClick: function (element, code, region) {
            var message = 'You clicked "' + region + '" which has the code: ' + code.toUpperCase();
            alert(message);
        }
    });
});
```

--------------------------------

### Load World Map with Default Settings

Source: https://github.com/10bestdesign/jqvmap/blob/master/README.md

This HTML snippet demonstrates how to load the JQVMap world map with default configurations. It includes necessary CSS and JavaScript includes, along with the jQuery ready function to initialize the map.

```html
<html>
  <head>
    <title>JQVMap - World Map</title>
    <link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../dist/jquery.vmap.js"></script>
    <script type="text/javascript" src="../dist/maps/jquery.vmap.world.js" charset="utf-8"></script>

    <script type="text/javascript">
    jQuery(document).ready(function() {
      jQuery('#vmap').vectorMap({ map: 'world_en' });
    });
    </script>
  </head>
  <body>
    <div id="vmap" style="width: 600px; height: 400px;"></div>
  </body>
</html>
```

--------------------------------

### Run Map Creator Script

Source: https://github.com/10bestdesign/jqvmap/blob/master/create/README.md

Execute the jqvmap.py script with your custom configuration file to generate JQVMap files.

```bash
cd /path/to/jqvmap/create
python jqvmap.py config/my-map.json
```

--------------------------------

### Initialize World Map with JQVMap

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/world.html

Use this snippet to embed an interactive world map on your webpage. Configure map details, colors, zoom, and tooltips.

```html
jQuery(document).ready(function () {
    jQuery('#vmap').vectorMap({
        map: 'world_en',
        backgroundColor: '#333333',
        color: '#ffffff',
        hoverOpacity: 0.7,
        selectedColor: '#666666',
        enableZoom: true,
        showTooltip: true,
        scaleColors: ['#C8EEFF', '#006491'],
        values: sample_data,
        normalizeFunction: 'polynomial'
    });
});
```

--------------------------------

### Initialize Algeria Map with JQVMap

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/algeria.html

Use this snippet to display an interactive map of Algeria. It enables zooming and tooltips.

```javascript
jQuery(document).ready(function () {
    jQuery('#vmap').vectorMap({
        map: 'dz_fr',
        enableZoom: true,
        showTooltip: true
    });
});
```

--------------------------------

### Initialize Tunisia Map with Click Handler

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/tunisia.html

Initializes the JQVMap with the Tunisia map and defines a callback function to handle region clicks, displaying an alert with region information.

```javascript
jQuery(document).ready(function () {
    jQuery('#vmap').vectorMap({
        map: 'tunisia',
        onRegionClick: function (element, code, region) {
            var message = 'You clicked "' + region + '" which has the code: ' + code.toUpperCase();
            alert(message);
        }
    });
});
```

--------------------------------

### Initialize Turkey Map with Click Handler

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/turkey.html

Initializes the JQVMap with the 'turkey' map and defines a callback function for region clicks. The callback displays an alert with the region name and its code.

```javascript
jQuery(document).ready(function () {
    jQuery('#vmap').vectorMap({
        map: 'turkey',
        onRegionClick: function (element, code, region) {
            var message = 'You clicked "' + region + '" which has the code: ' + code.toUpperCase();
            alert(message);
        }
    });
});
```

--------------------------------

### Initialize Serbia Map with Click Handler

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/serbia.html

Initializes the JQVMap with the 'serbia' map and defines a callback function for region clicks. The callback displays an alert with the region name and its code.

```javascript
jQuery(document).ready(function () {
    jQuery('#vmap').vectorMap({
        map: 'serbia',
        onRegionClick: function (element, code, region) {
            var message = 'You clicked "' + region + '" which has the code: ' + code.toUpperCase();
            alert(message);
        }
    });
});
```

--------------------------------

### Initialize USA Map with JQVMap

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/usa.html

Use this snippet to create an interactive USA map with JQVMap. It enables zoom and tooltips, and allows for custom styling and click event handling for regions.

```javascript
jQuery(document).ready(function () {
    jQuery('#vmap').vectorMap({
        map: 'usa_en',
        enableZoom: true,
        showTooltip: true,
        selectedColor: null,
        hoverColor: null,
        colors: {
            mo: '#C9DFAF',
            fl: '#C9DFAF',
            or: '#C9DFAF'
        },
        onRegionClick: function(event, code, region) {
            event.preventDefault();
        }
    });
});
```

--------------------------------

### Initialize France Map with JQVMap

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/france.html

Initializes the JQVMap with the 'france_fr' map. Zoom is disabled, and tooltips are enabled.

```javascript
jQuery(document).ready(function () {
    jQuery('#vmap').vectorMap({
        map: 'france_fr',
        enableZoom: false,
        showTooltip: true
    });
});
```

--------------------------------

### Build for Distribution

Source: https://github.com/10bestdesign/jqvmap/blob/master/CONTRIBUTING.md

Concatenates JS files and generates minified files for distribution. This is the most common command and is required to view changes in a browser.

```bash
grunt build
```

--------------------------------

### Initialize JQVMap with 2016 Election Data

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/usa_counties_election.html

Initializes the JQVMap with a US counties map, enabling zoom and tooltips. Custom colors, background, and border colors are set. A click handler is defined to prevent default region interaction.

```javascript
jQuery(document).ready(function () {
    jQuery('#vmap').vectorMap({
        map: 'usa_counties_en',
        enableZoom: true,
        showTooltip: true,
        colors: electionColors,
        backgroundColor: '#eee',
        borderColor: '#fff',
        hoverColor: '#0ff',
        onRegionClick: function(event, code, region){
            event.preventDefault();
        }
    });
});
```

--------------------------------

### Initialize World Map with Content Pins

Source: https://github.com/10bestdesign/jqvmap/blob/master/README.md

Loads the world map and places pins using HTML content. The 'pins' option takes an object where keys are country codes and values are HTML strings for the pins.

```js
jQuery('#vmap').vectorMap({
    map: 'world_en',
    pins: { "pk" : "\u003cimg src=\"pk.png\" /\u003e" /*serialized <img src="pk.png" />*/, ... },
    pinMode: 'content'
});
```

--------------------------------

### Initialize Indonesia Map with JQVMap

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/indonesia.html

This snippet initializes the JQVMap plugin with the 'indonesia_id' map. It enables zooming and tooltips, and sets up a click handler for map regions. Use this for interactive map displays.

```javascript
jQuery(document).ready(function () {
    jQuery('#vmap').vectorMap({
        map: 'indonesia_id',
        enableZoom: true,
        showTooltip: true,
        selectedColor: null,
        onRegionClick: function(event, code, region) {
            event.preventDefault();
        }
    });
});
```

--------------------------------

### Initialize Greece Map with Click Handler

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/greece.html

Initializes the JQVMap with the 'greece' map and defines a callback function for region clicks. Use this to add interactivity to your map.

```javascript
jQuery(document).ready(function () {
    jQuery('#vmap').vectorMap({
        map: 'greece',
        onRegionClick: function (element, code, region) {
            var message = 'You clicked "' + region + '" which has the code: ' + code.toUpperCase();
            alert(message);
        }
    });
});
```

--------------------------------

### Initialize Europe Map with JQVMap

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/multi.html

Use this snippet to display an interactive Europe map. It enables zooming, tooltips, and allows multiple regions to be selected, pre-selecting France.

```javascript
jQuery(document).ready(function () {
    jQuery('#vmap').vectorMap({
        map: 'europe_en',
        enableZoom: true,
        showTooltip: true,
        multiSelectRegion: true,
        selectedRegions: ['FR']
    });
});
```

--------------------------------

### Initialize JQVMap with Iraq Map

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/iraq.html

This snippet initializes the JQVMap plugin to display an interactive map of Iraq. It includes basic styling and an event handler for region clicks.

```javascript
jQuery(document).ready(function () {
    jQuery('#vmap').vectorMap({
        map: 'iraq',
        backgroundColor: '#fff',
        borderColor: '#818181',
        borderOpacity: 0.25,
        borderWidth: 1,
        color: '#eee',
        enableZoom: false,
        hoverColor: '#DA251D',
        hoverOpacity: null,
        normalizeFunction: 'linear',
        selectedColor: '#fff',
        showTooltip: true,
        onRegionClick: function (element, code, region) {
            var message = 'You clicked "' + region + '" which has the code: ' + code.toUpperCase();
            alert(message);
        }
    });
});
```

--------------------------------

### Initialize Map with Multiple Callbacks

Source: https://github.com/10bestdesign/jqvmap/blob/master/README.md

Initializes the JQVMap with several common callback functions defined directly in the options object. These callbacks are triggered by various map events.

```js
jQuery('#vmap').vectorMap(
{
    onLoad: function(event, map)
    {

    },
    onLabelShow: function(event, label, code)
    {

    },
    onRegionOver: function(event, code, region)
    {

    },
    onRegionOut: function(event, code, region)
    {

    },
    onRegionClick: function(event, code, region)
    {

    },
    onResize: function(event, width, height)
    {

    }
});
```

--------------------------------

### Initialize Brazil Map with Click Handler

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/brazil.html

Initializes the JQVMap with the Brazil map and defines a callback function for region clicks. The callback displays an alert with the region name and its code.

```javascript
jQuery(document).ready(function () {
    jQuery('#vmap').vectorMap({
        map: 'brazil_br',
        onRegionClick: function (element, code, region) {
            var message = 'You clicked "' + region + '" which has the code: ' + code.toUpperCase();
            alert(message);
        }
    });
});
```

--------------------------------

### Visualize GDP Data on World Map

Source: https://github.com/10bestdesign/jqvmap/blob/master/README.md

This snippet demonstrates how to visualize geographical data, specifically GDP in 2010, by dynamically coloring map regions based on their values. It requires a 'gdp-data.js' file containing country codes and GDP values.

```javascript
var gdpData = {"af":16.63,"al":11.58,"dz":158.97,...};
```

```javascript
var max = 0,
    min = Number.MAX_VALUE,
    cc,
    startColor = [200, 238, 255],
    endColor = [0, 100, 145],
    colors = {},
    hex;

//find maximum and minimum values
for (cc in gdpData)
{
    if (parseFloat(gdpData[cc]) > max)
    {
        max = parseFloat(gdpData[cc]);
    }
    if (parseFloat(gdpData[cc]) < min)
    {
        min = parseFloat(gdpData[cc]);
    }
}

//set colors according to values of GDP
for (cc in gdpData)
{
    if (gdpData[cc] > 0)
    {
        colors[cc] = '#';
        for (var i = 0; i<3; i++)
        {
            hex = Math.round(startColor[i]
                + (endColor[i]
                - startColor[i])
                * (gdpData[cc] / (max - min))).toString(16);

            if (hex.length == 1)
            {
                hex = '0'+hex;
            }

            colors[cc] += (hex.length == 1 ? '0' : '') + hex;
        }
    }
}

//initialize JQVMap
jQuery('#vmap').vectorMap(
{
    colors: colors,
    hoverOpacity: 0.7,
    hoverColor: false
});
```

--------------------------------

### Initialize JQVMap with Pins

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/pins.html

Initializes the JQVMap world map with predefined pins for Russia (ru) and Pakistan (pk). Pins are defined as HTML anchor tags with associated href attributes.

```javascript
var pins = { 'ru': "\u003ca target=\"_blank\" href=\"http://www.google.com.ru\"\u003epin_ru\u003c/a\u003e", 'pk': "\u003ca target=\"_blank\" href=\"http://www.google.com.pk\"\u003epin_pk\u003c/a\u003e" };
jQuery(document).ready(function () {
    jQuery('#vmap').vectorMap({
        map: 'world_en',
        backgroundColor: '#333333',
        color: '#ffffff',
        hoverOpacity: 0.7,
        selectedColor: '#666666',
        enableZoom: true,
        showTooltip: true,
        scaleColors: ['#C8EEFF', '#006491'],
        normalizeFunction: 'polynomial',
        pins: {
            "ru": "\u003ca href=\"http://google.com\"\u003epin_ru\u003c/a\u003e",
            "pk": "\u003ca href=\"http://google.com\"\u003epin_pk\u003c/a\u003e"
        }
    });
});
```

--------------------------------

### JQVMap Tabbed Interface and Initialization

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/continents.html

This snippet handles the click events for tabbed navigation to switch between different JQVMap continents and initializes the first map with a selected state. It also includes basic CSS for the tabs and map containers.

```javascript
jQuery(document).ready(function () {
  $('h2').each(function () {
    $(this).click(function () {
      $('.tab-selected').removeClass('tab-selected');
      $(this).addClass('tab-selected');
      $('.map').css('z-index', '0');
      $('#vmap-' + this.id).parent().css('z-index', '1');
    });
  });
  $('h2:first').addClass('tab-selected');
  $('.map:first').css('z-index', '1');
});
```

```css
* {
  margin: 0;
  padding: 0;
}
h2 {
  background: none repeat scroll 0 0 #cccccc;
  border: 1px solid #aaaaaa;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  float: left;
  padding: 5px;
  font-size: 20px;
  font-weight: normal;
  cursor: pointer;
}
h2.tab-selected {
  background: #888888;
  border: 1px solid #000000;
}
.map {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 35px;
}
```

--------------------------------

### Basic JQVMap Europe Map Initialization

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/mobile.html

Initializes a JQVMap with the Europe map. Ensure the JQVMap library and the Europe map file are included.

```html
html, body { padding: 0; margin: 0; width: 100%; height: 100%; }
#vmap { width: 100%; height: 100%; background-color: red;
-webkit-tap-highlight-color: rgba(0,0,0,0); }
.jqvmap-zoomin { width: 30px; height: 30px; line-height: 30px; }
.jqvmap-zoomout { width: 30px; height: 30px; top: 55px; line-height: 30px; }

jQuery(document).ready(function () {
    jQuery('#vmap').vectorMap({
        map: 'europe_en',
        enableZoom: true,
        showTooltip: true
    });
});
```

--------------------------------

### Initialize Europe Map with JQVMap

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/europe.html

This snippet shows how to initialize the JQVMap plugin to display a Europe map. It disables zooming and tooltips for a static display.

```javascript
jQuery(document).ready(function () {
    jQuery('#vmap').vectorMap({
        map: 'europe_en',
        enableZoom: false,
        showTooltip: false
    });
});
```

--------------------------------

### Initialize USA Districts Map

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/usa_districts.html

Initializes a JQVMap with the USA districts map. Configure options like border color, zoom, tooltips, and click events.

```javascript
jQuery(document).ready(function () {
    jQuery('#vmap').vectorMap({
        map: 'usa_districts_en',
        borderColor: '#000',
        enableZoom: true,
        showTooltip: true,
        selectedColor: null,
        hoverColor: '#639',
        onRegionClick: function (event, code, region) {
            event.preventDefault();
        }
    });
});
```

--------------------------------

### Initialize JQVMap with Europe Map

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/responsive.html

This snippet initializes the JQVMap with the 'usa_en' map, enabling zoom and tooltips. It also includes a basic resize event handler.

```javascript
jQuery(document).ready(function () {
    jQuery('#vmap').vectorMap({
        map: 'usa_en',
        enableZoom: true,
        showTooltip: true,
        onResize: function (element, width, height) {
            console.log('Map Size: ' + width + 'x' + height);
        }
    });
});
```

--------------------------------

### Initialize USA Counties Map

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/usa_counties.html

Initializes the JQVMap with the 'usa_counties_en' map. Configure zoom, tooltips, hover color, and a click handler for regions.

```javascript
jQuery(document).ready(function () {
    jQuery('#vmap').vectorMap({
        map: 'usa_counties_en',
        enableZoom: true,
        showTooltip: true,
        hoverColor: '#C9DFAF',
        onRegionClick: function(event, code, region) {
            event.preventDefault();
        }
    });
});
```

--------------------------------

### Create a Major Release

Source: https://github.com/10bestdesign/jqvmap/blob/master/CONTRIBUTING.md

Increases the major version number, builds and packages distribution files, and performs a git commit. Use this for significant, backward-incompatible changes.

```bash
grunt release-major
```

--------------------------------

### Display Ukraine Map with JQVMap

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/ukraine.html

Initializes the JQVMap plugin to display an interactive map of Ukraine. Configure colors, zoom, and tooltips for a customized user experience.

```javascript
jQuery(document).ready(function () {
    jQuery('#vmap').vectorMap({
        map: 'ukraine_ua',
        backgroundColor: '#fff',
        borderColor: '#fff',
        color: '#279fe0',
        hoverColor: '#005bbb',
        selectedColor: '#ffd500',
        enableZoom: true,
        showTooltip: true,
    });
});
```

--------------------------------

### JQVMap Label Styling and Responsiveness

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/labels.html

Customizes the appearance and behavior of map labels using CSS. Includes rules for general label styling, hiding specific labels, repositioning labels, and adjusting font size based on screen width.

```css
html, body { padding: 0; margin: 0; width: 100%; height: 100%; }
#vmap { width: 100%; height: 100%; background-color: red; -webkit-tap-highlight-color: rgba(0,0,0,0); }
/* Setup basic CSS for Label */
.jqvmap-pin { font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
    cursor: default;
    pointer-events: none;
}
/* Hide Whichever Labels you want */
#jqvmap1_ri_pin, #jqvmap1_dc_pin, #jqvmap1_de_pin, #jqvmap1_md_pin { display: none; }
/* Reposition Labels that are not quite right ( labels are centered in shape, and sometimes need tweaking ) */
#jqvmap1_ak_pin { margin-top: -2%; }
#jqvmap1_ca_pin { margin-left: -2%; }
#jqvmap1_ct_pin { margin-top: -0.25%; margin-left: -0.25%; }
#jqvmap1_fl_pin { margin-left: 5%; }
#jqvmap1_id_pin { margin-top: 3%; margin-left: -1%; }
#jqvmap1_ky_pin { margin-left: 2%; }
#jqvmap1_la_pin { margin-left: -2%; }
#jqvmap1_mi_pin { margin-top: 4%; margin-left: 3%; }
#jqvmap1_ma_pin { margin-top: -0.25%; }
#jqvmap1_mn_pin { margin-top: 2%; margin-left: -2%; }
#jqvmap1_nh_pin { margin-top: 1%; margin-left: -0.25%; }
#jqvmap1_nj_pin { margin-top: 1%; }
#jqvmap1_ok_pin { margin-left: 2%; }
#jqvmap1_va_pin { margin-left: 2%; }
#jqvmap1_wv_pin { margin-left: -1%; margin-top: 1%; }
/* Add responsibe support to resize labels for difference screen sizes */
@media only screen and (min-width: 320px) {
    .jqvmap-pin { font-size: 6px; }
}
@media only screen and (min-width: 480px) {
    .jqvmap-pin { font-size: 8px; }
}
@media only screen and (min-width: 640px) {
    .jqvmap-pin { font-size: 10px; }
}
@media only screen and (min-width: 800px) {
    .jqvmap-pin { font-size: 12px; }
}
@media only screen and (min-width: 1024px) {
    .jqvmap-pin { font-size: 14px; }
}
```

--------------------------------

### Initialize World Map with ID Pins

Source: https://github.com/10bestdesign/jqvmap/blob/master/README.md

Loads the world map and places pins using element IDs. The 'pins' option takes an object where keys are country codes and values are the 'id' attributes of HTML elements to be used as pins.

```html
<script>
  jQuery('#vmap').vectorMap({
      map: 'world_en',
      pins: { "pk" : "pin_for_pk", "ru" : "pin_for_ru", ... },
      pinMode: 'id'
  });
</script>
<div style="display:none">
  <img id="pin_for_pk" src="pk.png" />
  <div id="pin_for_ru">...</div>
</div>
```

--------------------------------

### Display Argentina Map with Click Events

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/argentina.html

Initializes a JQVMap for Argentina and defines a callback function for region clicks. Use this to add interactivity to your map.

```javascript
jQuery(document).ready(function () {
    jQuery('#vmap').vectorMap({
        map: 'argentina_en',
        onRegionClick: function (element, code, region) {
            var message = 'You clicked "' + region + '" which has the code: ' + code.toUpperCase();
            alert(message);
        }
    });
});
```

--------------------------------

### Create a Minor Release

Source: https://github.com/10bestdesign/jqvmap/blob/master/CONTRIBUTING.md

Increases the minor version number, builds and packages distribution files, and performs a git commit. Use this for backward-compatible new features.

```bash
grunt release-minor
```

--------------------------------

### Create a Release Patch

Source: https://github.com/10bestdesign/jqvmap/blob/master/CONTRIBUTING.md

Increases the patch version number, builds and packages distribution files, and performs a git commit. Use this for backward-compatible bug fixes.

```bash
grunt release-patch
```

--------------------------------

### Initialize JQVMap for Africa

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/continents.html

Initializes the JQVMap for the Africa continent. This includes setting the map type, background color, default color, hover opacity, selected color, zoom and tooltip settings, data values, scale colors, and normalization function.

```javascript
jQuery('#vmap-africa').vectorMap({
  map: 'africa\_en',
  backgroundColor: '#333333',
  color: '#ffffff',
  hoverOpacity: 0.7,
  selectedColor: '#666666',
  enableZoom: true,
  showTooltip: true,
  values: sample_data,
  scaleColors: ['#C8EEFF', '#006491'],
  normalizeFunction: 'polynomial'
});
```

--------------------------------

### USA Map with Custom Pins

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/pins_custom.html

Initializes a USA map using JQVMap, specifying custom HTML content for pins and handling region click events. Ensure the JQVMap library and necessary map files are included.

```javascript
function escapeXml(string) {
  return string.replace(/[<>]/g, function (c) {
    switch (c) {
      case '<': return '\u003c';
      case '>': return '\u003e';
    }
  });
}

jQuery(document).ready(function () {
  var pins = {
    mo: escapeXml('<div class="map-pin red"><span>MO</span></div>'),
    fl: escapeXml('<div class="map-pin blue"><span>FL</span></div>'),
    or: escapeXml('<div class="map-pin purple"><span>OR</span></div>')
  };

  jQuery('#vmap').vectorMap({
    backgroundColor: '#333',
    borderColor: '#333',
    map: 'usa_en',
    pins: pins,
    color: '#fff',
    pinMode: 'content',
    hoverColor: null,
    selectedColor: '#111',
    showTooltip: false,
    selectedRegions: ['MO', 'FL', 'OR'],
    onRegionClick: function(event){
      event.preventDefault();
    }
  });
});
```

--------------------------------

### Basic JQVMap USA Map Initialization

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/labels.html

Initializes the JQVMap USA map with labels enabled. Ensure the JQVMap library and the 'usa' map file are included.

```javascript
jQuery(document).ready(function () {
    jQuery('#vmap').vectorMap({
        map: 'usa_en',
        borderWidth: 0.25,
        showLabels: true
    });
});
```

--------------------------------

### Set OGR_ENABLE_PARTIAL_REPROJECTION Environment Variable

Source: https://github.com/10bestdesign/jqvmap/blob/master/create/README.md

Add this environmental variable to create more complex maps without issues. Run this command in a terminal before creating a map.

```bash
export OGR_ENABLE_PARTIAL_REPROJECTION=TRUE
```

--------------------------------

### Germany Map with Region Click

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/germany.html

Initializes a JQVMap for the Germany map and defines a callback function to display an alert when a region is clicked.

```javascript
jQuery(document).ready(function () {
    jQuery('#vmap').vectorMap({
        map: 'germany_en',
        onRegionClick: function (element, code, region) {
            var message = 'You clicked "' + region + '" which has the code: ' + code.toUpperCase();
            alert(message);
        }
    });
});
```

--------------------------------

### Initialize JQVMap for Europe

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/continents.html

Initializes the JQVMap for the Europe continent. This includes setting the map type, background color, default color, hover opacity, selected color, zoom and tooltip settings, data values, scale colors, and normalization function.

```javascript
jQuery('#vmap-europe').vectorMap({
  map: 'europe\_en',
  backgroundColor: '#333333',
  color: '#ffffff',
  hoverOpacity: 0.7,
  selectedColor: '#666666',
  enableZoom: true,
  showTooltip: true,
  values: sample_data,
  scaleColors: ['#C8EEFF', '#006491'],
  normalizeFunction: 'polynomial'
});
```

--------------------------------

### Customize Map Appearance and Behavior

Source: https://github.com/10bestdesign/jqvmap/blob/master/README.md

This JavaScript snippet shows how to customize the JQVMap appearance and behavior by providing various configuration options during initialization. It includes settings for background color, borders, zoom, hover effects, and a click event handler.

```js
jQuery('#vmap').vectorMap(
{
    map: 'world_en',
    backgroundColor: '#a5bfdd',
    borderColor: '#818181',
    borderOpacity: 0.25,
    borderWidth: 1,
    color: '#f4f3f0',
    enableZoom: true,
    hoverColor: '#c9dfaf',
    hoverOpacity: null,
    normalizeFunction: 'linear',
    scaleColors: ['#b6d6ff', '#005ace'],
    selectedColor: '#c9dfaf',
    selectedRegions: null,
    showTooltip: true,
    onRegionClick: function(element, code, region)
    {
        var message = 'You clicked "'
            + region
            + '" which has the code: '
            + code.toUpperCase();

        alert(message);
    }
});
```

--------------------------------

### Source Bash Profile

Source: https://github.com/10bestdesign/jqvmap/blob/master/create/README.md

If you edit your profile file to add environment variables, run this command to apply changes to your current terminal session.

```bash
source .bash_profile
```

--------------------------------

### zoomIn()

Source: https://github.com/10bestdesign/jqvmap/blob/master/README.md

Zooms the map in by one step.

```APIDOC
## zoomIn()

### Description
Zooms the map in by one step.

### Method
```javascript
jQuery('#vmap').vectorMap('zoomIn');
```
```

--------------------------------

### JQVMap Europe Map Initialization with Touch Detection

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/touch_detect.html

Initializes the JQVMap Europe map, disabling zoom and tooltips. It uses the `touch_detect` function to conditionally handle region clicks and region over events based on device touch capabilities.

```javascript
jQuery(document).ready(function () {
    jQuery('#vmap').vectorMap({
        map: 'europe_en',
        enableZoom: false,
        showTooltip: false,
        onRegionClick: function (element, code, region) {
            if (!touch_detect()) {
                // we're not on a mobile device, handle the click
                var message = 'You clicked "' + region + '" which has the code: ' + code.toUpperCase();
                alert(message);
            }
        },
        onRegionOver: function (element, code, region) {
            if (touch_detect()) {
                /// we're not on a mobile device, handle the click
                var message = 'You clicked "' + region + '" which has the code: ' + code.toUpperCase();
                alert(message);
            }
        }
    });
});
```

--------------------------------

### getPins()

Source: https://github.com/10bestdesign/jqvmap/blob/master/README.md

Returns an associative JSON string containing the stringified HTML of all pins.

```APIDOC
## getPins()

### Description
Returns an associative JSON string containing stringified HTML of all the pins.

### Method
```javascript
var pins = jQuery('#vmap').vectorMap('getPins');
```
```

--------------------------------

### Initialize JQVMap for North America

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/continents.html

Initializes the JQVMap for the North America continent. This includes setting the map type, background color, default color, hover opacity, selected color, zoom and tooltip settings, data values, scale colors, and normalization function.

```javascript
jQuery('#vmap-northamerica').vectorMap({
  map: 'north-america\_en',
  backgroundColor: '#333333',
  color: '#ffffff',
  hoverOpacity: 0.7,
  selectedColor: '#666666',
  enableZoom: true,
  showTooltip: true,
  values: sample_data,
  scaleColors: ['#C8EEFF', '#006491'],
  normalizeFunction: 'polynomial'
});
```

--------------------------------

### Control Default Event Behavior with Callbacks

Source: https://github.com/10bestdesign/jqvmap/blob/master/README.md

Demonstrates how to prevent default JQVMap behaviors (like showing labels or changing region colors on hover) within callbacks by using event.preventDefault() or returning false. Custom label text can also be set.

```js
jQuery('#vmap').vectorMap(
{
    onLabelShow: function(event, label, code)
    {
        if (code == 'ca')
        {
            // Hide the label
            event.preventDefault();
        }
        else if (code == 'ru')
        {
            // Plain TEXT labels
            label.text('Bears, vodka, balalaika');
        }
        else if (code == 'us')
        {
            // HTML Based Labels. You can use any HTML you want, this is just an example

```

--------------------------------

### zoomOut()

Source: https://github.com/10bestdesign/jqvmap/blob/master/README.md

Zooms the map out by one step.

```APIDOC
## zoomOut()

### Description
Zooms the map out by one step.

### Method
```javascript
jQuery('#vmap').vectorMap('zoomOut');
```
```

--------------------------------

### Initialize JQVMap for South America

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/continents.html

Initializes the JQVMap for the South America continent. This includes setting the map type, background color, default color, hover opacity, selected color, zoom and tooltip settings, data values, scale colors, and normalization function.

```javascript
jQuery('#vmap-southamerica').vectorMap({
  map: 'south-america\_en',
  backgroundColor: '#333333',
  color: '#ffffff',
  hoverOpacity: 0.7,
  selectedColor: '#666666',
  enableZoom: true,
  showTooltip: true,
  values: sample_data,
  scaleColors: ['#C8EEFF', '#006491'],
  normalizeFunction: 'polynomial'
});
```

--------------------------------

### Initialize JQVMap for Asia

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/continents.html

Initializes the JQVMap for the Asia continent. This includes setting the map type, background color, default color, hover opacity, selected color, zoom and tooltip settings, data values, scale colors, and normalization function.

```javascript
jQuery('#vmap-asia').vectorMap({
  map: 'asia\_en',
  backgroundColor: '#333333',
  color: '#ffffff',
  hoverOpacity: 0.7,
  selectedColor: '#666666',
  enableZoom: true,
  showTooltip: true,
  values: sample_data,
  scaleColors: ['#C8EEFF', '#006491'],
  normalizeFunction: 'polynomial'
});
```

--------------------------------

### Initialize JQVMap for Australia

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/continents.html

Initializes the JQVMap for the Australia continent. This includes setting the map type, background color, default color, hover opacity, selected color, zoom and tooltip settings, data values, scale colors, and normalization function.

```javascript
jQuery('#vmap-australia').vectorMap({
  map: 'australia\_en',
  backgroundColor: '#333333',
  color: '#ffffff',
  hoverOpacity: 0.7,
  selectedColor: '#666666',
  enableZoom: true,
  showTooltip: true,
  values: sample_data,
  scaleColors: ['#C8EEFF', '#006491'],
  normalizeFunction: 'polynomial'
});
```

--------------------------------

### Bind Map Events Using jQuery.bind

Source: https://github.com/10bestdesign/jqvmap/blob/master/README.md

Attaches event handlers to the JQVMap instance using jQuery's 'bind' method. This allows for dynamic registration of callbacks for various map events.

```js
jQuery('#vmap').bind('load.jqvmap',
    function(event, map)
    {

    }
);
jQuery('#vmap').bind('labelShow.jqvmap',
    function(event, label, code)
    {

    }
);
jQuery('#vmap').bind('regionMouseOver.jqvmap',
    function(event, code, region)
    {

    }
);
jQuery('#vmap').bind('regionMouseOut.jqvmap',
    function(event, code, region)
    {

    }
);
jQuery('#vmap').bind('regionClick.jqvmap',
    function(event, code, region)
    {

    }
);
jQuery('#vmap').bind('resize.jqvmap',
    function(event, width, height)
    {

    }
);
```

--------------------------------

### getPin(cc)

Source: https://github.com/10bestdesign/jqvmap/blob/master/README.md

Returns the stringified HTML of the pin placed on the country specified by the country code 'cc'.

```APIDOC
## getPin(cc)

### Description
Returns stringified HTML of the pin placed on the country whose country code is provided in "cc".

### Parameters
#### Path Parameters
- **cc** (string) - Required - The country code.

### Method
```javascript
var pinContent = jQuery('#vmap').vectorMap('getPin', 'pk');
```
```

--------------------------------

### Upgrade Pip

Source: https://github.com/10bestdesign/jqvmap/blob/master/create/README.md

Update pip to the latest version to ensure you have the most recent features and bug fixes, and to potentially suppress upgrade warnings.

```bash
pip install --upgrade pip
```

--------------------------------

### Zoom In on Map

Source: https://github.com/10bestdesign/jqvmap/blob/master/README.md

Use this function to perform a single step zoom in operation on the JQVMap instance.

```javascript
jQuery('#vmap').vectorMap('zoomIn');
```

--------------------------------

### zoomIn Event

Source: https://github.com/10bestdesign/jqvmap/blob/master/README.md

Triggered when the map is zoomed in.

```APIDOC
## zoomIn Event

### Description
When the map is zoomed in, this event is triggered.
```

--------------------------------

### drag Event

Source: https://github.com/10bestdesign/jqvmap/blob/master/README.md

Triggered when the map is dragged.

```APIDOC
## drag Event

### Description
When the map is dragged, this event is triggered.

### Usage
```javascript
//Do something when the map is dragged
jQuery('#vmap').on('drag', function(event)
{
    console.log('The map is being dragged');
    //Do something
});
```
```

--------------------------------

### Dynamically Update Map Colors

Source: https://github.com/10bestdesign/jqvmap/blob/master/README.md

Updates the color of a specific region on the map after initialization. This method can be used to change any option except callbacks.

```js
jQuery('#vmap').vectorMap('set', 'colors', {us: '#0000ff'});
```

--------------------------------

### Touch Detection Function

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/touch_detect.html

A utility function to detect if the current device supports touch events. This is crucial for differentiating user interactions on mobile versus desktop.

```javascript
function touch_detect() { return 'ontouchstart' in window || 'onmsgesturechange' in window || navigator.msMaxTouchPoints > 0; }
```

--------------------------------

### Place a Pin on the Map

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/pins.html

Places a custom pin on the map for a specified country code. The pin's HTML content is retrieved from a designated element. This function can place pins based on their content or ID.

```javascript
function placePin(id) {
    id = id.toLowerCase();
    var cc = jQuery("#" + id + ' input[name=cc]').val();
    if (cc == '') {
        alert('Insert a country code first');
        return;
    }
    var pin = jQuery("#" + id + ' .pin-td').html();
    if (jQuery.trim(pin) == '') {
        alert('Pin has been moved');
        return;
    }
    var pins = new Object();
    pins[cc] = pin;
    jQuery('#vmap').vectorMap('placePins', pins, 'content');
}
```

```javascript
function movePin(id) {
    id = id.toLowerCase();
    var cc = jQuery("#" + id + ' input[name=cc]').val();
    if (cc == '') {
        alert('Insert a country code first');
        return;
    }
    var pin = jQuery("#" + id + ' .pin-td').html();
    if (jQuery.trim(pin) == '') {
        alert('Pin has been moved');
        return;
    }
    pin = id + '_content';
    var pins = new Object();
    pins[cc] = pin;
    jQuery('#vmap').vectorMap('placePins', pins, 'id');
}
```

--------------------------------

### zoomOut Event

Source: https://github.com/10bestdesign/jqvmap/blob/master/README.md

Triggered when the map is zoomed out.

```APIDOC
## zoomOut Event

### Description
When the map is zoomed out, this event is triggered.
```

--------------------------------

### Zoom Out from Map

Source: https://github.com/10bestdesign/jqvmap/blob/master/README.md

Use this function to perform a single step zoom out operation on the JQVMap instance.

```javascript
jQuery('#vmap').vectorMap('zoomOut');
```

--------------------------------

### USA Map with Inactive Regions

Source: https://github.com/10bestdesign/jqvmap/blob/master/examples/inactive_regions.html

Configures a USA map using JQVMap, disabling clicks on regions not present in the 'enabledRegions' array. The 'onRegionClick' and 'onLabelShow' events are used to prevent interaction with disabled regions.

```javascript
var map;
jQuery(document).ready(function () {
    // Store currentRegion
    var currentRegion = 'fl';

    // List of Regions we'll let clicks through for
    var enabledRegions = ["mo", "fl", "or"];

    map = jQuery('#vmap').vectorMap({
        map: 'usa_en',
        enableZoom: true,
        showTooltip: true,
        selectedColor: '#333333',
        selectedRegions: ['fl'],
        hoverColor: null,
        colors: {
            mo: '#C9DFAF',
            fl: '#C9DFAF',
            or: '#C9DFAF'
        },
        onRegionClick: function(event, code, region){
            // Check if this is an Enabled Region, and not the current selected on
            if(enabledRegions.indexOf(code) === -1 || currentRegion === code){
                // Not an Enabled Region
                event.preventDefault();
            } else {
                // Enabled Region. Update Newly Selected Region.
                currentRegion = code;
            }
        },
        onRegionSelect: function(event, code, region){
            console.log(map.selectedRegions);
        },
        onLabelShow: function(event, label, code){
            if(enabledRegions.indexOf(code) === -1){
                event.preventDefault();
            }
        }
    });
});
```

--------------------------------

### getPinId(cc)

Source: https://github.com/10bestdesign/jqvmap/blob/master/README.md

Returns the HTML attribute 'id' of the pin placed on the country specified by the country code 'cc'.

```APIDOC
## getPinId(cc)

### Description
Returns the html attribute "id" of the pin placed on the country whose country code is provided in "cc".

### Parameters
#### Path Parameters
- **cc** (string) - Required - The country code.

### Method
```javascript
var pinId = jQuery('#vmap').vectorMap('getPinId', 'pk');
```
```

--------------------------------

### removePins()

Source: https://github.com/10bestdesign/jqvmap/blob/master/README.md

Removes all pins from the map.

```APIDOC
## removePins()

### Description
Removes all the pins from the map.

### Method
```javascript
jQuery('#vmap').vectorMap('removePins');
```
```

--------------------------------

### Remove All Pins

Source: https://github.com/10bestdesign/jqvmap/blob/master/README.md

Removes all pins that have been placed on the map.

```javascript
jQuery('#vmap').vectorMap('removePins');
```