GithubHelp home page GithubHelp logo

ng-maps / ng-maps Goto Github PK

View Code? Open in Web Editor NEW
46.0 8.0 13.0 13.11 MB

Modular map components for angular

License: MIT License

JavaScript 4.00% TypeScript 94.20% HTML 1.60% CSS 0.14% SCSS 0.01% Shell 0.04%
angular google-maps google-maps-api ng2 library maps here-maps here-maps-api map google

ng-maps's Introduction

NgMaps

codecov.io FOSSA Status

Contributions or questions? Joins us on discord.

Installation

First you need to install @ng-maps/core package and additionally depending on the maps provider you use @ng-maps/google or @ng-maps/here. For further steps please see the Docs of respective package.

Packages

This project is a mono repo and hosts multiple packages:

Package Version Docs Compatibility
@ng-maps/core @ng-maps/core Docs
@ng-maps/google @ng-maps/google Docs
@ng-maps/here @ng-maps/here Docs
@ng-maps/snazzy-info-window @ng-maps/snazzy-info-window google
@ng-maps/marker-clusterer @ng-maps/marker-clusterer Docs google (included in here)
@ng-maps/places @ng-maps/places Docs google
@ng-maps/data-layer @ng-maps/data-layer
@ng-maps/kml-layer @ng-maps/kml-layer
@ng-maps/drawing-layer @ng-maps/drawing-layer Docs google
@ng-maps/direction @ng-maps/direction Docs google

License

FOSSA Status

ng-maps's People

Contributors

brandonfl avatar daschtour avatar dependabot[bot] avatar fossabot avatar greenkeeper[bot] avatar kquiskamp avatar renovate[bot] avatar shajz avatar snyk-bot avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ng-maps's Issues

5.0.0 releases are incompatible between them (peer deps still point to v4)

Hi, I'm trying to update my ng-maps libraries dependencies (to update my app to ng16).

The command npm i @ng-maps/core@latest @ng-maps/google@latest @ng-maps/places@latest doesn't work because places and google still reference core@4 and not core@5.

image

I can update by running npm i @ng-maps/[email protected] @ng-maps/[email protected] @ng-maps/[email protected] but then I'm getting issues with zone.js when updating to Angular 16 (which requires [email protected], whose support is handled in core@5)

Drawing layer not supported on latest version of Core and Google

The core and google libs list support for angular 15, however the drawing layer is still pointing to angular 8, which causes an NPM dependency error on install

npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @ng-maps/[email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"^15.0.4" from the root project
npm ERR!   peer @angular/common@"^15.0.0 || ^16.0.0" from @angular/[email protected]
npm ERR!   node_modules/@angular/cdk
npm ERR!     @angular/cdk@"^15.0.4" from the root project
npm ERR!     peer @angular/cdk@"15.0.4" from @angular/[email protected]
npm ERR!     node_modules/@angular/material
npm ERR!       @angular/material@"^15.0.4" from the root project
npm ERR!       1 more (@angular/material-moment-adapter)
npm ERR!     1 more (ng2-charts)
npm ERR!   12 more (@angular/forms, @angular/material, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^8.0.0" from @ng-maps/[email protected]
npm ERR! node_modules/@ng-maps/drawing-layer
npm ERR!   @ng-maps/drawing-layer@"^0.0.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   peer @angular/common@"^8.0.0" from @ng-maps/[email protected]
npm ERR!   node_modules/@ng-maps/drawing-layer
npm ERR!     @ng-maps/drawing-layer@"^0.0.1" from the root project

Edit: Actually looks like the drawing layer isn't updated at all to support google's drawing manager? It references a part of core that doesn't exist anymore (GoogleMapsApiWrapper). Is there support for drawing manager in core, meaning the drawing layer isn't needed? This is currently a blocker preventing me from migrating from @agm-core to this, since it doesn't look like that is going to be updated to support the newer google SDK and angular 15 any time soon.

An in-range update of @angular/cli is breaking the build 🚨

The devDependency @angular/cli was updated from 8.0.1 to 8.0.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@angular/cli is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

Release Notes for v8.0.2

Commits

@angular/cli (8.0.2)

Commit Description Notes
use recommended TTY check logic [Closes #14640]
avoid updating when package is already up to date [Closes #14647]
resolve update migrations from referenced package root
add analytics option to options schema

@schematics/angular (8.0.2)

Commit Description Notes
default Ivy apps to AOT true
move browserslist even when no sourceRoot is available [Closes #14660]
add '@angular-devkit/build-webpack' package to the version 8 migration
update `ng-packagr` and `tsickle` when migrating to version 8

@angular-devkit/build-angular (0.800.2)

Commit Description Notes
re-order ES5 polyfills in karma HTMLs [Closes #14618]
server build is generating un-needed polyfill file [Closes #14655]

@angular-devkit/build-optimizer (0.800.2)

Commit Description Notes
wrap ClassDeclarations in an IIFE for better treeshaking [Closes #14610]
wrap es2015 class expressions for better tree-shaking [Closes #14610]
[Closes #14577]

@ngtools/webpack (8.0.2)

Commit Description Notes
always strip BOM when reading files
rebuilding project with errors reports cannot find .ts files in JIT [Closes #14644]


Special Thanks

Alan Agius, Alan, Charles Lyding, Amadou Sall, Judy Bogart, Alex Eagle, Matt Lewis, Filipe Silva

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

An in-range update of ng-packagr is breaking the build 🚨

The devDependency ng-packagr was updated from 5.3.0 to 5.4.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

ng-packagr is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

Angular 15 support

Hello,

When adding lib to angular 15, npm fails with :

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"^15.0.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^14.0.0" from @ng-maps/[email protected]
npm ERR! node_modules/@ng-maps/core
npm ERR!   @ng-maps/core@"3.0.2" from the root project

An in-range update of @types/googlemaps is breaking the build 🚨

The devDependency @types/googlemaps was updated from 3.36.2 to 3.36.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/googlemaps is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • ❌ ci/circleci: Build Error: Your tests failed on CircleCI (Details).

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

An in-range update of ng-packagr is breaking the build 🚨

The devDependency ng-packagr was updated from 5.2.0 to 5.3.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

ng-packagr is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • ❌ ci/circleci: Build Error: Your tests failed on CircleCI (Details).

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

ng-maps not able to install on latest Angular 14.2

I created a new Angular project from the command line ng new projectName
I then tried to install @ng-maps npm i @ng-maps-core
I receive peer dependency errors:
Conflicting peer dependency: @angular/[email protected] npm ERR! node_modules/@angular/platform-browser-dynamic npm ERR! peer @angular/platform-browser-dynamic@"14.2.0" from @ng-maps/[email protected] npm ERR! node_modules/@ng-maps/core npm ERR! @ng-maps/core@"*" from the root project
I have tried downgrading the Angular version and the @ng-maps but have not found the combination that will allow an install without forcing it or using the legacy-peer-deps flag.
I have also tried removing the node_modules and package-lock file and reinstalling without success.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

  • chore(deps): update dependency karma to v6.4.3
  • chore(deps): update dependency ng-mocks to v14.12.2
  • chore(deps): update dependency postcss to v8.4.38
  • chore(deps): update dependency ts-node to v10.9.2
  • chore(deps): update dependency @types/google.maps to v3.55.7
  • chore(deps): update dependency eslint to v8.57.0
  • chore(deps): update dependency eslint-import-resolver-typescript to v3.6.1
  • chore(deps): update dependency eslint-plugin-import to v2.29.1
  • chore(deps): update dependency eslint-plugin-react to v7.34.1
  • chore(deps): update dependency ng-packagr to v17.3.0
  • chore(deps): update dependency postcss-preset-env to ~8.5.0
  • chore(deps): update dependency pretty-quick to v3.3.1
  • chore(deps): update dependency typescript to v5.4.5
  • fix(deps): update angular monorepo (@angular/animations, @angular/common, @angular/compiler, @angular/compiler-cli, @angular/core, @angular/forms, @angular/language-service, @angular/platform-browser, @angular/platform-browser-dynamic, @angular/router, zone.js)
  • fix(deps): update dependency @googlemaps/markerclusterer to v2.5.3
  • fix(deps): update dependency tslib to v2.6.2
  • chore(deps): update actions/cache action to v4
  • chore(deps): update actions/checkout action to v4
  • chore(deps): update actions/setup-node action to v4
  • chore(deps): update actions/upload-artifact action to v4
  • chore(deps): update andstor/file-existence-action action to v3
  • chore(deps): update angular monorepo to v17 (major) (@angular/common, @angular/core)
  • chore(deps): update codecov/codecov-action action to v4
  • chore(deps): update commitlint monorepo to v19 (major) (@commitlint/cli, @commitlint/config-conventional, @commitlint/config-nx-scopes)
  • chore(deps): update dependency @jscutlery/semver to v5
  • chore(deps): update dependency @ng-maps/core to v6
  • chore(deps): update dependency @ngneat/spectator to v18
  • chore(deps): update dependency @types/jasmine to v5
  • chore(deps): update dependency eslint to v9
  • chore(deps): update dependency eslint-plugin-jsdoc to v48
  • chore(deps): update dependency eslint-plugin-prettier to v5
  • chore(deps): update dependency husky to v9
  • chore(deps): update dependency lint-staged to v15
  • chore(deps): update dependency postcss-import to v16
  • chore(deps): update dependency postcss-preset-env to v9
  • chore(deps): update dependency prettier to v3
  • chore(deps): update dependency pretty-quick to v4
  • chore(deps): update paambaati/codeclimate-action action to v6
  • chore(deps): update typescript-eslint monorepo to v7 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
  • fix(deps): update nrwl monorepo (major) (@nx/angular, @nx/eslint, @nx/eslint-plugin, @nx/workspace, nrwl/nx-set-shas, nx)
  • πŸ” Create all rate-limited PRs at once πŸ”

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions
.github/workflows/build.yml
  • actions/checkout v3
  • actions/cache v3
  • actions/cache v3
  • andstor/file-existence-action v2
  • actions/upload-artifact v3
.github/workflows/prepare.yml
  • actions/checkout v3
  • actions/cache v3
  • actions/cache v3
.github/workflows/qa.yml
  • actions/checkout v3
  • actions/cache v3
  • actions/cache v3
  • actions/checkout v3
  • actions/cache v3
  • actions/cache v3
  • andstor/file-existence-action v2
  • paambaati/codeclimate-action v4.0.0
  • codecov/codecov-action v3
  • actions/upload-artifact v3
  • actions/checkout v3
  • actions/cache v3
  • actions/cache v3
  • actions/cache v3
.github/workflows/release.yml
  • actions/checkout v3
  • actions/cache v3
.github/workflows/tags.yml
  • actions/checkout v3
  • nrwl/nx-set-shas v3
.github/workflows/version-auto.yml
  • actions/checkout v3
  • actions/setup-node v3
  • actions/cache v3
.github/workflows/version.yml
  • actions/checkout v3
  • actions/cache v3
npm
libs/core/package.json
  • tslib ^2.0.0
  • @angular/common ^17.0.0
  • @angular/core ^17.0.0
  • @angular/platform-browser-dynamic ^17.0.0
  • rxjs ^6.5.3 || ^7.4.0
  • zone.js ~0.12.0 || ~0.13.0 || ~0.14.0
libs/data-layer/package.json
  • tslib ^2.0.0
  • @angular/common ^17.0.0
  • @angular/core ^17.0.0
  • @ng-maps/core ^6.0.0
  • @ng-maps/google ^6.0.0
libs/direction/package.json
  • tslib ^2.0.0
  • @angular/common ^17.0.0
  • @angular/core ^17.0.0
  • @ng-maps/core ^6.0.0
  • @ng-maps/google ^6.0.0
libs/drawing-layer/package.json
  • tslib ^2.0.0
  • @angular/common ^17.0.0
  • @angular/core ^17.0.0
  • @ng-maps/core ^6.0.0
libs/google/package.json
  • tslib ^2.0.0
  • @angular/common ^17.0.0
  • @angular/core ^17.0.0
  • @types/google.maps ~3.51.0 || ~3.52.0 || ~3.53.0
  • @ng-maps/core ^6.0.0
libs/here/package.json
  • tslib ^2.0.0
  • @angular/common ^8.0.0 || ^9.0.0 || ^10.0.0 || ^16.0.0
  • @angular/core ^8.0.0 || ^9.0.0 || ^10.0.0 || ^16.0.0
  • @ng-maps/core ^2.0.0-alpha.7 || ^4.0.0 || ^5.0.0
  • @types/heremaps ^3.1.1
libs/kml-layer/package.json
  • tslib ^2.0.0
  • @angular/common ^8.0.0 || ^16.0.0
  • @angular/core ^8.0.0 || ^16.0.0
  • @ng-maps/core ^1.0.0 || ^4.0.0 || ^5.0.0
libs/marker-clusterer/package.json
  • tslib ^2.0.0
  • @angular/common ^17.0.0
  • @angular/core ^17.0.0
  • @ng-maps/core ^6.0.0
  • @ng-maps/google ^6.0.0
  • @googlemaps/markerclusterer ^2.0.0
libs/places/package.json
  • tslib ^2.0.0
  • @angular/common ^17.0.0
  • @angular/core ^17.0.0
  • @ng-maps/core ^6.0.0
  • @ng-maps/google ^6.0.0
libs/snazzy-info-window/package.json
  • tslib ^2.0.0
  • @angular/common ^17.0.0
  • @angular/core ^17.0.0
  • @ng-maps/core ^4.0.0 || ^5.0.0
  • snazzy-info-window ^1.1.0
package.json
  • @angular/animations 17.1.2
  • @angular/common 17.1.2
  • @angular/compiler 17.1.2
  • @angular/core 17.1.2
  • @angular/forms 17.1.2
  • @angular/platform-browser 17.1.2
  • @angular/platform-browser-dynamic 17.1.2
  • @angular/router 17.1.2
  • @googlemaps/markerclusterer ^2.0.0
  • @nx/angular 17.3.2
  • lodash-es ^4.17.21
  • rxjs ^7.6.0
  • snazzy-info-window ^1.1.1
  • tslib ^2.3.1
  • zone.js 0.14.3
  • @angular-devkit/build-angular 17.1.2
  • @angular-devkit/core 17.1.2
  • @angular-devkit/schematics 17.1.2
  • @angular-eslint/eslint-plugin 17.0.1
  • @angular-eslint/eslint-plugin-template 17.0.1
  • @angular-eslint/template-parser 17.0.1
  • @angular/cli ~17.1.0
  • @angular/compiler-cli 17.1.2
  • @angular/language-service 17.1.2
  • @commitlint/cli 18.6.0
  • @commitlint/config-conventional 18.6.0
  • @commitlint/config-nx-scopes 18.5.1
  • @compodoc/compodoc ^1.1.11
  • @jscutlery/semver 4.2.0
  • @ngneat/spectator ^15.0.0
  • @nx/eslint 17.3.2
  • @nx/eslint-plugin 17.3.2
  • @nx/workspace 17.3.2
  • @schematics/angular 17.1.2
  • @types/google.maps ~3.53.0
  • @types/jasmine ^4.3.1
  • @types/jasminewd2 ^2.0.10
  • @types/lodash-es ^4.17.7
  • @types/node 20.11.16
  • @types/snazzy-info-window ^1.1.7
  • @typescript-eslint/eslint-plugin 6.21.0
  • @typescript-eslint/parser 6.21.0
  • autoprefixer ^10.4.0
  • eslint 8.48.0
  • eslint-config-prettier 9.1.0
  • eslint-import-resolver-typescript ^3.0.0
  • eslint-plugin-import ^2.26.0
  • eslint-plugin-jsdoc ^39.3.6
  • eslint-plugin-prefer-arrow ^1.2.3
  • eslint-plugin-prettier ^4.2.1
  • eslint-plugin-react ^7.30.1
  • husky ^8.0.2
  • jasmine-core ~3.99.0
  • jasmine-spec-reporter ^7.0.0
  • karma ~6.4.0
  • karma-chrome-launcher ^3.1.1
  • karma-coverage ^2.2.0
  • karma-coverage-istanbul-reporter ~3.0.2
  • karma-jasmine ~5.1.0
  • karma-jasmine-html-reporter ^1.5.4
  • lint-staged ^9.2.1
  • ng-lint-staged ^12.0.0
  • ng-mocks 14.12.1
  • ng-packagr 17.1.2
  • ngx-deploy-npm 8.0.1
  • nx 17.3.2
  • postcss ^8.4.20
  • postcss-import ~15.1.0
  • postcss-preset-env ~8.4.0
  • postcss-url ~10.1.3
  • prettier ^2.8.1
  • pretty-quick ^3.1.3
  • ts-node 10.9.1
  • typescript 5.3.3
nvm
.nvmrc
  • node 20.11

  • Check this box to trigger a request for Renovate to run again on this repository

Angular 7.1.2 support

Any chance of making this usable for those of us with an Angular 7 project that can't be updated in the short term?

Angular 14.2.x support

Seems @ng-maps/[email protected] doesn't support Angular ^14.2.x

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @ng-maps/[email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/platform-browser-dynamic
npm ERR!   @angular/platform-browser-dynamic@"^14.2.12" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/platform-browser-dynamic@"14.2.0" from @ng-maps/[email protected]
npm ERR! node_modules/@ng-maps/core
npm ERR!   @ng-maps/core@"^3.0.2" from the root project
npm ERR!   peer @ng-maps/core@"^3.0.0" from @ng-maps/[email protected]
npm ERR!   node_modules/@ng-maps/google
npm ERR!     @ng-maps/google@"^3.0.1" from the root project
npm ERR!     1 more (@ng-maps/places)
npm ERR!   1 more (@ng-maps/places)
npm ERR!
npm ERR! Conflicting peer dependency: @angular/[email protected]
npm ERR! node_modules/@angular/platform-browser-dynamic
npm ERR!   peer @angular/platform-browser-dynamic@"14.2.0" from @ng-maps/[email protected]
npm ERR!   node_modules/@ng-maps/core
npm ERR!     @ng-maps/core@"^3.0.2" from the root project
npm ERR!     peer @ng-maps/core@"^3.0.0" from @ng-maps/[email protected]
npm ERR!     node_modules/@ng-maps/google
npm ERR!       @ng-maps/google@"^3.0.1" from the root project
npm ERR!       1 more (@ng-maps/places)
npm ERR!     1 more (@ng-maps/places)
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

No provider for DrawingManager

Hi,
I use angular 16 and I'm integrating NgMapsDrawingLayerModule in order to integrate drawing tool in my google map view.

I have imported the Module, but I receive the error:

[ErrorHandler] NullInjectorError: R3InjectorError(MapModule)[DrawingManager -> DrawingManager -> DrawingManager]: NullInjectorError: No provider for DrawingManager!

I added the component map-drawing-layer as child of map-view. I checked also that google maps drawing library is loaded correctly.

Thanks!

Docs/Readme have incorrect import instructions

The docs suggest importing the core module with a forRoot() call to pass the apiKey. But the sample application passes the key through a provider (and indeed forRoot is not applicable to the exported core module). Additionally it's not clear that to use google maps the google module must also be imported.

Add support for configuration length limit and debounce for autocomplete.

To reduce the amount of API calls for autocomplete inputs, it's common to have both a length limit (ie not request for 2/3 characters or less) and a debounce.

It would be good to see these added as configurable values in an optional directive with input like [mapAutocompleteConfig] or similar.

If there's a way to do this without library changes please let me know. Otherwise, I am happy to try work on the issue, please just advise if you're open to contributions.

Custom icon in Google Maps Marker Cluster

Hi.

Is it possible to use a custom icon for a marker in Google Maps Marker Cluster when it is displayed as a single item?

Without clustering, I'm able to use a custom icon for each <map-marker> component.

But when I put <map-marker>s inside of a <map-marker-cluster> component, the custom icon no longer works. E.g. I'm able to set the custom icon for the clusters using a custom Renderer, but not each marker individually. It displays the default marker icon instead (pic 2).

ngmap-without-cluster

ngmap-cluster

here's the code excerpt:

@Component()
export class DemoLocations {
  public mockLocations = [
    { lat: -31.56391, lng: 147.154312 },
    { lat: -33.718234, lng: 150.363181 },
    { lat: -33.727111, lng: 150.371124 },
    { lat: -33.848588, lng: 151.209834 },
    { lat: -33.851702, lng: 151.216968 },
    { lat: -34.671264, lng: 150.863657 },
    { lat: -35.304724, lng: 148.662905 },
    { lat: -36.817685, lng: 175.699196 },
    { lat: -36.828611, lng: 175.790222 },
    { lat: -37.75, lng: 145.116667 },
    { lat: -37.759859, lng: 145.128708 },
    { lat: -37.765015, lng: 145.133858 },
    { lat: -37.770104, lng: 145.143299 },
    { lat: -37.7737, lng: 145.145187 },
    { lat: -37.774785, lng: 145.137978 },
    { lat: -37.819616, lng: 144.968119 },
    { lat: -38.330766, lng: 144.695692 },
    { lat: -39.927193, lng: 175.053218 },
    { lat: -41.330162, lng: 174.865694 },
    { lat: -42.734358, lng: 147.439506 },
    { lat: -42.734358, lng: 147.501315 },
    { lat: -42.735258, lng: 147.438 },
    { lat: -43.999792, lng: 170.463352 },
  ];

  public clusterRenderer: Renderer = {
    render: ({ count, position }) => {
      return new google.maps.Marker({
        position,
        icon: {
            url: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iNTEycHgiIGlkPSJMYXllcl8xIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjUxMnB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48Zz48Zz48cGF0aCBkPSJNMjU2LDQ4QzE0MS4xLDQ4LDQ4LDE0MS4xLDQ4LDI1NnM5My4xLDIwOCwyMDgsMjA4YzExNC45LDAsMjA4LTkzLjEsMjA4LTIwOFMzNzAuOSw0OCwyNTYsNDh6IE0yNTYsNDQ2LjcgICAgYy0xMDUuMSwwLTE5MC43LTg1LjUtMTkwLjctMTkwLjdjMC0xMDUuMSw4NS41LTE5MC43LDE5MC43LTE5MC43YzEwNS4xLDAsMTkwLjcsODUuNSwxOTAuNywxOTAuNyAgICBDNDQ2LjcsMzYxLjEsMzYxLjEsNDQ2LjcsMjU2LDQ0Ni43eiIvPjwvZz48L2c+PGc+PGc+PHBhdGggZD0iTTI1Niw5NmMtODguNCwwLTE2MCw3MS42LTE2MCwxNjBjMCw4OC40LDcxLjYsMTYwLDE2MCwxNjBjODguNCwwLDE2MC03MS42LDE2MC0xNjBDNDE2LDE2Ny42LDM0NC40LDk2LDI1Niw5NnoiLz48L2c+PC9nPjwvc3ZnPg==',
            scaledSize: new google.maps.Size(50, 50),
        },
        label: {
            text: String(count),
            color: "rgba(255,255,255,1)",
            fontSize: "18px",
            fontWeight: 'bold',
        },
        // adjust zIndex to be above other markers
        zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
      });
    }
  
}
<map-view>
  <map-marker-cluster [renderer]="clusterRenderer">
    <map-marker
      *ngFor="let m of mockLocations"
      [latitude]="m.lat"
      [longitude]="m.lng"
      [iconUrl]="{
        url: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIyMHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyMCAyMCIgd2lkdGg9IjIwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgZmlsbD0iIzAwMDAwMCIgaWQ9IkNvcmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNzAuMDAwMDAwLCAtODYuMDAwMDAwKSI+PGcgaWQ9ImNoZWNrLWNpcmNsZS1vdXRsaW5lLWJsYW5rIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNzAuMDAwMDAwLCA4Ni4wMDAwMDApIj48cGF0aCBkPSJNMTAsMCBDNC41LDAgMCw0LjUgMCwxMCBDMCwxNS41IDQuNSwyMCAxMCwyMCBDMTUuNSwyMCAyMCwxNS41IDIwLDEwIEMyMCw0LjUgMTUuNSwwIDEwLDAgTDEwLDAgWiBNMTAsMTggQzUuNiwxOCAyLDE0LjQgMiwxMCBDMiw1LjYgNS42LDIgMTAsMiBDMTQuNCwyIDE4LDUuNiAxOCwxMCBDMTgsMTQuNCAxNC40LDE4IDEwLDE4IEwxMCwxOCBaIiBpZD0iU2hhcGUiLz48L2c+PC9nPjwvZz48L3N2Zz4='
      }"
    >
    </map-marker>
  </map-marker-cluster>
</map-view>

I don't know if I looked into the right place, but could it be because the icon property is commented here? https://github.com/ng-maps/ng-maps/blob/main/libs/marker-clusterer/src/lib/services/managers/cluster-manager.ts#L66

require is undefined

Hello,

I have been working through an upgrade from agm maps to ng maps. The error below makes sense to me since require is meant to be used on the server not browser. On the browser import should be used. What am I missing…

Thanks

Screen Shot 2022-11-23 at 3 15 30 PM

Autocomplete errors

I have migrated from agm-maps to your project. Thanks for updating the code.

Unfortunately, my Google Maps Autocomplete seems to have stopped working.

core.mjs:7644 ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'Autocomplete')
TypeError: Cannot read properties of undefined (reading 'Autocomplete')

I import 'NgMapsPlacesModule' in app.module.ts

@NgModule({ imports: [ NgMapsCoreModule, NgMapsGoogleModule, NgMapsPlacesModule, NgMapsMarkerClustererModule, BrowserModule,

and in a shared module

@NgModule({ imports: [ NgMapsCoreModule, NgMapsGoogleModule, NgMapsMarkerClustererModule, NgMapsPlacesModule,

My TS component code (simplified), code is being called from ngViewAfterInit:
// load Places Autocomplete this.mapsAPILoader.load().then(() => { this.geocoder = new google.maps.Geocoder(); const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement); autocomplete.addListener('place_changed', () => { this.ngZone.run(() => { // get the place result const place: google.maps.places.PlaceResult = autocomplete.getPlace();

TS component constructor:

constructor(
    public dialogRef: MatDialogRef<DialogAddressLookupGoogleComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any, public definedInfo: DefinedInfo,
    private mapsAPILoader: MapsAPILoader,
    private ngZone: NgZone,
    private filterService: FilterService,
    private addressService: AddressService,
    public translate: TranslateService,
    public _snackbar: MatSnackBar,
    public permissionService: PermissionService) {

  }

and imported from
import {MapsAPILoader} from '@ng-maps/core';

Why is not working? It seems that new google.maps.places does not exist, indicating that NgMapsPlacesModule hasn't successfully been loaded in.

Marker Dragend error

Hello

Issue Description
I am using ng-maps v 3 and Ionic (Angular) , I am working on maps and when I drag a marker, the event is not displaying the data for drag event coords , the latLng values are empty.

My dev env info

Angular CLI: 14.0.5
Node: 16.15.0
Package Manager: npm 8.13.2
OS: win32 x64

Angular: 14.0.5
... cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1400.5
@angular-devkit/build-angular   14.0.5
@angular-devkit/core            14.0.5
@angular-devkit/schematics      14.0.5
@schematics/angular             14.0.5
rxjs                            6.6.7
typescript                      4.7.4

ng-maps version

"@ng-maps/core": "^3.0.0",
"@ng-maps/google": "^3.0.0",
"@ng-maps/marker-clusterer": "^3.0.0",
"@ng-maps/places": "^3.0.0",

Here is the html + ts code

 <map-marker [latitude]="latitude" [longitude]="longitude" [markerDraggable]="true" [animation]="'DROP'"
                [markerClickable]="true" (dragEnd)="markerDragEnd($event)" [iconUrl]="iconUrl">
 </map-marker>

  async markerDragEnd($event: any) {
    console.log('Marker dragged event : ' ,$event);
  }

Here is an error message

Marker dragged event :  
_.Ee {lat: Ζ’, lng: Ζ’}
lat: Ζ’ ()
arguments: null
caller: null
length: 0
name: ""

lng: Ζ’ ()
arguments: null
caller: null
length: 0
name: ""

Trouble with re-centering the map on user

I added a FAB button outside of the component, which on click calls this method:

@ViewChild('map') map: NgMapsViewComponent<any>;

.
.
.

recenterMap() {
    this.map.latitude = this.userLocation.latitude;
    this.map.longitude = this.userLocation.longitude;
  }

The method updates the map object, which I've checked via console logs, but it doesn't update the view. I've been fighting with it for 2 days and I'm not sure how to do this anymore. Any help would be greatly appreciated. I'm using Angular 16, Ionic 7 (the map is inside ion-modal, in case it's relevant)

Google Maps Custom Icon

The marker manager inside core only supports using a iconUrl. However, google maps native api also supports using a custom icon. The interface for the custom icon already exists in this library as MarkerIcon inside core. The map component also has an input for icon not just iconUrl. When an icon is provided as input it should be used rather than the iconUrl for google maps implementation of marker manager when creating a marker.

Upgraded from @agm and am having trouble the snazzy input window

When showing the snazzy info window, I get error "Error: Uncaught (in promise): TypeError: this.setMap is not a function". Doing some research led to this github issue in the underlying library: atmist/snazzy-info-window#29. It seems that the snazzy-info-window library is being loaded before the google maps js library, and so this derived class ends up with a blank parent prototype effectively.

The comments in the linked issue seem to suggest forcing the snazzy library to open later, and that seems like the obvious solution, but I have no idea how to do command angular to do that. It seems like webpack is loading the library before any angular code runs at all, so I have no way to configure behavior it seems like.

This part of the JS ecosystem I am barely familiar with, so I don't really know where to begin to fix this, so I'm hoping someone might have an idea of what to do here. As a disclaimer, I upgraded from angular 15 to angular 16 and switch from @agm to ng-maps at the same time since it seems agm no longer compiles in 16. It certainly is possible the 15 to 16 change could also be causing issues, but I was hoping someone more experienced in the area could comment on the issue before try the conversion at 15.

Multiple GoogleMapsApiScript tags being created when using MapsAPILoader to lazy load config

When I inject MapsAPILoader into a component to provide an API key it seems as though two of the following script tags are being written out to the page.

<script type="text/javascript" async defer id="GoogleMapsApiScript" src="https://maps.googleapis.com/maps/api/js?v=quarterly&amp;callback=LazyMapsAPILoader&amp;key=API_KEY_REDACTED"></script>

Which is causing the following error and preventing my map from displaying

You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.

in my app.module.ts I have

imports: [ NgMapsCoreModule.forRoot() ]

and in my component constructor I have

constructor( private mapsLoader: MapsAPILoader ) { }

and then in ngOnInit() I call

this.mapsLoader.configure({ apiKey: API_KEY_REDACTED });

Google Maps Types moved to different NPM package (conflict between old and new)

The Google maps types have moved to @types/google.maps, @types/googlemaps being deprecated.
The package included by @ng-maps/marker-clusterer includes @types/markerclustererplus (as seen in

"@types/markerclustererplus": "^2.1.0"
) which has @types/google-maps as a dependency, which at the same time has @types/google.maps as a dependency itself.

This makes it so whenever both packages are installed, and you try to compile, @types/googlemaps and @types/google.maps conflict with each other.
The solution would be to update the typings in the @ng-maps/marker-clusterer library from @google/markerclusterer to @googlemaps/markerclusterer

"@google/markerclusterer": "^2.0.0",

and swap @types/markerclustererplus for @types/google.maps, as in the new versions the markerclusterer is included in it.

An in-range update of @types/jasmine is breaking the build 🚨

The devDependency @types/jasmine was updated from 3.4.0 to 3.4.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/jasmine is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

ViewChild instance of NgMapsViewComponent is undefined

I am trying to access NgMapsViewComponent via ViewChild in my app and the instance always comes as undefined.

`@ViewChild(NgMapsViewComponent) public ngMap: NgMapsViewComponent;

this.ngMap.triggerResize();
`

Uncaught TypeError: Cannot read properties of undefined (reading 'triggerResize')

Maps styling error on production build

Hello

I am having issues when exporting the production build for my application which is built in Ionic (Angular), when building a debug version its exporting fine no issues, the moment I attach a --prod tag, its not exporting and highlighting [styles] as an error.

Here is my dev environment and app version

Ionic:

   Ionic CLI                     : 6.20.1 (C:\Users\xxx\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 6.1.13
   @angular-devkit/build-angular : 14.0.5
   @angular-devkit/schematics    : 14.0.5
   @angular/cli                  : 14.0.5
   @ionic/angular-toolkit        : 6.1.0

Cordova:

   Cordova CLI       : 11.0.0
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

   cordova-res                          : 0.15.4
   native-run (update available: 1.6.0) : 1.5.0

System:

   Android SDK Tools : 26.1.1 (C:\Users\xxx\AppData\Local\Android\Sdk)
   NodeJS            : v16.15.0 (C:\Program Files\nodejs\node.exe)
   npm               : 8.13.2
   OS                : Windows 10

See screenshot on how we want the map to look and how it looks during dev.

image

This is the error I get when I try to export an apk for release ...

Error: src/app/pages/home/home.page.html:15:113 - error TS2322: Type '({ elementType: string; stylers: { color: string; }[]; 
featureType?: undefined; } | { elementType: string; stylers: { visibility: string; }[]; featureType?: undefined; } | 
{ featureType: string; elementType: string; stylers: { ...; }[]; })[]' is not assignable to type 'MapTypeStyle[]'.
  Type '{ elementType: string; stylers: { color: string; }[]; featureType?: undefined; } | 
{ elementType: string; stylers: { visibility: string; }[]; featureType?: undefined; } | { featureType: string; elementType: string; 
stylers: { ...; }[]; }' is not assignable to type 'MapTypeStyle'.
    Type '{ elementType: string; stylers: { color: string; }[]; featureType?: undefined; }' is not assignable to type 'MapTypeStyle'.
      Types of property 'elementType' are incompatible.
        Type 'string' is not assignable to type 'MapTypeStyleElementType'.

15  [streetViewControl]="false" [disableDefaultUI]="true" [mapTypeControl]="false" [zoomControl]="false" [styles]="mapStyling">
                                                                                                                   ~~~~~~

  src/app/pages/home/home.page.ts:57:16
    57   templateUrl: "./home.page.html",
                      ~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HomePage.

This is the map styles file that I am using

export const mapStyles = ([
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#f5f5f5"
      }
    ]
  },
  {
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#f5f5f5"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#bdbdbd"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#eeeeee"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e5e5e5"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#ffffff"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#dadada"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  },
  {
    "featureType": "transit.line",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e5e5e5"
      }
    ]
  },
  {
    "featureType": "transit.station",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#eeeeee"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#c9c9c9"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  }
]);

Thanks

agm-data-layer [style] is falling back to default styles on any change in the geojson

Issue description
This may be part of a bigger problem but when my data layer changes depending on the Firestore stream, the fill color became light black and the strokes become black and become thicker which I assume are all the default styles.

Steps to reproduce and a minimal demo of the problem
I've reproduced it based on setInterval instead of a live stream of data:
https://stackblitz.com/edit/angular-google-maps-demo-ubxsif?file=app/app.component.ts
The invertColor works fine in the constructor outside of the setInterval but after the map has loaded, it no longer works.

Current behavior
It changes the styles to the default settings.

Expected/desired behavior
It should change the style to the new GeoJson.

angular-google-maps, Angular, & any other relevant dependency versions
Mentioned in the package.json

Note - This was originally posted here:
sebholstein/angular-google-maps#1930

Reposting here as this seems to be a more active fork.

polyPathChange event is missing in Polyline

Hi,

Thanks for maintainig this library.

We have noticed that this event is missing in the Polyline.

It used to be in the agm-map. https://angular-maps.com/api-docs/agm-core/directives/agmpolyline#source

    this._polylineManager.createPathEventObservable(this).then((ob$) => {
      const os = ob$.subscribe(pathEvent => this.polyPathChange.emit(pathEvent));
      this._subscriptions.push(os);
    });

Any possibility of adding this? or a workaround?

The use-case is when the line is editable, user drags the points and we need to get an event to get the new path.

Thanks

An in-range update of @types/node is breaking the build 🚨

The devDependency @types/node was updated from 12.0.4 to 12.0.5.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/node is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • ❌ ci/circleci: Build Error: Your tests failed on CircleCI (Details).

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

Can't display the map on the component

Hi, I'm trying to use your package but after configuring the component module and adding the api key etc it just don't get displayed on the screen, the server opens but it just isn't shown, for further information I'm attaching my code just in case you need it.

The component that its using the code is Location:

location.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GOOGLE_MAPS_API_CONFIG } from '@ng-maps/google';



@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
  providers: [
    {
    provide: GOOGLE_MAPS_API_CONFIG,
    useValue: {
      apiKey: '[ HERE GOES MY API KEY]'
    }
}
  ]
})
export class LocationModule { }


location.component.html

<div class="container d-flex">
    
    <map-view [latitude]="48.858222" [longitude]="2.2945" [zoom]="8"></map-view>
</div>

Thanks in advice.

Angular compatibility

I have run some test in older projects with angular 15.x.

The newest @ng-maps/[email protected] and @ng-maps/[email protected] package do not work here. In angular project 16.x all packages works fine.

The error look like a typescript error after building with ng-packagr. 16.0.0 the typescript 4.8 used in angular 15.x is deprecated.

I guess we must use 15.2.2 for compiling angular 15.x versions.

Maybe we should use the major version for the angular version in our packages and the minor for adding new features.

So our versions always equals the angular versions for better understanding.

image

Angular 14 - Autocomplete issue

I've this issue using the autocomplete

main.js:1 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(n)[Z_ -> Z_ -> Z_]: NullInjectorError: No provider for Z_! NullInjectorError: R3InjectorError(n)[Z_ -> Z_ -> Z_]: NullInjectorError: No provider for Z_!

I saw on the web it could be due to Angular 14. Do you face the same with NG14?

I declared it as described in the providers in app.module
{ provide: GOOGLE_MAPS_API_CONFIG, useValue: { apiKey: environment.AGMAPS_API, libraries: ['places'] } }

and I can see the map but when I add the input autocomplete, it crashes.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.