forking from public

README.md

+JavaScript Module ``geoxml3`` [![Build Status](https://travis-ci.org/evoWeb/geoxml3.svg?branch=master)](https://travis-ci.org/evoWeb/geoxml3)
+=================
+
+The geoxml3 project is an effort to develop a KML processor for use with Version 3 of the Google Maps JavaScript API. This API is specifically designed to be lightweight and modular; accordingly, it did not originally contain the built-in KML support of Version 2. This library was originally intended to fill that need; as KML support has been added natively in Version 3, it now allows access to individual markers, polylines and polygons, rendered from KML. (Automatically exported from code.google.com/p/geoxml3
+)
+
+Original code inspired by Mike Williams' EGeoXml object (http://econym.org.uk/gmap/egeoxml.htm).
+
+**Refactoring efford**
+Project was forked from https://github.com/geocodezip/geoxml3 to refactor it.
+
+**General Notes**
+<ul>
+<li>Be aware that this code, like v3 itself, is a work in progress. There is no support for 3D, labels, or any other aspect of KML that the underlying Maps API fundation does not support. In other words, the current version only supports markers and ground overlays.
+<li>Support for polylines and polygons is present in the polys and kmz branches. Note that the v3 implementation of polygons uses CANVAS. To create holes in polygons, the inner holes must wind opposite the outer boundary.
+<li>One other area that's not supported is a sidebar, and it may never be. In my experience, this is something that's a real stretch for any general-purpose library; everyone has their own idea of what they want their sidebar entries to look like. There's also a valid argument that content outside the map is off-topic for a map extension anyway. If you want to create sidebar entries, there are callbacks that you can use to do it yourself. Also investigate the v3 port of Lance Dyas' GeoXml parser (http://code.google.com/p/geoxml-v3/) which has sidebar support.
+<li>In keeping with the modular nature of v3, ground overlay support in geoxml3 relies upon the  ProjectedOverlay  class released by John Coryat (http://www.usnaviguide.com). A compatible version of  ProjectedOverlay.js  is available for download from the Source section of this site.
+<li>In keeping with the modular nature of v3, KMZ support in geoxml3 relies upon the  ZipFile.complete.js  library. A compatible version of  ZipFile.complete.js  is available for download from the Source section of this site.
+<li>Geoxml3 is subject to the same cross-domain download restrictions as any JavaScript, so any KML document you expect it to process will need to be served from the same domain as the containing map page.
+</ul>
+
+**Basic Usage**
+
+1. Download  GeoXML3.js  to your web site from the Source tab above. You may also need  ProjectedOverlay.js  and/or  ZipFile.complete.js  (see above).
+
+2. Include it in your map page, something like this:
+
+````javascript
+  <script src="GeoXML3.js"></script>
+````
+
+3. Instantiate and initialize the object in JS, something like this:
+
+````javascript
+  var myParser = new geoXML3.parser({map: map});
+  myParser.parse('/path/to/data.kml');
+````

index.d.ts

+declare module 'evoweb-geoxml3';

index.js

+module.exports = {
+  MultiGeometry: require('./lib/MultiGeometry'),
+  GeoXML3: require('./lib/GeoXML3')
+};

lib/MultiGeometry.js

+/**
+ * A MultiGeometry object that will allow multiple polylines in a MultiGeometry
+ * containing LineStrings to be treated as a single object
+ *
+ * @param {array} multiGeometryOptions anonymous object. Available properties:
+ *  map: The map on which to attach the MultiGeometry
+ *  paths: the individual polylines
+ *  polylineOptions: options to use when constructing all the polylines
+ *
+ * @constructor
+ */
+function MultiGeometry(multiGeometryOptions) {
+  function createPolyline(polylineOptions, mg) {
+    var polyline = new google.maps.Polyline(polylineOptions);
+    google.maps.event.addListener(polyline, 'click', function (evt) {
+      google.maps.event.trigger(mg, 'click', evt);
+    });
+    google.maps.event.addListener(polyline, 'dblclick', function (evt) {
+      google.maps.event.trigger(mg, 'dblclick', evt);
+    });
+    google.maps.event.addListener(polyline, 'mousedown', function (evt) {
+      google.maps.event.trigger(mg, 'mousedown', evt);
+    });
+    google.maps.event.addListener(polyline, 'mousemove', function (evt) {
+      google.maps.event.trigger(mg, 'mousemove', evt);
+    });
+    google.maps.event.addListener(polyline, 'mouseout', function (evt) {
+      google.maps.event.trigger(mg, 'mouseout', evt);
+    });
+    google.maps.event.addListener(polyline, 'mouseover', function (evt) {
+      google.maps.event.trigger(mg, 'mouseover', evt);
+    });
+    google.maps.event.addListener(polyline, 'mouseup', function (evt) {
+      google.maps.event.trigger(mg, 'mouseup', evt);
+    });
+    google.maps.event.addListener(polyline, 'rightclick', function (evt) {
+      google.maps.event.trigger(mg, 'rightclick', evt);
+    });
+    return polyline;
+  }
+
+  this.setValues(multiGeometryOptions);
+  this.polylines = [];
+  this.paths = [];
+
+  for (var i = 0; i < this.paths.length; i++) {
+    var polylineOptions = multiGeometryOptions;
+    polylineOptions.path = this.paths[i];
+    var polyline = createPolyline(polylineOptions, this);
+    // Bind the polyline properties to the MultiGeometry properties
+    this.polylines.push(polyline);
+  }
+}
+
+MultiGeometry.prototype = new google.maps.MVCObject();
+
+MultiGeometry.prototype.changed = function (key) {
+  if (this.polylines) {
+    for (var i = 0; i < this.polylines.length; i++) {
+      this.polylines[i].set(key, this.get(key));
+    }
+  }
+};
+
+MultiGeometry.prototype.setMap = function (map) {
+  this.set('map', map);
+};
+
+MultiGeometry.prototype.getMap = function () {
+  return this.get('map');
+};
+
+module.exports = MultiGeometry;

lib/ProjectedOverlay.js

+/*
+ * Copyright (C) 2009 John D. Coryat
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+/**
+ * Create an overlay on the map from a projected image - Maps v3...
+ *
+ * @param map This Map
+ * @param imageUrl URL of the image (Mandatory)
+ * @param bounds Bounds object of image destination (Mandatory)
+ * @param opts Options
+ * @param opts.addZoom Added Zoom factor as a parameter to the imageUrl (include complete parameter, including separater like '?zoom='
+ * @param opts.id Default imageUrl, ID of the div
+ * @param opts.percentOpacity Default 50, percent opacity to use when the image is loaded 0-100.
+ * @param opts.rotation default 0, degrees clockwise to rotate the image
+ * @constructor
+ */
+function ProjectedOverlay(map, imageUrl, bounds, opts) {
+  google.maps.OverlayView.call(this);
+
+  this.active = false;
+  this.map_ = map;
+  this.url_ = imageUrl;
+  /**
+   * @var google.maps.LatLngBounds
+   * @param google.maps.LatLngBounds.getSouthWest
+   * @param google.maps.LatLngBounds.getNorthEast
+   * @private
+   */
+  this.bounds_ = bounds;
+  /**
+   * Add the zoom to the image as a parameter
+   *
+   * @var {string}
+   * @private
+   */
+  this.addZ_ = opts.addZoom || '';
+  /**
+   * Added to allow for multiple images
+   *
+   * @var {string}
+   * @private
+   */
+  this.id_ = opts.id || this.url_;
+  this.percentOpacity_ = opts.percentOpacity || 50;
+  this.rotation_ = opts.rotation || 0;
+  this.setMap(map);
+}
+
+ProjectedOverlay.prototype = new google.maps.OverlayView();
+
+ProjectedOverlay.prototype.createElement = function () {
+  var panes = this.getPanes();
+  var div = this.div_;
+
+  if (!div) {
+    div = this.div_ = document.createElement("div");
+    div.style.position = "absolute";
+    div.setAttribute('id', this.id_);
+    this.div_ = div;
+    this.lastZoom_ = -1;
+    if (this.percentOpacity_) {
+      this.setOpacity(this.percentOpacity_);
+    }
+    if (this.rotation_) {
+      this.setRotation(this.rotation_);
+    }
+    panes.overlayLayer.appendChild(div);
+  }
+};
+
+/**
+ * Remove the main DIV from the map pane
+ */
+ProjectedOverlay.prototype.remove = function () {
+  if (this.div_) {
+    this.div_.parentNode.removeChild(this.div_);
+    this.div_ = null;
+    this.setMap(null);
+  }
+};
+
+/**
+ * Redraw based on the current projection and zoom level
+ */
+ProjectedOverlay.prototype.draw = function () {
+  // Creates the element if it doesn't exist already.
+
+  this.createElement();
+
+  if (!this.div_) {
+    return;
+  }
+
+  /**
+   * @var google.maps.OverlayView projection
+   * @var google.maps.OverlayView.fromLatLngToDivPixel projection
+   */
+  var projection = this.get('projection'),
+    c1 = projection.fromLatLngToDivPixel(this.bounds_.getSouthWest()),
+    c2 = projection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
+
+  if (!c1 || !c2) return;
+
+  // Now position our DIV based on the DIV coordinates of our bounds
+
+  this.div_.style.width = Math.abs(c2.x - c1.x) + "px";
+  this.div_.style.height = Math.abs(c2.y - c1.y) + "px";
+  this.div_.style.left = Math.min(c2.x, c1.x) + "px";
+  this.div_.style.top = Math.min(c2.y, c1.y) + "px";
+
+  var url = this.url_;
+
+  if (this.addZ_) {
+    url += this.addZ_ + this.map_.getZoom();
+  }
+
+  this.div_.innerHTML = '<img src="' + url + '"  width=' + this.div_.style.width + ' height=' + this.div_.style.height + ' >';
+
+  // Do the rest only if the zoom has changed...
+
+  if (this.lastZoom_ === this.map_.getZoom()) {
+    return;
+  }
+
+  this.lastZoom_ = this.map_.getZoom();
+};
+
+ProjectedOverlay.prototype.setOpacity = function (opacity) {
+  if (opacity < 0) {
+    opacity = 0;
+  }
+  if (opacity > 100) {
+    opacity = 100;
+  }
+  var c = opacity / 100;
+
+  if (typeof(this.div_.style.filter) === 'string') {
+    this.div_.style.filter = 'alpha(opacity:' + opacity + ')';
+  }
+  if (typeof(this.div_.style.KHTMLOpacity) === 'string') {
+    this.div_.style.KHTMLOpacity = c;
+  }
+  if (typeof(this.div_.style.MozOpacity) === 'string') {
+    this.div_.style.MozOpacity = c;
+  }
+  if (typeof(this.div_.style.opacity) === 'string') {
+    this.div_.style.opacity = c;
+  }
+};
+
+ProjectedOverlay.prototype.setRotation = function (deg) {
+  this.div_.style.webkitTransform = 'rotate(' + deg + 'deg)';
+  this.div_.style.mozTransform = 'rotate(' + deg + 'deg)';
+  this.div_.style.msTransform = 'rotate(' + deg + 'deg)';
+  this.div_.style.oTransform = 'rotate(' + deg + 'deg)';
+  this.div_.style.transform = 'rotate(' + deg + 'deg)';
+};

package.json

+{
+  "name": "evoweb-geoxml3",
+  "description": "",
+  "keywords": [],
+  "author": "Sebastian Fischer <js@evoweb.de>",
+  "license": "GPL-2.0-or-later",
+  "version": "1.0.0",
+  "homepage": "https://github.com/evoWeb/geoxml3",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/evoWeb/geoxml3.git"
+  },
+  "devDependencies": {
+    "jshint": "^2.9.6",
+    "mocha": "^5.2.0"
+  },
+  "main": "index.js",
+  "scripts": {
+    "test": "mocha --async-only",
+    "lint": "jshint ./lib"
+  }
+}

test/fixtures/window.js

+module.exports = {
+};

test/geoxml3.js

+'use strict';
+
+const assert = require('assert'),
+  path = require('path');
+
+global.window = require(path.resolve(path.join(__dirname, 'fixtures/window')));
+global.google = require(path.resolve(path.join(__dirname, 'fixtures/google')));
+
+var MultiGeometry = require('../lib/MultiGeometry');
+var GeoXML3 = require('../lib/GeoXML3');
+
+describe('geoXML3', function () {
+  it('should create an object', function (done) {
+    assert.equal(typeof GeoXML3, 'object');
+    done();
+  });
+});