Skip to content

Commit

Permalink
feat(*): update to angular 9/10 and @types/googlemaps
Browse files Browse the repository at this point in the history
 - switch to @types/googlemaps typing
 - switch to angular building
 - updates to tslint
 - switch from js-marker-clusterer to @google/markerclustererplus
 - general cleanup of unused files
 - update netlify config
 - fix DataLayer `style` type
special thanks to @terencehonles for his work on switching types
  • Loading branch information
doom777 committed Jul 20, 2020
1 parent ea471aa commit 7982bfb
Show file tree
Hide file tree
Showing 140 changed files with 13,773 additions and 5,379 deletions.
3 changes: 0 additions & 3 deletions .clang-format

This file was deleted.

12 changes: 9 additions & 3 deletions .editorconfig
@@ -1,5 +1,4 @@
# http://editorconfig.org

# Editor configuration, see https://editorconfig.org
root = true

[*]
Expand All @@ -8,4 +7,11 @@ indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
trim_trailing_whitespace = true

[*.ts]
quote_type = single

[*.md]
max_line_length = off
trim_trailing_whitespace = false
6 changes: 0 additions & 6 deletions .eslintrc

This file was deleted.

60 changes: 46 additions & 14 deletions .gitignore
@@ -1,16 +1,48 @@
node_modules/
dist
docs_generated
packages/**/*.js
packages/**/*.map
packages/**/*.ngfactory.js
.tmp
test-built
# See http://help.github.com/ignore-files/ for more about ignoring files.

# compiled output
/dist
/tmp
/out-tsc
/docs/public
# Only exists if Bazel was run
/bazel-out

