@asymmetrik/angular2-leaflet - npm Package Compare versions

Comparing version 0.0.0 to 0.0.2

config/webpack.config.js

@@ -74,3 +74,3 @@ 'use strict';
 				options: {
-					configFileName: path.resolve('./config/tsconfig-dev.json')
+					configFileName: path.resolve('./tsconfig-dev.json')
 				}
@@ -77,0 +77,0 @@ },

dist/bundles/angular2-leaflet.js

@@ -1,2 +0,2 @@
-/*! @asymmetrik/angular2-leaflet-0.0.0 - Copyright Asymmetrik, Ltd. 2007-2017 - All Rights Reserved.*/
+/*! @asymmetrik/angular2-leaflet-0.0.2 - Copyright Asymmetrik, Ltd. 2007-2017 - All Rights Reserved.*/
 (function (global, factory) {
@@ -3,0 +3,0 @@ typeof exports === 'object' && typeof module !== 'undefined' ? factory() :

dist/bundles/angular2-leaflet.min.js

@@ -1,2 +0,2 @@
-/*! @asymmetrik/angular2-leaflet-0.0.0 - Copyright Asymmetrik, Ltd. 2007-2017 - All Rights Reserved.*/
+/*! @asymmetrik/angular2-leaflet-0.0.2 - Copyright Asymmetrik, Ltd. 2007-2017 - All Rights Reserved.*/
 !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t():"function"==typeof define&&define.amd?define(t):t()}(this,function(){"use strict";var e=require("./leaflet/leaflet.module");exports.LeafletModule=e.LeafletModule});

dist/example/example.component.js

@@ -8,3 +8,6 @@ "use strict";
     ExampleComponent.prototype.ngOnInit = function () {
-        this.message = 'World';
+        var _this = this;
+        setTimeout(function () {
+            _this.message += ' World';
+        }, 1000);
     };
@@ -11,0 +14,0 @@ ExampleComponent = __decorate([

dist/leaflet/core/leaflet.directive.d.ts

@@ -9,2 +9,3 @@ /// <reference types="leaflet" />
     element: ElementRef;
+    resizeTimer: any;
     map: L.Map;
@@ -14,3 +15,4 @@ fitOptions: {};
     zoomOptions: {};
-    config: {};
+    zoomPanOptions: {};
+    options: {};
     configureFn: (chart: any) => void;
@@ -26,3 +28,16 @@ zoom: number;
     getMap(): L.Map;
-    resize(): void;
+    onResize(event: any): void;
+    /**
+     * Resize the map to fit it's parent container
+     */
+    private doResize();
+    /**
+     * Manage a delayed resize of the component
+     */
+    private delayResize();
+    /**
+     * Set the view (center/zoom) all at once
+     * @param center The new center
+     * @param zoom The new zoom level
+     */
     private setView(center, zoom);
@@ -40,3 +55,3 @@ /**
     /**
-     * Set the center of the map
+     * Fit the map to the bounds
      * @param center the center point
@@ -43,0 +58,0 @@ */

dist/leaflet/core/leaflet.directive.js

@@ -12,4 +12,5 @@ "use strict";
         this.zoomOptions = this.DEFAULT_FPZ_OPTIONS;
+        this.zoomPanOptions = this.DEFAULT_FPZ_OPTIONS;
         // Default configuration
-        this.config = {};
+        this.options = {};
         this.element = el;
@@ -19,4 +20,4 @@ }
         // Create the map with some reasonable defaults
-        this.map = L.map(this.element.nativeElement, this.config)
-            .setView(this.center, this.zoom);
+        this.map = L.map(this.element.nativeElement, this.options);
+        this.setView(this.center, this.zoom);
         // Call for configuration
@@ -28,3 +29,3 @@ if (null != this.configureFn) {
         this.setFitBounds(this.fitBounds);
-        this.resize();
+        this.doResize();
     };
@@ -54,2 +55,18 @@ LeafletDirective.prototype.ngOnChanges = function (changes) {
         }
+        // Fit Options
+        if (changes['fitOptions']) {
+            this.fitOptions = changes['fitOptions'].currentValue;
+        }
+        // Pan Options
+        if (changes['panOptions']) {
+            this.panOptions = changes['panOptions'].currentValue;
+        }
+        // Zoom Options
+        if (changes['zoomOptions']) {
+            this.zoomOptions = changes['zoomOptions'].currentValue;
+        }
+        // Zoom/Pan Options
+        if (changes['zoomPanOptions']) {
+            this.zoomPanOptions = changes['zoomPanOptions'].currentValue;
+        }
     };
@@ -59,8 +76,29 @@ LeafletDirective.prototype.getMap = function () {
     };
-    LeafletDirective.prototype.resize = function () {
+    LeafletDirective.prototype.onResize = function (event) {
+        this.delayResize();
+    };
+    /**
+     * Resize the map to fit it's parent container
+     */
+    LeafletDirective.prototype.doResize = function () {
+        // Invalidate the map size to trigger it to update itself
         this.map.invalidateSize({});
     };
+    /**
+     * Manage a delayed resize of the component
+     */
+    LeafletDirective.prototype.delayResize = function () {
+        if (null != this.resizeTimer) {
+            clearTimeout(this.resizeTimer);
+        }
+        this.resizeTimer = setTimeout(this.doResize.bind(this), 200);
+    };
+    /**
+     * Set the view (center/zoom) all at once
+     * @param center The new center
+     * @param zoom The new zoom level
+     */
     LeafletDirective.prototype.setView = function (center, zoom) {
         if (this.map && null != center && null != zoom) {
-            this.map.setView(center, zoom);
+            this.map.setView(center, zoom, this.zoomPanOptions);
         }
@@ -87,3 +125,3 @@ };
     /**
-     * Set the center of the map
+     * Fit the map to the bounds
      * @param center the center point
@@ -97,6 +135,22 @@ */
     __decorate([
-        core_1.Input('leafletConfig'), 
+        core_1.Input('leafletFitOptions'), 
         __metadata('design:type', Object)
-    ], LeafletDirective.prototype, "config", void 0);
+    ], LeafletDirective.prototype, "fitOptions", void 0);
     __decorate([
+        core_1.Input('leafletPanOptions'), 
+        __metadata('design:type', Object)
+    ], LeafletDirective.prototype, "panOptions", void 0);
+    __decorate([
+        core_1.Input('leafletZoomOptions'), 
+        __metadata('design:type', Object)
+    ], LeafletDirective.prototype, "zoomOptions", void 0);
+    __decorate([
+        core_1.Input('leafletZoomPanOptions'), 
+        __metadata('design:type', Object)
+    ], LeafletDirective.prototype, "zoomPanOptions", void 0);
+    __decorate([
+        core_1.Input('leafletOptions'), 
+        __metadata('design:type', Object)
+    ], LeafletDirective.prototype, "options", void 0);
+    __decorate([
         core_1.Input('leafletConfigure'), 
@@ -117,2 +171,8 @@ __metadata('design:type', Function)
     ], LeafletDirective.prototype, "fitBounds", void 0);
