jvectormap - auswählbare Bereiche definieren

Ist es in jVectorMaps möglich, statische Bereiche zu definieren, die ausgewählt werden können?
Ich muss nur 6 Regionen definieren, die ein Benutzer auswählen darf.
Der knifflige Teil wäre, dass ich Europa, Asien und die Welt als eine Region und "Polen" und "Kanada" haben muss.jvectormap - auswählbare Bereiche definieren

Wenn ein Benutzer Polen auswählt, sollte er nur "Polen" auswählen, aber wenn ein Benutzer ein anderes Land in "Europa" auswählt, sollte es alle europäischen Länder auswählen.

Ist dies mit jvectormaps möglich?

Quelle

2017-06-19 Marek123

jVectorMap-Regionen sind SVG-Pfade, die durch ISO-Ländercodes mit 2 Buchstaben identifiziert werden.

Sie können diese Pfade nicht zusammenführen, aber Sie können diese Ländercodes in Makrobereichen sammeln und diese Gruppen von Codes verwenden, um alle jVectorMap-Regionen auf einmal auszuwählen.

Dies ist ein Beispiel mit 4 Makrobereichen: Polen, Kanada, Europa und der Rest der Welt.

$(document).ready(function() { 
 
    // Group states into Areas 
 
    var areas = []; 
 
    areas[0] = []; 
 
    areas[1] = ["PL"]; 
 
    areas[2] = ["BE","FR","BG","DK","HR","DE","BA","HU","FI","BY","GR","NL","PT","NO","LV","LT","LU","XK","CH","EE","IS","AL","IT","CZ","GB","IE","ES","ME","MD","RO","RS","MK","SK","SI","UA","SE","AT"]; 
 
    areas[3] = ["CA"]; 
 

 
    function selectArea(code){ 
 
    var mapObj = $("#map").vectorMap("get", "mapObject"); 
 
    areas.forEach(function(area) { 
 
     if(area.indexOf(code)>-1) { 
 
     mapObj.setSelectedRegions(area); 
 
     return; 
 
     } 
 
    }); 
 
    } 
 

 
    function clearAll(){ 
 
    var mapObj = $("#map").vectorMap("get", "mapObject"); 
 
    mapObj.clearSelectedRegions(); 
 
    } 
 

 
    $("#map").vectorMap({ 
 
    map: "world_mill", 
 
    backgroundColor: "aliceblue", 
 
    zoomOnScroll: true, 
 
    regionsSelectable: true, 
 
    regionStyle: { 
 
     initial: { 
 
     fill: "lightgrey" 
 
     }, 
 
     selected: { 
 
     fill: "darkseagreen" 
 
     } 
 
    }, 
 
    onRegionClick: function(e, code){ 
 
     clearAll(); 
 
     selectArea(code); 
 
     return false; 
 
    } 
 
    }); 
 

 
    (function() { 
 
    // Collect the rest of the World 
 
    var mapObj = $("#map").vectorMap("get", "mapObject"); 
 
    var states = areas.join(","); 
 
    for(var code in mapObj.regions) { 
 
     if(mapObj.regions.hasOwnProperty(code)) { 
 
     if(states.indexOf(code) == -1) { 
 
      areas[0].push(code); 
 
     } 
 
     } 
 
    } 
 
    })(); 
 

 
});

<html> 
 
<head> 
 
    <title>jVectorMap Areas</title> 
 
    <link rel="stylesheet" href="http://jvectormap.com/css/jquery-jvectormap-2.0.3.css" type="text/css"> 
 
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
 
    <script src="http://jvectormap.com/js/jquery-jvectormap-2.0.3.min.js"></script> 
 
    <script src="http://jvectormap.com/js/jquery-jvectormap-world-mill.js"></script> 
 
</head> 
 
<body> 
 
    <div id="map" style="width: 600px; height: 400px"></div> 
 
</body> 
 
</html>

Quelle

2017-06-23 21:04:34 deblocker

jvectormap - auswählbare Bereiche definieren

Antwort

Verwandte Themen