Parse the KML LabelStyle and use the color and opacity value. Create a parseKmlColor function to avoid code duplication. r=pgiraud (closes #2413)

git-svn-id: http://svn.openlayers.org/trunk/openlayers@10007 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

lib/OpenLayers/Format/KML.js

@@ -277,13 +277,38 @@ OpenLayers.Format.KML = OpenLayers.Class(OpenLayers.Format.XML, {
         for(var i=0, len=nodes.length; i<len; i++) {
             var style = this.parseStyle(nodes[i]);
             if(style) {
-                styleName = (options.styleBaseUrl || "") + "#" + style.id;
+                var styleName = (options.styleBaseUrl || "") + "#" + style.id;
                 
                 this.styles[styleName] = style;
             }
         }
     },
 
+    /**
+     * Method: parseKmlColor
+     * Parses a kml color (in 'aabbggrr' format) and returns the corresponding 
+     * color and opacity or null if the color is invalid.
+     *
+     * Parameters: 
+     * kmlColor - {String} a kml formated color
+     *
+     * Returns:
+     * {Object}
+     */
+    parseKmlColor: function(kmlColor) {
+        var color = null;
+        if (kmlColor) {
+            var matches = kmlColor.match(this.regExes.kmlColor);
+            if (matches) {
+                color = {
+                    color: '#' + matches[4] + matches[3] + matches[2],
+                    opacity: parseInt(matches[1], 16) / 255
+                };
+            }
+        }
+        return color;
+    },
+
     /**
      * Method: parseStyle
      * Parses the children of a <Style> node and builds the style hash
@@ -296,7 +321,8 @@ OpenLayers.Format.KML = OpenLayers.Class(OpenLayers.Format.XML, {
     parseStyle: function(node) {
         var style = {};
         
-        var types = ["LineStyle", "PolyStyle", "IconStyle", "BalloonStyle"];
+        var types = ["LineStyle", "PolyStyle", "IconStyle", "BalloonStyle", 
+                     "LabelStyle"];
         var type, nodeList, geometry, parser;
         for(var i=0, len=types.length; i<len; ++i) {
             type = types[i];
@@ -309,20 +335,11 @@ OpenLayers.Format.KML = OpenLayers.Class(OpenLayers.Format.XML, {
             // only deal with first geometry of this type
             switch (type.toLowerCase()) {
                 case "linestyle":
-                    var color = this.parseProperty(styleTypeNode, "*", "color");
+                    var kmlColor = this.parseProperty(styleTypeNode, "*", "color");
+                    var color = this.parseKmlColor(kmlColor);
                     if (color) {
-                        var matches = (color.toString()).match(
+                        style["strokeColor"] = color.color;
-                                                         this.regExes.kmlColor);
+                        style["strokeOpacity"] = color.opacity;
-
-                        // transparency
-                        var alpha = matches[1];
-                        style["strokeOpacity"] = parseInt(alpha, 16) / 255;
-
-                        // rgb colors (google uses bgr)
-                        var b = matches[2]; 
-                        var g = matches[3]; 
-                        var r = matches[4]; 
-                        style["strokeColor"] = "#" + r + g + b;
                     }
                     
                     var width = this.parseProperty(styleTypeNode, "*", "width");
@@ -332,20 +349,11 @@ OpenLayers.Format.KML = OpenLayers.Class(OpenLayers.Format.XML, {
                     break;
 
                 case "polystyle":
-                    var color = this.parseProperty(styleTypeNode, "*", "color");
+                    var kmlColor = this.parseProperty(styleTypeNode, "*", "color");
+                    var color = this.parseKmlColor(kmlColor);
                     if (color) {
-                        var matches = (color.toString()).match(
+                        style["fillOpacity"] = color.opacity;
-                                                         this.regExes.kmlColor);
+                        style["fillColor"] = color.color;
-
-                        // transparency
-                        var alpha = matches[1];
-                        style["fillOpacity"] = parseInt(alpha, 16) / 255;
-
-                        // rgb colors (google uses bgr)
-                        var b = matches[2]; 
-                        var g = matches[3]; 
-                        var r = matches[4]; 
-                        style["fillColor"] = "#" + r + g + b;
                     }
                     // Check if fill is disabled
                     var fill = this.parseProperty(styleTypeNode, "*", "fill");
@@ -477,6 +485,15 @@ OpenLayers.Format.KML = OpenLayers.Class(OpenLayers.Format.XML, {
                                        this.regExes.straightBracket, "${$1}");
                     }
                     break;
+                case "labelstyle":
+                    var kmlColor = this.parseProperty(styleTypeNode, "*", "color");
+                    var color = this.parseKmlColor(kmlColor);
+                    if (color) {
+                        style["fontColor"] = color.color;
+                        style["fontOpacity"] = color.opacity;
+                    }
+                    break;
+
                 default:
             }
         }

tests/Format/KML.html

@@ -7,6 +7,7 @@
     var test_style = '<kml xmlns="http://earth.google.com/kml/2.0"> <Placemark>    <Style> <LineStyle> <color>870000ff</color> <width>10</width> </LineStyle> </Style>  <LineString> <coordinates> -112,36 -113,37 </coordinates> </LineString> </Placemark></kml>';
     var test_style_fill = '<kml xmlns="http://earth.google.com/kml/2.0"> <Placemark>    <Style> <PolyStyle> <fill>1</fill> <color>870000ff</color> <width>10</width> </PolyStyle> </Style>  <LineString> <coordinates> -112,36 -113,37 </coordinates> </LineString> </Placemark><Placemark>    <Style> <PolyStyle> <fill>0</fill> <color>870000ff</color> <width>10</width> </PolyStyle> </Style>  <LineString> <coordinates> -112,36 -113,37 </coordinates> </LineString> </Placemark></kml>';
     var test_style_outline = '<kml xmlns="http://earth.google.com/kml/2.0"> <Placemark>    <Style> <PolyStyle> <outline>0</outline> <color>870000ff</color> <width>10</width> </PolyStyle> </Style>  <LineString> <coordinates> -112,36 -113,37 </coordinates> </LineString> </Placemark></kml>';
+    var test_style_font = '<kml xmlns="http://earth.google.com/kml/2.0"> <Placemark><Style><LabelStyle><color>870000ff</color><scale>1.5</scale></LabelStyle></Style><LineString><coordinates> -112,36 -113,37 </coordinates></LineString></Placemark></kml>';
     var test_nl = '<kml xmlns="http://earth.google.com/kml/2.2"> <Document> <NetworkLink> <Link> <href>http://maker.geocommons.com/maps/1717/overlays/0</href> </Link> </NetworkLink> </Document></kml>';
 
     function test_Format_KML_constructor(t) { 
@@ -167,6 +168,13 @@
         var features = f.read(test_style_outline);
         t.eq(features[0].style.strokeWidth, "0", "KML Feature has no outline");
     } 
+    function test_Format_KML_extractStyleFont(t) {
+        t.plan(2);
+        var f = new OpenLayers.Format.KML({extractStyles: true});
+        var features = f.read(test_style_font);
+        t.eq(features[0].style.fontColor, "#ff0000", "font color is set");
+        t.eq(features[0].style.fontOpacity, parseInt('87', 16) / 255, "font opacity is set");
+    } 
     function test_Format_KML_getStyle(t) {
         t.plan(1);
         var style = {t: true};