Rate this docs

Boostrap Vector Map

Bootstrap vector map plugin

Bootstrap Vector Map plugin helps you to show beautiful, scalable maps of the world, continents and countries. Easy to use, setup and customize. No API key needed - no hussle.


Basic example

By default, the vector map plugin will be load up Miller cylindrical projection of the world with plain, greyscale palette.


          <div id="world-map" style="height: 300px;"></div>
        

          $('#world-map').vectorMap();
        

API

Here you will find some more details about how to set up a vector map. Its basic form is as simple as as using a .vectorMap() method on a jQuery element object. In more advanced use cases you might want to learn some more about the jvm constructor object and its features.

Options

Let's start off with parametes, that that can be passed in as an initialization option object. By default, this object looks like this, which should give you some idea about what is customizable out-of-the box:

jvm.WorldMap.defaultParams = {
              map: 'world_mill',
              backgroundColor: '#505050',
              zoomButtons: true,
              zoomOnScroll: true,
              zoomMax: 8,
              zoomMin: 1,
              zoomStep: 1.6,
              regionsSelectable: false,
              markersSelectable: false,
              bindTouchEvents: true,
              regionStyle: {
                initial: {
                  fill: 'white',
                  "fill-opacity": 1,
                  stroke: 'none',
                  "stroke-width": 0,
                  "stroke-opacity": 1
                },
                hover: {
                  "fill-opacity": 0.8
                },
                selected: {
                  fill: 'yellow'
                },
                selectedHover: {
                }
              },
              markerStyle: {
                initial: {
                  fill: 'grey',
                  stroke: '#505050',
                  "fill-opacity": 1,
                  "stroke-width": 1,
                  "stroke-opacity": 1,
                  r: 5
                },
                hover: {
                  stroke: 'black',
                  "stroke-width": 2
                },
                selected: {
                  fill: 'blue'
                },
                selectedHover: {
                }
              }
            };

Colors

Naturally, there are at least two ways to color things up. Firstly, to decide on all the regions color, through regionStyle.initial.fill property of the option object. Secondly, series.regions.values object helps to define colors and shades on region-to-region basis. The regions codes are easy to look up in the map file, while the string is a hex color code.


                <div id="color-map" style="height: 300px;"></div>
              

    $('#color-map').vectorMap({
      backgroundColor: '#573E8A',
      regionStyle: {
        initial: {
            fill: '#cbced4'
        }
      },
      series: {
        regions: [{
          values: {
              IN:'#5478ab',
              DK:'#88b7d6',
              PL:'#5478ab',
              IQ:'#98c6e5',
              PK:'#88b7d6',
              RU:'#95c9ed',
              CN:'#b6d4e9',
              AU:'#5478ab',
              AR:'#b6d4e9',
              FR:'#9ccbeb',
              NG:'#98c6e5',
              CA:'#5478ab',
              US:'#9ccbeb'
          }
        }]
      }
    });
              

Events

Vector map API offers aid in interactive maps creation and data visualization through colors, markers, labels, legends, custom mouse events and more. See "Getting Started" section for details.

Click to pinpoint your favorite US spots!


                  <div id="event-map" style="height: 300px;"></div>
              

      var map,
          markerIndex = 0,
          markersCoords = {};

      map = new jvm.WorldMap({
          map: 'us_lcc',
          markerStyle: {
            initial: {
              fill: 'red'
            }
          },
          container: $('#event-map'),
          onMarkerLabelShow: function(e, label, code){
            label.text(markersCoords[code].lat.toFixed(2)+', '+markersCoords[code].lng.toFixed(2));
          },
          onMarkerClick: function(e, code){
            map.removeMarkers([code]);
          },
          regionLabelStyle: {
          initial: {
            fill: '#B90E32'
          },
          hover: {
            fill: 'black'
          }
        }
      })

      map.container.click(function(e){
          var latLng = map.pointToLatLng(
                  e.pageX - map.container.offset().left,
                  e.pageY - map.container.offset().top
              ),
              targetCls = $(e.target).attr('class');

          if (latLng && (!targetCls || (targetCls && $(e.target).attr('class').indexOf('jvectormap-marker') === -1))) {
            markersCoords[markerIndex] = latLng;
            console.log(`${markersCoords[markerIndex].lat}`)
            map.addMarker(markerIndex, {latLng: [latLng.lat, latLng.lng]});
            markerIndex += 1;
          }
      });
              

Naturally, to make our maps interactive, it is not enough to just make it fancy on initial render - we want to respond to our users actions. This is why mouse events are such an important part of the API.

Event Name Description
onRegionOver First event getting fired once a cursors crosses regional border. Passport, please!
onRegionLabelShow Event taking place just before a regional label gets shown
onRegionOut Happens once the cursor leaves the region
onRegionClick Fires once a region gets clicked
onRegionSelected Takes place when a region gets selected. Requires regionsSelectable option object property to be set to true
onMarkerOver First thing to happen once cursor breaches markers' aerial space
onMarkerLabelShow Fires just moments before a marker label is shown
onMarkerOut Event listening for the cursor to leave a marker alone
onMarkerClick Click on a marker, get an event free
onMarkerSelected You can click on a marker and this is what happens
onViewportChange Once a viewport changes, events get fired

Maps

Showing world on a map is great, but sometimes - just too great! Happens, we are in need of something a bit lesser. Pick and choose - there are over 70 different maps in total!


                  <div id="cn-map" style="height: 300px;"></div>
                

                  $('#cn-map').vectorMap({
                    map: 'cn_mill',
                    backgroundColor: 'white',
                    regionStyle: {
                        initial: {
                            fill: 'red'
                        }
                    },
                    series: {
                      regions: [{
                        values: {
                          'CN-41': '#B68842',
                          'CN-44': '#482901',
                          'CN-53': '#E7B23C'
                        }
                      }]
                    }
                  });
                

Available maps

There is a ton of different maps to choose from, each with its own designated regions! They usually come in two flavors: _mill, standing for all times favorite Miller cylindrical projection, and _merc, its arch-nemesis, the Mercator projection. It is worth to mention, that there are some places for which extra feels are offered: a colonial-times themed _lcc and the "bitten donut" _aea. The maps are grouped into the "world" and "countries" packs.

World

africa_merc.js africa_mill.js asia_merc.js asia_mill.js continents_merc.js continents_mill.js europe_merc.js europe_mill.js north_america_merc.js north_america_mill.js oceania_merc.js oceania_mill.js south_america_merc.js south_america_mill.js world_merc.js world_mill.js

Countries

ar_merc.js ar_mill.js at_merc.js at_mill.js au_merc.js au_mill.js be_merc.js be_mill.js ca_lcc.js ca_merc.js ca_mill.js ch_merc.js ch_mill.js cn_merc.js cn_mill.js co_merc.js co_mill.js de_merc.js de_mill.js dk_merc.js dk_mill.js es_merc.js es_mill.js fr_merc.js fr_mill.js in_merc.js in_mill.js it_merc.js it_mill.js kr_merc.js kr_mill.js nl_merc.js nl_mill.js no_merc.js no_mill.js nz_merc.js nz_mill.js pl_merc.js pl_mill.js pt_merc.js pt_mill.js ru_merc.js ru_mill.js se_merc.js se_mill.js th_merc.js th_mill.js uk_merc.js uk_mill.js us_aea.js us_lcc.js us_merc.js us_mill.js ve_merc.js ve_mill.js za_merc.js za_mill.js

Vector Map - getting started : download & setup


Download

This plugin requires a purchase.

Buy vector map plugin - $9