+    __decorate([
+        core_1.HostListener('window:resize', ['$event']), 
+        __metadata('design:type', Function), 
+        __metadata('design:paramtypes', [Object]), 
+        __metadata('design:returntype', void 0)
+    ], LeafletDirective.prototype, "onResize", null);
     LeafletDirective = __decorate([
@@ -119,0 +179,0 @@ core_1.Directive({

dist/leaflet/leaflet.module.js

@@ -5,2 +5,3 @@ "use strict";
 var leaflet_layers_directive_1 = require('./layers/leaflet-layers.directive');
+var leaflet_control_layers_directive_1 = require('./layers/leaflet-control-layers.directive');
 var LeafletModule = (function () {
@@ -14,7 +15,9 @@ function LeafletModule() {
                 leaflet_directive_1.LeafletDirective,
-                leaflet_layers_directive_1.LeafletLayersDirective
+                leaflet_layers_directive_1.LeafletLayersDirective,
+                leaflet_control_layers_directive_1.LeafletLayersControlDirective
             ],
             declarations: [
                 leaflet_directive_1.LeafletDirective,
-                leaflet_layers_directive_1.LeafletLayersDirective
+                leaflet_layers_directive_1.LeafletLayersDirective,
+                leaflet_control_layers_directive_1.LeafletLayersControlDirective
             ],
@@ -21,0 +24,0 @@ providers: []

gulpfile.js

@@ -23,3 +23,11 @@ 'use strict';
 
+/**
+ * ENV Tasks
+ */
+let BUILD = false;
+gulp.task('env:BUILD', () => {
+	BUILD = true;
+});
 
+
 /**
@@ -32,3 +40,3 @@ * Validation Tasks
 	// Grab the tslint config
-	var config = require(path.resolve('./config/tslint.conf.js'));
+	var config = require(path.resolve('./config/tslint.config.js'));
 	config.formatter = 'prose';
@@ -41,3 +49,3 @@
 			summarizeFailureOutput: true,
-			emitError: true
+			emitError: BUILD
 		}));
@@ -53,3 +61,3 @@
 // Build JS from the TS source
-var tsProject = plugins.typescript.createProject(path.resolve('./config/tsconfig.json'));
+var tsProject = plugins.typescript.createProject(path.resolve('./tsconfig.json'));
 gulp.task('build-ts', () => {
@@ -112,3 +120,10 @@
 	new webpackDevServer(compiler, {
-		stats: { colors: true, chunks: false }
+		stats: {
+			colors: true,
+			chunks: false
+		},
+		watchOptions: {
+			aggregateTimeout: 300,
+			poll: 1000
+		},
 	}).listen(9000, 'localhost', (err) => {
@@ -122,2 +137,5 @@ if(err) throw new plugins.util.PluginError('webpack', err);
 
+gulp.task('watch-ts', () => {
+	gulp.watch(assets.src.allTs, ['validate-ts']);
+});
 
@@ -130,7 +148,7 @@ /**
 
-gulp.task('dev', [ 'webpack-dev-server' ]);
+gulp.task('dev', (done) => { runSequence('validate-ts', [ 'webpack-dev-server', 'watch-ts' ], done); } );
 
-gulp.task('build', (done) => { runSequence('validate-ts', 'build-ts', 'build-js', done); } );
+gulp.task('build', (done) => { runSequence('env:BUILD', 'validate-ts', 'build-ts', 'build-js', done); } );
 
 // Default task builds
 gulp.task('default', [ 'build' ]);

package.json

@@ -5,3 +5,3 @@ {
 	"description": "Angular 2 components for Leaflet",
-	"version": "0.0.0",
+	"version": "0.0.2",
 	"author": "Asymmetrik, Ltd.",
@@ -31,5 +31,8 @@ "copyright": "Copyright Asymmetrik, Ltd. 2007-2017 - All Rights Reserved.",
 		"@angular/core": "2.2",
+		"@angular/forms": "2.2",
 		"@angular/platform-browser": "2.2",
 		"@angular/platform-browser-dynamic": "2.2",
 
+		"bootstrap": "3",
+
 		"leaflet": "1.0",
@@ -36,0 +39,0 @@ "@types/leaflet": "1.0",

README.md

@@ -1,22 +0,67 @@
-# Angular2 Leaflet Component
+# @asymmetrik/angular2-leaflet
 
 [![Build Status][travis-image]][travis-url]
 
-## Getting Started 
-To get started, ensure that Node and NPM are installed, and use npm to install gulp globally ```npm install -g gulp```.
+> Leaflet packages for Angular 2
+> Provides flexible and extensible components for integrating Leaflet v0.7.x and v1.0.x into Angular 2 projects.
 
+## Table of Contents
+- [Install](#install)
+- [Usage](#usage)
+- [API](#api)
+- [Contribute](#contribute)
+- [License](#license)
+
+## Install
+This package is intended to be a starting point for a new project in a new repository. As such, installation involves forking the repository, or cloning it and optionally removing the .git directory to get rid of the repository history.
+
+Forking the repository will allow you to maintain a common history with this project. This will allow you to periodically perform git merges with this repository to pull in patches and improvements. If you want total freedom and are willing to manually merge changes in the future, feel free to delete the git history of your clone. 
+
+To get started, ensure that Node and NPM are installed.
 * Node and NPM (https://nodejs.org)
 * Gulp (https://gulpjs.org)
 
-Next, clone the repository and then run ```npm install``` from within the project directory. At this point, you should be ready to build the project.
+Use npm to install gulp globally:
+```
+npm install -g gulp
+```
 
-## Build Overview
-This project uses Gulp as a build framework. 
+Next, clone the repository and then install the npm packages in the project directory: 
+```
+npm install
+```
 
-To build the bundles, run ```gulp build```. This task will run TSLint over the source Typescript to ensure code quality and consistency. Then, it runs the Typescript compiler to generate ES5 Javascript. Finally, it uses Rollup to bundle the generated Javascript into and then uses Rollup to bundle the Javascript code into a distributable CommonJS format.
+At this point, you should be ready to build the project.
 
-To develop, run ```gulp dev```. This task will run Webpack dev server, watch all of the files in the project for changes, and make a server available where you can run the demo application.
 
+## Usage
+This project uses Gulp as a build framework. There are two primary tasks: build and dev, which build distribution artifacts and run the development server respecitvely. 
 
+### Building Artifacts for Distribution
+To build the bundles run:
+
+```
+gulp build
+```
+
+This task will run TSLint over the source Typescript to ensure code quality and consistency. Then, it runs the Typescript compiler to generate ES5 Javascript. Finally, it uses Rollup to bundle the generated Javascript into and then uses Rollup to bundle the Javascript code into a distributable CommonJS format.
+
+### Run the Demo for Development
+To run the demo using Webpack dev server, run
+```
+gulp dev
+```
+
+This task will run Webpack dev server, watch all of the files in the project for changes, and make a server available where you can run the demo application. Gulp watch will monitor for changes to Typescript source and re-run the TSLint.
+
+## API
+
+
+## Contribute
+PRs accepted. If you are part of Asymmetrik, please make contributions on feature branches off of the ```develop``` branch. If you are outside of Asymmetrik, please fork our repo to make contributions.
+
+## License
+See LICENSE in repository for details.
+
 [travis-url]: https://travis-ci.org/Asymmetrik/angular2-leaflet/
 [travis-image]: https://travis-ci.org/Asymmetrik/angular2-leaflet.svg

src/demo/app/leaflet/leaflet-demo.component.ts

 import { Component } from '@angular/core';
 
-import * as L from 'leaflet';
-
 @Component({
@@ -10,19 +8,12 @@ selector: 'leaflet-demo',
 export class LeafletDemoComponent {
-
 	showDemo = false;
-	layers = [
-		L.tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', {
-			maxZoom: 18,
-			attribution: 'Open Cycle Map'
-		})
-	];
-	zoom = 12;
-	center = L.latLng([ 46.879966, -121.726909 ]);
 
-	constructor() {
+	ngOnInit() {
+
+		// Primarily for debugging
 		setTimeout(() => {
 			this.showDemo = true;
 		}, 1000);
+
 	}
-
 }

src/demo/app/leaflet/leaflet-demo.module.ts

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
 
 import { LeafletDemoComponent } from './leaflet-demo.component';
+import { LeafletCoreDemoComponent } from './core/core-demo.component';
+import { LeafletLayersDemoComponent } from './layers/layers-demo.component';
 import { LeafletModule } from '../../../leaflet/leaflet.module';
@@ -10,6 +13,10 @@
 		CommonModule,
+		FormsModule,
+
 		LeafletModule
 	],
 	declarations: [
-		LeafletDemoComponent
+		LeafletDemoComponent,
+		LeafletCoreDemoComponent,
+		LeafletLayersDemoComponent
 	],
@@ -16,0 +23,0 @@ exports: [

src/demo/vendor.ts

@@ -26,2 +26,4 @@ /**
 // Global Imports
+import 'bootstrap/dist/css/bootstrap.css';
+import 'bootstrap/dist/css/bootstrap-theme.css';
 
@@ -28,0 +30,0 @@ // Angular2 Imports

src/leaflet/core/leaflet.directive.ts

@@ -1,2 +0,2 @@
-import { Directive, ElementRef, Input, OnChanges, OnInit, SimpleChange } from '@angular/core';
+import { Directive, ElementRef, HostListener, Input, OnChanges, OnInit, SimpleChange } from '@angular/core';
 
@@ -16,2 +16,3 @@ import * as L from 'leaflet';
 	element: ElementRef;
+	resizeTimer: any;
 
@@ -21,8 +22,10 @@ // Reference to the primary map object
 
-	fitOptions = this.DEFAULT_FPZ_OPTIONS;
-	panOptions = this.DEFAULT_FPZ_OPTIONS;
-	zoomOptions = this.DEFAULT_FPZ_OPTIONS;
+	@Input('leafletFitOptions') fitOptions = this.DEFAULT_FPZ_OPTIONS;
+	@Input('leafletPanOptions') panOptions = this.DEFAULT_FPZ_OPTIONS;
+	@Input('leafletZoomOptions') zoomOptions = this.DEFAULT_FPZ_OPTIONS;
+	@Input('leafletZoomPanOptions') zoomPanOptions = this.DEFAULT_FPZ_OPTIONS;
 
+
 	// Default configuration
-	@Input('leafletConfig') config = {};
+	@Input('leafletOptions') options = {};
 
@@ -49,4 +52,4 @@ // Configure callback function for the map
 		// Create the map with some reasonable defaults
-		this.map = L.map(this.element.nativeElement, this.config)
-			.setView(this.center, this.zoom);
+		this.map = L.map(this.element.nativeElement, this.options);
+		this.setView(this.center, this.zoom);
 
@@ -61,3 +64,3 @@ // Call for configuration
 
-		this.resize();
+		this.doResize();
 
@@ -94,2 +97,22 @@ }
 		}
+
+		// Fit Options
+		if (changes['fitOptions']) {
+			this.fitOptions = changes['fitOptions'].currentValue;
+		}
+
+		// Pan Options
+		if (changes['panOptions']) {
+			this.panOptions = changes['panOptions'].currentValue;
+		}
+
+		// Zoom Options
+		if (changes['zoomOptions']) {
+			this.zoomOptions = changes['zoomOptions'].currentValue;
+		}
+
+		// Zoom/Pan Options
+		if (changes['zoomPanOptions']) {
+			this.zoomPanOptions = changes['zoomPanOptions'].currentValue;
+		}
 	}
@@ -101,10 +124,38 @@
 
-	public resize() {
+
+	@HostListener('window:resize', ['$event'])
+	onResize(event: any) {
+		this.delayResize();
+	}
+
+	/**
+	 * Resize the map to fit it's parent container
+	 */
+	private doResize() {
+
+		// Invalidate the map size to trigger it to update itself
 		this.map.invalidateSize({});
+
 	}
 
+	/**
+	 * Manage a delayed resize of the component
+	 */
+	private delayResize() {
+		if (null != this.resizeTimer) {
+			clearTimeout(this.resizeTimer);
+		}
+		this.resizeTimer = setTimeout(this.doResize.bind(this), 200);
+	}
+
+
+	/**
+	 * Set the view (center/zoom) all at once
+	 * @param center The new center
+	 * @param zoom The new zoom level
+	 */
 	private setView(center: L.LatLng, zoom: number) {
 
 		if (this.map && null != center && null != zoom) {
-			this.map.setView(center, zoom);
+			this.map.setView(center, zoom, this.zoomPanOptions);
 		}
@@ -139,3 +190,3 @@
 	/**
-	 * Set the center of the map
+	 * Fit the map to the bounds
 	 * @param center the center point
@@ -142,0 +193,0 @@ */

src/leaflet/leaflet.module.ts

@@ -5,2 +5,3 @@ import { NgModule } from '@angular/core';
 import { LeafletLayersDirective } from './layers/leaflet-layers.directive';
+import { LeafletLayersControlDirective } from './layers/leaflet-control-layers.directive';
 
@@ -11,7 +12,9 @@ @NgModule({
 		LeafletDirective,
-		LeafletLayersDirective
+		LeafletLayersDirective,
+		LeafletLayersControlDirective
 	],
 	declarations: [
 		LeafletDirective,
-		LeafletLayersDirective
+		LeafletLayersDirective,
+		LeafletLayersControlDirective
 	],
@@ -18,0 +21,0 @@ providers: [

New alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Fixed alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

81413

increased by67.15%

Number of package files

60

increased by15.38%

Lines of code

1490

increased by56.68%

Number of lines in readme file

68

increased by195.65%

Worsened metrics

Dev dependency count

44

increased by4.76%

No dependency changes