@asymmetrik/ngx-leaflet - npm Package Compare versions

Comparing version 2.5.1 to 2.5.2

dist/bundles/ngx-leaflet.js

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

dist/bundles/ngx-leaflet.min.js

@@ -1,2 +0,2 @@
-/*! @asymmetrik/ngx-leaflet - 2.5.1 - Copyright Asymmetrik, Ltd. 2007-2017 - All Rights Reserved. + */
+/*! @asymmetrik/ngx-leaflet - 2.5.2 - Copyright Asymmetrik, Ltd. 2007-2017 - All Rights Reserved. + */
 !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("leaflet")):"function"==typeof define&&define.amd?define(["exports","@angular/core","leaflet"],t):t(e.ngxLeaflet={},e.ng.core,e.L)}(this,function(e,t,r){"use strict";var n=/** @class */function(){function e(e){this.DEFAULT_ZOOM=1,this.DEFAULT_CENTER=r.latLng(38.907192,-77.036871),this.DEFAULT_FPZ_OPTIONS={},this.fitBoundsOptions=this.DEFAULT_FPZ_OPTIONS,this.panOptions=this.DEFAULT_FPZ_OPTIONS,this.zoomOptions=this.DEFAULT_FPZ_OPTIONS,this.zoomPanOptions=this.DEFAULT_FPZ_OPTIONS,
@@ -3,0 +3,0 @@ // Default configuration

package.json

@@ -6,3 +6,3 @@ {
 	"description": "Angular 2+ components for Leaflet",
-	"version": "2.5.1",
+	"version": "2.5.2",
 	"author": "Asymmetrik, Ltd.",
@@ -9,0 +9,0 @@ "copyright": "Copyright Asymmetrik, Ltd. 2007-2017 - All Rights Reserved.",

README.md

@@ -8,9 +8,7 @@ # @asymmetrik/ngx-leaflet
 
-*IMPORTANT NOTE: We have renamed this project from ```angular2-leaflet``` to ```ngx-leaflet```.*
+> Leaflet packages for Angular.io (Angular 2+).
+> Provides flexible and extensible components for integrating Leaflet v0.7.x and v1.x into Angular.io projects.
+> Supports Angular v4, Ahead-of-Time compilation (AOT), and use in Angular-CLI based projects.
 
-> Leaflet packages for Angular 2+.
-> Provides flexible and extensible components for integrating Leaflet v0.7.x and v1.x into Angular 2+ projects.
-> Now supports Angular v4, Ahead-of-Time compilation (AOT), and use in Angular-CLI based projects.
 
-
 ## Table of Contents
@@ -20,2 +18,3 @@ - [Install](#install)
 - [API](#api)
+- [Getting Help](#help)
 - [Changelog](#changelog)
@@ -36,3 +35,3 @@ - [Contribute](#contribute)
 ```
-npm install @types/leaflet
+npm install --save-dev @types/leaflet
 ```
@@ -118,4 +117,4 @@
 
-#### Typescript Angular 2+ Module Import
-Before you can use the module in your Angular 2+ app, you'll need to import it in your application.
+#### Typescript Angular.io Module Import
+Before you can use the module in your Angular.io app, you'll need to import it in your application.
 
@@ -456,4 +455,4 @@ For example, in your ```app.module.ts```, add:
 <div leaflet
-	[leafletOptions]="options"
-	(leafletMapReady)="onMapReady($event)">
+     [leafletOptions]="options"
+     (leafletMapReady)="onMapReady($event)">
 </div>
@@ -464,3 +463,3 @@ ```
 onMapReady(map: Map) {
-	// Do stuff with map
+   // Do stuff with map
 }
@@ -474,9 +473,15 @@ ```
 #### Inject LeafletDirective into your Component
-In Angular 2, directives are injectable the same way that Services are.
+In Angular.io, directives are injectable the same way that Services are.
 This means that you can create your own component or directive and inject the ```LeafletDirective``` into it.
-This will only work if your custom component/directive exists on the same DOM element and is ordered after the injected LeafletDirective.
+This will only work if your custom component/directive exists on the same DOM element and is ordered after the injected LeafletDirective, or if it is on a child DOM element.
 
 ```html
+<!-- On the same DOM element -->
 <div leaflet myCustomDirective>
 </div>
+
+<!-- On a child DOM element -->
+<div leaflet>
+   <div myCustomDirective></div>
+</div>
 ```
@@ -486,16 +491,16 @@
 @Directive({
-	selector: '[myCustomDirective]'
+   selector: '[myCustomDirective]'
 })
 export class MyCustomDirective {
-	leafletDirective: LeafletDirective;
+   leafletDirective: LeafletDirective;
 	
-	constructor(leafletDirective: LeafletDirective) {
-    	this.leafletDirective = leafletDirective;
-    }
+   constructor(leafletDirective: LeafletDirective) {
+      this.leafletDirective = leafletDirective;
+   }
 
-	someFunction() {
-	    if (null != this.leafletDirective.getMap()) {
-	        // Do stuff with the map
-	    }
-	}
+   someFunction() {
+      if (null != this.leafletDirective.getMap()) {
+         // Do stuff with the map
+      }
+   }
 }
@@ -505,7 +510,7 @@ ```
 The benefit of this approach is it's a bit cleaner if you're interested in adding some reusable capability to the existing leaflet map directive.
-This is how the ```@asymmetrik/angualr2-leaflet-draw``` and ```@asymmetrik/angualr2-leaflet-d3``` packages work, so you can use them as references.
+This is how the ```@asymmetrik/ngx-leaflet-draw``` and ```@asymmetrik/ngx-leaflet-d3``` packages work, so you can use them as references.
 
 
 ### A Note About Markers
-If you use this component in an Angular 2 project and your project uses a bundler like Webpack, you might run into issues using Markers on maps.
+If you use this component in an Angular.io project and your project uses a bundler like Webpack, you might run into issues using Markers on maps.
 The issue is related to how Leaflet manipulates the image URLs used to render markers when you are using the default marker images.
@@ -520,4 +525,6 @@ The url manipulation is done at runtime and it alters the URLs in a way that breaks their format (this happens regardless of if you're using a file-loader or a url-loader).
 
-		import 'leaflet/dist/images/marker-shadow.png';
-		import 'leaflet/dist/images/marker-icon.png';
+   ```js
+   import 'leaflet/dist/images/marker-shadow.png';
+   import 'leaflet/dist/images/marker-icon.png';
+   ```
 
@@ -528,14 +535,16 @@ 1. Either host the images statically or use the file-loader Webpack plugin to generate the images.
 
-		let layer = marker([ 46.879966, -121.726909 ], {
-			icon: icon({
-				iconSize: [ 25, 41 ],
-				iconAnchor: [ 13, 0 ],
-				iconUrl: '2273e3d8ad9264b7daa5bdbf8e6b47f8.png',
-				shadowUrl: '44a526eed258222515aa21eaffd14a96.png'
-			})
-		});
+   ```js
+   let layer = marker([ 46.879966, -121.726909 ], {
+      icon: icon({
+         iconSize: [ 25, 41 ],
+         iconAnchor: [ 13, 41 ],
+         iconUrl: '2273e3d8ad9264b7daa5bdbf8e6b47f8.png',
+         shadowUrl: '44a526eed258222515aa21eaffd14a96.png'
+      })
+   });
+   ```
 
 #### Angular CLI Marker Workaround
 
-If you build your project using the [Angular CLI](https://github.com/angular/angular-cli), as of angular-cli release 1.0.0-rc.1 you can make the default leaflet marker assets available by doing the following:
+If you build your project using the [Angular CLI](https://github.com/angular/angular-cli), you can make the default leaflet marker assets available by doing the following:
 
@@ -566,4 +575,23 @@ 1. Edit `.angular-cli` (formerly `angular-cli.json`)
 
-1. When using markers in your code, you can now use references like : ```icon( { iconUrl: 'assets/marker-icon.png', shadowUrl: 'assets/marker-shadow.png' } )```
+1. Configure Leaflet to use the correct URLs as customer marker images
 
+   ```js
+   let layer = marker([ 46.879966, -121.726909 ], {
+      icon: icon({
+         iconSize: [ 25, 41 ],
+         iconAnchor: [ 13, 41 ],
+         iconUrl: 'assets/marker-icon.png',
+         shadowUrl: 'assets/marker-shadow.png'
+      })
+   });
+   ```
+
+
+## <a name="help">Getting Help</a>
+Here's a list of articles, tutorials, guides, and help resources:
+   * [Stack Overflow](https://stackoverflow.com/questions/tagged/ngx-leaflet)
+   * [High-level intro to @asymmetrik/ngx-leaflet](https://www.asymmetrik.com/introducing-ngx-leaflet)
+   * [Using @asymmetrik/ngx-leaflet in Angular CLI projects](https://www.asymmetrik.com/ngx-leaflet-tutorial-angular-cli)
+   
+
 ## Changelog
@@ -570,0 +598,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

241168

increased by0.23%

Number of lines in readme file

604

increased by4.86%

No dependency changes