Ticket #1259: kml_styling_v1.diff

lib/OpenLayers/Format/KML.js

@@ -51 +51 @@
-     */
-    extractAttributes: true,
-    
+    /* Property: reverseFeatures 
+     * {Boolean} Reverse drawing order of features. Default is false, but
+     *           it seems like it should be true.
+     * */
+    reverseFeatures: false,
+
-    /**
-     * Property: internalns
-     * {String} KML Namespace to use -- defaults to the namespace of the
-     *     Placemark node being parsed, but falls back to kmlns. 
-     */
-null
+"*"
-
-    /**
+     * Property: features
+     * {Array} Array of features
+     *     
+     */
+    features: [],
+
+    /**
+     * Property: styles
+     * {Object} Storage of style objects
+     *     
+     */
+    styles: {},
+
+    /**
+     * Property: fetched
+     * {Object} Storage of KML URLs that have been fetched before
+     *     in order to prevent reloading them.
+     */
+    fetched: {},
+
+    /**
+     * APIProperty: maxDepth
+     * {Integer} Maximum depth for recursive loading external KML URLs 
+     *           Defaults to 1: fetch 1 level deep 
+     *           To disable any external fetching: set this to 0
+     */
+    maxDepth: 1,
+
+    /**
-     * Constructor: OpenLayers.Format.KML
-     * Create a new parser for KML.
-     *
@@ -72 +107 @@
-            trimSpace: (/^\s*|\s*$/g),
-            removeSpace: (/\s*/g),
-            splitSpace: (/\s+/),
-
+
+
+
+
-        };
-        OpenLayers.Format.XML.prototype.initialize.apply(this, [options]);
-    },
@@ -87 +125 @@
-     * Returns:
-     * {Array(<OpenLayers.Feature.Vector>)} List of features.
-     */
-
+, depth
-        if(typeof data == "string") {
-            data = OpenLayers.Format.XML.prototype.read.apply(this, [data]);
-        }
+
+        // Set initial recursion level
+        if (!depth) {
+            depth = 0;
+        }
+
+        // Fetch external links <NetworkLink> and <Link>
+        // Don't do anything if we have reached our maximum depth for recursion
+        if (depth < this.maxDepth) {
+            this.fetchLinks(data, depth);
+        }
+
+        // Parse internal Style information
+        this.parseStyles(data);
+
+        // Parse placemarks (features)
+        this.parseFeatures(data);
+
+        // Reverse drawing order of features (this seems to be standard in KML)
+        // Only do this on highest recursion level
+        if (this.reverseFeatures && depth == 0) {
+            this.features.reverse();
+        }
+
+        return this.features;
+    },
+
+    /**
+     * Method: fetchLinks
+     * Finds URLs of linked KML documents and fetches them
+     * 
+     * Parameters: 
+     * data  - {DOMElement} data to read/parse.
+     * depth - {Integer} current recursion level
+     * 
+     */
+   fetchLinks: function(data, depth) {
+        
+        var urlNodes = this.getElementsByTagNameNS(data,
+                                                       this.internalns,
+                                                       "NetworkLink");
+        var numurls = urlNodes.length;
+        var urls = new Array(numurls);
+        for(var i=0; i<numurls; i++) {
+            var hrefNode = this.getElementsByTagNameNS(urlNodes[i], 
+                                   this.internalns, 
+                                   "href")[0];
+            if(hrefNode) {
+                var href = OpenLayers.Util.getXmlNodeValue(hrefNode);
+
+                if (this.fetched[href]) { 
+                    continue;
+                }
+
+                if (OpenLayers.ProxyHost 
+                        && OpenLayers.String.startsWith(href, "http")) {
+                    href = OpenLayers.ProxyHost + escape(href);
+                }
+                var request = new OpenLayers.Ajax.Request(href, 
+                              {method: 'get', asynchronous: false });
+                this.fetched[href] = true; // prevent reloading the same urls
+                if (request && request.transport) {
+                    this.read(request.transport.responseText, depth + 1);
+                }
+            } 
+        }
+
+        var linkNodes = this.getElementsByTagNameNS(data,
+                                                       this.internalns,
+                                                       "Link");
+        var numlinks = linkNodes.length;
+        var links = new Array(numlinks);
+        for(var i=0; i<numlinks; i++) {
+            var hrefNode = this.getElementsByTagNameNS(linkNodes[i], 
+                                   this.internalns, 
+                                   "href")[0];
+            if(hrefNode) {
+                var href = OpenLayers.Util.getXmlNodeValue(hrefNode);
+
+                if (this.fetched[href]) { 
+                    continue;
+                }
+
+                if (OpenLayers.ProxyHost
+                        && OpenLayers.String.startsWith(href, "http")) {
+                    href = OpenLayers.ProxyHost + escape(href);
+                }
+                var request = new OpenLayers.Ajax.Request(href, 
+                              {method: 'get', asynchronous: false });
+                this.fetched[href] = true; // prevent reloading the same urls
+                if (request && request.transport) {
+                    this.read(request.transport.responseText, depth + 1);
+                }
+            } 
+        }
+    },
+
+    /**
+     * Method: getStyle
+     * Retrieves a style from a style hash using styleUrl as the key
+     * If the styleUrl doesn't exist yet, we try to fetch it 
+     * Internet
+     * 
+     * Parameters: 
+     * styleUrl  - {String} URL of style
+     * 
+     */
+    getStyle: function(styleUrl) {
+         
+        // Fetch remote Style URLs (if not fetched before) 
+        if (!this.styles[styleUrl] 
+                && !OpenLayers.String.startsWith(styleUrl, "#") 
+                && !this.fetched[baseUrl] ) {
+
+            var baseUrl = OpenLayers.Util.removeTail(styleUrl);
+            var href = baseUrl;
+
+            if (OpenLayers.String.startsWith(styleUrl, "http")) {
+                href = OpenLayers.ProxyHost + escape(baseUrl);
+            }
+                    
+            var request = new OpenLayers.Ajax.Request(href, 
+                              {method: 'get', asynchronous: false });
+            if (request && request.transport) {
+                this.fetched[baseUrl] = true; // prevent loading more than once
+                var data = request.transport.responseText;
+                if(typeof data == "string") {
+                    data = OpenLayers.Format.XML.prototype.read.apply(this, 
+                              [data]);
+                }
+                if (data) {
+                    this.parseStyles(data, baseUrl);
+                }
+            }
+
+        }
+
+        // return requested style
+        var style = this.styles[styleUrl];
+        return style;
+    },
+    
+
+    /**
+     * Method: parseStyles
+     * Looks for <Style> nodes in the data and parses them
+     * Also parses <StyleMap> nodes, but only uses the 'normal' key
+     * 
+     * Parameters: 
+     * data     - {DOMElement} data to read/parse.
+     * baseUrl  - {String} base URL of style
+     * 
+     */
+    parseStyles: function(data, baseUrl) {
+        // Parse Style nodes first
+        var styleNodes = this.getElementsByTagNameNS(data,
+                                                       this.internalns,
+                                                       "Style");
+        var numNodes = styleNodes.length;
+        var styles = {};
+        for(var i=0; i<numNodes; i++) {
+            var style = this.parseStyle(styleNodes[i]);
+            if(style) {
+                styleName = (baseUrl || "") + "#" + style.name;
+                styles[styleName] = style;
+            }
+        }
+
+        // Parse StyleMaps afterwards
+        // Only the default or "normal" part of the StyleMap is processed now
+        // To do the select or "highlight" bit, we'd need to change lots more
+        var styleMapNodes = this.getElementsByTagNameNS(data,
+                                                       this.internalns,
+                                                       "StyleMap");
+
+        var numNodes = styleMapNodes.length;
+
+        for(var i=0; i<numNodes; i++) {
+            var node = styleMapNodes[i];
+            var pairs = this.getElementsByTagNameNS(node, this.internalns, 
+                            "Pair");
+
+            var id = node.getAttribute("id");
+            for (var j=0; j<pairs.length; j++) {
+                var pair = pairs[j];
+        
+                // Use the shortcut in the SLD format to quickly retrieve the 
+                // value of a node. Maybe it's good to have a method in Util 
+                // to do this
+                var key = OpenLayers.Format.SLD.prototype.parseProperty(pair,
+                          this.internalns, "key");
+                var styleUrl = OpenLayers.Format.SLD.prototype.parseProperty(pair, 
+                          this.internalns, "styleUrl");
+
+                if (key == "normal") {
+                    styles[(baseUrl || "") + "#" + id] = styles[(baseUrl || "")
+                                                            + styleUrl];
+                }
+
+                if (key == "highlight") {
+                    // TODO: implement the "select" part
+                }
+
+            }
+        }
+
+        OpenLayers.Util.extend(this.styles, styles);
+
+    },
+
+    /**
+     * Method: parseStyle
+     * Parses the children of a <Style> node and builds the style hash
+     * accordingly
+     * 
+     * Parameters: 
+     * node - {DOMElement} <Style> node
+     * 
+     */
+    parseStyle: function(node) {
+        var style = {};
+        
+        var types = ["LineStyle", "PolyStyle", "IconStyle", "BalloonStyle"];
+        var type, nodeList, geometry, parser;
+        for(var i=0; i<types.length; ++i) {
+            type = types[i];
+            //this.internalns = node.namespaceURI ? 
+                    //node.namespaceURI : this.kmlns;
+            styleTypeNode = this.getElementsByTagNameNS(node, 
+                                                   this.internalns, type)[0];
+            if(!styleTypeNode) { 
+                continue;
+            }
+
+            // only deal with first geometry of this type
+            switch (type.toLowerCase()) {
+                case "linestyle":
+                    var colorNode = this.getElementsByTagNameNS(styleTypeNode, 
+                                               this.internalns, 
+                                               "color")[0];
+                    if (colorNode) {
+                        var colorNodeValue = OpenLayers.Util.getXmlNodeValue(
+                                                  colorNode);
+                        var matches = colorNodeValue.match(
+                                          this.regExes.kmlColor);
+
+                        // 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 widthNode = this.getElementsByTagNameNS(styleTypeNode, 
+                                               this.internalns,
+                                               "width")[0];
+                    if (widthNode) {
+                        style["strokeWidth"] = OpenLayers.Util.getXmlNodeValue(
+                                                    widthNode);
+                    }
+
+                case "polystyle":
+                    var colorNode = this.getElementsByTagNameNS(styleTypeNode, 
+                                               this.internalns, 
+                                               "color")[0];
+                    if (colorNode) {
+                        var colorNodeValue = OpenLayers.Util.getXmlNodeValue(
+                                                  colorNode);
+                        var matches = colorNodeValue.match(
+                                          this.regExes.kmlColor);
+
+                        // 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;
+                    }
+                    
+                    break;
+                case "iconstyle":
+                    var iconNode = this.getElementsByTagNameNS(styleTypeNode, 
+                                               this.internalns, 
+                                               "Icon")[0];
+
+                    // set default width and height of icon
+                    style["graphicWidth"] = 32;
+                    style["graphicHeight"] = 32;
+
+                    if (iconNode) {
+                        var hrefNode = this.getElementsByTagNameNS(iconNode, 
+                                               this.internalns, 
+                                               "href")[0];
+                        if (hrefNode) {                                                   
+                            href = OpenLayers.Util.getXmlNodeValue(hrefNode);
+
+                            // support for internal icons 
+                            //    (/root://icons/palette-x.png)
+                            // x and y tell the position on the palette:
+                            // - in pixels
+                            // - starting from the left bottom
+                            // We need to translate that to a position in the 
+                            // list and request the appropriate icon from the 
+                            // google maps website
+                            var matches = href.match(this.regExes.kmlIconPalette);
+                            if (matches)  {
+                                var palette = matches[1];
+                                var file_extension = matches[2];
+
+                                var xNode = this.getElementsByTagNameNS(iconNode, 
+                                                       this.internalns, 
+                                                       "x")[0];
+                                var x = OpenLayers.Util.getXmlNodeValue(xNode);
+
+                                var yNode = this.getElementsByTagNameNS(iconNode, 
+                                                       this.internalns, 
+                                                       "y")[0];
+                                var y = OpenLayers.Util.getXmlNodeValue(yNode);
+
+                                var posX = x ? x/32 : 0;
+                                var posY = y ? (7 - y/32) : 7;
+
+                                var pos = posY * 8 + posX;
+                                var href = "http://maps.google.com/mapfiles/kml/pal" 
+                                     + palette + "/icon" + pos + file_extension;
+                            }
+
+
+                            var wNode = this.getElementsByTagNameNS(iconNode, 
+                                                   this.internalns, 
+                                                   "w")[0];
+                            var w = OpenLayers.Util.getXmlNodeValue(wNode);
+
+                            var hNode = this.getElementsByTagNameNS(iconNode, 
+                                                   this.internalns, 
+                                                   "h")[0];
+                            var h = OpenLayers.Util.getXmlNodeValue(hNode);
+
+                            if (w) {
+                                style["graphicWidth"] = parseInt(w);
+                            }
+
+                            if (h) {
+                                style["graphicHeight"] = parseInt(h);
+                            }
+
+                            style["graphicOpacity"] = 1;
+                            style["externalGraphic"] = href;
+                        }
+
+                    }
+
+
+                    // hotSpots define the offset for an Icon
+                    var hotSpotNode = this.getElementsByTagNameNS(styleTypeNode, 
+                                               this.internalns, 
+                                               "hotSpot")[0];
+                    if (hotSpotNode) {
+                        var x = hotSpotNode.getAttribute("x");
+                        var y = hotSpotNode.getAttribute("y");
+
+                        var xUnits = hotSpotNode.getAttribute("xunits");
+                        if (xUnits == "pixels") {
+                            style["graphicXOffset"] = parseInt(x);
+                        }
+                        else if (xUnits == "insetPixels") {
+                            style["graphicXOffset"] = style["graphicWidth"] 
+                                                          - parseInt(x);
+                        }
+                        else if (xUnits == "fraction") {
+                            style["graphicXOffset"] = style["graphicWidth"] 
+                                                          * parseFloat(x);
+                        }
+
+                        var yUnits = hotSpotNode.getAttribute("yunits");
+                        if (yUnits == "pixels") {
+                            style["graphicYOffset"] = parseInt(y);
+                        }
+                        else if (yUnits == "insetPixels") {
+                            style["graphicYOffset"] = style["graphicHeight"] 
+                                                          - parseInt(y);
+                        }
+                        else if (yUnits == "fraction") {
+                            style["graphicYOffset"] = style["graphicHeight"] 
+                                                          * parseFloat(y);
+                        }
+                    }
+                    break;
+                case "balloonstyle":
+                    var balloonStyle = OpenLayers.Util.getXmlNodeValue(
+                                            styleTypeNode);
+                    if (balloonStyle) {
+                        style["balloonStyle"] = balloonStyle.replace(
+                                       this.regExes.straightBracket, "${$1}");
+                    }
+                    break;
+                default:
+            }
+        }
+
+
+        // Some polygons have no line color, so we use that
+        if (!style["strokeColor"]) {
+            style["strokeColor"] = style["fillColor"];
+        }
+
+        // Give the style a name
+        style["name"] =  node.getAttribute("id");
+
+        return style;
+    },
+
+    /**
+     * Method: parseFeatures
+     * Loop through all Placemark nodes and parse them.
+     * Will create a list of features
+     * 
+     * Parameters: 
+     * data - {DOMElement} data to read/parse.
+     * 
+     */
+    parseFeatures: function(data) {
-        var featureNodes = this.getElementsByTagNameNS(data,
-'*'
+this.internalns
-                                                       "Placemark");
-        var numFeatures = featureNodes.length;
-        var features = new Array(numFeatures);
+
-        for(var i=0; i<numFeatures; i++) {
-
+
+
+
+
-            if(feature) {
+                // give feature default style
+                feature.style = OpenLayers.Util.extend({}, 
+                                    OpenLayers.Feature.Vector.style["default"]);
+                 
+                if (feature.attributes.styleUrl) {
+                    var newStyle = this.getStyle(feature.attributes.styleUrl);
+                    if (newStyle) {
+                        feature.style = OpenLayers.Util.extend(feature.style, 
+                                            newStyle);
+                    }
+                }
+
+                // Make sure that <Style> nodes within a placemark are 
+                // processed as well: add a styleUrl attribute to the feature.
+                var styleNode = this.getElementsByTagNameNS(featureNode,
+                                                       this.internalns,
+                                                       "Style")[0];
+                if (styleNode) {
+                    var style = this.parseStyle(styleNode);
+                    if (style) {
+                        feature.style = OpenLayers.Util.extend(feature.style, 
+                                            style);
+                    }
+                }
+
+                // add feature to list of features
-                features[i] = feature;
-            } else {
-                throw "Bad Placemark: " + i;
-            }
-        }
-
+
+
+
-    },
-
-    /**
@@ -334 +833 @@
-     */
-    parseAttributes: function(node) {
-        var attributes = {};
-
+or 4 
-        var child, grandchildren, grandchild;
-        var children = node.childNodes;
-        for(var i=0; i<children.length; ++i) {
-            child = children[i];
-            if(child.nodeType == 1) {
-                grandchildren = child.childNodes;
-
-
+
+
+
+
+
+
+
+
+
+
+
-                    if(grandchild.nodeType == 3 || grandchild.nodeType == 4) {
-                        var name = (child.prefix) ?
-                                child.nodeName.split(":")[1] :
-                                child.nodeName;
-
-
-
+
+
+
+
+
-                    }
-
+ 
-            }
-        }
-        return attributes;

examples/proxy.cgi

@@ -12 +12 @@
-import urllib2
-import cgi
-import sys, os
+import zipfile, re, StringIO #for KMZ support
-
+
-# Designed to prevent Open Proxy type stuff.
-
+
-allowedHosts = ['www.openlayers.org', 'openlayers.org', 
-                'labs.metacarta.com', 'world.freemap.in', 
-
+
+
+
+
-
-method = os.environ["REQUEST_METHOD"]
-
-
-
-
-
-
-
-
+
+
+
+
+
+
-else:
-
-
+
-
-try:
-    host = url.split("/")[2]
-
+
+
+
-        print "Status: 502 Bad Gateway"
-        print "Content-Type: text/plain"
-        print
-."
+: ", host
-        print 
-        print os.environ
-  
@@ -60 +66 @@
-        else:
-            print "Content-Type: text/plain"
-        print
+
+        # Handle KMZ files
+        # First put content in StringIO object, so ZipFile can handle it
+        fileObject = StringIO.StringIO()
+        fileObject.write(y.read())
+
+        # Now try to handle it as a ZIP file
+        try:
+            zipObject = zipfile.ZipFile(fileObject, "r")
+
+        # if not, print the contents (most cases)
+        except zipfile.BadZipfile:
+            fileObject.seek(0) # reset pointer to start of file
+            print fileObject.read()
+
+        # It *is* a ZIP! Now loop through all files in ZIP
+        # and only print the ones ending in .kml
+        else:
+            for info in zipObject.infolist():
+                if re.search(r'''\.kml$''', info.filename):
+                  print zipObject.read(info.filename)
+            zipObject.close()
-        
-
-
+
-        y.close()
-    else:
-        print "Content-Type: text/plain"