Anzeige: [Im Browser | Quellcode | Download ]
Diese Datei bindet eine weitere ein:92321.jpg!
Syntax-Highlighting: [ ausgeschalten | SVG1.1 (XML) | ECMAScript mit SVG-DOM-Manip. ]
Zeilenumbruch: [ aktiviert | auschalten ]
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <?AdobeSVGViewer save="snapshot"?>
  3. <svg overflow="visible" width="100%" height="100%" onzoom="myHandleZoomPan(evt)" onscroll="myHandleZoomPan(evt)" onload="myHandleLoad()" onresize="myHandleLoad()" xmlns="https://www.w3.org/2000/svg"  xmlns:xlink="https://www.w3.org/1999/xlink" version="1.0">
  4.  
  5. <!-- DIE ATTRIBUTE width&height MIT 100% OHNE ANGABE EINER viewBox VERURSACHEN EIN BILDSCHIRMBASIERTES BASISKOORINATENSYSTEM (PIXEL)
  6.  
  7.      VIEWERFEHLER UND WORK-AROUNDS:
  8.  
  9.      DAS ATTRIBUT overflow="visible" ERMÖGLICHT IM BATIK SQUIGGLE VIEWER DAS SICHTBAR BLEIBEN DES NAVIGATIONSBLOCKS BEIM HERAUSZOOMEN.
  10.      DAS VERSCHWINDEN DIESES BLOCKS IST ABER NICHT STANDARDKONFORM.
  11.  
  12.      FIREFOX HAT IN DER VERSION 1.5 BETA 2 (STAND NOVEMBER 2005) ERHEBLICHE PROBLEME INHALTE ZU ZOOMEN. DIE FUNKTIONEN WERDEN KORREKT AUSGEFÜHRT, ES HANDELT
  13.      SICH HIERBEI UM EIN RENDERING-PROBLEM.
  14.  
  15.      DER ADOBE SVG VIEWER 3.x KENNT DIE METHODE .getScreenCTM() NICHT. DIESE WIRD DURCH DIE FUNKTION myGetScreenCTM() ERSETZT. ALLERDINGS IST .getScreenCTM()
  16.      EINE METHODE, DIE ÄNDERUNGEN MITVERFOLGEN SOLLTE UND DER ADOBE SVG VIEWER 3.x MACHT DAS NICHT. DAHER MUSS DIESE FUNKTION AN MEHREREN STELLEN ZUSÄTZLICH
  17.      AUFGERUFEN WERDEN. DIES IST AN try/catch-BLÖCKEN ERKENNBAR.
  18.  
  19.      DER ADOBE SVG VIEWER 3.x UND FIREFOX 1.5 KENNEN DIE METHODE .viewport NICHT. DER WERT WIRD EBENFALLS IN try/catch-BLÖCKEN ERSATZWEISE ERMITTELT.
  20.  
  21.      DER ADOBE SVG VIEWER 3.x LIEFERT EINE FALSCH ANZAHL VON onscroll UND onzoom-EVENTS. DADURCH WIRD DIE LAGEKORREKTUR BEIM NAVIGIEREN AUSSERHALB DES
  22.      KARTENGEBIETS ERSCHERT BZW. INKOMPATIBEL ZU VIEWERN GEMACHT, DIE DIESE EVENTS RICHTIG AUSFÜHREN. AUS DIESEM GRUND, WIRD FÜR DEN DOBE SVG VIEWER 3.x
  23.      DIESE FUNKTION DEAKTIVIERT. SIEHE FUNKTION myHandleZoomPan() FÜR NÄHERE DETAILS.
  24.  
  25.      DER ADOBE SVG VIEWER 3.x HAT PROBLEME WENN MITTELS SCRIPT DER ZOOMFAKTOR 8 ÜBERSCHRITTEN WIRD. DIES WIRD HIER NICHT ABGEFANGEN
  26.  
  27.      FIREFOX HAT IN DER VERSION 1.5 BETA 2 (STAND NOVEMBER 2005) ERAFSST onload .getScreenCTM() NICHT RICHTIG. DADURCH KOMMT ES BEI DER ERSTANSICHT BEI DER
  28.      MASSSTABSLEISTE ZU EINER FALSCHEN DARSTELLUNG. NACH EINEM ZOOM ODER PAN IST DER FEHLER BEHOBEN DA .getScreenCTM() RICHTIGE WERTE AUSLIEFERT.
  29.  
  30.      MIT onresize WIRD DIE SELBE FUNKTION WIE onload AUFGERUFEN, DADURCH  SOLL SICHERGESTELLT WERDEN, DASS DIE WERTE VON .getScreenCTM()
  31.      RICHTIG ERFASST WERDEN. MANCHE VIEWER HABEN HIER PROBLEME.
  32.  
  33.      BATIK SQUIGGLE 1.6 HAT (ENDE 2005) EINE FEHLER DER BEIM .getScreenCTM() onload. ES WIRD DIE TRANSFORMATIONSMATRIX DES VORANGEHENDEN FILES ÜBERNOMMEN WENN
  34.      IN DIESEM ZOOM ODER PAN AKTIV WAR. MIT EINEM ABERMALIGEN LADEN DER DATEI IST DER FEHLER BEHOBEN.
  35.  
  36.   -->
  37.  
  38.   <title>Level of Detail und Nachladen © svg.carto.net, Nicole Ueberschär + André M. Winter</title>
  39.   <desc>  
  40.     Alle Kartenebenen werden abhängig vom Zoomlevel geladen bzw. sichtbar und wieder unsichtbar gemacht.
  41.   </desc>
  42.  
  43.   <defs>
  44.     <symbol id="mySymbArrow" overflow="visible" fill="none" stroke="navy" stroke-width="1">
  45.       <polyline points="-3,-5 3,-5 3,1 5,1 0,5 -5,1 -3,1 -3,-5"/><!-- SYMBOL SHAPE © ANDREAS NEUMANN, https://www.carto.net/papers/svg/tuerlersee/ -->
  46.     </symbol>
  47.  
  48.     <script>
  49.       <![CDATA[
  50.  
  51.         // GLOBALE VARIABLEN
  52.         var myScreenMatrix = null; // UMFASST .getScreenCTM() UND SOLLTE IMMER ÄNDERUNGEN MITVERFOLGEN (DETAILS SIEHE OBEN IM DATEIHEADER
  53.         var myDocElem = document.documentElement; // REFERENZ
  54.         var myViewport = {}; // UMFASST .viewport
  55.         // UMFASST PLATZIERUNGSANGEBEN FÜR ELEMENTE DIE FENSTERGRÖSSEN- UND MASSSTABSABHÄNGIG SIND.
  56.         // DIE WERTE SIND viewport-ABHÄNGIG UND WERDEN DAHER IN DER FUNKTION mySetElements() ZUGEWIESEN.
  57.         var myBlocks = {};
  58.         var myVB = []; // UMFASST DIE VIEWBOXWERTE DER HAUPTKARTE BEIM LADEN. WIRD onload GESETZT.
  59.         var myRemainings = [0,0]; // RESTBREITE ODER RESTHÖHE DURCH DAS EINPASSEN DER viewBox IN DEN viewport. WIRD onload GESETZT UND FÜR RANDBERECHNUNGEN BENÖTIGT.
  60.         var myZoomConstraints = [1,20]; // UNTER- UND OBERGRENZE DES ZOOMFAKTORS. GÜNSTIGERWEISE SOLLTE DIESER BESSER VOM URSPRÜNGLICHEN viewport ABHÄNGEN.
  61.         var mySliderConstraints = [0,209,15]; // ZUÄSSIGER SPIELRAUM FÜR DEN SLIDER, SOWIE SEINE HÖHE
  62.  
  63.  
  64.  
  65.  
  66.         var myLayerArr = [
  67.           [
  68.             '99920.xml', // DIE URL
  69.             'myTempTextAll', // DIE ZIELGRUPPE
  70.             3, // UNTERE MASSSTABGRENZE
  71.             100, // OBERE MASSSTABGRENZE
  72.             0 // LADE-/SICHTBARKEITSZUSTAND
  73.           ],[
  74.             '99921.xml',
  75.             'myTempRoadsCat4',
  76.             8,
  77.             100,
  78.             0
  79.           ],[
  80.             '99922.xml',
  81.             'myTempRoadsCat3',
  82.             4,
  83.             100,
  84.             0
  85.           ],[
  86.             '99923.xml',
  87.             'myTempRoadsCat2',
  88.             2,
  89.             1000,
  90.             0
  91.           ],[
  92.             '99924.xml',
  93.             'myTempRoadsCat01',
  94.             1,
  95.             100,
  96.             0
  97.           ],[
  98.             '99925.xml',
  99.             'myTempWaters',
  100.             4,
  101.             100,
  102.             0
  103.           ],[
  104.             '99926.xml',
  105.             'myTempCantons',
  106.             4,
  107.             100,
  108.             0
  109.           ],[
  110.             '99927.xml',
  111.             'myTempPoints',
  112.             4,
  113.             100,
  114.             0
  115.           ],[
  116.             '99928.xml',
  117.             'myTempDepartements',
  118.             1,
  119.             2,
  120.             0
  121.           ],[
  122.             '99929.xml',
  123.             'myTempArrondissements',
  124.             2,
  125.             4,
  126.             0
  127.           ],[
  128.             '99930.xml',
  129.             'myTempTextMain',
  130.             1,
  131.             3,
  132.             0
  133.           ]
  134.         ];
  135.  
  136.  
  137.  
  138.  
  139.         function myAddXML(myURL,myDestination,myEncoding){
  140.           if (window.XMLHttpRequest) {
  141.             var myReq = new XMLHttpRequest();
  142.             if(myReq) {
  143.               myReq.overrideMimeType('text/xml');
  144.               myReq.open('GET', myURL, true);
  145.               myReq.onreadystatechange = function(){
  146.                 if (myReq.readyState == 4){
  147.                   document.getElementById(myDestination).appendChild(myReq.responseXML.documentElement);
  148.                 }
  149.               }    
  150.               myReq.send(null);
  151.             }
  152.             return;
  153.           } else if (window.getURL){
  154.             getURL(myURL, myFileLoaded,myEncoding);
  155.           } else {
  156.             return;
  157.           }
  158.           function myFileLoaded(myData){
  159.             var myString = '';
  160.             if(myData.success) {
  161.               myString = myData.content;
  162.             } else {
  163.               return;
  164.             }
  165.             document.getElementById(myDestination).appendChild(parseXML(myString, document));
  166.           }
  167.         }
  168.  
  169.  
  170.  
  171.  
  172.         function myHandleLoad(){ // ERFASSUNG DER AKTUELLEN TRANSFORMATIONSMATRIX FÜR DIE KOORDINATENAUSGABE SOWIE WEITERER GLOBAL BENÖTIGTER WERTE.
  173.  
  174.           // ES MUSS AUFGRUND DER VERSCHACHTELUNG HIER AUF DIE KARTE (myMap) UND NICHT AUF DAS WURZELELEMENT GEGANGEN WERDEN
  175.           try {
  176.             myScreenMatrix = document.getElementById('myMap').getScreenCTM(); // STANDARDMETHIDE
  177.           }
  178.           catch(e){
  179.             myScreenMatrix = myGetScreenCTM(document.getElementById('myMap')); // ERSATZMETHODE FÜR ADOBE SVG VIEWER 3.x
  180.           }
  181.  
  182.           // viewport ERFASSEN
  183.           try { // HIER WIRD EIN SCRIPTOBJEKT GESCHAFFEN, DAS SO ÄHNLICH WIE DAS DIE EIGENSCHAFT .viewport KONSTRUIERT IST
  184.             myViewport = {
  185.               myWidth : myDocElem.viewport.width, // STANDARDMETHODE
  186.               myHeight : myDocElem.viewport.height
  187.  
  188.             }
  189.           }
  190.           catch(e){ // FÜR ASV3 UND FF1.5
  191.             myViewport = { // HIER WIRD EIN SCRIPTOBJEKT (HASH) GESCHAFFEN, DAS SO ÄHNLICH WIE DAS DIE EIGENSCHAFT .viewport KONSTRUIERT IST
  192.               myWidth : window.innerWidth,  // ERSATZMETHODE
  193.               myHeight : window.innerHeight
  194.             }
  195.           }
  196.  
  197.            // URSPRÜNGLICHE viewBox-WERTE SPEICHERN. DIESE WERTE WERDEN ÖFTERS BENÖTIGT UND ERSPAREN SO DAS ERFRAGEN AUS DEM DOM.
  198.            myVB = document.getElementById('myMap').getAttributeNS(null,'viewBox').split(' ');
  199.            myVB[0] = parseFloat(myVB[0]); // STRINGS FÜR SPÄTERE BERECHUNGEN IN ZAHLEN UMWANDELN.
  200.            myVB[1] = parseFloat(myVB[1]);
  201.            myVB[2] = parseFloat(myVB[2]);
  202.            myVB[3] = parseFloat(myVB[3]);
  203.            
  204.            // DIESE WERTE / VERHÄLTNISSE SIND ZOOM/PAN-UNABHÄNGIG UND WERDEN FÜR RANDBERECHNUNGEN IN myHandleZoomPan() BENÖTIGT.
  205.            // ES HANDELT SICH UM DIE RESTBREITE/-HÖHE IN PIXEL.
  206.            if(myViewport.myWidth / myViewport.myHeight < myVB[2] / myVB[3]){ // BREITE PASST EIN, REST IN DER HÖHE
  207.               myRemainings[1] = myViewport.myHeight - myViewport.myWidth * myVB[3] / myVB[2];
  208.            } else { // HÖHE PASST EIN, REST IN DER BREITE
  209.              myRemainings[0] = myViewport.myWidth - myViewport.myHeight * myVB[2] / myVB[3];
  210.            }
  211.                  
  212.           mySetElements();
  213.           myUpdateDisplays(); // ZEIGT PARAMTER AN
  214.           myHandleZoomPan();  // AUFRUF UM DIE MASSSTABSLEISTE MIT DATEN ZU VERSORGEN UND DAS RECHTECK IN DER ÜBERSICHTKARTE DEM TATSÄCHLICHEN AUSSCHNITT ANZUPASSEN
  215.  
  216.         }
  217.  
  218.         // SETZTEN VON INTERFACE-ELEMENTEN
  219.         function mySetElements(){
  220.           // DAS OBJEKT myBlocks IST GLOBAL VERANKERT, WIRD ABER HIER MIT DATEN BEFÜLLT DA myViewport.width/.height ERST onload ERMITTELT WURDE.
  221.           // "FOB" STEHT FÜR FLYOUTBORDER UND BEZEICHNET DIE KLICKBAREN RÄNDER FÜR TRANSLATION DER KARTE. DIE BUCHSTABEN DAHINTER STEHEN FÜR DIE HIMMELSRICHTUNG.
  222.           // DIE OBJEKTE WERDEN GESCHAFFTEN, IHRE EIGENSCHAFTEN myX,myY,myWidth,myHeigt,myObj SIND EIGNES ERSTELLT UND NICHT STANDARDISIERT.
  223.            myBlocks = {
  224.              'myFOBSS' : {
  225.               myX : 100,
  226.               myY : myViewport.myHeight - 70,
  227.               myWidth : myViewport.myWidth - 200,
  228.               myHeight : 70,
  229.               myObj: document.getElementById('myFOBSS') // HIER WIRD DIREKT EINE REFRENZ AUF DAS OBJEKT ERSTELLT.
  230.             },
  231.              'myFOBNN' : {
  232.               myX : 100,
  233.               myY : 0,
  234.               myWidth : myViewport.myWidth - 200,
  235.               myHeight : 70,
  236.               myObj: document.getElementById('myFOBNN')
  237.             },
  238.              'myFOBWW' : {
  239.               myX : 0,
  240.               myY : 100,
  241.               myWidth :70,
  242.               myHeight : myViewport.myHeight - 200,
  243.               myObj: document.getElementById('myFOBWW')
  244.             },
  245.              'myFOBEE' : {
  246.               myX : myViewport.myWidth - 70,
  247.               myY : 100,
  248.               myWidth : 70,
  249.               myHeight : myViewport.myHeight - 200,
  250.               myObj: document.getElementById('myFOBEE')
  251.             },
  252.              'myFOBNW' : {
  253.               myX : 0,
  254.               myY : 0,
  255.               myWidth : 100,
  256.               myHeight : 100,
  257.               myObj: document.getElementById('myFOBNW')
  258.             },
  259.             'myFOBNE' : {
  260.               myX : myViewport.myWidth - 100,
  261.               myY : 0,
  262.               myWidth : 100,
  263.               myHeight : 100,
  264.               myObj: document.getElementById('myFOBNE')
  265.             },
  266.             'myFOBSW' : {
  267.               myX : 0,
  268.               myY : myViewport.myHeight - 100,
  269.               myWidth : 100,
  270.               myHeight : 100,
  271.               myObj: document.getElementById('myFOBSW')
  272.             },
  273.             'myFOBSE' : {
  274.               myX : myViewport.myWidth - 100,
  275.               myY : myViewport.myHeight - 100,
  276.               myWidth : 100,
  277.               myHeight : 100,
  278.               myObj: document.getElementById('myFOBSE')
  279.             },
  280.             'myInfoBlock' : {
  281.               myX : myViewport.myWidth - 190,
  282.               myY : 10,
  283.               myWidth : 180,
  284.               myHeight : 520,
  285.               myObj: document.getElementById('myInfoBlock')
  286.             },
  287.             'myDynScalebar' : {
  288.               myX : 10,
  289.               myY : myViewport.myHeight - 30,
  290.               myWidth : 180,
  291.               myHeight : 15,
  292.               myObj: document.getElementById('myDynScalebar')
  293.             }
  294.           }
  295.          
  296.           for(var data in myBlocks){ // SETZE ALLE ELEMENTE AN IHREN PLATZ (RANDNAVIGATION UND INFOBLOCK).
  297.             var myRectObj = myBlocks[data].myObj;
  298.              myRectObj.setAttributeNS(null, 'x', myBlocks[data].myX);
  299.             myRectObj.setAttributeNS(null, 'y',  myBlocks[data].myY);
  300.             myRectObj.setAttributeNS(null, 'width', myBlocks[data].myWidth);
  301.             myRectObj.setAttributeNS(null, 'height', myBlocks[data].myHeight);
  302.           }
  303.          
  304.           document.getElementById('myDynScalebarText').setAttributeNS(null,'y',  myViewport.myHeight - 17);
  305.  
  306.         } // ENDE VON mySetElements().
  307.  
  308.  
  309.  
  310.  
  311.  
  312.         // AUSFÜHREN VON ZOOM-FUNKTIONEN ÜBER INTERFACE-ELEMENTE
  313.         function myDoZoom(myVal,mySetAbs){ // NACHGEBAUTE ZOOM-FUNKTION
  314.        
  315.           var myOldScale = myDocElem.currentScale; // SPEICHERN DES AKTUELLEN ZOOMLEVELS
  316.           var oldTranslate = { // HIER WIRD EIN SCRIPTOBJEKT GESCHAFFEN, DAS SO ÄHNLICH WIE DAS DIE EIGENSCHAFT .currentTranslate KONSTRUIERT IST
  317.             x : myDocElem.currentTranslate.x,
  318.             y : myDocElem.currentTranslate.y
  319.           }
  320.           if(mySetAbs){
  321.             myDocElem.currentScale = myVal; // DIREKTE ZUWEISUNG DES ABSOLUTEN FAKTORS.
  322.           } else {
  323.             // UMRECHNUNG DES ÜBERGABEWERTS IN EINEM BRAUCHBAREN ZOOMFAKTOR
  324.             var myStep = 2; // SPRUNGFAKTOR
  325.             if(myVal > 0){
  326.               myVal *= myStep;
  327.             } else {
  328.               myVal /= -myStep;
  329.             }
  330.             myDocElem.currentScale *= myVal; // DIREKTE ZUWEISUNG DES FAKTORS.
  331.           }
  332.           if(myDocElem.currentScale < myZoomConstraints[0]){ // HERAUSZOOMEN UNTER DIE AUSGANSANSICHT UNTERBINDEN.
  333.             myDoReset();
  334.             return;
  335.           } else if(myDocElem.currentScale > myZoomConstraints[1]) { // HINEINZOOMEN LIMITIEREN
  336.             myDocElem.currentScale = myZoomConstraints[1];
  337.           }
  338.           // ES FOLGEN NUN DIE KORREKTUREN DER LAGE. GEZOOMT WIRD JA RELATIV ZUM KOORDINATENURSPRUNG UND DAS IST BEI KARTEN SELTEN DIE BILDSCHIRMMITTE.
  339.           // DER viewport IST IMMER IN PIXEL DEFINIERT. ES MUSS ALSO DIES SO BERECHNET WERDEN, DASS SICH ALLE ÜBERGABEWERT IN DIESEM SYSTEM BEFINDEN.
  340.           myDocElem.currentTranslate.x = myViewport.myWidth / 2 - (myDocElem.currentScale / myOldScale) * (myViewport.myWidth / 2 - oldTranslate.x);
  341.           myDocElem.currentTranslate.y = myViewport.myHeight / 2 - (myDocElem.currentScale / myOldScale) * (myViewport.myHeight / 2 - oldTranslate.y);
  342.         }
  343.  
  344.  
  345.  
  346.  
  347.  
  348.         // AUSFÜHREN VON PAN-FUNKTIONEN ÜBER INTERFACE-ELEMENTE
  349.         function myDoPan(myX,myY){
  350.           // ES WIRD EINFACH DER AKTUELLE WERT GENOMMEN UND EIN FIXWERT ZUGESCHLAGEN. DA EINE TRANSLATION UNABHÄNGIG VOM KOORDINATENURSPRUNG IST,
  351.           // BRAUCHEN WIR UNS HIER UM DIESEN NICHT ZU KÜMMERN.
  352.           var myCurrTransl = myDocElem.currentTranslate;
  353.           myX *= myViewport.myWidth / 2;
  354.           myY *= myViewport.myHeight / 2;
  355.           // ZUWEISUNG UND DADURCH AUSFÜHRUNG. BEI GROSSEN DATEIEN UND WENN DER USER SCHNELL VIELE BEWEGUNGEN HINTEREINANDER AUSFÜHRT, KANN ES VORKOMMEN,
  356.           // DASS EINER DER BEIDEN BEWEGUNGEN "VERSCHLUCKT" WIRD. DER GRUND IST HIER MEISTENS EINE ZU LANGSAME GRAPHIKKARTE.
  357.           myCurrTransl.x += myX;
  358.           myCurrTransl.y += myY;
  359.         }
  360.  
  361.  
  362.  
  363.  
  364.  
  365.         function myDoReset(){ // ZURÜCKSETZEN IN DIE AUSGANGSANSICHT
  366.           // DIE WERTE SIND BEIM START IMMER 1,0,0. WENN MAN SIE ALSO ZURÜCKSETZT, ERHÄLT MAN DIE STARTANSICHT.
  367.           // DIESE METHODE IST NATÜRLICH NICHT ZULÄSSIG, WENN onload KORREKTUREN AN DIESEN WERTEN DURCHGEFÜHRT WURDEN.
  368.           myDocElem.currentScale = 1;
  369.           myDocElem.currentTranslate.x = 0;
  370.           myDocElem.currentTranslate.y = 0;
  371.         }
  372.  
  373.  
  374.  
  375.  
  376.  
  377.         // ERFASST ZOOM- UND PAN-ÄNDERUNGEN AM DOKUMENT.
  378.         var myOldScale; // SPEICHERT VORANGEHENDEN ZOOMLEVEL UM ZU WEITES HINEINZOOMEN RÜCKGÄNGIG MACHEN ZU KÖNNEN.
  379.         function myHandleZoomPan(evt){
  380.  
  381.           // ÜBERPRÜFT OB DER KARTENRAND ERREICHT IST UND KORRIGIERT GGF. DIE RICHTUNG. ADOBE SVG VIEWER 3.x-FEHLER SIE UNTEN.
  382.           // BEWEGT DEN INFOBLOCK UND NAVIGATIONSELEMENTE INVERS ZU DIESEN ÄNDERUNGEN
  383.           // PLATZIERT DAS RECHTECK IN DER ÜBERSICHTSKARTE PASSEND ZU DIESEN ÄNDERUNGEN
  384.  
  385.           // DER ADOBE SVG VIEWER 3.x LIEFERT EINE FALSCHE ANZAHL VON onzoom-EVENTS (DIE WEITERE onscroll-EVENTS AUSLÖSEN. DAHER WIRD DIESER
  386.           // VIEWER HIER IM GEGEBENEN FALL AUSGENOMMEN. SOMIT ERFOLGT KEINE RANDKORREKTUR BEI ADOBE SVG VIEWER 3.x, DAS IST ABER NUR RELEVANT
  387.           // BEIM ZOOM-OUT, UND EIGENWILLIGEN ZOOM-IN NACH DEM LADEN. DIE onscroll-KORREKTUREN WERDEN AUSGEFÜHRT UND SOMIT ERFOLGTR EINE KORREKTUR SOBALD
  388.           // DER ANWENDER EINE TRANSLATION AUSFÜHRT (EGAL WOMIT).
  389.           // GRUNDSÄTZLICH IST NUR DIE ZOOM-FUNKTION ÜBER DEN VIEWER MIT DIESEM FEHLER BEHAFTET. DAS HEISST ZOOM ÜBER DIE INTERFACE-ELEMENTE WÜRDE RICHTIG
  390.           // GEHANDHABT WERDEN. ABER DA WIR DIE ÄNDERUNGEN ÜBER DIE ZENTRALEN EVENT-HANDLER onscroll UND onzoom ERFASSEN, IST EINE UNTERSCHEIDUNG NUR SEHR
  391.           // SCHWIERIG ZU ERZIELEN. ES BESTÜNDE DIE MÖGLICHKEIT DIESEN ADOBE SVG VIEWER 3.x-FEHLER ZU ERKENNEN UND ZU UMGEHEN. DAFÜR WÄRE ABER DAS MITZÄHLEN
  392.           // DER EVENTS (OB SIE NUN VOM VIEWER ODER DEN INTERFACE-ELEMENTEN KOMMEN) UND DAS MITFÜHREN EINES TIMERS NÖTIG.
  393.  
  394.           if(myDocElem.currentScale < myZoomConstraints[0]){ // HERAUSZOOMEN UNTER DIE AUSGANSANSICHT UNTERBINDEN. EINZOOM-KONTROLLE UNTEN.
  395.             myDoReset();
  396.             return;
  397.           }
  398.        
  399.           var myASV3Stop = 'no';
  400.           try{
  401.             if(navigator.appName.match('Adobe') && parseInt(navigator.appVersion) <= 3 && evt.type == 'SVGZoom') {
  402.               myASV3Stop = 'stop';
  403.             }
  404.           }
  405.           catch(e){
  406.             myASV3Stop = 'no';
  407.           }
  408.  
  409.           if(myASV3Stop == 'no'){  // if-ABFRFAGE WEGEN  ADOBE SVG VIEWER 3.x.
  410.             // RANDKORREKUREN. UNTERSCHEIDUNG ZWISCHEN KARTE BREITER/HÖHER ALS VIEWPORT UND KLEINER.
  411.             // DIE HIER AUFGEFÜHRTEN FÄLLE UNTERSCHEIDEN ZWISCHEN DEN 4 SEITEN WO MAN DIE KARTE FÄLSCHLICHERWEISE VERLASSEN KÖNNE.
  412.             // ZUSÄTZLICH ERFOLGT EINE UNTERSCHEIDUNG OB DURCH DAS EINPASSEN DER viewBox im viewport RÄNDER BESTEHEN (WO EIN SPIEL ZUGELASSEN WERDEN MUSS
  413.             // UND DEM FALL WO DER ANWENDER HINREICHEND EINGEZOOMT IST.
  414.             // DIE BERECHNUNGEN ERFOLGEN ALLE ÜBER currentTranslate/Scale DA DIES DIE EINZIGEN GRÖSSEN SIND DIE MAN NICHT NUR AUSLESEN SONDERN AUCH SETZEN KANN.
  415.             // DIESE WERTE BEZIEHEN SICH AUF DEN ZUSTAND DER onload GEHERRSCHT HAT, DAHER SIND ALLE ANDEREN ÜBERABEWERTE IN PIXEL UND AUF DIESEN
  416.             // ZEITPUNKT BEZOGEN
  417.             if(myVB[2] * myScreenMatrix.a > myViewport.myWidth){ // WENN DIE AKUTELLE BREITE DER KARTE IN PIXEL GRÖSSER ALS DIE BREITE DES VIEWPORT IST
  418.               if(myDocElem.currentTranslate.x > -myRemainings[0] / 2 * myDocElem.currentScale){ // RAND RECHTS
  419.                 myDocElem.currentTranslate.x = -myRemainings[0] / 2 * myDocElem.currentScale;
  420.               } else if(myDocElem.currentTranslate.x < -myRemainings[0] / 2 * myDocElem.currentScale + myViewport.myWidth - myVB[2] * myScreenMatrix.a){ // RAND LINKS
  421.                 myDocElem.currentTranslate.x = -myRemainings[0] / 2 * myDocElem.currentScale + myViewport.myWidth - myVB[2] * myScreenMatrix.a;
  422.               }
  423.             } else { // KARTE KLEINER ALS VIEWPORTBREITE  (SPIEL IN DER VIEWPORTBREITE ZULASSEN).
  424.               if(myDocElem.currentTranslate.x < -myRemainings[0] / 2 * myDocElem.currentScale){ // RAND RECHTS
  425.                 myDocElem.currentTranslate.x =  -myRemainings[0] / 2 * myDocElem.currentScale;
  426.               } else if(myDocElem.currentTranslate.x > -myRemainings[0] / 2 * myDocElem.currentScale + myViewport.myWidth - myVB[2] * myScreenMatrix.a){ // RAND LINKS
  427.                 myDocElem.currentTranslate.x = -myRemainings[0] / 2 * myDocElem.currentScale + myViewport.myWidth - myVB[2] * myScreenMatrix.a;
  428.               }
  429.             }
  430.             // ES KANN ÜBER EINE ECKE GLEICHZEITIG AUCH IN DIE ANDERE RICHTUNG DAS KARTENFELD VERLASSEN WERDEN.
  431.             if(myVB[3] * myScreenMatrix.d > myViewport.myHeight){ // WENN DIE AKUTELLE HÖHE DER KARTE IN PIXEL GRÖSSER ALS DIE HÖHE DES VIEWPORT IST
  432.               if(myDocElem.currentTranslate.y > -myRemainings[1] / 2 * myDocElem.currentScale){ // RAND OBEN
  433.                 myDocElem.currentTranslate.y = -myRemainings[1] / 2 * myDocElem.currentScale;
  434.               } else if(myDocElem.currentTranslate.y < -myRemainings[1] / 2 * myDocElem.currentScale + myViewport.myHeight - myVB[3] * myScreenMatrix.d){ // RAND UNTEN
  435.                 myDocElem.currentTranslate.y = -myRemainings[1] / 2 * myDocElem.currentScale + myViewport.myHeight - myVB[3] * myScreenMatrix.d;
  436.               }
  437.             } else { // KARTE KLEINER ALS VIEWPORTHÖHE (SPIEL IN DER VIEWPORTHÖHE ZULASSEN).
  438.               if(myDocElem.currentTranslate.y < -myRemainings[1] / 2 * myDocElem.currentScale){ // RAND OBEN
  439.                 myDocElem.currentTranslate.y = -myRemainings[1] / 2 * myDocElem.currentScale;
  440.               } else if(myDocElem.currentTranslate.y > -myRemainings[1] / 2 * myDocElem.currentScale + myViewport.myHeight - myVB[3] * myScreenMatrix.d){ // RAND UNTEN
  441.                 myDocElem.currentTranslate.y = -myRemainings[1] / 2 * myDocElem.currentScale + myViewport.myHeight - myVB[3] * myScreenMatrix.d;
  442.               }
  443.             }
  444.            
  445.             // ZU WEITES ZOOM-IN BEGRENZEN. ES MUSS DABEI AUCH DIE TRANSLATION RÜCKGÄNGIG GEMACHT WERDEN.
  446.             if(myDocElem.currentScale > myZoomConstraints[1]) { // HINEINZOOMEN LIMITIEREN. NICHT ZULÄSSIG FÜR ADOBE SVG VIEWER 3.x
  447.               myDocElem.currentTranslate.x /= myDocElem.currentScale / myOldScale; // DIVIDIERUNG DURCH DEN ZOOMUNTERSCHIED.
  448.               myDocElem.currentTranslate.y /= myDocElem.currentScale / myOldScale;
  449.               myDocElem.currentScale = myZoomConstraints[1];
  450.             }
  451.            
  452.           } // if-ABFRFAGE WEGEN  ADOBE SVG VIEWER 3.x.
  453.  
  454.  
  455.           // DA currentTranslate/Scale BEI DEN RAHMENKORREKTUREN GEÄNDERT WURDE, MUSS WIEDER myScreenMartix GECHECKT WERDEN, SONST IST DAS FOLGENDE
  456.           // NACHFÜHREN VON INTERFACE-ELEMENTEN FALSCH. DIES WIRD NICHT FÜR ALLE VIEWER BENÖTIGT
  457.           // ANFANG (NUR FÜR ASV3 UND FF1.5.). NORMALERWEISE WIRD .getScreenCTM() AUTOMATISCH MITGEFÜHRT. DIESE ZUSÄTZLICHE ABFRAGE VERLANGSAMT NATÜRLICH ZOOM UND PAN.
  458.           try {
  459.             myScreenMatrix = document.getElementById('myMap').getScreenCTM();
  460.           }
  461.           catch(e){ // getScreenCTM() FÜR ASV3
  462.             myScreenMatrix = myGetScreenCTM(document.getElementById('myMap'));
  463.           }
  464.           // ENDE (NUR FÜR ASV3 UND FF1.5.)
  465.           myUpdateDisplays(); // ZEIGT PARAMTER AN
  466.  
  467.           // BERECHNUNG DES RECHTECKS IN DER ÜBERSICHTSKARTE. ES WIRD DER AKTUELLE AUSSCHNITT DES BILDSCHIMRKOORDINATENSYSTEMS IN DAS
  468.           // KARTENKOORDINATENSYSTEM TRANSFORMIERT.
  469.           var mySvgPtUL = myDocElem.createSVGPoint(); // TRANSFORMIERE DEN ECKPUNKT LINKS OBEN
  470.           mySvgPtUL.x = 0;
  471.           mySvgPtUL.y = 0;
  472.           mySvgPtUL = mySvgPtUL.matrixTransform(myScreenMatrix.inverse()); // TRANSFORMATION
  473.           var mySvgPtBR = myDocElem.createSVGPoint(); // TRANSFORMIERE DEN ECKPUNKT RECHTS UNTEN
  474.           mySvgPtBR.x = myViewport.myWidth;
  475.           mySvgPtBR.y = myViewport.myHeight;
  476.           mySvgPtBR = mySvgPtBR.matrixTransform(myScreenMatrix.inverse()); // TRANSFORMATION
  477.  
  478.           var myRectObj = document.getElementById('myOverviewRect'); // DEM OBJEKT ZU WEISEN
  479.            myRectObj.setAttributeNS(null, 'x', mySvgPtUL.x); // SETZEN DER WERTE
  480.           myRectObj.setAttributeNS(null, 'y',  mySvgPtUL.y);
  481.           myRectObj.setAttributeNS(null, 'width', mySvgPtBR.x - mySvgPtUL.x);
  482.           myRectObj.setAttributeNS(null, 'height', mySvgPtBR.y - mySvgPtUL.y);
  483.          
  484.           // WIRD DAS RECHTECK ZU KLEIN, MACHT ES SINN ES MIT EINER GRÖSSEREN GEOMETRIE ZU HINTERLEGEN DAMIT ES FÜR DEN ANWENDER ANFASSBAR BELEIBT
  485.           var myOverviewRectCirc = document.getElementById('myOverviewRectCirc');
  486.           if(mySvgPtBR.x - mySvgPtUL.x < 15000 || mySvgPtBR.y - mySvgPtUL.y < 15000){ // WERTE SETZEN WENN EINE DIMENSION KLEINER ALS 15000.
  487.             var myOverviewRectCirc = document.getElementById('myOverviewRectCirc');
  488.             myOverviewRectCirc.setAttributeNS(null,'cx',mySvgPtUL.x + (mySvgPtBR.x - mySvgPtUL.x)/2);
  489.             myOverviewRectCirc.setAttributeNS(null,'cy',mySvgPtUL.y + (mySvgPtBR.y - mySvgPtUL.y)/2);
  490.             myOverviewRectCirc.setAttributeNS(null,'r',28000);
  491.           } else {
  492.             myOverviewRectCirc.setAttributeNS(null,'r',0); // ANDERENFALLS UNSICHTBAR MACHEN DURCH RADIUS NULL.
  493.           }
  494.  
  495.           // GRUPPEN KÖNNEN MIT transform EINFACH RÜCKTRANSFORMIERT WERDEN
  496.           var myCurrTransl = myDocElem.currentTranslate; // BEREITS VERÄNDERTER TRANSLATIONSFAKTOR
  497.           var myTransform = 'scale(' + 1 / myDocElem.currentScale + ') ' + 'translate(' + (-myCurrTransl.x) + ', ' + (-myCurrTransl.y) + ')'; // RÜCKTRANSFORMIERUNG
  498.           document.getElementById('myFlyOutBorders').setAttributeNS(null, 'transform', myTransform);
  499.          
  500.           // SVG ELEMENTE MÜSSEN ÜBER x,y,width,height RÜCKTRANSFORMIERT WERDEN
  501.           var myInfoBlock = myBlocks['myInfoBlock'].myObj;
  502.           myInfoBlock.setAttributeNS(null, 'x', (myBlocks['myInfoBlock'].myX - myCurrTransl.x) / myDocElem.currentScale);
  503.           myInfoBlock.setAttributeNS(null, 'y', (myBlocks['myInfoBlock'].myY - myCurrTransl.y) / myDocElem.currentScale);
  504.           myInfoBlock.setAttributeNS(null, 'width', myBlocks['myInfoBlock'].myWidth / myDocElem.currentScale);
  505.           myInfoBlock.setAttributeNS(null, 'height', myBlocks['myInfoBlock'].myHeight / myDocElem.currentScale);
  506.  
  507.           if(myOldScale != myDocElem.currentScale){
  508.  
  509.             // SETZEN DES SLIDERS ABHÄNGIG VOM ZOOMFAKTOR.
  510.             // DA DER SLIDER U.U. VOM ANWENDER BEREITS GESETZT WURDE, KÖNNEN KLEINE SPRÜNGE BEIM SLIDER ZU BEOBACHTEN SEIN. HIER HANDELT ES SICH UM RUNDUNSFEHLER.
  511.             // WENN INTEFACE-ELEMENTE GLEICHZEITIG ANZEIGE UND BEDIENUNG SIND, KÖNNEN DIESE FEHLER DIE KAUM VERMIEDEN WERDEN.      
  512.             // UMRECHNUNG VOM ZOOMFAKTOR (ZWISCHEN myZoomConstraints[0] UND myZoomConstraints[1] IN DEN RAUM DES SLIEDERS (ZW. mySliderConstraints[0] UND  mySliderConstraints[1])
  513.             var mySliderTranslate = mySliderConstraints[1] - (myDocElem.currentScale - 1) * mySliderConstraints[1] / (myZoomConstraints[1] - 1);
  514.             if(mySliderTranslate < mySliderConstraints[0]){ // VERMEIDEN, DASS DER SLIDER ZU WEIT VERSETZT WIRD. SOLLTE NICHT PASSIEREN WENN DIE ZOOM-KONTROLLE GREIFT.
  515.               mySliderTranslate = mySliderConstraints[0];
  516.             } else if(mySliderTranslate > mySliderConstraints[1]){
  517.               mySliderTranslate = mySliderConstraints[2];
  518.             }
  519.             document.getElementById('mySlider').setAttributeNS(null, 'transform', 'translate(0,'+ mySliderTranslate +')');
  520.            
  521.             // SETZEN DER DYNAMISCHEN GRAPHISCHEN MASSSTABSLEISTE.
  522.             // DIE BERECHNUNG ERFOLGT ÜBER DIE GANZZAHL DER HÄLFTE DER BILDSCHIRMBREITE IN KARTENKOORDINATEN. ANSCHLIESSEND UMRECHUNG IN BILDSCHIRMKOORDINATEN
  523.             // DER WERT IST FÜR FIREFOX 1.5b2 BEIM LADEN FALSCH.
  524.             var myHalfViewportInMapCoords = parseInt((mySvgPtBR.x - mySvgPtUL.x) / 2); // DIE HÄLFTE DER BILDSCHIRMBREITE IN KARTENKOORDINATEN.
  525.             var myScaleDivisor = Math.pow(10, String(myHalfViewportInMapCoords).length - 1); // ANZAHL ZIFFERN
  526.              var myScaleInt = parseInt(myHalfViewportInMapCoords / myScaleDivisor); // ERSTE ZIFFER
  527.              var myScaleBarWidth = myScaleInt * myScaleDivisor; // WERT
  528.             document.getElementById('myDynScalebar').setAttributeNS(null,'width', myScaleBarWidth * myScreenMatrix.a);
  529.             document.getElementById('myDynScalebarText').setAttributeNS(null,'x', myBlocks['myDynScalebar'].myX +  myScaleBarWidth * myScreenMatrix.a / 2);
  530.             document.getElementById('myDynScalebarText').firstChild.data = myScaleInt * myScaleDivisor/ 1000 + ' km';
  531.  
  532.             myHandleLayers();
  533.           }
  534.  
  535.           myOldScale = myDocElem.currentScale;
  536.  
  537.  
  538.         } // ENDE myHandleZoomPan().
  539.  
  540.  
  541.  
  542.  
  543.  
  544.         // LÖSCHEN DES INHALTS EINER GRUPPE
  545.         function myClearElem(myElem2Clear){
  546.           myElem2Clear = document.getElementById(myElem2Clear);
  547.           while(myElem2Clear.childNodes.length > 0){
  548.             myElem2Clear.removeChild(myElem2Clear.firstChild);
  549.           }
  550.         }
  551.  
  552.  
  553.  
  554.  
  555.         // LADEN WENN SICHTBARKEIT NÖTIG, SONST AUS DEM DOM LÖSCHEN
  556.         // WERTE VON myLayerArr[i][4]: 0: NICHT GELADEN, 1: GELADEN (SICHTBAR)
  557.         function myHandleLayers(){
  558.           var myZoomLevel = myDocElem.currentScale;
  559.           for(var i=0; i<myLayerArr.length; i++){ // DURCHLAUFEN ALLER MÖGLICHEN LAYER
  560.      
  561.             if(myZoomLevel >= myLayerArr[i][2] && myZoomLevel < myLayerArr[i][3]){ // WENN ZOOMSTUFFE MIT SICHTBARKEIT
  562.               if(!document.getElementById(myLayerArr[i][1]).firstChild){ // WENN NOCH KEINE DATEN DA
  563.                 myAddXML(myLayerArr[i][0],myLayerArr[i][1],'UTF-8'); // NACHLADEN (WIRD SICHTBAR
  564.               }
  565.               myLayerArr[i][4] = 1;
  566.             } else {
  567.               myLayerArr[i][4] = 0;
  568.               myClearElem(myLayerArr[i][1]); // LÖSCHEN (UNSICHTBAR)
  569.             }
  570.             document.getElementById(myLayerArr[i][1].replace(/^my/,'myShow')).firstChild.data = myLayerArr[i][4] + ' - '+ myLayerArr[i][1]; // LADE-ANZEIGE
  571.           }
  572.         }
  573.  
  574.  
  575.  
  576.  
  577.  
  578.         // EINDIMENSIONALE BEWEGUNG DES SLIDERS DURCH DEN ANWENDER
  579.         // DIE FUNKTIONSWEISE IST ANALOG ZU JENER IN myDrag() AUFGEBAUT, JEDOCH KOMMT NUR DIE VERTIKALE DIMENSION ZUR ANWENDUNG UND DIE UMSETZUNG ERFOLGT NICHT
  580.         // DURCH EINWRIKUNG AUF KOORDINATEN SONDERN ÜBER transform.
  581.         var mySliderDragLock = null; // GLOBALE VARIABLE UM ZU VERFOLGEN OB DIE BEWEGUNG GERADE AKTIV IST. AUCH HERANGEZOGEN UM DIE ANFANGSWERTE ZWISCHENZUSPEICHERN.
  582.         var myOvRectNow = []; // GLOBALE VARIABLE ZUM DURCHREICHEN DER WERTE ZWISCHEN DEN EVENTS.
  583.         function mySliderDrag(evt){
  584.  
  585.           if(evt.type == 'mousedown'){
  586.  
  587.  
  588.             // ERFASSUNG DER PARAMETER DES RECHTECKS IN DER ÜBERSICHTSKARTE
  589.             var myRectObj = document.getElementById('myOverviewRect');
  590.              myOvRectNow[0] = myRectObj.getAttributeNS(null, 'x');
  591.             myOvRectNow[1] = myRectObj.getAttributeNS(null, 'y');
  592.             myOvRectNow[2] = myRectObj.getAttributeNS(null, 'width');
  593.             myOvRectNow[3] = myRectObj.getAttributeNS(null, 'height');
  594.  
  595.             // SPEICHERT ZUSÄTZLICH DIE TRANSLATION AM SLIDER DAMIT DIESER WERT BEIM LOSLASSEN DER MAUS NICHT AUS DEM DOM ABGEFRAGT WERDEN MUSS.
  596.             myOvRectNow[4] = 0;
  597.  
  598.             // ERFASSEN DER AKTUELLEN POSITION DES GREIFERS (IST TATSÄCHLICH EINE GRUPPE AUS ZWEI RECHTECKEN).
  599.             // ES WIRD DIE VERTIKALE TRANSLATION ABGEFRAGT. DAFÜR MUSS IM SVG-CODE DORT DIESE GESETZT SEIN, AUCH WENN DER WERT NULL IST.  
  600.             // BERECHNUNG DER DIFFERENZ UND SPEICHERUNG UNTER myDragLock. DURCH DIESE METHODE IST ES IRRELEVANT WO DER ANWENDER DAS RECHTECK ANFASST.
  601.             var myRectNow = parseInt(document.getElementById('mySlider').getAttributeNS(null,'transform').split(',')[1]);
  602.             mySliderDragLock = evt.clientY - myRectNow;
  603.  
  604.           } else if(evt.type == 'mousemove'){
  605.             if(mySliderDragLock){ // MACHE ÄNDERUNGEN NUR WENN SIE AUCH INITIERT WORDEN SIND
  606.  
  607.               // ZUWEISUNG DER BEWEGTEN DIFFERENZ, DAS RECHTECK DES SLIDERS WIR SOFORT UNTER DER MAUS BEWEGT
  608.               myOvRectNow[4] = evt.clientY - mySliderDragLock; // BERCHNUNG DER DIFFERENZ
  609.  
  610.               // ÜBERPRÜFEN, OB DIE BEWEGUNG IM BEREICH DER "FÜHRUNG" BLEIBT
  611.               if(myOvRectNow[4] >= mySliderConstraints[0] && myOvRectNow[4] <= mySliderConstraints[1]){
  612.              
  613.                 // DEN SLIDER WEITERFÜHREN DURCH SETZTEN NEUER TRANSLATIONSWERTE
  614.                 document.getElementById('mySlider').setAttributeNS(null, 'transform', 'translate(0,'+ myOvRectNow[4] +')');
  615.  
  616.                 // BEHANDLUNG DES RECHTECKS IN DER ÜBERSICHTSKARTE
  617.                 // DAS RECHTECK WIRD AN ORT UND STELLE VERÄNDERT, DAS ECHTE ZOOMEN DER HAUPTKARTE ERFOLGT ABER ERST WENN MAN DIE MAUS LOSLÄSST.
  618.                 // NORMALERWEISE WIRD DAS RECHTECK IN DER ÜBERSICHTSKARTE NACH DEM ÄNDERN VON ZOOM/PAN GESETZT. DA HIER DER SPIESS UMGEDREHT WIRD,
  619.                 // MÜSSEN DIE WERTE FÜR x,y,width UND height ETWAS UMSTÄNDLICH BERECHNET WERDEN. SOLCHES "GEGEN DEN FLUSS" SCHIMMEN SOLLTE MAN BEI
  620.                 // DER INTERFACE-PROGRAMMIERUNG VERMEIDEN.
  621.                
  622.                 // ÜBERSETZUNG VON SLIDERWERTEN AUF ZOOMWERT
  623.                 var myZoom = (mySliderConstraints[1] - myOvRectNow[4]) * myZoomConstraints[1] / mySliderConstraints[1] + 1;
  624.  
  625.                 var myRectObj = document.getElementById('myOverviewRect');
  626.  
  627.                 // BERECHNUNG DER BREITE DER BOX IN DER JEWEILIGEN ZOOMSTUFFE
  628.                 var myExpectedWidth = myViewport.myWidth / myScreenMatrix.a * (myDocElem.currentScale / myZoom);
  629.                 var myExpectedHeight = myViewport.myHeight / myScreenMatrix.d * (myDocElem.currentScale / myZoom);
  630.  
  631.                 // SETZEN DER WERTE FÜR DAS RECHTECK. MAN HÄTTE AUCH x UND y MITTELS MATRIXOPERATION BERECHNEN KÖNNEN, WIR NEHMEN HIER DIE ANFANGSWERT DIE
  632.                 // onmousedown GESPEICHERT WURDEN.
  633.                  myRectObj.setAttributeNS(null, 'x', myOvRectNow[0] - (myExpectedWidth - myOvRectNow[2]) / 2);
  634.                 myRectObj.setAttributeNS(null, 'y', myOvRectNow[1] - (myExpectedHeight - myOvRectNow[3]) / 2);
  635.                 myRectObj.setAttributeNS(null, 'width', myExpectedWidth);
  636.                 myRectObj.setAttributeNS(null, 'height', myExpectedHeight);
  637.  
  638.               }
  639.  
  640.             }
  641.           } else if(evt.type == 'mouseup' || evt.type == 'mouseout'){
  642.             if(mySliderDragLock){ // MACHE ÄNDERUNGEN NUR WENN SIE AUCH INITIERT WORDEN SIND
  643.            
  644.               // DIE BEWEGUNG DES SLIDERS WURDE MIT evt.clientY BERECHNET, ABER RÄUMICH BEGRENZT. WENN DIE MAUS AUSGELASSEN WIRD, ERFOLGT DIE
  645.               // ÜBERMITTLUNG WIEDER ÜBER evt.clientY. DAHER MUSS HIER GGF. WIEDER DER "RÄUMLICHE" RAHMEN BEGRENZT WERDEN, DAMIT DER WERT NICHT
  646.               // ÜBER DIE MAXIMA HINAUSGEHT.
  647.               if(myOvRectNow[4] <= mySliderConstraints[0]){
  648.                 myOvRectNow[4] = mySliderConstraints[0];
  649.               }  else if(myOvRectNow[4] >= mySliderConstraints[1]){
  650.                 myOvRectNow[4] = mySliderConstraints[1];
  651.               }
  652.                // UMSETZUNG VON mySliderConstraints[0] BIS mySliderConstraints[1] AUF myZoomConstraints[1] BIS myZoomConstraints[1]
  653.               var myZoom = (mySliderConstraints[1] - myOvRectNow[4]) * (myZoomConstraints[1] -1)/ mySliderConstraints[1] +1;
  654.              
  655.               // ZOOM IN DER HAUPTKARTE AUSFÜHREN.
  656.               myDoZoom(myZoom,true);
  657.             }
  658.             mySliderDragLock = null; // BEWEGUNGEN WIEDER FREIGEBEN.
  659.           }
  660.         }
  661.  
  662.  
  663.  
  664.  
  665.  
  666.  
  667.  
  668.         // BEWEGUNG DES RECHTECKS ÜBER DER ÜBERSICHTSKARTE DURCH DEN ANWENDER UND SETZEN DES NEUEN AUSSCHNITTS.
  669.         var myDragLock = null; // GLOBALE VARIABLE UM ZU VERFOLGEN OB DIE BEWEGUNG GERADE AKTIV IST. WIRD AUCH HERANGEZOGEN UM DIE ANFANGSWERTE ZWISCHENZUSPEICHERN
  670.         function myDrag(evt){
  671.  
  672.           if(evt.type == 'mousedown'){
  673.  
  674.             // BERECHNUNG IN PIXEL
  675.             // ZWISCHENSPEICHERUNG DER ANFANGSWERTE. MIT DEN ERSTEN BEIDEN WIRD UNTEN DIFFERENZ ZUM OBEREN LINKEN ECKPUNKT DES RECHTECKS UND SPÄTER
  676.             // DER ERFOLGTE WEG BERECHNET. DIE MULTIPLIKATION MAL 1000 ERGIBT SICH AUS DEM UMSTAND, DASS DAS VESCHACHTELTE SVG GENAU 1000 MAL KLEINER
  677.             // IST ALS DIE URSPRÜNGLICHE viewBox. WENN DIES NICHT DER FALL IST, MUSS MAN DIESEN WERT FOLGENDERMASSEN BERECHNEN:
  678.             // FAKTOR =  parseFloat(document.getElementById('myOverviewMap').getAttributeNS(null,'viewBox').split(' ')[2])/document.getElementById('myOverviewMap').getAttributeNS(null,'width')
  679.             // ACHTUNG, AUCH HIER WIRD VORAUSSGESETZT, DASS DIE PROPORTIONEN DES SVG-ELEMENTS MIT DER ÜBERSICHTSKARTE ZWISCHEN INHALT, viewBox UND width/height
  680.             // PASSEN UND DASS preserveAspectRatio MIT DEM DEFAULT-WERT BELEGT IST.
  681.             // DIE LETZTEN BEIDEN WERTE SPEICHERN EBENFALLS DEN ANFANGSWERT IM BILDSCHIRMKOORDINATENSYTSTEM, DIESER WIRD onmouseup ZUM BERECHNEN
  682.             // VON myCurrTransl.x/y DER HAUPTKARTE GEBRAUCHT.
  683.             myDragLock = [evt.clientX * 1000, evt.clientY * 1000, evt.clientX, evt.clientY];
  684.  
  685.             var myRectNow = []; // ERFASSEN DER AKTUELLEN POSITION DES RECHTECKS.
  686.             var myRect = document.getElementById('myOverviewRect');
  687.             myRectNow[0] = myRect.getAttributeNS(null,'x');
  688.             myRectNow[1] = myRect.getAttributeNS(null,'y');
  689.             // BERECHNUNG DER DIFFERENZ UND SPEICHERUNG UNTER myDragLock. DURCH DIESE METHODE IST ES IRRELEVANT WO DER ANWENDER DAS RECHTECK ANFASST.
  690.             myDragLock[0] -= myRectNow[0];
  691.             myDragLock[1] -= myRectNow[1];
  692.  
  693.           } else if(evt.type == 'mousemove'){
  694.  
  695.             if(myDragLock){ // MACHE ÄNDERUNGEN NUR WENN SIE AUCH INITIERT WORDEN SIND
  696.               // ZUWEISUNG DER BEWEGTEN DIFFERENZ, WIEDER MIT 1000er-SKALIERUNSGFAKTOR. DAS RECHTECK WIR SOFORT UNTER DER MAUS BEWEGT
  697.               var myRect = document.getElementById('myOverviewRect');
  698.               myRect.setAttributeNS(null, 'x', evt.clientX * 1000 - myDragLock[0]);
  699.               myRect.setAttributeNS(null, 'y', evt.clientY * 1000 - myDragLock[1]);
  700.               // FÜHRE AUCH DEN HINTERGELEGTEN KREIS MIT
  701.               var myRectCirc = document.getElementById('myOverviewRectCirc');
  702.               myRectCirc.setAttributeNS(null, 'cx', evt.clientX * 1000 - myDragLock[0] + myRect.getAttributeNS(null,'width') / 2);
  703.               myRectCirc.setAttributeNS(null, 'cy', evt.clientY * 1000 - myDragLock[1] + myRect.getAttributeNS(null,'height') / 2);
  704.             }
  705.  
  706.           } else if(evt.type == 'mouseup' || evt.type == 'mouseout'){
  707.             if(myDragLock){ // MACHE ÄNDERUNGEN NUR WENN SIE AUCH INITIERT WORDEN SIND
  708.  
  709.               // DIE ZUWEISUNG MUSS ÜBER currentTranslate/Scale ERFOLGEN.
  710.               var myCurrTransl = myDocElem.currentTranslate;
  711.  
  712.               // ES WIRD DIE REALE DISTANZ IN PIXEL HERANGEZOGEN (DER AUSGANGS WERT LIEGT IN myDragLock[2] UND myDragLock[3]).
  713.               // DIESER WERT MUSS MIT DER SKALIERUNG DER AKTUELLEN TRANSFORMATIONSMATRIX MULTIPLIZIERT WERDEN.
  714.               // DA UNSERE ÜBERSICHTSKARTE 1000 MAL KLEINER DEFINIERT IST, MUSS DIESER FAKTOR HIER AUCH AUFGESCHLAGEN WERDEN.
  715.               // DAS RESULTAT WIRD DANN DEM AKTUELLEN WERT VON currentTranslate ABGEZOGEN.
  716.               myCurrTransl.x -=  (evt.clientX - myDragLock[2]) * myScreenMatrix.a * 1000;  
  717.               myCurrTransl.y -=  (evt.clientY - myDragLock[3]) * myScreenMatrix.d * 1000;
  718.  
  719.             }
  720.             myDragLock = null; // BEWEGUNGEN WIEDER FREIGEBEN.
  721.           }
  722.         }
  723.  
  724.         // ANSZEIGE VON PARAMETERN DES SVGS.
  725.         function myUpdateDisplays(){
  726.            document.getElementById('myCurrScale').firstChild.data = 'currScal: ' + myDocElem.currentScale;
  727.         }
  728.  
  729.  
  730.  
  731.  
  732.  
  733.         // DIESE FUNKTION ERSETZT DAS NICHT VERFÜGBARE getScreenCTM() FÜR DEN ADOBE SVG VIEWER 3.x.
  734.         // ES WERDEN MÖGLICHST ALLE MÖGLICHKEITEN BERÜCKSICHTIGT, DAHER DIESE LANGEN if-ABFRAGEN.
  735.         function myGetScreenCTM(doc){ // HANDLES getScreenCTM() FOR ASV3
  736.           // THIS FUNCTION IS BASED ON THE WORK BY HOLGER WILL https://groups.yahoo.com/group/svg-developers/message/50789.
  737.           var de = document.documentElement;
  738.           var sCTM = de.createSVGMatrix();
  739.           var tr = de.createSVGMatrix();
  740.           var par = null;
  741.           if(doc.hasAttributeNS(null,'preserveAspectRatio')){
  742.             par = doc.getAttributeNS(null,'preserveAspectRatio');
  743.           }
  744.           if (par == null || par == ''){
  745.             par='xMidYMid meet'; // setting to default value
  746.           }
  747.           var parX = par.substring(0,4); // xMin;xMid;xMax
  748.           var parY = par.substring(4,8); // YMin;YMid;YMax
  749.           var ma = par.split(' ');
  750.           var mos = ma[1]; // meet;slice
  751.           // set dimensions of the viewport
  752.           sCTM.a = 1;
  753.           sCTM.d = 1;
  754.           sCTM.e = 0;
  755.           sCTM.f = 0;
  756.           // ## Batik doesn't know about innerWidth/innerHeight!
  757.           var w = null;
  758.           if(doc.hasAttributeNS(null,'width')){
  759.             w = doc.getAttributeNS(null,'width');
  760.           }
  761.           if (w == null || w == '' || w.match(/%$/)){
  762.             w  =  innerWidth;
  763.           }
  764.           var h = null
  765.           if(doc.hasAttributeNS(null,'height')){
  766.             h = doc.getAttributeNS(null,'height');
  767.           }
  768.           if (h == null || h == '' || h.match(/%$/)){
  769.             h = innerHeight;
  770.           }
  771.           var vba = null;
  772.           if(doc.hasAttributeNS(null,'viewBox')){
  773.             vba = doc.getAttributeNS(null,'viewBox');
  774.           }
  775.           if(vba == null || vba == ''){
  776.             vba = '0 0 ' + w + ' ' + h;
  777.           }
  778.           var vb = vba.split(' '); // get the viewBox into an array
  779.           // create a matrix with current user transformation
  780.           tr.a = de.currentScale;
  781.           tr.d = de.currentScale;
  782.           tr.e = de.currentTranslate.x;
  783.           tr.f = de.currentTranslate.y;
  784.           //scale factors
  785.           var sx = w / vb[2];
  786.           var sy = h / vb[3];
  787.           // preserveAspectRatio='none'
  788.           if (par == 'none'){
  789.             sCTM.a = sx; // scaleX
  790.             sCTM.d = sy; // scaleY
  791.             sCTM.e = -vb[0] * sx; // translateX
  792.             sCTM.f = -vb[0] * sy; // translateY
  793.             sCTM = tr.multiply(sCTM) ; // taking user transformations into acount
  794.             return sCTM;
  795.           }
  796.           //meetOrSlice
  797.           var s = null;
  798.           if(mos == 'slice'){
  799.             s = (sx > sy ? sx : sy)
  800.           } else {
  801.             s = (sx < sy ? sx : sy)
  802.           }
  803.           sCTM.a = s; // scaleX
  804.           sCTM.d = s; // scaleY
  805.           switch(parX){
  806.             case 'xMid':
  807.             sCTM.e = ((w - vb[2]* s) / 2) - vb[0]*s; // translateX
  808.             break;
  809.             case 'xMin':
  810.             sCTM.e = -vb[0] * s; //translateX
  811.             break;
  812.             case 'xMax':
  813.             sCTM.e = (w - vb[2] * s) - vb[0] * s; // translateX
  814.             break;
  815.           }
  816.           switch(parY){
  817.             case 'YMid':
  818.             sCTM.f = ( h - vb[3] * s) / 2 - vb[1] * s; // translateY
  819.             break;
  820.             case 'YMin':
  821.             sCTM.f = -vb[1] * s; //translateY
  822.             break;
  823.             case 'YMax':
  824.             sCTM.f = ( h - vb[3] * s) - vb[1] * s; // translateY
  825.             break;
  826.           }
  827.           sCTM = tr.multiply(sCTM); //taking user transformations into acount
  828.           return sCTM
  829.         } // ENDE VON getScreenCTM() FÜR ASV3
  830.  
  831.  
  832.       ]]>
  833.     </script>
  834.   </defs>
  835.  
  836.   <!-- DIESER RAHMEN ENTSPRICHT DEN ANGABEN IN DES BEREIHTS DER HAUPTKARE -->
  837.   <rect x="0" y="0" width="100%" height="100%" fill="orange" />
  838.  
  839.   <!-- HAUPTKARTE ALS VERSCHACHTELTES SVG-ELEMENT, ABER SO PLATZIERT, DASS ES SICH VERHÄLT, ALS WÄRE ES DAS WURZELELEMENT -->
  840.   <svg id="myMap" width="100%" height="100%" viewBox="437000 -4788000 146000 226000">
  841.     <image id="myTerrain" xlink:href="92321.jpg" x="447111.7" y="-4769218.4" width="108147.8" height="202257"/>
  842.    
  843.     <path id="mySea" fill="lightblue" fill-rule="evenodd" d="M440000 -4785000 h 140000 v 220000 h-140000 z M485402.1 -4618513.3l-284 -196.7l-478.6 138.8l-640.9 -264.4l-322.1 312.7l-407.7 -66.6l-349.4 237.2l-191.6 462.5l-702.5 321.8l-130 -124l263.3 -641.8l-161 -351.9l-713.7 -135.7l-233.3 -197.6l-32.9 -304.2l297.5 -556.6l721.2 -1349.2l-264.9 -451.3l-718.2 -313.2l-2186.8 840.5l-871.2 681.8l-1441.7 187.3l-551.5 267.5l-458.4 -65.5l-234.5 -248.6l-216.4 -1570.8l-284.6 -221.7l-2593.6 -217.6l-175.3 200.1l-302.7 -35.9l286.7 -657.9l249.2 -244.7l1138.7 -129.1l290.9 475.9l469.9 -494.2l380.3 -9.2l744.5 -678.8l782.4 -171l260.7 -510.8l199.2 -390.3l1016.4 -964.9l139 -537l-460.3 -141.6l-70.1 -786.3l-535.2 -89l-182.5 -198.8l37.6 -534.8l-287.8 -349.1l351.3 -161.1l510.9 140.2l675.8 645.1l514.3 -749.8l749.5 -475.5l314.6 -617.9l303 -58l311.9 297.8l303.7 -33l377.5 -1152.7l918.3 -835.7l216.3 -488.2l-129.2 -22.8l-890.2 -156.1l-437.4 -243.9l-192.6 -605.3l-758.9 94.4l-106.5 -200.6l168.7 -359.9l2276.2 -308.9l323.4 -262.2l183.4 -792.4l-316.6 -1517.9l-154.7 -97.8l193.5 -386.2l-421.5 -625.4l998.7 -659.5l605.6 -141.7l197.9 -207.9l63.5 -510.2l-275 -857.5l-307.8 -486.5l-326 -515.4l-936.8 -943.5l-437.5 -243.8l-1240.9 105.9l-698.6 -542.5l-658.8 41.2l-165.6 487l143.8 683.2l-119.9 282.6l-785.6 44.2l-567 674.6l-2109.4 -127.4l-759 94.7l-573.2 420.6l-429.9 61.1l-1481.3 -395l-688.2 -112.1l-1265 157.4l-928.3 429.3l-666.5 753.1l-486.3 -166.1l443.4 -659.6l95.1 -141.5l-173 -834.7l87.7 -561.6l416.7 -594.9l323 -1304.4l-341.7 -474.6l-713.2 -109.9l-330.2 -1034.5l-560.5 -88.2l90.1 -460.4l-136.2 -377.6l-438.1 -268.5l119.3 -308.6l708.3 -93.7l374.2 -262.6l1845.1 -298.9l468.5 471.7l965.1 27.3l627.5 -733.6l740.4 -392.7l364 -669.1l111.2 -638.3l-114.7 -531.6l-708.8 68l-408.8 -1133.8l78.1 -266.1l132.6 -451.4l2890.7 -2154.6l1849 -145.6l597.4 -472l362.2 -746l939.1 3.4l169.4 -334.9l16.3 -1398.5l-242.1 -553.9l-541.4 -343.1l-1116.6 1.5l-564 -1257.7l-700.6 -618.3l-269.3 -629.5l210.7 -717.2l-248.7 -1850.1l-341.7 -475.6l-327.2 109.8l-814.5 934.7l-991.1 -52.1l-368.5 492l-357.6 -92.9l-704.5 -1185l-226.6 -547.7l-284.8 -221.4l-534.5 -64.1l-493.3 -445.2l-627.2 294.6l-1399.3 -1161.3l-1494 137.8l-282.8 -145.4l90.8 -434.6l324.8 -211.1l264.5 -591.3l-358.3 -119l-862.2 -996.2l-608.1 39.8l-572.7 446.1l-353.9 59.6l386.4 -797.7l115.7 -15.9l795 -107l389.5 -671.5l504.8 -113.6l239.2 -590.6l-185.7 -326.2l-1951.9 98.3l-110.9 -378.8l1415.5 -237.7l168.7 -359.6l-556 -927.8l127.9 -2012.2l-282.8 -145.4l-783.8 120.6l391.3 -594.8l478.8 -138.2l46.3 -178.9l-387.4 -270.5l89.4 -603.6l84.6 -570.5l-850.3 -513.5l-445.9 443.3l-204.9 -71.8l-343 -525.3l-513.6 -242.1l-108.4 -277.6l275.3 -158.6l410.2 168.2l710.9 8.4l551.8 -267.8l734.3 -67.9l794.1 -731.4l1265.2 -157.9l887.4 -1064.1l934.8 -174.5l265 451.4l613.8 189.1l455.3 -62.4l317.2 -516.3l313 -79.2l1097.6 -361.5l838.4 30.4l617.8 -675.3l338 322.3l878.4 -403l-260.6 -273.3l-66.5 -633.9l-210.5 -299.8l-304.4 6.5l-413.4 -294.7l55.4 -840.6l-748.2 -491.3l-604.2 -824.5l-554.3 166.3l-357.7 -92.5l-407.6 270.2l-1110.5 -1098.8l-564.3 -241.4l-660.9 -34.3l-598.1 447.1l-378.7 84.7l-517.2 -1411.7l170 -308.8l556.2 -90.2l1324.4 -845.4l267.2 -489.3l8.7 -382l3.4 -152.5l-508 -13.3l-157.2 -199.4l138.3 -563.6l-160.3 -326l-628.6 244.1l-855.3 -716.9l-408.4 -92.2l-444.7 493.9l-483.9 -65l-930 1395.7l-431.9 -14.9l-645.2 600.3l-312.6 -323.1l166.3 -461.7l-332.1 -1110.3l314.1 -643.9l-306.1 -1085.6l-408.4 -92.8l-294.8 -628.1l143.4 -359.7l301.9 -108.9l75.4 -27.1l441.3 396.7l683.1 -93l135.6 352.7l251.8 -83l564.6 -776.1l-437 -218.2l570.3 -547.4l763 57.6l291.2 -540.8l769.9 337.5l369.8 -440.9l255.6 69.8l199.2 -157.5l-473.6 -675.3l15.3 -407l445.3 -468.5l-32.3 -278.9l-329.8 7.8l-107.2 -225.8l292.5 -490.8l1321.2 -972.5l560.7 88.5l223.2 -209.5l575.4 143.9l446.4 112l146.3 784.2l330.5 17.9l-61.5 -431l574.7 -369.6l166.9 -436.9l139 -537l-282.5 -1163l-457.9 -40l-32.3 -278.9l396.5 -390.6l-131.9 -200.5l69.1 -281.4l300.7 -159.7l65.2 582.7l336.1 246.2l175.1 -105.2l45.4 -1247.7l215.8 -722.2l135.8 -455.7l597 -497.5l-366.5 -449.1l-1624.9 -12.4l-412.8 -269l1186.4 -1300.2l114.2 -510.8l-159.4 -1319.3l189.1 -564.3l1422.9 -974.7l388.1 295.8l271.5 -311.6l378.6 -85.5l488 -800.1l427.5 -162.9l233.9 222.8l458.6 66l271.6 -311.7l-109.9 -180.4l-287 -472l361.1 -796l-95 -2821l-410.9 -193.7l804.6 -1341.3l277.2 -83.4l92.5 659l493.9 471.4l-342.7 516.9l55.2 176.4l331.7 68.8l447.3 -392.5l353.9 -59.5l1251.9 326.1l806.5 794.8l1547.6 -37.4l652.8 -295.3l295.1 -388.6l-12.9 -1550.8l945.7 -1803.1l-418.5 -498.7l248.6 -209.1l1567.4 -266.4l440.7 370.7l551.9 -267.5l868.6 -809.1l331.1 43.4l132.4 225.2l1042.1 51.3l523.4 -394l436.7 -824.1l208.3 -818.9l133.9 -107.8l189.7 -154.3l1397.3 42.9l1626 -980.2l187.4 -639.9l582.3 -64.7l626.4 697.3l665.2 212.3l1372 43.5l1991.2 -580.6l878 -428.2l838.5 30.9l310.1 221.1l1715 -1490.6l1036.6 -176.7l1077.8 -560.2l37 -560l-411.2 -1237l189.2 -563.9l374.3 -263.7l-336 -245.9l-135 -327.8l116.9 -409.7l1274.2 199.4l515.3 -724.4l307.6 -23.6l199.2 -14.6l243.7 -412.8l-119 -709l342.1 -542.6l735.8 -17.3l168.8 -360.3l1072.3 -788.8l379.2 -59.4l-19.1 254.6l204.9 71.3l368.7 -491.9l326.7 -134.8l722.3 465.7l174.4 -131.2l181.8 -869.1l2123.7 -355.9l880.2 691.6l219.6 -361l279.7 18l446.3 599.7l943.8 181.2l442.3 -595.4l585.5 62.1l318 -490.9l227.8 -31.1l239.6 452.6l335.5 221.1l280.5 1086.6l893 182.6l243.1 -438.3l204.8 71.4l604.8 850.1l-336.5 771.1l213.6 427.2l1232.2 555.8l84.8 354.3l409.7 142.7l167.8 631.9l281.5 94.8l445 549.2l295.9 679.7l489.6 294l-40.3 -609.8l167 -436.5l852.7 -427.1l1118.1 -993.3l238.2 -641.4l-148.7 -887.3l82.8 -764.5l508.7 38.3l926.8 -1547.3l105.1 -892.5l-236.6 -1368.1l27.7 -941.4l191.6 -1505.4l-222.3 -783.2l369.3 -1509.5l-1915.2 -2523.1l-207.5 -1216.7l-576.3 -723.5l923.2 -1700.9l550.8 -317.7l552.4 -1284.5l63.7 -510.3l-187.8 -209.4l-282 -314.1l-293.6 -1621.3l-423.5 -701.6l185.6 -716.6l2661.6 -2250.9l13.4 -483.8l-415.3 -371.5l207.9 -844.3l-102.9 -1090.8l-495.8 -548.2l-169.8 -708.4l73.5 -1146.6l-448.2 -675.5l48.7 -426.4l76.7 -670.5l-324.4 -806.1l93.4 -332.9l1014.8 -1067.1l527.2 -241.6l641.2 264.5l875.1 -555l1874.6 -171.8l488.4 242.9l378.2 -110.7l618.1 -676.2l443.2 472.7l502.6 -215.2l206.9 1190.6l1216.3 937.5l588.8 227.7l154.6 60.2l320.7 653.6l-425 1306.7l194.1 2743.2l549 648.1l192 580.6l-63.1 535.4l548.5 1665.6l-178.1 1022.4l349.2 779.6l-88.5 536.4l196.3 758.9l-278.3 1074.6l13.7 559.5l198.7 245.9l325 402.7l673 2603.9l-301.9 1151.4l179.5 72.3l164 479.4l7.7 2390.4l385.7 1237.3l-597.1 1540.3l-132.3 817.1l-639.8 829.3l-151.5 1071.7l-431.2 1053l-116.2 1477.8l-542.5 1691.5l-190.2 3641.9l-296.4 337.5l-190.9 2573.2l-429.3 1129.1l226.5 961.7l-82.2 790l653.6 773l742.1 1279.5l310.1 1264l50.2 1016.4l631.3 900.4l513.7 1284.8l1265.5 885.2l896.8 335.2l277.2 -83l167.7 -410.6l-169 -683.1l-1310.4 -2255.1l-738.5 -878.5l-60.3 -71.7l-280.3 -43.7l-68 332.1l240.7 503.1l-191.8 462l-234.5 -248.6l-416.1 -1440l261.7 -718.2l-268.6 -604.2l-514.9 -292.8l-319.4 -602.7l-346 -1081.7l-460 -730.3l-87.9 -481.2l116.9 -409.4l1310.4 2715.3l1091.4 1343.9l793.2 976.5l379.4 983.1l833.1 844.4l1063.2 1959l603.5 1842.3l508.8 2124.1l-37 1603.1l-84.1 713.9l-243.7 1456.2l-120.5 2342l109 1345.5l1040.9 2086.4l43.4 1778.8l-178.1 1021.1l212.3 376.5l-504.3 2224.5l28.6 2211.8l-455.3 1104.2l937 4072l746.3 2499.9l398.5 2813.4l301.3 908.3l-64.9 459.2l240.7 502.9l-723.3 1568.2l229 1062.5l-371.8 2449.9l769.7 2422.9l-261.1 743.8l-115 485.7l511.6 1208.9l-472.7 1434.8l-147.2 1249.7l-220.2 335.2l-353.3 -957.5l-384.8 -169.1l-193.6 385.8l346.4 678.5l-42.7 331.5l612.6 138.4l83.5 303.2l-146.6 232.2l-713.4 -110.2l-502.4 215.8l271 705.2l-368.1 516.5l161.5 378.1l-193.7 385.8l-1007.2 329l-141.6 199.5l-79.3 111l577.2 774.6l483.3 39.8l738 -958.9l276.5 -108.1l306.8 -948.2l11.8 -559.6l470.2 548.5l13.6 559l-366.8 1610.2l-287.7 693.1l-1273.2 -172.9l-349 262.6l1097 228.7l136.1 377.8l-540.2 1765.9l-47.5 154.5l-864.2 987.2l-430.6 1078l-1263.3 1275.7l-374.9 1280.1l-710.8 1033.8l-597.6 471.8l-2936.5 4467.9l-209.1 -249.2l-345.8 389.8l-68.7 306.2l-1071.4 779.2l-50.1 239.6l553.2 -457.2l280.6 132.4l-1245.8 1987.2l-639.6 1871l-206 -122.3l-24.2 -991l-228.9 -20.1l-291.5 -501.4l-171.9 232.9l189.9 504l-83.5 739.1l306.9 1137.1l400.2 -238.2l362.5 296.4l-460 2985.3l-416.9 594.5l-26.6 992.1l-708.2 2177.8l355.1 1033.9l-266.5 515l6.2 254.1l256.1 95.4l136.8 403.8l-58.7 713.1l238.2 1446.5l178.8 1085.5l-97.7 1197.4l-699.5 1491.1l381.1 1058.4l-277.7 1099.9l36.5 456.4l840.6 132.9l-207.2 869.2l384.8 2253.1l-398.9 1331.4l193.1 1673.3l-149.1 130.7l246.3 731.1l-205.9 920l-280.9 -69.4l-113.8 -506l-247.4 260.3l326 882l-218.4 411.8l-50 35l-473.8 333.4l-455.9 35.9l-665.5 803.8l-357.5 -93.3l-351.3 161.2l438.5 294.6l-38.9 483.8l340.8 449.6l355.6 17.1l56.9 252.6l-523.9 368.2l-45.7 204.3l611.1 87.5l642.6 340.6l-387.8 746.3l13.6 559l-283.9 -196.9l-227 56.5l-162.6 614l-588.8 827.2l-532.5 12.4l-364.3 -372.4l-782.9 145.5l-439.1 722.2l-349.4 236.9l182.4 199.2l452.2 -188.6l183.6 250l-90.9 434.1l187.4 339.3l131.2 237.9l-175.6 80.3l-258.5 -197.2l-1097.2 -253.6l-845.3 706.3l-508.4 -38.8l67.4 -357.7l631.4 -116.7l-81 -201.3l-809.6 95.4l-1058.9 -762.7l-168.7 359.7l139.8 530.6l-138.6 562.5l-1455.8 644.5l-244.9 361.6l172.7 834.6l-186.7 665.5l106.4 200.8l563.4 215.4l-47.5 1170.3l203.4 20.5l479.9 -1129.9l544.2 -572l259.1 -819.6l850.3 -502.8l512 191.2l934.6 -174.7l529.4 902.1l1246.2 123.3l795.9 -654.3l266 502l-240 564.7l-815.7 883.5l-606 1158.3l-21 1220.7l-96.9 129.6l-173.4 232.4l-1667.3 294l-645.1 599.6l-403.1 111.2l-296.3 337.8l56.3 227.2l-252.3 56.8l-1804.4 1949.3l-335.8 -246.2l-933.2 225.3l-409.9 873.7l1067.4 76.7l233.8 222.9l91 607.9l-284.5 820.4l-925.1 555.6l592.9 526.7l159.2 141.8l401.3 -187.6l330.9 43l87.9 480.8l-221.9 1301.3l-399.5 263.9l-265.9 540l-604.8 166.6l-170.6 283.9l747 465.2l56.3 227.2l-276.4 108.4l-720.5 -415.3l-322.8 287.3l-80.9 840.9l-331.4 -68.5l-1617.6 1283.6l-1947.3 249.8l-242.9 437.6l821.2 387.2l400.8 829l-448.3 341.2l336.4 271.5l-33.9 687l-609.7 -36.2l-121.8 206.1l-9.2 661.1l285.7 272.4l478.6 -138.4l742 -779.9l1093.7 -856.4l847.8 -664l434.1 116.9l82.3 252.2l-219.6 361.1l-58 738.3l-548.5 394.2l-62.4 560.9l-1258.9 1427.3l-304.1 1049.4l-422.3 365.7l-318.9 1481.4l-915.2 -79.9l-527.4 216l-2082 -77.5l-463.2 -268.4l-178.8 -568.8l-233.7 -743.2l-337.7 -322.1l-1398.1 -119.4l-1217.1 -1013.1l-563.3 -215.1l-242.5 -578.6l-753.7 297.5l-884.8 122.7l-618.3 649.9l-511.6 -1207.7l297.8 -1303.4l322.1 -312.5l457 14.7l294.9 -388.3l40.8 -407.9l-338.4 -347.7l703.3 -663.2l982.8 -927.1l-109.4 -327.6l-305.5 -43.6l-341.2 567.1l-379.7 34.4l-205.3 -96.7l-298.8 -806l-316.5 541.2l-412.5 -269.7l-72.4 -887.6l-159 -275.9l-655.2 1210.2l-750.6 424.2l-304.9 -17.9l-388.4 -321.1l-474.4 -725.9l464.1 -1764.7l717.1 -754l-144.2 -708l-1547 1053.2l-638 879.6l-857.7 198.2l-331.7 -1110.3l-330.9 -43.1l-741.8 780.3l-118.9 -708.9l-721.2 -440.3l182.2 -842.8l-356.9 327l-412.1 377.4l-356.2 -42.3l-857.9 -843.7l-353.8 59.2l-412.9 747l-292.6 -551.9l-588.7 -214.9l-86.2 -404.5l-231.3 -121.6l-575 344.1l107.3 -790.2l-413.8 -320.8l-408.2 -91.7l-1203.9 562.5l-541.8 -368.4l-315.2 592.2l-357.5 -93.1l-326.4 134.8l-82.4 -252.1l236.7 -692.2l-485.2 -1157.5l392.6 -543l-792.3 -235.4l-393.1 518l-378.5 85.1l-693.3 -339.2l-672.7 499.3l-280.1 -44.4l-107 -225.9l511.2 -876.4l-391.6 -448.2l-418.2 -498.2l-1075.3 635.8l-361.3 -245.8l-1189.8 104.7l-310.5 -246.6l262.6 -667l615.7 -751.9l-345.9 -652.4l334.2 -846.9l-279.5 -18.7l-442 595.1l-202.2 30.1l-264.9 -451.1l-227 56.3l-258.6 -197l-651 346l-486.1 -166.2l-865.6 -1148.8l-1091.6 -24.5l-418.9 -523.6l14.1 -457.8l912.4 -1064.2l-81.1 -201.4l-670.5 -441.2l-168.5 -656.9l-556 89.7l-522.2 -597.6l181.1 -118.1l667.8 -435.8l-262.3 -349.6l593.7 -1640.9l-418.8 -524.1l541.5 -673.8l43.2 -306.1l818.6 -756.6l81.4 -815.5l174.9 -105.9l1123 1295l666.5 -753.3l2430.2 -1252.9l505.2 -88.1l742.3 261.6l199.1 -157.3l455.2 -2120.7l443.9 -519l606.1 -116.1l572 -471.1l733.5 -94l349.3 -236.8l290 -591.8l-210.4 -300.1l-79.8 -150.4l-1899.9 121.9l-459.6 -116.2l-568.5 -418.4l-788.6 -82.9l-567.2 -367.7l-1164.6 103.9l-664.4 -187.2l-1166.8 -1014.5l120.6 -256.8z M522227.6 -4579741.8l-327.2 109.4l-262.8 -374.9l-358.6 -144.2l-131.8 -199.9l269 -413.3l334.6 195.5l324.6 -211l332.7 119.3l-170 308.8l123 385.4l-133.5 224.9z M521624.4 -4576398.5l-906.6 -766l70.5 -230.6l302.9 -58l726 643.7l-192.9 410.9z"/>
  844.  
  845.     <g id="myTempArea">
  846.       <g id="myTempPolys">
  847.         <g id="myTempCantons"/>
  848.         <g id="myTempArrondissements"/>
  849.         <g id="myTempDepartements"/>
  850.       </g>
  851.       <g id="myTempWaters"/>
  852.       <g id="myTempRoads">
  853.         <g id="myTempRoadsCat4"/>
  854.         <g id="myTempRoadsCat3"/>
  855.         <g id="myTempRoadsCat2"/>
  856.         <g id="myTempRoadsCat01"/>
  857.       </g>
  858.       <g id="myTempPoints"/>
  859.       <g id="myTempTexts">
  860.         <g id="myTempTextMain"/>
  861.         <g id="myTempTextAll"/>
  862.       </g>
  863.     </g>
  864.  
  865.     <g id="myPassiveElements" pointer-events="none">  
  866.       <g id="myMapFrame">
  867.         <g id="myGrid" stroke="blue" stroke-width="200" fill="none">
  868.           <path d="M450000 -4785000 v 220000"/>
  869.           <path d="M500000 -4785000 v 220000"/>
  870.           <path d="M550000 -4785000 v 220000"/>
  871.           <path d="M440000 -4750000 h 140000"/>
  872.           <path d="M440000 -4700000 h 140000"/>
  873.           <path d="M440000 -4650000 h 140000"/>
  874.           <path d="M440000 -4600000 h 140000"/>
  875.         </g>
  876.        
  877.         <g id="myBorder">
  878.           <rect id="myBorderOuter" stroke="black" stroke-width="5000" fill="none" x="440000" y="-4785000" width="140000" height="220000"/>
  879.           <rect id="myBorderInner" stroke="white" stroke-width="4500" fill="none" x="440000" y="-4785000" width="140000" height="220000"/>
  880.           <g id="myGridCoords" fill="blue" font-size="4000" text-anchor="middle">
  881.             <text id="myGridCoords1" x="450000" y="-4785000" baseline-shift="-2000">450000</text>
  882.             <text id="myGridCoords2" x="500000" y="-4785000" baseline-shift="-2000">500000</text>
  883.             <text id="myGridCoords3" x="550000" y="-4785000" baseline-shift="-2000">550000</text>
  884.             <text id="myGridCoords4" x="440000" y="-4750000" baseline-shift="-1500" transform="rotate(-90 440000 -4750000)">4750000</text>
  885.             <text id="myGridCoords5" x="440000" y="-4700000" baseline-shift="-1500" transform="rotate(-90 440000 -4700000)">4700000</text>
  886.             <text id="myGridCoords6" x="440000" y="-4650000" baseline-shift="-1500" transform="rotate(-90 440000 -4650000)">4650000</text>
  887.             <text id="myGridCoords4" x="440000" y="-4600000" baseline-shift="-1500" transform="rotate(-90 440000 -4600000)">4600000</text>
  888.           </g>
  889.         </g>
  890.       </g>
  891.  
  892.       <use id="myMapElementsOverTheGridHalo" xlink:href="#myMapElementsOverTheGrid" stroke="lightblue" stroke-width="0.5"/>
  893.       <g id="myMapElementsOverTheGrid">
  894.         <text id="myTitle" x="460000" y="-4751000" font-size="10000" fill="black">Korsika</text>
  895.         <text id="myProjection" x="575000" y="-4570000" font-size="3000" text-anchor="end">Projektion: UTM (Zone 32)</text>
  896.         <g id="myCopyright" font-size="3000" transform="translate(-3000,2000)">
  897.           <text x="448000" y="-4587000">Grundlagen: DCW und SRTM</text>
  898.           <text x="448000" y="-4583000">Schummerung: n.hafner@carto.at</text>
  899.         </g>
  900.         <g id="myScaleBar">
  901.           <path id="strecke" stroke="black" stroke-width="500" fill="none" d="M460000 -4571000 v 2000 h 25000 v -2000"/>
  902.           <text id="m_text" fill="black" font-size="3000" x="472500" y="-4571000" text-anchor="middle">25 km</text>
  903.         </g>
  904.       </g>
  905.     </g><!-- ENDE PASSIVER ELEMENTE -->
  906.  
  907.   </svg>
  908.   <!-- ENDE DES VERSCHACHTELTEN SVG-ELEMENTS MIT DER HAUPTKARTE -->
  909.  
  910.   <!-- GRUPPE FÜR INTERFACE-ELEMENTE-->            
  911.   <g id="myFlyOutBorders" fill="black" onmouseover="evt.target.setAttributeNS(null,'opacity',.3)" cursor="pointer" onmouseout="evt.target.setAttributeNS(null,'opacity',0.1)">
  912.     <rect id="myFOBSS" x="0" y="0" width="0" height="0" opacity=".1" onclick="myDoPan(0,-1)"/>
  913.     <rect id="myFOBNN" x="0" y="0" width="0" height="0" opacity=".1" onclick="myDoPan(0,1)"/>
  914.     <rect id="myFOBEE" x="0" y="0" width="0" height="0" opacity=".1" onclick="myDoPan(-1,0)"/>
  915.     <rect id="myFOBWW" x="0" y="0" width="0" height="0" opacity=".1" onclick="myDoPan(1,0)"/>
  916.     <rect id="myFOBSE" x="0" y="0" width="0" height="0" opacity=".1" onclick="myDoPan(-1,-1)"/>
  917.     <rect id="myFOBSW" x="0" y="0" width="0" height="0" opacity=".1" onclick="myDoPan(-1,1)"/>
  918.     <rect id="myFOBNE" x="0" y="0" width="0" height="0" opacity=".1" onclick="myDoPan(1,-1)"/>
  919.     <rect id="myFOBNW" x="0" y="0" width="0" height="0" opacity=".1" onclick="myDoPan(1,1)"/>
  920.     <g pointer-events="none">>
  921.       <rect id="myDynScalebar" x="0" y="0" width="0" height="0" fill="lightgray" stroke="navy" stroke-width="1" shape-rendering="crispEdges"/>
  922.       <text id="myDynScalebarText" x="0" y="0" fill="black" font-size="12" text-anchor="middle"> </text>
  923.     </g>
  924.   </g>                                            
  925.   <!-- ENDE GRUPPE FÜR INTERFACE-ELEMENTE -->    
  926.  
  927.  
  928.   <!-- VERSCHACHTELTES SVG-ELEMENT FÜR EIN INTERFACE -->
  929.   <svg id="myInfoBlock" x="200" y="0" width="180" height="520" viewBox="0 0 180 520" overflow="visible" font-size="12">
  930.  
  931.     <!-- HINTERGRUNDRECHTECK ZUR ABGRENZUNG DES INTERFACEBEREICHS -->
  932.      <rect x="0" y="0" width="180" height="520" fill="lightgreen" stroke="navy" stroke-width="1" shape-rendering="crispEdges"/>
  933.     <g id="myNavig" transform="translate(5,10)" stroke="navy" stroke-width="1" onmouseover="evt.target.setAttributeNS(null,'fill','lightgray')" cursor="pointer" onmouseout="evt.target.setAttributeNS(null,'fill','white')">
  934.       <g shape-rendering="crispEdges">
  935.         <rect id="myPanNW" x="0" y="0" width="20" height="20" onclick="myDoPan(1,1)" fill="white"/>
  936.         <rect id="myPanNN" x="25" y="0" width="20" height="20" onclick="myDoPan(0,1)" fill="white"/>
  937.         <rect id="myPanNE" x="50" y="0" width="20" height="20" onclick="myDoPan(-1,1)" fill="white"/>
  938.         <rect id="myPanWW" x="0" y="25" width="20" height="20" onclick="myDoPan(1,0)" fill="white"/>
  939.         <rect id="myResetAll" x="25" y="25" width="20" height="20" onclick="myDoReset()" fill="white"/>
  940.         <rect id="myPanEE" x="50" y="25" width="20" height="20" onclick="myDoPan(-1,0)" fill="white"/>
  941.         <rect id="myPanSW" x="0" y="50" width="20" height="20" onclick="myDoPan(1,-1)" fill="white"/>
  942.         <rect id="myPanSS" x="25" y="50" width="20" height="20" onclick="myDoPan(0,-1)" fill="white"/>
  943.         <rect id="myPanSE" x="50" y="50" width="20" height="20" onclick="myDoPan(-1,-1)" fill="white"/>  
  944.       </g>
  945.       <circle cx="100" cy="17" r="16" fill="white" onclick="myDoZoom(1)"/>
  946.       <circle cx="100" cy="53" r="16" fill="white" onclick="myDoZoom(-1)"/>
  947.       <circle cx="135" cy="35" r="16" fill="white" onclick="myDoReset()"/>
  948.       <g id="myNavigSymbols" pointer-events="none">
  949.         <use xlink:href="#mySymbArrow" transform="translate(10,10),rotate(135)" />
  950.         <use xlink:href="#mySymbArrow" transform="translate(35,10),rotate(180)" />
  951.         <use xlink:href="#mySymbArrow" transform="translate(60,10),rotate(-135)" />
  952.         <use xlink:href="#mySymbArrow" transform="translate(10,35),rotate(90)" />
  953.         <circle cx="35" cy="35" r="7.5" fill="none" stroke="navy" stroke-width="1"/>
  954.         <circle cx="35" cy="35" r="5" fill="navy"/>
  955.         <use xlink:href="#mySymbArrow" transform="translate(60,35),rotate(-90)" />
  956.         <use xlink:href="#mySymbArrow" transform="translate(10,60),rotate(45)" />
  957.         <use xlink:href="#mySymbArrow" transform="translate(35,60)" />
  958.         <use xlink:href="#mySymbArrow" transform="translate(60,60),rotate(-45)" />
  959.         <text x="100" y="30" fill="navy" text-anchor="middle" font-size="40">+</text>
  960.         <text x="100" y="66" fill="navy" text-anchor="middle" font-size="50">-</text>
  961.         <text x="135" y="45" fill="navy" text-anchor="middle" font-size="26">F</text>
  962.       </g>
  963.     </g>
  964.  
  965.     <!-- ÜBERSICHTSKARTE -->
  966.     <!-- DIESE KARTE IST IM SELBEN BEZUGSSYSTEM WIE DIE HAUPTKARTE, JEDOCH MIT KLEINEREN AUSMASSEN DARGESTELLT -->
  967.     <svg overflow="hidden" id="myOverviewMap" onmouseup="myDrag(evt)" onmouseout="myDrag(evt)" onmousemove="myDrag(evt)" viewBox="437000 -4788000 146000 226000" x="3" y="90" width="146" height="226">
  968.       <rect id="myBackgroundRect" x="437000" y="-4788000" width="146000" height="226000" fill="green" fill-opacity=".3" stroke="green" stroke-opacity="1" stroke-width="3000"/>
  969.  
  970.       <!-- ES WIRD HIER EINFACH EINE KOPIE DER POLYGONE DER HAUPTKARTE HERANGEZOGEN, IDEALERWEISE WÄRE HIER EINE GENERALISIERTE ÜBERSICHTSKARTE -->
  971.       <use xlink:href="#mySea"/>
  972.  
  973.       <g onmousedown="myDrag(evt)" cursor="pointer">
  974.         <!-- DIESER KREIS HINTERLEGT DAS RECHTECK (UNTEN) WENN DIESES IN DER ÜBERSICHTKARTE ZU KLEIN WIRD SO DASS ES DER ANWENDER NOCH ANFASSEN KANN -->
  975.         <circle id="myOverviewRectCirc" cx="0" cy="0" r="0" fill="navy" fill-opacity=".1" stroke="navy" stroke-width="1000"/>
  976.      
  977.         <!-- RECHTECK, DASS ANZEIGEN SOLL, WELCHER AUSSCHNITT IN DER HAUPTKARTE DARGESTELLT WERDEN SOLL -->
  978.         <!-- BEI ÄNDERUNG DER VIEWBOX DR HAUPTKARTE, WERDEN DIE 4 PARAMETER DER VIEWOX DEN ATTRIBUTEN DES RECHTECKS ZUGEWIESEN -->
  979.         <rect id="myOverviewRect" x="437000" y="-4788000" width="146000" height="226000" fill="navy" fill-opacity=".1" stroke="navy" stroke-opacity="1" stroke-width="2000" shape-rendering="crispEdges"/>
  980.       </g>    
  981.      
  982.     </svg><!-- ENDE ÜBERSICHTSKARTE-->
  983.  
  984.  
  985.     <!-- ZOOM-SLIDER MIT "FÜHRUNG" UND ERWEITERTEN SENSIBLEN BEREICH. DIE ÄNDERUNG ERFOLGT NICHT ÜBER x/y SONDERN ÜBER transform -->
  986.     <g transform="translate(159 90)" shape-rendering="optimizeSpeed">
  987.       <rect id="mySliderBg" x="-1" y="-1" width="17" height="226" fill="lightgrey" stroke="blue" stroke-wdith="1"/>
  988.       <g id="mySlider" transform="translate(0,209)" onmousedown="mySliderDrag(evt)" onmouseup="mySliderDrag(evt)" onmousemove="mySliderDrag(evt)">
  989.         <rect x="-9" y="-30" width="100" height="75" opacity=".1" fill="black"/>
  990.         <rect x="0" y="0" width="15" height="15" fill="grey" stroke="black" stroke-wdith="0" cursor="pointer"/>
  991.       </g>
  992.     </g>
  993.  
  994.     <text x="5" y="330" font-size="12" onclick="alert(myLayerArr)" id="myCurrScale"> </text>
  995.     <text x="5" y="345" font-size="12" id="myShowTempTextMain"> </text>
  996.     <text x="5" y="360" font-size="12" id="myShowTempTextAll"> </text>
  997.     <text x="5" y="375" font-size="12" id="myShowTempPoints"> </text>
  998.     <text x="5" y="390" font-size="12" id="myShowTempRoadsCat01"> </text>
  999.     <text x="5" y="405" font-size="12" id="myShowTempRoadsCat2"> </text>
  1000.     <text x="5" y="420" font-size="12" id="myShowTempRoadsCat3"> </text>
  1001.     <text x="5" y="435" font-size="12" id="myShowTempRoadsCat4"> </text>
  1002.     <text x="5" y="450" font-size="12" id="myShowTempWaters"> </text>
  1003.     <text x="5" y="465" font-size="12" id="myShowTempCantons"> </text>
  1004.     <text x="5" y="480" font-size="12" id="myShowTempArrondissements"> </text>
  1005.     <text x="5" y="495" font-size="12" id="myShowTempDepartements"> </text>
  1006.    
  1007.  
  1008.  
  1009.  
  1010.  
  1011.  
  1012.  
  1013.  
  1014.  
  1015.   </svg>
  1016.   <!-- ENDE DES VERSCHACHTELTEN SVG-ELEMENTS FÜR EIN INTERFACE -->
  1017.  
  1018.  
  1019.  
  1020. </svg>