🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
@bluehalo/ngx-leaflet
Advanced tools
@bluehalo/ngx-leaflet - npm Package Compare versions
Comparing version 18.0.2 to 19.0.0
| # Changelog | ||
| ## 19.0 | ||
| Support for Angular.io 19. | ||
| ## 18.0 | ||
@@ -4,0 +7,0 @@ Support for Angular.io 18. |
| { | ||
| "name": "@bluehalo/ngx-leaflet", | ||
| "description": "Angular.io components for Leaflet", | ||
| "version": "18.0.2", | ||
| "version": "19.0.0", | ||
| "author": "BlueHalo, LLC", | ||
@@ -13,4 +13,4 @@ "copyright": "Copyright BlueHalo 2007-2024 - All Rights Reserved.", | ||
| "peerDependencies": { | ||
| "@angular/common": "18", | ||
| "@angular/core": "18", | ||
| "@angular/common": "19", | ||
| "@angular/core": "19", | ||
| "leaflet": "1" | ||
@@ -29,4 +29,2 @@ }, | ||
| "types": "./index.d.ts", | ||
| "esm2022": "./esm2022/bluehalo-ngx-leaflet.mjs", | ||
| "esm": "./esm2022/bluehalo-ngx-leaflet.mjs", | ||
| "default": "./fesm2022/bluehalo-ngx-leaflet.mjs" | ||
@@ -33,0 +31,0 @@ } |
179
README.md
@@ -1,2 +0,2 @@ | ||
| # @asymmetrik/ngx-leaflet | ||
| # @bluehalo/ngx-leaflet | ||
@@ -10,7 +10,3 @@ [![Build Status][travis-image]][travis-url] | ||
| > Provides flexible and extensible components for integrating Leaflet v0.7.x and v1.x into Angular.io projects. | ||
| > Supports Angular v18 and use in Angular-CLI based projects. | ||
| > NOTE: This is the last version of this package that will be published under the @asymmetrik namespace. | ||
| > This and future versions will be published under the namespace: @bluehalo | ||
| ## Table of Contents | ||
@@ -32,3 +28,3 @@ - [Install](#install) | ||
| npm install leaflet | ||
| npm install @asymmetrik/ngx-leaflet | ||
| npm install @bluehalo/ngx-leaflet | ||
| ``` | ||
@@ -46,3 +42,4 @@ | ||
| ## Usage | ||
| To use this library, there are a handful of setup steps to go through that vary based on your app environment (e.g., Webpack, ngCli, SystemJS, etc.). | ||
| > NOTE: We've simplified the getting started instructions to be more targeted at the most recent versions of Angular.io and the use of Angular CLI. | ||
| Generally, the steps are: | ||
@@ -52,3 +49,3 @@ | ||
| * Import the Leaflet stylesheet | ||
| * Import the Leaflet module into your Angular project | ||
| * Import the ```LeafletModule``` into your Angular project | ||
| * Create and configure a map (see docs below and/or demo) | ||
@@ -73,22 +70,12 @@ | ||
| #### Configuring Webpack Style Loaders | ||
| If you are using Webpack, you will need to import the css file and have a style-loader configured. | ||
| You can use the demo included in this application as a reference. | ||
| #### Adding Styles in Angular CLI | ||
| If you are using Angular CLI, you will need to add the Leaflet CSS file to the styles array contained in ```angular.json``` | ||
| Generally, in ```vendor.ts```: | ||
| ```ts | ||
| import 'leaflet/dist/leaflet.css'; | ||
| ``` | ||
| And then in your webpack config file: | ||
| ```js | ||
| ```json | ||
| { | ||
| ... | ||
| "module" : { | ||
| loaders: [ | ||
| ... | ||
| { test: /\.css$/, loaders: [ 'style-loader', 'css-loader' ] }, | ||
| ... | ||
| ] | ||
| }, | ||
| "styles": [ | ||
| "styles.css", | ||
| "./node_modules/leaflet/dist/leaflet.css" | ||
| ], | ||
| ... | ||
@@ -98,12 +85,20 @@ } | ||
| #### A Note About Markers | ||
| Leaflet marker URLs don't play well with the Angular CLI build pipeline without some special handling. | ||
| The demo contained in this project demonstrates how to get around this problem. Here is a rough overview of the steps taken to get them working. | ||
| #### Adding Styles in Angular CLI | ||
| If you are using Angular CLI, you will need to add the Leaflet CSS file to the styles array contained in ```angular.json``` | ||
| 1. Include the leaflet marker assets so they are copied intact to the build output. | ||
| ```json | ||
| { | ||
| ... | ||
| "styles": [ | ||
| "styles.css", | ||
| "./node_modules/leaflet/dist/leaflet.css" | ||
| "assets": [ | ||
| { | ||
| "glob": "**/*", | ||
| "input": "public" | ||
| }, | ||
| { | ||
| "glob": "**/*", | ||
| "input": "./node_modules/leaflet/dist/images", | ||
| "output": "assets/" | ||
| } | ||
| ], | ||
@@ -114,33 +109,28 @@ ... | ||
| ### Import Code Dependencies and Module | ||
| This project is exported using UMD and it includes typings. | ||
| So, you shouldn't have to do anything special to use it if you're building your project in Typescript. | ||
| 1. Configure Leaflet to use the asset URLs as custom marker images. | ||
| #### 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 (and potentially the module that's using it). | ||
| For example, in your ```app.module.ts```, add: | ||
| ```js | ||
| import { LeafletModule } from '@asymmetrik/ngx-leaflet'; | ||
| let layer = marker([ 46.879966, -121.726909 ], { | ||
| icon: icon({ | ||
| ...Icon.Default.prototype.options, | ||
| iconUrl: 'assets/marker-icon.png', | ||
| iconRetinaUrl: 'assets/marker-icon-2x.png', | ||
| shadowUrl: 'assets/marker-shadow.png' | ||
| }) | ||
| }); | ||
| ``` | ||
| ... | ||
| imports: [ | ||
| ... | ||
| LeafletModule | ||
| ] | ||
| ... | ||
| ``` | ||
| ### Import LeafletModule | ||
| Potentially, you'll also need to import it into the module of the component that is going to actually use the ngx-leaflet directives. | ||
| See Angular.io docs of modules for more details (https://angular.io/guide/ngmodule). In this case, in ```my-module.module.ts```, add: | ||
| Before you can use the Leaflet components in your Angular.io app, you'll need to import it in your application. | ||
| Depending on if you're using standalone mode or not, you will import it into your modules and/or components. | ||
| ```js | ||
| import { LeafletModule } from '@asymmetrik/ngx-leaflet'; | ||
| import { LeafletModule } from '@bluehalo/ngx-leaflet'; | ||
| ... | ||
| imports: [ | ||
| ... | ||
| LeafletModule | ||
| ... | ||
| LeafletModule | ||
| ] | ||
@@ -151,12 +141,3 @@ ... | ||
| #### Not Using Typescript? | ||
| You brave soul. | ||
| The code is exported using UMD. | ||
| The bundles are generated as part of the build (`npm run build`) and placed into the ./dist dir. | ||
| You should be able to import is using whatever module system/builder you're using, even if you aren't using Typescript. | ||
| ### Create and Configure a Map | ||
| Once the dependencies are installed and you have imported the ```LeafletModule```, you're ready to add a map to your page. | ||
| To get a basic map to work, you have to: | ||
@@ -577,3 +558,3 @@ | ||
| As mentioned above, it might not work depending on how you are packaging your component. | ||
| This is how the ```@asymmetrik/ngx-leaflet-draw``` and ```@asymmetrik/ngx-leaflet-d3``` packages work, so you can use them as references. | ||
| This is how the ```@bluehalo/ngx-leaflet-draw``` and ```@bluehalo/ngx-leaflet-d3``` packages work, so you can use them as references. | ||
@@ -645,70 +626,4 @@ | ||
| } | ||
| ``` | ||
| ``` | ||
| ### A Note About Markers | ||
| 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. | ||
| 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). | ||
| The demo contained in this project demonstrates how to get around this problem (at least in a Webpack environment). | ||
| But, here is a rough overview of the steps taken to get them working. | ||
| #### Webpack Marker Workaround | ||
| 1. Import the marker images in your vendor file to get Webpack to process the images in the asset pipeline | ||
| ```js | ||
| import 'leaflet/dist/images/marker-shadow.png'; | ||
| import 'leaflet/dist/images/marker-icon.png'; | ||
| ``` | ||
| 1. Either host the images statically or use the file-loader Webpack plugin to generate the images. | ||
| 1. Determine the correct URL for the marker and marker-shadow images. If you're using a file hasher, you should be able to check Webpack's output for the generated images. If you are serving them directly without chunk hashing just figure out how to resolve the images on your server. | ||
| 1. Configure Leaflet to use the correct URLs as customer marker images | ||
| ```js | ||
| let layer = marker([ 46.879966, -121.726909 ], { | ||
| icon: icon({ | ||
| ...Icon.Default.prototype.options, | ||
| iconUrl: '2b3e1faf89f94a4835397e7a43b4f77d.png', | ||
| iconRetinaUrl: '680f69f3c2e6b90c1812a813edf67fd7.png', | ||
| shadowUrl: 'a0c6cc1401c107b501efee6477816891.png' | ||
| }) | ||
| }); | ||
| ``` | ||
| #### Angular CLI Marker Workaround | ||
| 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: | ||
| 1. Configure the CLI (by editing `angular.json`)to include leaflet assets as below. Detailed instructions can be found in the [asset-configuration](https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/asset-configuration.md) documentation. | ||
| ```json | ||
| { | ||
| ... | ||
| "assets": [ | ||
| "assets", | ||
| "favicon.ico", | ||
| { | ||
| "glob": "**/*", | ||
| "input": "./node_modules/leaflet/dist/images", | ||
| "output": "assets/" | ||
| } | ||
| ], | ||
| ... | ||
| } | ||
| ``` | ||
| 1. Configure Leaflet to use the correct URLs as customer marker images | ||
| ```js | ||
| let layer = marker([ 46.879966, -121.726909 ], { | ||
| icon: icon({ | ||
| ...Icon.Default.prototype.options, | ||
| iconUrl: 'assets/marker-icon.png', | ||
| iconRetinaUrl: 'assets/marker-icon-2x.png', | ||
| shadowUrl: 'assets/marker-shadow.png' | ||
| }) | ||
| }); | ||
| ``` | ||
| ## Extensions | ||
@@ -724,5 +639,5 @@ There are several libraries that extend the core functionality of ngx-leaflet: | ||
| * [ngx-leaflet on Stack Overflow](https://stackoverflow.com/questions/tagged/ngx-leaflet) | ||
| * [High-level intro to @asymmetrik/ngx-leaflet](https://github.com/BlueHalo/ngx-leaflet/wiki) | ||
| * [Using @asymmetrik/ngx-leaflet in Angular CLI projects](https://github.com/BlueHalo/ngx-leaflet/wiki/Getting-Started-Tutorial) | ||
| * [Integrating 3rd Party Leaflet Libraries with @asymmetrik/ngx-leaflet and @angular/cli](https://github.com/BlueHalo/ngx-leaflet/wiki/Integrating-Plugins) | ||
| * [High-level intro to @bluehalo/ngx-leaflet](https://github.com/BlueHalo/ngx-leaflet/wiki) | ||
| * [Using @bluehalo/ngx-leaflet in Angular CLI projects](https://github.com/BlueHalo/ngx-leaflet/wiki/Getting-Started-Tutorial) | ||
| * [Integrating 3rd Party Leaflet Libraries with @bluehalo/ngx-leaflet and @angular/cli](https://github.com/BlueHalo/ngx-leaflet/wiki/Integrating-Plugins) | ||
@@ -729,0 +644,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Fixed alerts
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Improved metrics
- Number of low quality alerts
1
-50%Worsened metrics
- Total package byte prevSize
143761
-46.01%- Number of package files
20
-41.18%- Lines of code
1237
-42.41%- Number of lines in readme file
644
-11.66%No dependency changes