Change current selected region after clearSelectedRegions()

Asked 8/11, 2012 at 11:47 Answered 31/7, 2014 at 16:25

I've a question about region selections. I've created a function to switch the selected region in a different way like regionsSelectable(). By using regionsSelectable() I can select more than one region, with my function I want to switch the selected region to the current selected region (only one region is selected every time).

To realise this I've used the function clearSelectedRegions() if length of SelectedRegions() > 1 after these all regions are deselected. I've saved the newest region in a separate variable. To show the current region as a selected region I've changed two values.

(container is the map object, GER is the example region)
firstly: container.regions.GER.element.isSelected = false;
secondly: container.regions.GER.element.setSelected(true);

But these is a bad way to change a lot of regions...

So the question is, how can I change the same values by using setSelectedRegions()?

Gladdy answered 8/11, 2012 at 11:47 Comment(0)

This problem can be fixed using the regionsSelectableOne: true command. Both the regionsSelectable and regionsSelectableOne need to be set to true, such as follows:

      map: 'world_mill_en',
      series: {............},
      regionsSelectable: true,
      regionsSelectableOne: true,

Hope this helps. Even though this is a easy way of doing it, I myself would be interested to know how it can be done using the clearSelectedRegions() and setSelectedRegions() options/functions. Thanks.

Goldsmith answered 8/11, 2012 at 23:53 Comment(2)

Where did you see regionsSelectableOne? It was exactly what I needed but I couldnt find it in the documentation – Armillary 19/11, 2012 at 22:26

I reckon he found it in source code from jvectormap on line 462-463 (v. 1.1.1 min) "(e.params[i + "sSelectableOne"] && e.clearSelected(i + "s")" , but I'm not sure. – Gladdy 23/11, 2012 at 15:45

In trying to understand this problem, my biggest struggle is trying to understand the differences between the two map creation commands jVectorMap uses:

New Map commands

new jvm.WorldMap({ container: $('.map') , .... });

$('#map').vectorMap({ .... });

Depending on which command you choose, the whole coding process seems to act differently? For example,

<script src="assets/jquery-jvectormap-world-mill-en.js"></script>
  <script>
    $(function(){
        var map = new jvm.WorldMap({
        container: $('.map'),
        map: 'world_mill_en',
        regionsSelectable: true,
                });

     $('.button-clear-selected-regions').click(function(){
       map.clearSelectedRegions();
     });
   });
  </script>
</head>
<body>
    <div class="map" style="width: 800px; height: 500px"></div>
    <input type="button" value="Clear selected regions" class="button-clear-selected-regions"/>
</body>

Both create a working map, but the clearSelectedRegions() function only works on the one above.

<script src="assets/jquery-jvectormap-world-mill-en.js"></script>   
  <script>
    $(function(){
        var map = $('#map').vectorMap({
        container: $('.map'),
        map: 'world_mill_en',
        regionsSelectable: true,
                });

      $('.button-clear-selected-regions').click(function(){
        map.clearSelectedRegions();
      });
   });
  </script>
</head>
<body>
    <div id="map" style="width: 800px; height: 500px"></div>
    <input type="button" value="Clear selected regions" class="button-clear-selected-regions"/>
</body>

Edit - After doing some more research apparently the map creation code new jvm.WorldMap({ container: $('.map') , .... }); uses JavaScript API (v 1.0) , versus $('#map').vectorMap({ .... }); which only uses JavaScript API (v 0.2.3).

The clearSelectedRegions() feature (and many others) are only supported using v1.0

Goldsmith answered 9/11, 2012 at 13:34 Comment(2)

I am working with v. 1.1.1 but I can't find any differences in conclusion to my question in the DOM. (Or in map Object) – Gladdy 9/11, 2012 at 15:16

edit: I'm using these creation code container = new jvm.WorldMap({ container: $(#container), map: ".... }); It is Version 1.x. – Gladdy 12/11, 2012 at 7:45

