Mercurial > dive4elements > river

changeset 6119:0b9f0d37fe6e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
We have a much faster interactive image map! * Image for highlighting rivers in link list instead of CSS manipulation. * Better event handling. * No more hover delay. Some problems still exist: * Sometime when switching the module to 'MINFO' the highlighted river on the image map is not unhighlighted. * The loop to unhighlight rivers when switching modules is called for every river.
author Raimund Renkert <rrenkert@intevation.de>
date Tue, 28 May 2013 15:57:10 +0200
parents 97d055c24ad4
children b689d2b9d167
files gwt-client/src/main/java/org/dive4elements/river/client/client/ui/LinkSelection.java gwt-client/src/main/java/org/dive4elements/river/client/client/ui/ModuleSelection.java gwt-client/src/main/webapp/images/FLYS_Karte_interactive.html
diffstat 3 files changed, 96 insertions(+), 65 deletions(-) [+]
line wrap: on
line diff
--- a/gwt-client/src/main/java/org/dive4elements/river/client/client/ui/LinkSelection.java	Tue May 28 13:49:51 2013 +0200
+++ b/gwt-client/src/main/java/org/dive4elements/river/client/client/ui/LinkSelection.java	Tue May 28 15:57:10 2013 +0200
@@ -16,7 +16,10 @@
 import com.smartgwt.client.types.VerticalAlignment;
 import com.smartgwt.client.widgets.Canvas;
 import com.smartgwt.client.widgets.HTMLPane;
+import com.smartgwt.client.widgets.Img;
 import com.smartgwt.client.widgets.Label;
+import com.smartgwt.client.widgets.events.VisibilityChangedEvent;
+import com.smartgwt.client.widgets.events.VisibilityChangedHandler;
 import com.smartgwt.client.widgets.form.DynamicForm;
 import com.smartgwt.client.widgets.form.fields.LinkItem;
 import com.smartgwt.client.widgets.form.fields.events.ClickEvent;
@@ -42,6 +45,7 @@
  */
 public class LinkSelection
 extends      MapSelection
