fdds/js/KML.js

   1 /*global L: true */
   2
   3 L.KML = L.FeatureGroup.extend({
   4         options: {
   5                 async: true
   6         },
   7
   8         initialize: function(kml, options) {
   9                 L.Util.setOptions(this, options);
  10                 this._kml = kml;
  11                 this._layers = {};
  12
  13                 if (kml) {
  14                         this.addKML(kml, options, this.options.async);
  15                 }
  16         },
  17
  18         loadXML: function(url, cb, options, async) {
  19                 if (async == undefined) async = this.options.async;
  20                 if (options == undefined) options = this.options;
  21
  22                 var req = new window.XMLHttpRequest();
  23                 req.open('GET', url, async);
  24                 try {
  25                         req.overrideMimeType('text/xml'); // unsupported by IE
  26                 } catch(e) {}
  27                 req.onreadystatechange = function() {
  28                         if (req.readyState != 4) return;
  29                         if(req.status == 200) cb(req.responseXML, options);
  30                 };
  31                 req.send(null);
  32         },
  33
  34         addKML: function(url, options, async) {
  35                 var _this = this;
  36                 var cb = function(gpx, options) { _this._addKML(gpx, options) };
  37                 this.loadXML(url, cb, options, async);
  38         },
  39
  40         _addKML: function(xml, options) {
  41                 var layers = L.KML.parseKML(xml);
  42                 if (!layers || !layers.length) return;
  43                 for (var i = 0; i < layers.length; i++)
  44                 {
  45                         this.fire('addlayer', {
  46                                 layer: layers[i]
  47                         });
  48                         this.addLayer(layers[i]);
  49                 }
  50                 this.latLngs = L.KML.getLatLngs(xml);
  51                 this.fire("loaded");
  52         },
  53
  54         latLngs: []
  55 });
  56
  57 L.Util.extend(L.KML, {
  58
  59         parseKML: function (xml) {
  60                 var style = this.parseStyle(xml);
  61                 this.parseStyleMap(xml, style);
  62                 var el = xml.getElementsByTagName("Folder");
  63                 var layers = [], l;
  64                 for (var i = 0; i < el.length; i++) {
  65                         if (!this._check_folder(el[i])) { continue; }
  66                         l = this.parseFolder(el[i], style);
  67                         if (l) { layers.push(l); }
  68                 }
  69                 el = xml.getElementsByTagName('Placemark');
  70                 for (var j = 0; j < el.length; j++) {
  71                         if (!this._check_folder(el[j])) { continue; }
  72                         l = this.parsePlacemark(el[j], xml, style);
  73                         if (l) { layers.push(l); }
  74                 }
  75                 return layers;
  76         },
  77
  78         // Return false if e's first parent Folder is not [folder]
  79         // - returns true if no parent Folders
  80         _check_folder: function (e, folder) {
  81                 e = e.parentElement;
  82                 while (e && e.tagName !== "Folder")
  83                 {
  84                         e = e.parentElement;
  85                 }
  86                 return !e || e === folder;
  87         },
  88
  89         parseStyle: function (xml) {
  90                 var style = {};
  91                 var sl = xml.getElementsByTagName("Style");
  92
  93                 //for (var i = 0; i < sl.length; i++) {
  94                 var attributes = {color: true, width: true, Icon: true, href: true,
  95                                                   hotSpot: true};
  96
  97                 function _parse(xml) {
  98                         var options = {};
  99                         for (var i = 0; i < xml.childNodes.length; i++) {
 100                                 var e = xml.childNodes[i];
 101                                 var key = e.tagName;
 102                                 if (!attributes[key]) { continue; }
 103                                 if (key === 'hotSpot')
 104                                 {
 105                                         for (var j = 0; j < e.attributes.length; j++) {
 106                                                 options[e.attributes[j].name] = e.attributes[j].nodeValue;
 107                                         }
 108                                 } else {
 109                                         var value = e.childNodes[0].nodeValue;
 110                                         if (key === 'color') {
 111                                                 options.opacity = parseInt(value.substring(0, 2), 16) / 255.0;
 112                                                 options.color = "#" + value.substring(6, 8) + value.substring(4, 6) + value.substring(2, 4);
 113                                         } else if (key === 'width') {
 114                                                 options.weight = value;
 115                                         } else if (key === 'Icon') {
 116                                                 ioptions = _parse(e);
 117                                                 if (ioptions.href) { options.href = ioptions.href; }
 118                                         } else if (key === 'href') {
 119                                                 options.href = value;
 120                                         }
 121                                 }
 122                         }
 123                         return options;
 124                 }
 125
 126                 for (var i = 0; i < sl.length; i++) {
 127                         var e = sl[i], el;
 128                         var options = {}, poptions = {}, ioptions = {};
 129                         el = e.getElementsByTagName("LineStyle");
 130                         if (el && el[0]) { options = _parse(el[0]); }
 131                         el = e.getElementsByTagName("PolyStyle");
 132                         if (el && el[0]) { poptions = _parse(el[0]); }
 133                         if (poptions.color) { options.fillColor = poptions.color; }
 134                         if (poptions.opacity) { options.fillOpacity = poptions.opacity; }
 135                         el = e.getElementsByTagName("IconStyle");
 136                         if (el && el[0]) { ioptions = _parse(el[0]); }
 137                         if (ioptions.href) {
 138                                 // save anchor info until the image is loaded
 139                                 options.icon = new L.KMLIcon({
 140                                         iconUrl: ioptions.href,
 141                                         shadowUrl: null,
 142                                         iconAnchorRef: {x: ioptions.x, y: ioptions.y},
 143                                         iconAnchorType: {x: ioptions.xunits, y: ioptions.yunits}
 144                                 });
 145                         }
 146                         style['#' + e.getAttribute('id')] = options;
 147                 }
 148                 return style;
 149         },
 150
 151         parseStyleMap: function (xml, existingStyles) {
 152                 var sl = xml.getElementsByTagName("StyleMap");
 153
 154                 for (var i = 0; i < sl.length; i++) {
 155                         var e = sl[i], el;
 156                         var smKey, smStyleUrl;
 157
 158                         el = e.getElementsByTagName("key");
 159                         if (el && el[0]) { smKey = el[0].textContent; }
 160                         el = e.getElementsByTagName("styleUrl");
 161                         if (el && el[0]) { smStyleUrl = el[0].textContent; }
 162
 163                         if (smKey=='normal')
 164                         {
 165                                 existingStyles['#' + e.getAttribute('id')] = existingStyles[smStyleUrl];
 166                         }
 167                 }
 168
 169                 return;
 170         },
 171
 172         parseFolder: function (xml, style) {
 173                 var el, layers = [], l;
 174                 el = xml.getElementsByTagName('Folder');
 175                 for (var i = 0; i < el.length; i++) {
 176                         if (!this._check_folder(el[i], xml)) { continue; }
 177                         l = this.parseFolder(el[i], style);
 178                         if (l) { layers.push(l); }
 179                 }
 180                 el = xml.getElementsByTagName('Placemark');
 181                 for (var j = 0; j < el.length; j++) {
 182                         if (!this._check_folder(el[j], xml)) { continue; }
 183                         l = this.parsePlacemark(el[j], xml, style);
 184                         if (l) { layers.push(l); }
 185                 }
 186                 if (!layers.length) { return; }
 187                 if (layers.length === 1) { return layers[0]; }
 188                 return new L.FeatureGroup(layers);
 189         },
 190
 191         parsePlacemark: function (place, xml, style) {
 192                 var i, j, el, options = {};
 193                 el = place.getElementsByTagName('styleUrl');
 194                 for (i = 0; i < el.length; i++) {
 195                         var url = el[i].childNodes[0].nodeValue;
 196                         for (var a in style[url])
 197                         {
 198                                 // for jshint
 199                                 if (true)
 200                                 {
 201                                         options[a] = style[url][a];
 202                                 }
 203                         }
 204                 }
 205                 var layers = [];
 206
 207                 var parse = ['LineString', 'Polygon', 'Point'];
 208                 for (j in parse) {
 209                         // for jshint
 210                         if (true)
 211                         {
 212                                 var tag = parse[j];
 213                                 el = place.getElementsByTagName(tag);
 214                                 for (i = 0; i < el.length; i++) {
 215                                         var l = this["parse" + tag](el[i], xml, options);
 216                                         if (l) { layers.push(l); }
 217                                 }
 218                         }
 219                 }
 220
 221                 if (!layers.length) {
 222                         return;
 223                 }
 224                 var layer = layers[0];
 225                 if (layers.length > 1) {
 226                         layer = new L.FeatureGroup(layers);
 227                 }
 228
 229                 var name, descr = "";
 230                 el = place.getElementsByTagName('name');
 231                 if (el.length && el[0].childNodes.length) {
 232                         name = el[0].childNodes[0].nodeValue;
 233                 }
 234                 el = place.getElementsByTagName('description');
 235                 for (i = 0; i < el.length; i++) {
 236                         for (j = 0; j < el[i].childNodes.length; j++) {
 237                                 descr = descr + el[i].childNodes[j].nodeValue;
 238                         }
 239                 }
 240
 241                 if (name) {
 242                         layer.bindPopup("<h2>" + name + "</h2>" + descr);
 243                 }
 244
 245                 return layer;
 246         },
 247
 248         parseCoords: function (xml) {
 249                 var el = xml.getElementsByTagName('coordinates');
 250                 return this._read_coords(el[0]);
 251         },
 252
 253         parseLineString: function (line, xml, options) {
 254                 var coords = this.parseCoords(line);
 255                 if (!coords.length) { return; }
 256                 return new L.Polyline(coords, options);
 257         },
 258
 259         parsePoint: function (line, xml, options) {
 260                 var el = line.getElementsByTagName('coordinates');
 261                 if (!el.length) {
 262                         return;
 263                 }
 264                 var ll = el[0].childNodes[0].nodeValue.split(',');
 265                 return new L.KMLMarker(new L.LatLng(ll[1], ll[0]), options);
 266         },
 267
 268         parsePolygon: function (line, xml, options) {
 269                 var el, polys = [], inner = [], i, coords;
 270                 el = line.getElementsByTagName('outerBoundaryIs');
 271                 for (i = 0; i < el.length; i++) {
 272                         coords = this.parseCoords(el[i]);
 273                         if (coords) {
 274                                 polys.push(coords);
 275                         }
 276                 }
 277                 el = line.getElementsByTagName('innerBoundaryIs');
 278                 for (i = 0; i < el.length; i++) {
 279                         coords = this.parseCoords(el[i]);
 280                         if (coords) {
 281                                 inner.push(coords);
 282                         }
 283                 }
 284                 if (!polys.length) {
 285                         return;
 286                 }
 287                 if (options.fillColor) {
 288                         options.fill = true;
 289                 }
 290                 if (polys.length === 1) {
 291                         return new L.Polygon(polys.concat(inner), options);
 292                 }
 293                 return new L.MultiPolygon(polys, options);
 294         },
 295
 296         getLatLngs: function (xml) {
 297                 var el = xml.getElementsByTagName('coordinates');
 298                 var coords = [];
 299                 for (var j = 0; j < el.length; j++) {
 300                         // text might span many childNodes
 301                         coords = coords.concat(this._read_coords(el[j]));
 302                 }
 303                 return coords;
 304         },
 305
 306         _read_coords: function (el) {
 307                 var text = "", coords = [], i;
 308                 for (i = 0; i < el.childNodes.length; i++) {
 309                         text = text + el.childNodes[i].nodeValue;
 310                 }
 311                 text = text.split(/[\s\n]+/);
 312                 for (i = 0; i < text.length; i++) {
 313                         var ll = text[i].split(',');
 314                         if (ll.length < 2) {
 315                                 continue;
 316                         }
 317                         coords.push(new L.LatLng(ll[1], ll[0]));
 318                 }
 319                 return coords;
 320         }
 321
 322 });
 323
 324 L.KMLIcon = L.Icon.extend({
 325
 326         createIcon: function () {
 327                 var img = this._createIcon('icon');
 328                 img.onload = function () {
 329                         var i = img;
 330                         this.style.width = i.width + 'px';
 331                         this.style.height = i.height + 'px';
 332
 333                         if (this.anchorType.x === 'UNITS_FRACTION' || this.anchorType.x === 'fraction') {
 334                                 img.style.marginLeft = (-this.anchor.x * i.width) + 'px';
 335                         }
 336                         if (this.anchorType.y === 'UNITS_FRACTION' || this.anchorType.x === 'fraction') {
 337                                 img.style.marginTop  = (-(1 - this.anchor.y) * i.height) + 'px';
 338                         }
 339                         this.style.display = "";
 340                 };
 341                 return img;
 342         },
 343
 344         _setIconStyles: function (img, name) {
 345                 L.Icon.prototype._setIconStyles.apply(this, [img, name])
 346                 // save anchor information to the image
 347                 img.anchor = this.options.iconAnchorRef;
 348                 img.anchorType = this.options.iconAnchorType;
 349         }
 350 });
 351
 352
 353 L.KMLMarker = L.Marker.extend({
 354         options: {
 355                 icon: new L.KMLIcon.Default()
 356         }
 357 });
 358