JvectorMap Region Selection

JvectorMap Region Selection

e
I am trying to reuse the region selection feature of JVectorMap. I am using a custom map (js) file. I have tested it in and it works fine for region selection. Now I need to pass the regions which are selected by the user to the back end vb code. In this case maps.getSelectedRegions() gives an array of the user selected regions. I am not clear on how to pass a javascript array to back end vb code. The window.localstorage as how it is given in the example don't seem to work out here. Can somebody help me out on how this an be done? This is the link of JVectorMap Region Selection - http://jvectormap.com/examples/regions-selection/

Thanks in advance.
Sina

Following is the code I have used so far.

  1. <!DOCTYPE html>
    <html>
    <head>
      <title>jVectorMap demo</title>
      <link rel="stylesheet" media="all" href="../jquery-jvectormap.css"/>
      <script src="assets/jquery-1.8.2.js"></script>
      <script src="../jquery-jvectormap.js"></script>
      <script src="../jquery-mousewheel.js"></script>

      <script src="../lib/jvectormap.js"></script>

      <script src="../lib/abstract-element.js"></script>
      <script src="../lib/abstract-canvas-element.js"></script>
      <script src="../lib/abstract-shape-element.js"></script>

      <script src="../lib/svg-element.js"></script>
      <script src="../lib/svg-group-element.js"></script>
      <script src="../lib/svg-canvas-element.js"></script>
      <script src="../lib/svg-shape-element.js"></script>
      <script src="../lib/svg-path-element.js"></script>
      <script src="../lib/svg-circle-element.js"></script>

      <script src="../lib/vml-element.js"></script>
      <script src="../lib/vml-group-element.js"></script>
      <script src="../lib/vml-canvas-element.js"></script>
      <script src="../lib/vml-shape-element.js"></script>
      <script src="../lib/vml-path-element.js"></script>
      <script src="../lib/vml-circle-element.js"></script>

      <script src="../lib/vector-canvas.js"></script>
      <script src="../lib/simple-scale.js"></script>
      <script src="../lib/numeric-scale.js"></script>
      <script src="../lib/ordinal-scale.js"></script>
      <script src="../lib/color-scale.js"></script>
      <script src="../lib/data-series.js"></script>
      <script src="../lib/proj.js"></script>
      <script src="../lib/world-map.js"></script>
      <script src="assets/xyz-jvectormap.js"></script>
      <script>
        $(function(){
      var maps;
      maps = new jvm.WorldMap({
        container: $('#map'),
        map: 'xyz_map',
        regionsSelectable: true,
       
        regionStyle: {
          initial: {
            fill: '#B8E186'
          },
          selected: {
            fill: '#F4A582'
          }
        },
        series: {
         
        },
        onRegionSelected: function(){
          if (window.localStorage) {
            window.localStorage.setItem(
              'jvectormap-selected-regions',
              JSON.stringify(maps.getSelectedRegions())
             
            );
          }
        }
       
      });
      maps.setSelectedRegions( JSON.parse( window.localStorage.getItem('jvectormap-selected-regions') || '[]' ) );
      });
             
       
      </script>
    </head>
    <body>
      <div id="map" style="width: 900px; height: 900px"></div>
    </body>
    </html>