hgoebl · mathisloge · Sep 14, 2017 · Sep 14, 2017 · Sep 14, 2017 · Sep 14, 2017
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 .idea
 *.iml
 node_modules
+.vs
diff --git a/.jshintrc b/.jshintrc
diff --git a/Gruntfile.js b/Gruntfile.js
diff --git a/Leaflet.MultiOptionsPolyline.js b/Leaflet.MultiOptionsPolyline.js
diff --git a/Leaflet.MultiOptionsPolyline.min.js b/Leaflet.MultiOptionsPolyline.min.js
diff --git a/README.md b/README.md
@@ -11,7 +11,7 @@ Have a look at the demo. Links to source code are included.
 # Example
 
 ```js
-L.multiOptionsPolyline(points, {
+new MultiOptionsPolyline(points, {
     multiOptions: {
         optionIdxFn: function (latLng) {
             var i,
@@ -42,6 +42,10 @@ L.multiOptionsPolyline(points, {
 
     $ bower install hgoebl/Leaflet.MultiOptionsPolyline --save
 
+## NPM
+
+    npm install Leaflet.MultiOptionsPolyline --save
+
 # License
 
 MIT-License (see LICENSE file).

diff --git a/demo/index.html b/demo/index.html
@@ -3,9 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <title>Leaflet.MultiOptionsPolyline Demo</title>
-    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
-    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css" />
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
     <style>
         @media (min-width: 768px) {
             .map {
@@ -124,10 +123,10 @@ <h2>Speed</h2>
     </div>
 </div>
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.js"></script>
+<script src="https://unpkg.com/leaflet@1.0.0/dist/leaflet.js"></script>
 <script src="https://www.mapquestapi.com/sdk/leaflet/v2.2/mq-map.js?key=6kOLUi04ZadauhzPhyAe9yG2rc6kIMmQ"></script>
-<script src="../Leaflet.MultiOptionsPolyline.js"></script>
-<script src="lib/zepto.min.js"></script>
+<script src="js/MultiOptionsPolyline.js"></script>
+<script src="js/zepto.min.js"></script>
 <script src="js/demo.js"></script>
 </body>
-</html>
+</html>
diff --git a/demo/js/MultiOptionsPolyline.js b/demo/js/MultiOptionsPolyline.js
@@ -0,0 +1,83 @@
+var MultiOptionsPolyline = (function (leaflet) {
+'use strict';
+
+function __extends(d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+var MultiOptionsPolyline = /** @class */ (function (_super) {
+    __extends(MultiOptionsPolyline, _super);
+    function MultiOptionsPolyline(latlngs, options) {
+        var _this = _super.call(this) || this;
+        _this._options = options;
+        _this._originalLatlngs = latlngs;
+        //let copyBaseOptions = this._options.multiOptions.copyBaseOptions;
+        _this._layers = {};
+        /*if (copyBaseOptions) {
+            this.copyBaseOptions();
+        }*/
+        _this.setLatLngs(_this._originalLatlngs);
+        return _this;
+    }
+    /*
+    private copyBaseOptions ():void {
+        let multiOptions = this._options.multiOptions;
+        let optionsArray = multiOptions.options;
+        let len = optionsArray.length;
+
+        let baseOptions = Util.extend({}, this._options);
+        delete baseOptions.multiOptions;
+
+        for (let i = 0; i < len; ++i) {
+            optionsArray[i] = Util.extend(baseOptions, multiOptions.options[i]);
+        }
+    }
+    */
+    MultiOptionsPolyline.prototype.setLatLngs = function (latlngs) {
+        var _this = this;
+        var multiOptions = this._options.multiOptions, optionIdxFn = multiOptions.optionIdxFn, fnContext = multiOptions.fnContext || this, prevOptionIdx, optionIdx, segmentLatlngs;
+        this.eachLayer(function (layer) {
+            _this.removeLayer(layer);
+        }, this);
+        var len = latlngs.length;
+        for (var i = 1; i < len; ++i) {
+            optionIdx = optionIdxFn.call(fnContext, latlngs[i], latlngs[i - 1], i, latlngs);
+            if (i === 1) {
+                segmentLatlngs = [latlngs[0]];
+                prevOptionIdx = optionIdxFn.call(fnContext, latlngs[0], latlngs[0], 0, latlngs);
+            }
+            segmentLatlngs.push(latlngs[i]);
+            // is there a change in options or is it the last point?
+            if (prevOptionIdx !== optionIdx || i === len - 1) {
+                // Check if options is a function or an array
+                if (typeof multiOptions.options === "function") {
+                    this.addLayer(new leaflet.Polyline(segmentLatlngs, multiOptions.options(prevOptionIdx)));
+                }
+                else {
+                    this.addLayer(new leaflet.Polyline(segmentLatlngs, multiOptions.options[prevOptionIdx]));
+                }
+                prevOptionIdx = optionIdx;
+                segmentLatlngs = [latlngs[i]];
+            }
+        }
+    };
+    MultiOptionsPolyline.prototype.getLatLngs = function () {
+        return this._originalLatlngs;
+    };
+    MultiOptionsPolyline.prototype.getLatLngsSegments = function () {
+        var latlngs = [];
+        this.eachLayer(function (layer) {
+            if (layer instanceof leaflet.Polyline) {
+                latlngs.push(layer.getLatLngs());
+            }
+        });
+        return latlngs;
+    };
+    return MultiOptionsPolyline;
+}(leaflet.FeatureGroup));
+
+return MultiOptionsPolyline;
+
+}(L));