# dependencies
/node_modules
/packages/*/node_modules

# profiling files
chrome-profiler-events*.json
speed-measure-plugin*.json

# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace

# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
.history/*

# misc
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
*.ngfactory.ts
coverage/
.*.swp
.idea/
yarn-error.log
testem.log
/typings

# System Files
.DS_Store
docs/public
agm-*-*.tgz
Thumbs.db
1 change: 0 additions & 1 deletion .nvmrc

This file was deleted.

3 changes: 0 additions & 3 deletions .prettierrc.json

This file was deleted.

3 changes: 3 additions & 0 deletions .vscode/settings.json
@@ -0,0 +1,3 @@
{
"jest.pathToJest": "yarn test --"
}
4 changes: 2 additions & 2 deletions README.md
Expand Up @@ -10,7 +10,7 @@ Angular 2+ components for Google Maps. (Previously known as angular2-google-maps

---

[![Build Status](https://travis-ci.org/SebastianM/angular-google-maps.svg?branch=master)](https://travis-ci.org/SebastianM/angular-google-maps) [![Questions?: join the chat](https://img.shields.io/badge/questions%3F-join%20the%20chat-blue.svg)](https://discord.gg/XAr2ACE) [![npm version](https://badge.fury.io/js/%40agm%2Fcore.svg)](https://www.npmjs.com/package/@agm/core) ![supported angular versions: 6+](https://img.shields.io/badge/supported%20angular%20versions-6+-green.svg)
[![Build Status](https://travis-ci.org/SebastianM/angular-google-maps.svg?branch=master)](https://travis-ci.org/SebastianM/angular-google-maps) [![Questions?: join the chat](https://img.shields.io/badge/questions%3F-join%20the%20chat-blue.svg)](https://discord.gg/XAr2ACE) [![npm version](https://badge.fury.io/js/%40agm%2Fcore.svg)](https://www.npmjs.com/package/@agm/core) ![supported angular versions: 9+](https://img.shields.io/badge/supported%20angular%20versions-9.1+-green.svg)

---

Expand All @@ -35,7 +35,7 @@ If you just want to play with AGM and don't want to set up a full project, you c

## Installation

`AGM` gets shipped via the Node Package Manager. So make sure that you have [NodeJS](https://nodejs.org) installed.
`AGM` gets shipped via the Node Package Manager. So make sure that you have [NodeJS](https://nodejs.org) installed.
You can install the package with the following command:

```shell
Expand Down
133 changes: 133 additions & 0 deletions angular.json
@@ -0,0 +1,133 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"cli": {
"packageManager": "yarn"
},
"newProjectRoot": "packages",
"projects": {
"core": {
"projectType": "library",
"root": "packages/core",
"sourceRoot": "packages/core/src",
"prefix": "agm",
"architect": {
"build": {
"builder": "@angular-devkit/build-ng-packagr:build",
"options": {
"tsConfig": "packages/core/tsconfig.lib.json",
"project": "packages/core/ng-package.json"
},
"configurations": {
"production": {
"tsConfig": "packages/core/tsconfig.lib.prod.json"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"packages/core/tsconfig.lint.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"markerclusterer": {
"projectType": "library",
"root": "packages/markerclusterer",
"sourceRoot": "packages/markerclusterer/src",
"prefix": "agm",
"architect": {
"build": {
"builder": "@angular-devkit/build-ng-packagr:build",
"options": {
"tsConfig": "packages/markerclusterer/tsconfig.lib.json",
"project": "packages/markerclusterer/ng-package.json"
},
"configurations": {
"production": {
"tsConfig": "packages/markerclusterer/tsconfig.lib.prod.json"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"packages/markerclusterer/tsconfig.lint.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"snazzy-info-window": {
"projectType": "library",
"root": "packages/snazzy-info-window",
"sourceRoot": "packages/snazzy-info-window/src",
"prefix": "agm",
"architect": {
"build": {
"builder": "@angular-devkit/build-ng-packagr:build",
"options": {
"tsConfig": "packages/snazzy-info-window/tsconfig.lib.json",
"project": "packages/snazzy-info-window/ng-package.json"
},
"configurations": {
"production": {
"tsConfig": "packages/snazzy-info-window/tsconfig.lib.prod.json"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"packages/snazzy-info-window/tsconfig.lint.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"drawing": {
"projectType": "library",
"root": "packages/drawing",
"sourceRoot": "packages/drawing/src",
"prefix": "agm",
"architect": {
"build": {
"builder": "@angular-devkit/build-ng-packagr:build",
"options": {
"tsConfig": "packages/drawing/tsconfig.lib.json",
"project": "packages/drawing/ng-package.json"
},
"configurations": {
"production": {
"tsConfig": "packages/drawing/tsconfig.lib.prod.json"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"packages/drawing/tsconfig.lint.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}},
}
2 changes: 1 addition & 1 deletion docs/config.toml
@@ -1,4 +1,4 @@
baseURL = "http://angular-maps.com/"
languageCode = "en-us"
title = "Angular 2+ Google Maps Components"
title = "Angular Google Maps Components"
theme = "angular-google-maps"
2 changes: 1 addition & 1 deletion docs/content/api-docs/index.md
Expand Up @@ -11,6 +11,6 @@ title = "API Docs for Angular Google Maps"
* [@agm/snazzy-info-window](https://angular-maps.com/api-docs/agm-snazzy-info-window/modules/AgmSnazzyInfoWindowModule.html)
Styled Info Windows with [Snazzy Info Window](https://github.com/atmist/snazzy-info-window)
* [@agm/js-marker-clusterer](https://angular-maps.com/api-docs/js-marker-clusterer/modules/AgmJsMarkerClustererModule.html)
Clustered markers with [googlemaps/js-marker-clusterer](https://github.com/googlemaps/js-marker-clusterer)
Clustered markers with [markerclustererplus](https://github.com/googlemaps/v3-utility-library/tree/master/packages/markerclustererplus)
* [@agm/drawing](https://angular-maps.com/api-docs/drawing/modules/AgmDrawingModule.html)
Drawing on the map with
3 changes: 2 additions & 1 deletion docs/content/guides/drawing/drawing.md
Expand Up @@ -28,7 +28,8 @@ import { AgmDrawingModule } from '@agm/drawing';
imports: [
BrowserModule,
AgmCoreModule.forRoot({
apiKey: ['YOUR_API_KEY_HERE']
apiKey: ['YOUR_API_KEY_HERE'],
libraries: ['drawing']
}),
AgmDrawingModule
],
Expand Down
Expand Up @@ -4,26 +4,34 @@ draft = false
title = "Markers cluster with Marker Clusterer – A Google Maps JavaScript API utility library"
+++

Angular Google Maps provides a package that allows you to use [Marker Clusterer](https://github.com/googlemaps/js-marker-clusterer) together with @agm/core. 'Marker Clustererc' allows you to create and manage per-zoom-level clusters for large amounts of markers.
Angular Google Maps provides a package that allows you to use [markerclustererplus](https://github.com/googlemaps/v3-utility-library/tree/master/markerclustererplus) together with @agm/core. 'Marker Clustererc' allows you to create and manage per-zoom-level clusters for large amounts of markers.

## Install the needed packages
First make sure that you install the following NPM packages:

```bash
npm install @agm/core @agm/js-marker-clusterer js-marker-clusterer
npm install @agm/core @agm/markerclusterer @google/markerclustererplus
```

Remember to add `--save` if you want npm to store the package in your packaje.json

Make sure you have a Google Maps API Key - [you can get one here](https://developers.google.com/maps/documentation/javascript/get-api-key?hl=de).
Make sure you have a Google Maps API Key - [you can get one here](https://developers.google.com/maps/documentation/javascript/get-api-key).

## Update angular.json

If you want to use default icons, you must add the following entry to the asset's property array (`projects/<yourproject>/architect/build/options/assets`) in angular.json:

```json
{"input": "./node_modules/@google/markerclustererplus/images", "glob": "*", "output": "/images"}
```

## Loading the modules

Update your root component (e.g. src/app/app.module.ts) and import the following modules:

```typescript
import { AgmCoreModule } from '@agm/core';
import { AgmJsMarkerClustererModule } from '@agm/js-marker-clusterer';
import { AgmMarkerClustererModule } from '@agm/markerclusterer';

@NgModule({
declarations: [
Expand All @@ -34,7 +42,7 @@ import { AgmJsMarkerClustererModule } from '@agm/js-marker-clusterer';
AgmCoreModule.forRoot({
apiKey: ['YOUR_API_KEY_HERE']
}),
AgmJsMarkerClustererModule
AgmMarkerClustererModule
],
providers: [],
bootstrap: [AppComponent]
Expand All @@ -44,7 +52,7 @@ export class AppModule { }

## Using the directive

When you import the `AgmJsMarkerClustererModule`, you can use the `agmMarkerCluster` directive in your template. As you can note, you should use the `imagePath` attribute if you want an image appears behind the markers count in the cluster (js-marker-clusterer use 3 images, with different sizes, in the examplo, the library looks for `m1.png`, `m2.png` and `m3.png`, so adds the number and extension to the given `imagePath`)
When you import the `AgmMarkerClustererModule`, you can use the `agmMarkerCluster` directive in your template. As you can note, you should use the `imagePath` attribute if you want an image appears behind the markers count in the cluster (js-marker-clusterer use 3 images, with different sizes, in the examplo, the library looks for `m1.png`, `m2.png` and `m3.png`, so adds the number and extension to the given `imagePath`)


```html
Expand Down
6 changes: 3 additions & 3 deletions docs/themes/angular-google-maps/layouts/index.html
Expand Up @@ -12,7 +12,7 @@
<div class="agm-teaser mdl-typography--text-center">
<img src="/images/schield.png" alt="" class="agm-logo">
<div class="logo-font android-slogan">Angular Google Maps (AGM)</div>
<div class="logo-font android-sub-slogan">Angular 2+ components for Google Maps</div>
<div class="logo-font android-sub-slogan">Angular components for Google Maps</div>
</div>
<div class="homepage-example-code">
<h2>Really easy to get started!</h2>
Expand Down Expand Up @@ -66,7 +66,7 @@ <h2>Really easy to get started!</h2>
</div>
</div>
</div>

<div class="android-more-section">
<div class="android-section-title mdl-typography--display-1-color-contrast">Companies using it...</div>
<div class="android-card-container mdl-grid">
Expand Down Expand Up @@ -121,7 +121,7 @@ <h4 class="mdl-card__title-text"><a href="http://aeologic.com/" target="_blank"
</div>
<div class="mdl-card__supporting-text">
<span class="mdl-typography--font-light mdl-typography--subhead">
AeoLogic Technologies is a software development organization focussed on providing intelligent software solutions. Our expertise in Mobile Application and Web development technologies will help you boost your targets exponentially.
AeoLogic Technologies is a software development organization focussed on providing intelligent software solutions. Our expertise in Mobile Application and Web development technologies will help you boost your targets exponentially.
</span>
</div>
</div>
Expand Down
20 changes: 7 additions & 13 deletions jest.config.js
@@ -1,15 +1,9 @@
module.exports = {
setupTestFrameworkScriptFile: './jest.setup.js',
transform: {
'^.+\\.ts?$': 'ts-jest'
preset: 'jest-preset-angular',
//https://github.com/thymikee/jest-preset-angular/issues/167#issuecomment-459686655
modulePathIgnorePatterns: ["<rootDir>/dist/"],
moduleNameMapper: {
"^@agm/(.*)$": "<rootDir>/dist/$1",
},
testRegex: '(/packages/.*\\.spec)\\.ts$',
moduleFileExtensions: [
'js',
'ts'
],
collectCoverageFrom: [
'packages/**/*.ts',
'!packages/**/index.ts'
]
};
setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
};

0 comments on commit 7982bfb

Please sign in to comment.