+implements   VisibilityChangedHandler
 {
 
     private static final long serialVersionUID = -7138270638349711024L;
@@ -51,7 +55,9 @@
 
     /** The selected river*/
     protected Data river;
-    private static Map<String, LinkItem> rivers;
+    private static Map<String, Img> riverHighlight;
+    private static Map<String, HLayout> riverList;
+    private static String selected;
     private static HLayout columns;
 
     private static Trigger trigger;
@@ -95,7 +101,8 @@
     public Canvas create(DataList data) {
         trigger = new Trigger(this);
         createCallback();
-        rivers = new HashMap<String, LinkItem>();
+        riverHighlight = new HashMap<String, Img>();
+        riverList = new HashMap<String, HLayout>();
 
         VLayout v = new VLayout();
         v.setMembersMargin(10);
@@ -182,22 +189,37 @@
 
             int counter = 0;
             for (DataItem item: d.getItems()) {
+                HLayout row = new HLayout();
                 LinkItem link = new LinkItem("river");
+                link.setHoverDelay(0);
                 link.setLinkTitle(item.getLabel());
                 link.setTarget(item.getStringValue());
                 link.setShowTitle(false);
+                Img img = new Img();
+                img.setShowTitle(false);
+                img.setSrc("marker_green.png");
+                img.setWidth(20);
+                img.setHeight(20);
+                img.setVisible(false);
+                Canvas container = new Canvas();
+                container.addChild(img);
+                container.setHeight(20);
+                container.setWidth(20);
                 DynamicForm f = new DynamicForm();
-                rivers.put(item.getStringValue(), link);
-
+                riverList.put(item.getStringValue(), row);
+                riverHighlight.put(item.getStringValue(), img);
                 f.setItems(link);
+                row.addMember(container);
+                row.addMember(f);
+                row.addVisibilityChangedHandler(this);
+                link.setColSpan(20);
                 if (counter < d.getItems().length/2) {
-                    formLayout1.addMember(f);
+                    formLayout1.addMember(row);
                 }
                 else {
-                    formLayout2.addMember(f);
+                    formLayout2.addMember(row);
                 }
                 counter++;
-
                 link.addClickHandler(new ClickHandler() {
                     @Override
                     public void onClick(ClickEvent event) {
@@ -218,27 +240,22 @@
                     @Override
                     public void onItemHover(ItemHoverEvent event) {
                         String river = ((LinkItem)event.getItem()).getLinkTitle();
-                        for (Map.Entry<String, LinkItem> entry: rivers.entrySet()) {
-                            String s = entry.getKey();
-                            LinkItem item = entry.getValue();
-                            if (item.getLinkTitle().equals(river)) {
-                                item.setCellStyle("riverLinkHighlight");
-                                callHighlightRiver(river);
+                        if (riverHighlight.containsKey(river)) {
+                            Img item = riverHighlight.get(river);
+                            item.setVisible(true);
+                            if (selected != null && !selected.equals(river)) {
+                                riverHighlight.get(selected).setVisible(false);
+                                callUnHighlightRiver(selected);
                             }
-                            else {
-                                item.setCellStyle("formCell");
-                                callUnHighlightRiver(s);
-                            }
-                        }
-                        if (columns != null) {
-                            columns.redraw();
+                            callHighlightRiver(river);
+                            selected = river;
                         }
                     }
                 });
             }
 
             if (module != null) {
-                getModuleSelection().setRivers(rivers);
+                getModuleSelection().setRivers(riverList);
             }
             label.setWidth(50);
 
@@ -270,24 +287,31 @@
 
     private native void createCallback() /*-{
         $wnd.highlightRiver = @org.dive4elements.river.client.client.ui.LinkSelection::highlightCallback(Ljava/lang/String;);
+        $wnd.unHighlightRiver = @org.dive4elements.river.client.client.ui.LinkSelection::unHighlightCallback(Ljava/lang/String;);
         $wnd.selectRiver = @org.dive4elements.river.client.client.ui.LinkSelection::selectCallback(Ljava/lang/String;);
         $wnd.availableRiver = @org.dive4elements.river.client.client.ui.LinkSelection::availableRiver(Ljava/lang/String;);
     }-*/;
 
     private static void highlightCallback(String name) {
-        for (Map.Entry<String, LinkItem> entry: rivers.entrySet()) {
-            String s = entry.getKey();
-            LinkItem item = entry.getValue();
-            item.setCellStyle(s.equals(name) ? "riverLinkHighlight" : "formCell");
+        if (riverHighlight.containsKey(name)) {
+            riverHighlight.get(name).setVisible(true);
+            if(selected != null && !selected.equals(name)) {
+                riverHighlight.get(selected).setVisible(false);
+            }
+            selected = name;
         }
-        if (columns != null) {
-            columns.redraw();
+    }
+
+    private static void unHighlightCallback(String name) {
+        if (riverHighlight.containsKey(name)) {
+            riverHighlight.get(name).setVisible(false);
+            selected = null;
         }
     }
 
     private static boolean availableRiver(String river) {
-        LinkItem ri = rivers.get(river);
-        return ri != null && ri.isVisible();
+        HLayout row = riverList.get(river);
+        return row != null && row.isVisible();
     }
 
     private static void selectCallback(String name) {
@@ -303,5 +327,15 @@
     private native void callUnHighlightRiver(String name) /*-{
         $wnd.unHighlight(name);
     }-*/;
+
+
+    @Override
+    public void onVisibilityChanged(VisibilityChangedEvent event) {
+        for (Map.Entry<String, Img> entry: riverHighlight.entrySet()) {
+            entry.getValue().setVisible(false);
+            callUnHighlightRiver(entry.getKey());
+        }
+        selected = null;
+    }
 }
 // vim:set ts=4 sw=4 si et sta sts=4 fenc=utf8 :
--- a/gwt-client/src/main/java/org/dive4elements/river/client/client/ui/ModuleSelection.java	Tue May 28 13:49:51 2013 +0200
+++ b/gwt-client/src/main/java/org/dive4elements/river/client/client/ui/ModuleSelection.java	Tue May 28 15:57:10 2013 +0200
@@ -65,7 +65,7 @@
 
     private List<String> fixRivers;
     private List<String> minfoRivers;
-    protected Map<String, LinkItem> rivers;
+    protected Map<String, HLayout> rivers;
 
     /**
      * The default constructor.
@@ -179,7 +179,7 @@
             public void onChange(ChangeEvent event) {
                 String selected = (String)event.getValue();
                 if (!rivers.isEmpty()) {
-                    for (Map.Entry<String, LinkItem> s: rivers.entrySet()) {
+                    for (Map.Entry<String, HLayout> s: rivers.entrySet()) {
                         if (selected.equals("minfo") && !minfoRivers.contains(s.getKey())) {
                             s.getValue().hide();
                         }
@@ -188,9 +188,7 @@
                         }
                         else {
                             s.getValue().show();
-                            s.getValue().setCellStyle("formCell");
                         }
-                        callUnHighlightRiver(s.getKey());
                     }
                 }
             }
@@ -235,12 +233,8 @@
         return new Data[] {data};
     }
 
-    public void setRivers(Map<String, LinkItem> rivers) {
+    public void setRivers(Map<String, HLayout> rivers) {
         this.rivers = rivers;
     }
-
-    private native void callUnHighlightRiver(String name) /*-{
-        $wnd.unHighlight(name);
-    }-*/;
 }
 // vim:set ts=4 sw=4 si et sta sts=4 fenc=utf8 :
--- a/gwt-client/src/main/webapp/images/FLYS_Karte_interactive.html	Tue May 28 13:49:51 2013 +0200
+++ b/gwt-client/src/main/webapp/images/FLYS_Karte_interactive.html	Tue May 28 15:57:10 2013 +0200
@@ -6,19 +6,19 @@
         unHighlight(highlighted);
         var river;
         if (availableRiver(name)) {
-          console.log('highlighting ' + name);
           river = document.getElementById(name);
         }
         else {
-          console.log('not available' + name);
           river = document.getElementById(name + "_inactive");
         }
         if (river) {
           highlighted = name;
-          highlightRiver(name);
           river.style.visibility="visible";
         }
       }
+      function highlightList(name) {
+          highlightRiver(name);
+      }
       function unHighlight(name) {
         var river;
         if (availableRiver(name)) {
@@ -31,6 +31,9 @@
           river.style.visibility="hidden";
         }
       }
+      function unHighlightList(name) {
+          unHighlightRiver(name);
+      }
     </script>
   </head>
   <body>
@@ -41,30 +44,30 @@
 
         <!--FLYS_Karte.map-->
         <!-- mit daten -->
-        <area id="donau_area" shape="poly" onmouseover="highlight('Donau')" onmouseout="unHighlight('Donau')" onclick="selectRiver('Donau')" coords="226,668,276,668,277,646,385,578,433,576,431,587,458,604,429,620,396,634,363,658,305,681,230,691" />
-        <area id="donau_Ende_area" shape="poly" onmouseover="highlight('Donau')" onmouseout="unHighlight('Donau')" onclick="selectRiver('Donau')" coords="482,551,505,534,559,530,560,574,639,621,639,659,562,646,561,631,589,595,557,579,525,589,490,573" />
-        <area id="donau_nordarm_area" shape="poly" onmouseover="highlight('Donau (Regensburg Nordarm)')" onmouseout="unHighlight('Donau (Regensburg Nordarm)')" onclick="selectRiver('Donau (Regensburg Nordarm)')" coords="437,567,432,587,454,600,478,596,467,570,491,542,443,534,441,556" />
-        <area id="donau_schleusen_area" shape="poly" onmouseover="highlight('Donau (Schleusenkanäle)')" onmouseout="unHighlight('Donau (Schleusenkanäle)')" onclick="selectRiver('Donau (Schleusenkanäle)')" coords="467,569,482,552,490,573,526,589,559,579,589,596,561,631,557,614,522,618,504,600,477,594" />
-        <area id="elbe_area" shape="poly" onmouseover="highlight('Elbe')" onmouseout="unHighlight('Elbe')" onclick="selectRiver('Elbe')" coords="271,131,261,147,345,191,337,243,388,243,418,238,395,284,412,310,446,315,454,329,514,397,550,447,580,451,593,461,593,466,629,489,643,470,639,444,596,392,575,360,573,327,509,293,462,289,444,229,448,219,298,131" />
-        <area id="fulda_sommer_area" shape="poly" onmouseover="highlight('Fulda (Sommer)')" onmouseout="unHighlight('Fulda (Sommer)')" onclick="selectRiver('Fulda (Sommer)')" coords="315,363,307,371,307,381,313,386,310,393,322,402,322,414,312,425,305,437,338,436,350,410,334,399,326,389" />
-        <area id="fulda_winter_area" shape="poly" onmouseover="highlight('Fulda (Winter)')" onmouseout="unHighlight('Fulda (Winter)')" onclick="selectRiver('Fulda (Winter)')" coords="315,362,307,370,307,380,313,385,310,392,315,397,322,401,322,413,313,423,305,436,279,434,262,411,260,395,275,375,299,357" />
-        <area id="havel_area" shape="poly" onmouseover="highlight('Havel')" onmouseout="unHighlight('Havel')" onclick="selectRiver('Havel')" coords="444,230,462,288,519,270,533,217,519,177,491,189,458,202" />
-        <area id="lahn_area" shape="poly" onmouseover="highlight('Lahn')" onmouseout="unHighlight('Lahn')" onclick="selectRiver('Lahn')" coords="195,464,197,450,186,413,262,411,285,442,270,459,217,472" />
-        <area id="main_area" shape="poly" onmouseover="highlight('Main')" onmouseout="unHighlight('Main')" onclick="selectRiver('Main')" coords="240,492,240,466,303,462,335,445,375,444,454,469,468,501,394,500,381,480,350,480,337,493,344,541,308,529,272,524,269,504" />
-        <area id="main_limbach_area" shape="poly" onmouseover="highlight('Main (Wehrarm Limbach)')" onmouseout="unHighlight('Main (Wehrarm Limbach)')" onclick="selectRiver('Main (Wehrarm Limbach)')" coords="360,480,381,480,393,500,383,519,368,520" />
-        <area id="main_volkach_area" shape="poly" onmouseover="highlight('Main (Wehrarm Volkach)')" onmouseout="unHighlight('Main (Wehrarm Volkach)')" onclick="selectRiver('Main (Wehrarm Volkach)')" coords="350,480,360,480,368,522,343,541,337,493" />
-        <area id="mosel_area" shape="poly" onmouseover="highlight('Mosel')" onmouseout="unHighlight('Mosel')" onclick="selectRiver('Mosel')" coords="190,467,170,461,138,453,102,466,103,494,98,537,86,600,125,604,149,583,130,543,140,518,162,515,194,511" />
-        <area id="neckar_area" shape="poly" onmouseover="highlight('Neckar')" onmouseout="unHighlight('Neckar')" onclick="selectRiver('Neckar')" coords="231,641,253,653,288,640,386,577,357,559,342,541,319,540,292,547,290,583,308,590,306,615,250,604,226,630" />
-        <area id="neckar_wehrarm_area" shape="poly" onmouseover="highlight('Neckar (über Wehrarme)')" onmouseout="unHighlight('Neckar (über Wehrarme)')" onclick="selectRiver('Neckar (über Wehrarme)')" coords="272,524,248,540,253,561,259,570,254,605,306,615,308,590,290,583,292,546,320,540,309,529" />
-        <area id="oder_area" shape="poly" onmouseover="highlight('Oder')" onmouseout="unHighlight('Oder')" onclick="selectRiver('Oder')" coords="572,143,542,155,542,178,529,203,541,238,565,252,583,273,570,307,603,327,641,320,639,286,633,275,614,269,619,246,635,236,637,195,606,160" />
-        <area id="rhein_area" shape="poly" onmouseover="highlight('Rhein')" onmouseout="unHighlight('Rhein')" onclick="selectRiver('Rhein')" coords="86,301,138,317,157,334,153,355,177,381,185,407,198,450,197,464,219,471,224,478,240,473,241,492,269,502,273,523,249,539,254,561,260,570,256,597,227,628,229,639,252,653,277,644,279,668,236,670,237,690,265,687,281,696,283,717,248,728,188,737,170,718,167,669,203,569,222,545,213,521,195,521,193,467,171,459,145,444,122,403,49,391,52,352,23,344,4,304" />
-        <area id="saale_area" shape="poly" onmouseover="highlight('Saale')" onmouseout="unHighlight('Saale')" onclick="selectRiver('Saale')" coords="445,314,414,311,366,299,366,342,395,346,404,356,424,358,477,354,463,341" />
-        <area id="saale_thüringen_area" shape="poly" onmouseover="highlight('Saale-Thüringen')" onmouseout="unHighlight('Saale-Thüringen')" onclick="selectRiver('Saale-Thüringen')" coords="424,358,476,354,490,384,430,461,375,444,387,415,402,408,420,387,435,383" />
-        <area id="saar_area" shape="poly" onmouseover="highlight('Saar')" onmouseout="unHighlight('Saar')" onclick="selectRiver('Saar')" coords="150,539,129,544,139,564,155,588,181,593,187,565,201,536,195,526,195,512,154,516" />
-        <area id="saar_wittingerbogen_area" shape="poly" onmouseover="highlight('Saar (Wiltinger Bogen)')" onmouseout="unHighlight('Saar (Wiltinger Bogen)')" onclick="selectRiver('Saar (Wiltinger Bogen)')" coords="139,518,155,516,149,540,130,542" />
-        <area id="werra_sommer_area" shape="poly" onmouseover="highlight('Werra (Sommer)')" onmouseout="unHighlight('Werra (Sommer)')" onclick="selectRiver('Werra (Sommer)')" coords="316,361,334,351,360,342,387,345,398,354,384,372,381,389,371,400,350,390,345,382,336,378,334,372,329,368" />
-        <area id="werra_winter_area" shape="poly" onmouseover="highlight('Werra (Winter)')" onmouseout="unHighlight('Werra (Winter)')" onclick="selectRiver('Werra (Winter)')" coords="315,362,326,388,334,398,350,409,370,400,353,391,347,388,346,385,344,382,335,378,333,372,329,368" />
-        <area id="weser_area" shape="poly" onmouseover="highlight('Weser')" onmouseout="unHighlight('Weser')" onclick="selectRiver('Weser')" coords="255,166,227,172,232,227,268,237,241,279,246,298,247,313,275,313,282,330,289,353,314,363,332,351,318,328,316,308,299,280,303,255,300,217,263,203,273,176" />
+        <area id="donau_area" shape="poly" onmouseover="highlight('Donau'); highlightList('Donau')" onmouseout="unHighlight('Donau'); unHighlightList('Donau')" onclick="selectRiver('Donau')" coords="226,668,276,668,277,646,385,578,433,576,431,587,458,604,429,620,396,634,363,658,305,681,230,691" />
+        <area id="donau_Ende_area" shape="poly" onmouseover="highlight('Donau'); highlightList('Donau')" onmouseout="unHighlight('Donau'); unHighlightList('Donau')" onclick="selectRiver('Donau')" coords="482,551,505,534,559,530,560,574,639,621,639,659,562,646,561,631,589,595,557,579,525,589,490,573" />
+        <area id="donau_nordarm_area" shape="poly" onmouseover="highlight('Donau (Regensburg Nordarm)'); highlightList('Donau (Regensburg Nordarm)')" onmouseout="unHighlight('Donau (Regensburg Nordarm)'); unHighlightList('Donau (Regensburg Nordarm)')" onclick="selectRiver('Donau (Regensburg Nordarm)')" coords="437,567,432,587,454,600,478,596,467,570,491,542,443,534,441,556" />
+        <area id="donau_schleusen_area" shape="poly" onmouseover="highlight('Donau (Schleusenkanäle)'); highlightList('Donau (Schleusenkanäle)')" onmouseout="unHighlight('Donau (Schleusenkanäle)'); unHighlightList('Donau (Schleusenkanäle)')" onclick="selectRiver('Donau (Schleusenkanäle)')" coords="467,569,482,552,490,573,526,589,559,579,589,596,561,631,557,614,522,618,504,600,477,594" />
+        <area id="elbe_area" shape="poly" onmouseover="highlight('Elbe'); highlightList('Elbe')" onmouseout="unHighlight('Elbe'); unHighlightList('Elbe')" onclick="selectRiver('Elbe')" coords="271,131,261,147,345,191,337,243,388,243,418,238,395,284,412,310,446,315,454,329,514,397,550,447,580,451,593,461,593,466,629,489,643,470,639,444,596,392,575,360,573,327,509,293,462,289,444,229,448,219,298,131" />
+        <area id="fulda_sommer_area" shape="poly" onmouseover="highlight('Fulda (Sommer)'); highlightList('Fulda (Sommer)')" onmouseout="unHighlight('Fulda (Sommer)'); unHighlightList('Fulda (Sommer)')" onclick="selectRiver('Fulda (Sommer)')" coords="315,363,307,371,307,381,313,386,310,393,322,402,322,414,312,425,305,437,338,436,350,410,334,399,326,389" />
+        <area id="fulda_winter_area" shape="poly" onmouseover="highlight('Fulda (Winter)'); highlightList('Fulda (Winter)')" onmouseout="unHighlight('Fulda (Winter)'); unHighlightList('Fulda (Winter)')" onclick="selectRiver('Fulda (Winter)')" coords="315,362,307,370,307,380,313,385,310,392,315,397,322,401,322,413,313,423,305,436,279,434,262,411,260,395,275,375,299,357" />
+        <area id="havel_area" shape="poly" onmouseover="highlight('Havel'); highlightList('Havel')" onmouseout="unHighlight('Havel'); unHighlightList('Havel')" onclick="selectRiver('Havel')" coords="444,230,462,288,519,270,533,217,519,177,491,189,458,202" />
+        <area id="lahn_area" shape="poly" onmouseover="highlight('Lahn'); highlightList('Lahn')" onmouseout="unHighlight('Lahn'); unHighlightList('Lahn')" onclick="selectRiver('Lahn')" coords="195,464,197,450,186,413,262,411,285,442,270,459,217,472" />
+        <area id="main_area" shape="poly" onmouseover="highlight('Main'); highlightList('Main')" onmouseout="unHighlight('Main'); unHighlightList('Main')" onclick="selectRiver('Main')" coords="240,492,240,466,303,462,335,445,375,444,454,469,468,501,394,500,381,480,350,480,337,493,344,541,308,529,272,524,269,504" />
+        <area id="main_limbach_area" shape="poly" onmouseover="highlight('Main (Wehrarm Limbach)'); highlightList('Main (Wehrarm Limbach)')" onmouseout="unHighlight('Main (Wehrarm Limbach)'); unHighlightList('Main (Wehrarm Limbach)')" onclick="selectRiver('Main (Wehrarm Limbach)')" coords="360,480,381,480,393,500,383,519,368,520" />
+        <area id="main_volkach_area" shape="poly" onmouseover="highlight('Main (Wehrarm Volkach)'); highlightList('Main (Wehrarm Volkach)')" onmouseout="unHighlight('Main (Wehrarm Volkach)'); unHighlightList('Main (Wehrarm Volkach)')" onclick="selectRiver('Main (Wehrarm Volkach)')" coords="350,480,360,480,368,522,343,541,337,493" />
+        <area id="mosel_area" shape="poly" onmouseover="highlight('Mosel'); highlightList('Mosel')" onmouseout="unHighlight('Mosel'); unHighlightList('Mosel')" onclick="selectRiver('Mosel')" coords="190,467,170,461,138,453,102,466,103,494,98,537,86,600,125,604,149,583,130,543,140,518,162,515,194,511" />
+        <area id="neckar_area" shape="poly" onmouseover="highlight('Neckar'); highlightList('Neckar')" onmouseout="unHighlight('Neckar'); unHighlightList('Neckar')" onclick="selectRiver('Neckar')" coords="231,641,253,653,288,640,386,577,357,559,342,541,319,540,292,547,290,583,308,590,306,615,250,604,226,630" />
+        <area id="neckar_wehrarm_area" shape="poly" onmouseover="highlight('Neckar (über Wehrarme)'); highlightList('Neckar (über Wehrarme)')" onmouseout="unHighlight('Neckar (über Wehrarme)'); unHighlightList('Neckar (über Wehrarme)')" onclick="selectRiver('Neckar (über Wehrarme)')" coords="272,524,248,540,253,561,259,570,254,605,306,615,308,590,290,583,292,546,320,540,309,529" />
+        <area id="oder_area" shape="poly" onmouseover="highlight('Oder'); highlightList('Oder')" onmouseout="unHighlight('Oder'); unHighlightList('Oder')" onclick="selectRiver('Oder')" coords="572,143,542,155,542,178,529,203,541,238,565,252,583,273,570,307,603,327,641,320,639,286,633,275,614,269,619,246,635,236,637,195,606,160" />
+        <area id="rhein_area" shape="poly" onmouseover="highlight('Rhein'); highlightList('Rhein')" onmouseout="unHighlight('Rhein'); unHighlightList('Rhein')" onclick="selectRiver('Rhein')" coords="86,301,138,317,157,334,153,355,177,381,185,407,198,450,197,464,219,471,224,478,240,473,241,492,269,502,273,523,249,539,254,561,260,570,256,597,227,628,229,639,252,653,277,644,279,668,236,670,237,690,265,687,281,696,283,717,248,728,188,737,170,718,167,669,203,569,222,545,213,521,195,521,193,467,171,459,145,444,122,403,49,391,52,352,23,344,4,304" />
+        <area id="saale_area" shape="poly" onmouseover="highlight('Saale'); highlightList('Saale')" onmouseout="unHighlight('Saale'); unHighlightList('Saale')" onclick="selectRiver('Saale')" coords="445,314,414,311,366,299,366,342,395,346,404,356,424,358,477,354,463,341" />
+        <area id="saale_thüringen_area" shape="poly" onmouseover="highlight('Saale-Thüringen'); highlightList('Saale-Thüringen')" onmouseout="unHighlight('Saale-Thüringen'); unHighlightList('Saale-Thüringen')" onclick="selectRiver('Saale-Thüringen')" coords="424,358,476,354,490,384,430,461,375,444,387,415,402,408,420,387,435,383" />
+        <area id="saar_area" shape="poly" onmouseover="highlight('Saar'); highlightList('Saar')" onmouseout="unHighlight('Saar'); unHighlightList('Saar')" onclick="selectRiver('Saar')" coords="150,539,129,544,139,564,155,588,181,593,187,565,201,536,195,526,195,512,154,516" />
+        <area id="saar_wittingerbogen_area" shape="poly" onmouseover="highlight('Saar (Wiltinger Bogen)'); highlightList('Saar (Wiltinger Bogen)')" onmouseout="unHighlight('Saar (Wiltinger Bogen)'); unHighlightList('Saar (Wiltinger Bogen)')" onclick="selectRiver('Saar (Wiltinger Bogen)')" coords="139,518,155,516,149,540,130,542" />
+        <area id="werra_sommer_area" shape="poly" onmouseover="highlight('Werra (Sommer)'); highlightList('Werra (Sommer)')" onmouseout="unHighlight('Werra (Sommer)'); unHighlightList('Werra (Sommer)')" onclick="selectRiver('Werra (Sommer)')" coords="316,361,334,351,360,342,387,345,398,354,384,372,381,389,371,400,350,390,345,382,336,378,334,372,329,368" />
+        <area id="werra_winter_area" shape="poly" onmouseover="highlight('Werra (Winter)'); highlightList('Werra (Winter)')" onmouseout="unHighlight('Werra (Winter)'); unHighlightList('Werra (Winter)')" onclick="selectRiver('Werra (Winter)')" coords="315,362,326,388,334,398,350,409,370,400,353,391,347,388,346,385,344,382,335,378,333,372,329,368" />
+        <area id="weser_area" shape="poly" onmouseover="highlight('Weser'); highlightList('Weser')" onmouseout="unHighlight('Weser'); unHighlightList('Weser')" onclick="selectRiver('Weser')" coords="255,166,227,172,232,227,268,237,241,279,246,298,247,313,275,313,282,330,289,353,314,363,332,351,318,328,316,308,299,280,303,255,300,217,263,203,273,176" />
         <!-- ohne daten -->
         <area id="donau_1_area" shape="poly" onmouseover="highlight('Donau_1')" onmouseout="unHighlight('Donau_1')" onclick="selectRiver('Donau_1')" coords="346,639,316,672,334,750,379,750,374,735,369,715,370,696,372,664,365,648" />
         <area id="donau_2_area" shape="poly" onmouseover="highlight('Donau_2')" onmouseout="unHighlight('Donau_2')" onclick="selectRiver('Donau_2')" coords="394,615,370,655,373,670,370,721,380,749,409,741,403,706,413,682,412,644,416,623" />
http://dive4elements.wald.intevation.org