JavaScript Event Regionen zusammenfügen

Das folgende Javascript Event fügt einzelne Regionen zu einer größeren Region zusammen. Dabei ist es nicht wichtig, ob die einzelnen Regionen nebeneinander liegen. Unter dem Kartenbeispiel wird Ihnen beschrieben, wie Sie Regionen mit dem dazugehörigen Javascript-Code zusammenfügen können.

Kopieren Sie den Inhalt der Dateien jeweils in die gleichnamigen Tabs.
Das Zusammenfassen der Regionen wird in dem Tab „Before Load“ konfiguriert.
Tragen Sie in die eckigen Klammern die IDs der Provinzen ein, welche zusammengefasst werden sollen. Dabei muss eine ID in Anführungszeichen gesetzt und durch ein Komma von den anderen getrennt werden.
Die zusammengefassten Bereiche werden wiederum in eckige Klammern gesetzt und ebenfalls durch Kommata getrennt – siehe Beispielkonfiguration.
Die jeweilige ID für eine Provinz finden Sie unter dem „Flächen“-Tab. „Area“ bezeichnet dort die ID für eine Region. Der Name muss exakt (auch mit Groß- und Kleinschreibung) übernommen werden.
Die folgende Beispielkonfiguration zeigt 2 zusammengefasste Bereiche. Beachten Sie auch das erneute Zusammenfassen in eckige Klammern:

Before_Load:

Eine Region zusammengefasst:

var _mergedAreas = [ ["Monte_Cristi", "San_Juan", "Azua", "Elias_Pina_1", "Santiago"], ];

Zwei Regionen zusammengefasst:

 var _mergedAreas = [ ["Monte_Cristi", "San_Juan", "Azua", "Elias_Pina_1", "Santiago"], ["Duarte_1_", "Maria_Trinidad_Sanchez", "Espaillat"] ];

Werden unter dem Reiter „Flächen“ zusätzlich Links und Tooltips angegeben, so wird hier immer die erste angegebene ID für die zusammengefasste Fläche benutzt. In diesem Beispiel würden Sie unter „Monte_Cristi“ und „Duarte_1_“ einen Link und Tooltip eintragen.
Das Skript wird nur dann korrekt funktionieren, wenn die Daten exakt auf diese Art eingetragen wurden.

Folgender Code wird nur kopiert und muss nicht weiter bearbeitet werden:

paper.areasMerge = {areasActive: false, activeAreas: null};
var hrefSet=false;  

     var tooltips=document.getElementsByClassName("imagemap_tooltip");
      var initialTooltipsLength= tooltips.length;

            /*paper.forEach(function(el) {
                for (var i=0; i<tooltips.length; i++) {
                    //alert(tooltips[i].getAttribute("id"));
                    if (tooltips[i].getAttribute("id").endsWith("tooltip_"+el.data("id"))) {
                        console.log("found tooltip!!!");
                        if (_mergedAreas)
                    }
                }
            });*/

            for (var i=0; i < _mergedAreas.length; i++) {
                var tooltip_set = false;
                var tooltipNodeIndex=null;
                for (var k=0; k<tooltips.length; k++) {
                    if (tooltips[k].getAttribute("id").endsWith("tooltip_"+_mergedAreas[i][0])) {
                        tooltip_set=true;
                        tooltipNodeIndex=k;
                        /*console.log("tooltip: " + tooltips[i].getAttribute("id"));
                        console.log(tooltips[i].innerHTML);
                        tooltips[i].innerHTML= "changed";
                        console.log(tooltips[i].innerHTML);*/
                    }

                }
                if (tooltip_set===true) {
                    for (var l=0; l< _mergedAreas[i].length; l++) {
                        var nodeExists=false;
                        for (m=0; m<initialTooltipsLength;m++) {
                            if(tooltips[m].getAttribute("id").endsWith("tooltip_"+_mergedAreas[i][l])) {
                                tooltips[m].innerHTML=tooltips[tooltipNodeIndex].innerHTML;
                                nodeExists=true;
                            }
                            if (nodeExists===false) {
                                var newNode=tooltips[tooltipNodeIndex].cloneNode(true);
                                //console.log(newNode);
                                newNode.setAttribute("id", tooltips[tooltipNodeIndex].getAttribute("id").
                                        replace("tooltip_"+_mergedAreas[i][0], "tooltip_"+_mergedAreas[i][l]));
                                tooltips[tooltipNodeIndex].parentNode.appendChild(newNode);
                            }
                        }

                    }
                }
            }

After_Load:

if (hrefSet===false) {
               var found=false;

               for(var i=0; i<_mergedAreas.length;i++) {
                   var _href=null;
                    paper.forEach(function(el){
                        if (el.data("id")===_mergedAreas[i][0]) {
                            found=true;
                            if(el.attr().href) {
                                _href=el.attr().href;
                            }
                        }
                    });
                    if (found===true) {
                        for (var j=0; j< _mergedAreas[i].length; j++) {
                            paper.forEach(function(el) {
                                if (j===0) return;
                                if (_mergedAreas[i][j]===el.data("id") && _href !== null) {
                                    el.attr({
                                        href : _href,
                                        cursor : "pointer"
                                    });
                                }
                            });
                        }
                    }
                }

            hrefSet=true;
           }

Mouse_Over:

 var _id = this.data("id");
            _mergedAreas.forEach(function (area) {
                var found=false;
                for (var i=0; i< area.length; i++) {
                    if (area[i] == _id) {
                        found = true;
                    }
                }
                if (found === true) {
                    paper.forEach(function (el) {
                        if (area.indexOf(el.data("id")) > -1) {
                            //.activeAreas = area;
                            this.areasMerge.activeAreas=area;
                            el.data("set").forEach(function (element) {
                                if (element.type == "text") {
                                    if (element.data("text")) {
                                        element.stop().animate({
                                            fill: element.data("text").hover
                                        }, animTime);
                                    }
                                } else {
                                    if (element.attr("fill") != "none") {
                                        if (element.data("colors")) {
                                            element.stop().animate({
                                                fill: element.data("colors").hoverfill,
                                                stroke: element.data("colors").hoverstroke
                                            }, animTime);
                                        }
                                    }
                                }
                            });
                            this.areasMerge.areasActive=true;
                            return;
                        }
                    },paper);
                }
            });

Mouse_out:

if (paper.areasMerge.areasActive===true) {
            paper.forEach(function (el) {
                if (this.areasMerge.activeAreas.indexOf(el.data("id")) > -1) {
                    el.data("set").forEach(function (element) {
                        if (element.type == "text") {
                            if (element.data("text")) {
                                element.stop().animate({
                                    fill: element.data("text").default
                                }, animTime);
                            }
                        } else {
                            if (element.attr("fill") != "none") {
                                if (element.data("colors")) {
                                    element.stop().animate({
                                        fill: element.data("colors").defaultfill,
                                        stroke: element.data("colors").defaultstroke
                                    }, animTime);
                                }
                            }
                        }
                    });
                }
            },paper);
            paper.areasMerge.areasActive = false;
        }