Skip to content

Commit 7982bfb

Browse files
doom777doom777
authored
feat(*): update to angular 9/10 and @types/googlemaps
 - 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
1 parent ea471aa commit 7982bfb

File tree

140 files changed

+13773
-5379
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

140 files changed

+13773
-5379
lines changed

‎.clang-format

-3
This file was deleted.

‎.editorconfig

+9-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
# http://editorconfig.org
2-
1+
# Editor configuration, see https://editorconfig.org
32
root = true
43

54
[*]
@@ -8,4 +7,11 @@ indent_style = space
87
indent_size = 2
98
end_of_line = lf
109
insert_final_newline = true
11-
trim_trailing_whitespace = true
10+
trim_trailing_whitespace = true
11+
12+
[*.ts]
13+
quote_type = single
14+
15+
[*.md]
16+
max_line_length = off
17+
trim_trailing_whitespace = false

‎.eslintrc

-6
This file was deleted.

‎.gitignore

+46-14
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,48 @@
1-
node_modules/
2-
dist
3-
docs_generated
4-
packages/**/*.js
5-
packages/**/*.map
6-
packages/**/*.ngfactory.js
7-
.tmp
8-
test-built
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# compiled output
4+
/dist
5+
/tmp
6+
/out-tsc
7+
/docs/public
8+
# Only exists if Bazel was run
9+
/bazel-out
10+
11+
# dependencies
12+
/node_modules
13+
/packages/*/node_modules
14+
15+
# profiling files
16+
chrome-profiler-events*.json
17+
speed-measure-plugin*.json
18+
19+
# IDEs and editors
20+
/.idea
21+
.project
22+
.classpath
23+
.c9/
24+
*.launch
25+
.settings/
26+
*.sublime-workspace
27+
28+
# IDE - VSCode
29+
.vscode/*
30+
!.vscode/settings.json
31+
!.vscode/tasks.json
32+
!.vscode/launch.json
33+
!.vscode/extensions.json
34+
.history/*
35+
36+
# misc
37+
/.sass-cache
38+
/connect.lock
39+
/coverage
40+
/libpeerconnection.log
941
npm-debug.log
10-
*.ngfactory.ts
11-
coverage/
12-
.*.swp
13-
.idea/
42+
yarn-error.log
43+
testem.log
44+
/typings
45+
46+
# System Files
1447
.DS_Store
15-
docs/public
16-
agm-*-*.tgz
48+
Thumbs.db

‎.nvmrc

-1
This file was deleted.

‎.prettierrc.json

-3
This file was deleted.

‎.vscode/settings.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"jest.pathToJest": "yarn test --"
3+
}

‎README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ Angular 2+ components for Google Maps. (Previously known as angular2-google-maps
1010

1111
---
1212

13-
[![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)
13+
[![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)
1414

1515
---
1616

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

3636
## Installation
3737

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

4141
```shell

‎angular.json

+133
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"cli": {
5+
"packageManager": "yarn"
6+
},
7+
"newProjectRoot": "packages",
8+
"projects": {
9+
"core": {
10+
"projectType": "library",
11+
"root": "packages/core",
12+
"sourceRoot": "packages/core/src",
13+
"prefix": "agm",
14+
"architect": {
15+
"build": {
16+
"builder": "@angular-devkit/build-ng-packagr:build",
17+
"options": {
18+
"tsConfig": "packages/core/tsconfig.lib.json",
19+
"project": "packages/core/ng-package.json"
20+
},
21+
"configurations": {
22+
"production": {
23+
"tsConfig": "packages/core/tsconfig.lib.prod.json"
24+
}
25+
}
26+
},
27+
"lint": {
28+
"builder": "@angular-devkit/build-angular:tslint",
29+
"options": {
30+
"tsConfig": [
31+
"packages/core/tsconfig.lint.json"
32+
],
33+
"exclude": [
34+
"**/node_modules/**"
35+
]
36+
}
37+
}
38+
}
39+
},
40+
"markerclusterer": {
41+
"projectType": "library",
42+
"root": "packages/markerclusterer",
43+
"sourceRoot": "packages/markerclusterer/src",
44+
"prefix": "agm",
45+
"architect": {
46+
"build": {
47+
"builder": "@angular-devkit/build-ng-packagr:build",
48+
"options": {
49+
"tsConfig": "packages/markerclusterer/tsconfig.lib.json",
50+
"project": "packages/markerclusterer/ng-package.json"
51+
},
52+
"configurations": {
53+
"production": {
54+
"tsConfig": "packages/markerclusterer/tsconfig.lib.prod.json"
55+
}
56+
}
57+
},
58+
"lint": {
59+
"builder": "@angular-devkit/build-angular:tslint",
60+
"options": {
61+
"tsConfig": [
62+
"packages/markerclusterer/tsconfig.lint.json"
63+
],
64+
"exclude": [
65+
"**/node_modules/**"
66+
]
67+
}
68+
}
69+
}
70+
},
71+
"snazzy-info-window": {
72+
"projectType": "library",
73+
"root": "packages/snazzy-info-window",
74+
"sourceRoot": "packages/snazzy-info-window/src",
75+
"prefix": "agm",
76+
"architect": {
77+
"build": {
78+
"builder": "@angular-devkit/build-ng-packagr:build",
79+
"options": {
80+
"tsConfig": "packages/snazzy-info-window/tsconfig.lib.json",
81+
"project": "packages/snazzy-info-window/ng-package.json"
82+
},
83+
"configurations": {
84+
"production": {
85+
"tsConfig": "packages/snazzy-info-window/tsconfig.lib.prod.json"
86+
}
87+
}
88+
},
89+
"lint": {
90+
"builder": "@angular-devkit/build-angular:tslint",
91+
"options": {
92+
"tsConfig": [
93+
"packages/snazzy-info-window/tsconfig.lint.json"
94+
],
95+
"exclude": [
96+
"**/node_modules/**"
97+
]
98+
}
99+
}
100+
}
101+
},
102+
"drawing": {
103+
"projectType": "library",
104+
"root": "packages/drawing",
105+
"sourceRoot": "packages/drawing/src",
106+
"prefix": "agm",
107+
"architect": {
108+
"build": {
109+
"builder": "@angular-devkit/build-ng-packagr:build",
110+
"options": {
111+
"tsConfig": "packages/drawing/tsconfig.lib.json",
112+
"project": "packages/drawing/ng-package.json"
113+
},
114+
"configurations": {
115+
"production": {
116+
"tsConfig": "packages/drawing/tsconfig.lib.prod.json"
117+
}
118+
}
119+
},
120+
"lint": {
121+
"builder": "@angular-devkit/build-angular:tslint",
122+
"options": {
123+
"tsConfig": [
124+
"packages/drawing/tsconfig.lint.json"
125+
],
126+
"exclude": [
127+
"**/node_modules/**"
128+
]
129+
}
130+
}
131+
}
132+
}},
133+
}

‎docs/config.toml

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
baseURL = "http://angular-maps.com/"
22
languageCode = "en-us"
3-
title = "Angular 2+ Google Maps Components"
3+
title = "Angular Google Maps Components"
44
theme = "angular-google-maps"

‎docs/content/api-docs/index.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,6 @@ title = "API Docs for Angular Google Maps"
1111
* [@agm/snazzy-info-window](https://angular-maps.com/api-docs/agm-snazzy-info-window/modules/AgmSnazzyInfoWindowModule.html)
1212
Styled Info Windows with [Snazzy Info Window](https://github.com/atmist/snazzy-info-window)
1313
* [@agm/js-marker-clusterer](https://angular-maps.com/api-docs/js-marker-clusterer/modules/AgmJsMarkerClustererModule.html)
14-
Clustered markers with [googlemaps/js-marker-clusterer](https://github.com/googlemaps/js-marker-clusterer)
14+
Clustered markers with [markerclustererplus](https://github.com/googlemaps/v3-utility-library/tree/master/packages/markerclustererplus)
1515
* [@agm/drawing](https://angular-maps.com/api-docs/drawing/modules/AgmDrawingModule.html)
1616
Drawing on the map with

‎docs/content/guides/drawing/drawing.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,8 @@ import { AgmDrawingModule } from '@agm/drawing';
2828
imports: [
2929
BrowserModule,
3030
AgmCoreModule.forRoot({
31-
apiKey: ['YOUR_API_KEY_HERE']
31+
apiKey: ['YOUR_API_KEY_HERE'],
32+
libraries: ['drawing']
3233
}),
3334
AgmDrawingModule
3435
],

‎docs/content/guides/js-marker-clusterer/markers-cluster-with-js-marker-clusterer.md ‎docs/content/guides/markerclusterer/markers-cluster-with-markerclusterer.md

+14-6
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,34 @@ draft = false
44
title = "Markers cluster with Marker Clusterer – A Google Maps JavaScript API utility library"
55
+++
66

7-
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.
7+
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.
88

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

1212
```bash
13-
npm install @agm/core @agm/js-marker-clusterer js-marker-clusterer
13+
npm install @agm/core @agm/markerclusterer @google/markerclustererplus
1414
```
1515

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

18-
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).
18+
Make sure you have a Google Maps API Key - [you can get one here](https://developers.google.com/maps/documentation/javascript/get-api-key).
19+
20+
## Update angular.json
21+
22+
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:
23+
24+
```json
25+
{"input": "./node_modules/@google/markerclustererplus/images", "glob": "*", "output": "/images"}
26+
```
1927

2028
## Loading the modules
2129

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

2432
```typescript
2533
import { AgmCoreModule } from '@agm/core';
26-
import { AgmJsMarkerClustererModule } from '@agm/js-marker-clusterer';
34+
import { AgmMarkerClustererModule } from '@agm/markerclusterer';
2735

2836
@NgModule({
2937
declarations: [
@@ -34,7 +42,7 @@ import { AgmJsMarkerClustererModule } from '@agm/js-marker-clusterer';
3442
AgmCoreModule.forRoot({
3543
apiKey: ['YOUR_API_KEY_HERE']
3644
}),
37-
AgmJsMarkerClustererModule
45+
AgmMarkerClustererModule
3846
],
3947
providers: [],
4048
bootstrap: [AppComponent]
@@ -44,7 +52,7 @@ export class AppModule { }
4452

4553
## Using the directive
4654

47-
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`)
55+
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`)
4856

4957

5058
```html

‎docs/themes/angular-google-maps/layouts/index.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<div class="agm-teaser mdl-typography--text-center">
1313
<img src="/images/schield.png" alt="" class="agm-logo">
1414
<div class="logo-font android-slogan">Angular Google Maps (AGM)</div>
15-
<div class="logo-font android-sub-slogan">Angular 2+ components for Google Maps</div>
15+
<div class="logo-font android-sub-slogan">Angular components for Google Maps</div>
1616
</div>
1717
<div class="homepage-example-code">
1818
<h2>Really easy to get started!</h2>
@@ -66,7 +66,7 @@ <h2>Really easy to get started!</h2>
6666
</div>
6767
</div>
6868
</div>
69-
69+
7070
<div class="android-more-section">
7171
<div class="android-section-title mdl-typography--display-1-color-contrast">Companies using it...</div>
7272
<div class="android-card-container mdl-grid">
@@ -121,7 +121,7 @@ <h4 class="mdl-card__title-text"><a href="http://aeologic.com/" target="_blank"
121121
</div>
122122
<div class="mdl-card__supporting-text">
123123
<span class="mdl-typography--font-light mdl-typography--subhead">
124-
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.
124+
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.
125125
</span>
126126
</div>
127127
</div>

‎jest.config.js

+7-13
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,9 @@
11
module.exports = {
2-
setupTestFrameworkScriptFile: './jest.setup.js',
3-
transform: {
4-
'^.+\\.ts?$': 'ts-jest'
2+
preset: 'jest-preset-angular',
3+
//https://github.com/thymikee/jest-preset-angular/issues/167#issuecomment-459686655
4+
modulePathIgnorePatterns: ["<rootDir>/dist/"],
5+
moduleNameMapper: {
6+
"^@agm/(.*)$": "<rootDir>/dist/$1",
57
},
6-
testRegex: '(/packages/.*\\.spec)\\.ts$',
7-
moduleFileExtensions: [
8-
'js',
9-
'ts'
10-
],
11-
collectCoverageFrom: [
12-
'packages/**/*.ts',
13-
'!packages/**/index.ts'
14-
]
15-
};
8+
setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
9+
};

0 commit comments

Comments
 (0)