Improved the selection API

jquery-jvectormap.js

@@ -37,7 +37,6 @@
       options = options || {};
       options.container = this;
       map = new jvm.WorldMap(options);
-      this.data('mapObject', map);
     }
   };
 })( jQuery );

lib/world-map.js

@@ -79,6 +79,7 @@ jvm.WorldMap = function(params) {
   this.regionsData = {};
 
   this.container = this.params.container;
+  this.container.data('mapObject', this);
   this.container.css({
     position: 'relative',
     overflow: 'hidden'
@@ -462,36 +463,92 @@ jvm.WorldMap.prototype = {
     }
   },
 
-  /**
-   * Return the codes of currently selected regions.
-   * @returns {Array}
-   */
-  getSelectedRegions: function(){
+  getSelected: function(type){
     var key,
         selected = [];
 
-    for (key in this.regions) {
-      if (this.regions[key].element.isSelected) {
+    for (key in this[type]) {
+      if (this[type][key].element.isSelected) {
         selected.push(key);
       }
     }
     return selected;
   },
 
+  /**
+   * Return the codes of currently selected regions.
+   * @returns {Array}
+   */
+  getSelectedRegions: function(){
+    return this.getSelected('regions');
+  },
+
   /**
    * Return the codes of currently selected markers.
    * @returns {Array}
    */
   getSelectedMarkers: function(){
-    var i,
-        selected = [];
+    return this.getSelected('markers');
+  },
 
-    for (i in this.markers) {
-      if (this.markers[i].element.isSelected) {
-        selected.push(i);
+  setSelected: function(type, keys){
+    var i;
+
+    if (typeof keys != 'object') {
+      keys = [keys];
+    }
+
+    if ($.isArray(keys)) {
+      for (i = 0; i < keys.length; i++) {
+        this[type][keys[i]].element.setSelected(true);
+      }
+    } else {
+      for (i in keys) {
+        this[type][i].element.setSelected(!!keys[i]);
       }
     }
-    return selected;
+  },
+
+  /**
+   * Set or remove selected state for the regions.
+   * @param {String|Array|Object} keys If <code>String</code> or <code>Array</code> the region(s) with the corresponding code(s) will be selected. If <code>Object</code> was provided its keys are  codes of regions, state of which should be changed. Selected state will be set if value is true, removed otherwise.
+   */
+  setSelectedRegions: function(keys){
+    this.setSelected('regions', keys);
+  },
+
+  /**
+   * Set or remove selected state for the markers.
+   * @param {String|Array|Object} keys If <code>String</code> or <code>Array</code> the marker(s) with the corresponding code(s) will be selected. If <code>Object</code> was provided its keys are  codes of markers, state of which should be changed. Selected state will be set if value is true, removed otherwise.
+   */
+  setSelectedMarkers: function(keys){
+    this.setSelected('markers', keys);
+  },
+
+  clearSelected: function(type){
+    var select = {},
+        selected = this.getSelected(type),
+        i;
+
+    for (i = 0; i < selected.length; i++) {
+      select[selected[i]] = false;
+    };
+
+    this.setSelected(type, select);
+  },
+
+  /**
+   * Remove the selected state from all the currently selected regions.
+   */
+  clearSelectedRegions: function(){
+    this.clearSelected('regions');
+  },
+
+  /**
+   * Remove the selected state from all the currently selected markers.
+   */
+  clearSelectedMarkers: function(){
+    this.clearSelected('markers');
   },
 
   /**

tests/markers.html

@@ -99,6 +99,12 @@
         },
         onMarkerSelected: function(event, index, isSelected, selectedMarkers){
           console.log('marker-select', index, isSelected, selectedMarkers);
+          if (window.localStorage) {
+            window.localStorage.setItem(
+              'jvectormap-selected-markers',
+              JSON.stringify(selectedMarkers)
+            );
+          }
         },
 
         onRegionLabelShow: function(event, label, code){
@@ -115,9 +121,18 @@
         },
         onRegionSelected: function(event, code, isSelected, selectedRegions){
           console.log('region-select', code, isSelected, selectedRegions);
+          if (window.localStorage) {
+            window.localStorage.setItem(
+              'jvectormap-selected-regions',
+              JSON.stringify(selectedRegions)
+            );
+          }
         }
       });
 
+      map.setSelectedRegions( JSON.parse( window.localStorage.getItem('jvectormap-selected-regions') || '[]' ) );
+      map.setSelectedMarkers( JSON.parse( window.localStorage.getItem('jvectormap-selected-markers') || '[]' ) );
+
       $('.list-markers :checkbox').change(function(){
         var index = $(this).closest('li').attr('data-marker-index');
 
@@ -135,6 +150,12 @@
         $('.list-markers :checkbox').prop('checked', false);
         map.clearMarkers();
       });
+      $('.button-clear-selected-regions').click(function(){
+        map.clearSelectedRegions();
+      });
+      $('.button-clear-selected-markers').click(function(){
+        map.clearSelectedMarkers();
+      });
     });
   </script>
 </head>
@@ -148,5 +169,8 @@
   </ul>
   <input type="button" value="Add all" class="button-add-all"/>
   <input type="button" value="Remove all" class="button-remove-all"/>
+  &nbsp;&nbsp;&nbsp;
+  <input type="button" value="Clear selected regions" class="button-clear-selected-regions"/>
+  <input type="button" value="Clear selected markers" class="button-clear-selected-markers"/>
 </body>
 </html>