Isn't this just what you wanted to do? So that one region can only be selected at any one time. I'm not sure exactly what your trying to achieve with all the code you've written, the purpose? The code I wrote below will work exactly the same way as regionsSelectableOne: true does but using clearSelectedRegions() and setSelectedRegions(code) to get you there.

<script src="assets/jquery-jvectormap-world-mill-en.js"></script>
  <script>
    $(function(){
        var map = new jvm.WorldMap({
        container: $('#map'),
        map: 'world_mill_en',
        onRegionClick: function(e, code) {
                       map.clearSelectedRegions();
                       map.setSelectedRegions(code);
                                         }
        });
    });
  </script>
</head>
<body>
       <div id="map" style="width: 800px; height: 500px"></div>
</body>

Goldsmith answered 9/11, 2012 at 16:25 Comment(1)

It doesn't work in my example... The reason is, that I need the current selected region to show more information in addiction to the selected region. But I know I can fix it with regionsSelectableOne ;) thanks – Gladdy 12/11, 2012 at 7:40

Thanks, I didn't know that these functions exists... and I can't find it in the documentation. (Is it a new modification from Version 1.1.1?)

It's a litle bit tricky to use these two functions for realising, because clearSelectedRegions deletes SelectedRegions stepp by stepp and starts with the first line of the function every stepp.

To save selected Regions I've used the length of selectedRegions or you can use length of (container = map object) container.getSelectedRegions(). Futhermore I've created a var named switch_land their basic value is false. If we have selected no region the length is 0, this is helpfull (I will show you the reason later).

length = selectedRegions.length;
switch_land = false;
if (length === 1) {
land_first = selectedRegions[0];
}

land_first saves the first land you've selected. In the second stepp it is important to find the new selected region. By testing I've found that the second value of selectedRegions is not every time the second region you've selected.

if (length === 2) {
if (land_first !== selectedRegions[0]) {
selectedRegions[1] = selectedRegions[0];
selectedRegions[0] = land_first;

the last two lines save the first selected Region to selectedRegion[0]. These is very good because now we can use the function pop() to save every time the newest selected region because the region is always saved in the second value of selected region array.

}
region_delete = true;
regions = selectedRegions;
land_secound = regions.pop();
container.clearSelectedRegions();
switch_land = true;
}

I've used region_delete in next stepp to stopp manuel deselecting. (You can click once, twice etc. on a region and the region remains selcted as long as you click on another region)

if (typeof region_delete === 'undefined'){
region_delete = false;
}
if (length === 0 && region_delete === false){
selected_region(land_first, false, true);
}

I will describe the function selected_region in the end. Finaly we have to select the newest land. And I've used length 0 along with region_delte to find out the moment while a user click on a region to deselect the region.

if (switch_land === true) {
selectedRegions[0] = land_secound;
selected_region(land_secound, false, true);
delete land_secound;
region_delete = false;
}

Thats all. Now I will give you an example of selected_region with region GER.

function selected_region(selected_regions, status_1, status_2) {
switch (selected_regions) {
case "GER":
container.regions.GER.element.isSelected = status_1;
container.regions.GER.element.setSelected(status_2);
break;
}
}

For region swichting it is important that you chose status_1 = false, if you didn't chose false you can see that the land is hovered and the selecting color will be show after region mouse out.

The Problem is that I can't use a var to change values something like container.regions.selectedRegions[0].element.setSelected(status_2); and these is the main problem and the reason I've written the first question ;)

Gladdy answered 9/11, 2012 at 8:58 Comment(0)

@Mike is correct.

Use:

map: 'world_mill_en',
  series: {............},
  regionsSelectable: true,
  regionsSelectableOne: true,

If you use

mapObj.clearSelectedRegions();
mapObj.setSelectedRegions(string);

Then you might find yourself in a loop of the setSelectedRegions() and onRegionSelected method.

Hope this helps!

Troutman answered 31/7, 2014 at 16:25 Comment(0)

Recommended topics

Hot tags