Convert to ES module

.editorconfig

@@ -0,0 +1,9 @@
+root=true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_size = 2
+indent_style = space
+trim_trailing_whitespace = true

CHANGELOG.md

@@ -0,0 +1,21 @@
+# Change Log
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](http://keepachangelog.com/)
+and this project adheres to [Semantic Versioning](http://semver.org/).
+
+## Unreleased
+### Added
+- `topojsonSrc` option to specify custom TopoJSON world-map data
+
+### Changed
+- Upgrade dependencies: d3, leaflet, topojson(-client), uglify-js
+- Example page loads dependencies from `node_modules/` instead of making network requests
+- Convert to ES6+ module
+- Convert to ES6+ class
+- Use Webpack for build process (instead of directly calling uglify-js)
+- Example page loads plugin from `dist/` instead of `src/`
+
+## 0.0.1 - 2015-10-10
+### Added
+- Forked from https://github.com/Norkart/Leaflet-MiniMap

example/index.html

@@ -26,7 +26,7 @@
   <script src="../node_modules/d3/d3.min.js"></script>
   <script src="../node_modules/topojson-client/dist/topojson-client.min.js"></script>
   <script src="../node_modules/leaflet/dist/leaflet.js"></script>
-  <script src="../src/Control.GlobeMiniMap.js"></script>
+  <script src="../dist/Control.GlobeMiniMap.min.js"></script>
   <script>
     var layer = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
       attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'

package.json

@@ -26,10 +26,14 @@
     "topojson-client": "^3.0.0"
   },
   "devDependencies": {
-    "uglify-js": "^2.8.0"
+    "babel-core": "^6.24.0",
+    "babel-loader": "^7.0.0",
+    "babel-preset-env": "^1.4.0",
+    "webpack": "^2.4.0"
   },
   "scripts": {
-    "build:js": "uglifyjs --output dist/Control.GlobeMiniMap.min.js src/Control.GlobeMiniMap.js",
-    "build": "npm run build:js"
+    "build": "npm run build:js",
+    "build:js": "webpack --progress",
+    "build:js:watch": "webpack --progress --watch"
   }
 }

src/Control.GlobeMiniMap.js

@@ -1,35 +1,15 @@
-// Following https://github.com/Leaflet/Leaflet/blob/master/PLUGIN-GUIDE.md
-(function (factory, root) {
-
-    // define an AMD module that relies on 'leaflet'
-    if (typeof define === 'function' && define.amd) {
-        define(['leaflet', 'd3', 'topojson'], factory);
-    // define a Common JS module that relies on 'leaflet'
-    } else if (typeof module !== 'undefined' && module.exports) {
-        module.exports = factory(require('leaflet'), require('d3'), require('topojson'));
-    }else {
-        factory(root.L, root.d3 , root.topojson);
-    }
-}(function (L, d3, topojson) {
-
-	L.Control.GlobeMiniMap = L.Control.extend({
-		options: {
-			position: 'bottomright',
-			width: 82,
-			height: 82,
-			land: "#bbb",
-			water: "rgba(0, 0, 0, 0.3)",
-			marker: "#CC0000",
-			topojsonSrc: 'data/world.json'
-		},
+import 'd3';
+import L from 'leaflet';
+import 'topojson-client';
 
+class MiniMap extends L.Control {
   //layer is the map layer to be shown in the minimap
-		initialize: function (options) {
+  initialize (options) {
     L.Util.setOptions(this, options);
     console.log(this.options);
-		},
+  }
 
-		onAdd: function (map) {
+  onAdd (map) {
     console.log('onAdd()');
 
     this._mainMap = map;
@@ -42,26 +22,24 @@
     L.DomEvent.disableClickPropagation(this._container);
     L.DomEvent.on(this._container, 'mousewheel', L.DomEvent.stopPropagation);
 
-
-
     //Keep a record of this to prevent auto toggling when the user explicitly doesn't want it.
     this._userToggledDisplay = false;
     this._minimized = false;
 
     this._mainMap.on('moveend', this._onMainMapMoved, this);
 
     return this._container;
-		},
+  }
 
-		addTo: function (map) {
+  addTo (map) {
     console.log('addTo()');
     L.Control.prototype.addTo.call(this, map);
     this.initCanvas();
 
     return this;
-		},
+  }
 
-		initCanvas: function () {
+  initCanvas () {
     //marker icon
     //https://upload.wikimedia.org/wikipedia/commons/9/93/Map_marker_font_awesome.svg
 
@@ -85,14 +63,12 @@
       .attr("width", 400)
       .attr("height", 400)
 
-
     this.c = canvas.node().getContext("2d");
 
     this.path = d3.geo.path()
       .projection(this.projection)
       .context(this.c);
 
-
     var that = this;
     d3.json(this.options.topojsonSrc, function (world) {
       that.globe = {type: "Sphere"},
@@ -101,9 +77,9 @@
 
     //set to current view
     this.transitionMap(this._mainMap.getCenter());
-		},
+  }
 
-		transitionMap: function (p) {
+  transitionMap (p) {
     console.log('transtionMap');
     var that = this;
     var c = that.c;
@@ -121,25 +97,36 @@
           c.fillStyle = that.options.land, c.beginPath(), path(that.land), c.fill();
         };
       })
-		},
+  }
 
-		onRemove: function (map) {
+  onRemove (map) {
     this._mainMap.off('moveend', this._onMainMapMoved, this);
     this._mainMap.off('move', this._onMainMapMoving, this);
-		},
+  }
 
-		_onMainMapMoved: function (e) {
+  _onMainMapMoved (e) {
     console.log('mainmapmoved');
     if (!this._miniMapMoving) {
       this._mainMapMoving = true;
 
       this.transitionMap(this._mainMap.getCenter());
-
     } else {
       this._miniMapMoving = false;
     }
   }
-	});
+}
+MiniMap.prototype.options = {
+  position: 'bottomright',
+  width: 82,
+  height: 82,
+  land: "#bbb",
+  water: "rgba(0, 0, 0, 0.3)",
+  marker: "#CC0000",
+  topojsonSrc: 'data/world.json'
+}
+
+L.Control.GlobeMiniMap = MiniMap
+export default MiniMap
 
 L.control.globeminimap = function (layer, options) {
   return new L.Control.GlobeMiniMap(layer, options);
@@ -154,5 +141,3 @@
     this.miniMapControl = (new GlobeMiniMap()).addTo(this);
   }
 });
-
-}, window)); 

webpack.config.js

@@ -0,0 +1,49 @@
+var path = require('path');
+var webpack = require('webpack');
+
+module.exports = {
+  entry: './src/Control.GlobeMiniMap.js',
+
+  externals: {
+    d3: {
+      amd: 'd3',
+      commonjs: 'd3',
+      commonjs2: 'd3',
+      root: 'd3',
+    },
+    leaflet: {
+      amd: 'leaflet',
+      commonjs: 'leaflet',
+      commonjs2: 'leaflet',
+      root: 'L',
+    },
+    'topojson-client': {
+      amd: 'topojson-client',
+      commonjs: 'topojson-client',
+      commonjs2: 'topojson-client',
+      root: 'topojson',
+    },
+  },
+
+  module: {
+    rules: [{
+      test: /\.js$/,
+      use: {
+        loader: 'babel-loader',
+        options: {
+          presets: ['env'],
+        },
+      },
+    }],
+  },
+
+  output: {
+    filename: 'Control.GlobeMiniMap.min.js',
+    libraryTarget: 'umd',
+    path: path.resolve(__dirname, 'dist'),
+  },
+
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin(),
+  ],
+}