├── .nvmrc
├── src
    ├── app
    │   ├── app.component.scss
    │   ├── home
    │   │   ├── home.page.scss
    │   │   ├── BaseLayer.enum.ts
    │   │   ├── markerIcon.ts
    │   │   ├── home-routing.module.ts
    │   │   ├── home.page.spec.ts
    │   │   ├── home.module.ts
    │   │   ├── placeLocationMarker.ts
    │   │   ├── home.page.html
    │   │   └── home.page.ts
    │   ├── app.component.html
    │   ├── app.component.ts
    │   ├── address-search-component
    │   │   ├── address-search-component.component.scss
    │   │   ├── address-search-component.component.html
    │   │   ├── address-search-component.module.ts
    │   │   └── address-search-component.component.ts
    │   ├── app-routing.module.ts
    │   ├── app.component.spec.ts
    │   └── app.module.ts
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── assets
    │   ├── marker.png
    │   ├── street.png
    │   ├── satellite.png
    │   ├── icon
    │   │   └── favicon.png
    │   ├── icons
    │   │   ├── icon-128x128.png
    │   │   ├── icon-144x144.png
    │   │   ├── icon-152x152.png
    │   │   ├── icon-192x192.png
    │   │   ├── icon-384x384.png
    │   │   ├── icon-512x512.png
    │   │   ├── icon-72x72.png
    │   │   └── icon-96x96.png
    │   └── shapes.svg
    ├── zone-flags.ts
    ├── main.ts
    ├── test.ts
    ├── index.html
    ├── global.scss
    ├── manifest.webmanifest
    ├── polyfills.ts
    └── theme
    │   └── variables.scss
├── ionic.config.json
├── e2e
    ├── tsconfig.json
    ├── src
    │   ├── app.po.ts
    │   └── app.e2e-spec.ts
    └── protractor.conf.js
├── index-replace-api-key.ts
├── .editorconfig
├── tsconfig.app.json
├── tsconfig.spec.json
├── .gitignore
├── tsconfig.json
├── ngsw-config.json
├── .browserslistrc
├── README.md
├── .eslintrc.json
├── karma.conf.js
├── package.json
└── angular.json


/.nvmrc:
--------------------------------------------------------------------------------
1 | v14.17
2 | 


--------------------------------------------------------------------------------
/src/app/app.component.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/home/home.page.scss:
--------------------------------------------------------------------------------
1 | .leaflet {
2 |   display: flex;
3 |   height: 100%;
4 | }
5 | 


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <ion-app>
2 |   <ion-router-outlet></ion-router-outlet>
3 | </ion-app>
4 | 


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/ionic.config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "ionic-leaflet-offline-map-pwa",
3 |   "integrations": {},
4 |   "type": "angular"
5 | }
6 | 


--------------------------------------------------------------------------------
/src/assets/marker.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pazel-io/ionic-angular-leaflet-offline-map-pwa/HEAD/src/assets/marker.png


--------------------------------------------------------------------------------
/src/assets/street.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pazel-io/ionic-angular-leaflet-offline-map-pwa/HEAD/src/assets/street.png


--------------------------------------------------------------------------------
/src/assets/satellite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pazel-io/ionic-angular-leaflet-offline-map-pwa/HEAD/src/assets/satellite.png


--------------------------------------------------------------------------------
/src/assets/icon/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pazel-io/ionic-angular-leaflet-offline-map-pwa/HEAD/src/assets/icon/favicon.png


--------------------------------------------------------------------------------
/src/app/home/BaseLayer.enum.ts:
--------------------------------------------------------------------------------
1 | export enum BaseLayer {
2 |   cycling = 'cycling',
3 |   transport = 'transport',
4 |   osm = 'osm',
5 | }
6 | 


--------------------------------------------------------------------------------
/src/assets/icons/icon-128x128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pazel-io/ionic-angular-leaflet-offline-map-pwa/HEAD/src/assets/icons/icon-128x128.png


--------------------------------------------------------------------------------
/src/assets/icons/icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pazel-io/ionic-angular-leaflet-offline-map-pwa/HEAD/src/assets/icons/icon-144x144.png


--------------------------------------------------------------------------------
/src/assets/icons/icon-152x152.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pazel-io/ionic-angular-leaflet-offline-map-pwa/HEAD/src/assets/icons/icon-152x152.png


--------------------------------------------------------------------------------
/src/assets/icons/icon-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pazel-io/ionic-angular-leaflet-offline-map-pwa/HEAD/src/assets/icons/icon-192x192.png


--------------------------------------------------------------------------------
/src/assets/icons/icon-384x384.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pazel-io/ionic-angular-leaflet-offline-map-pwa/HEAD/src/assets/icons/icon-384x384.png


--------------------------------------------------------------------------------
/src/assets/icons/icon-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pazel-io/ionic-angular-leaflet-offline-map-pwa/HEAD/src/assets/icons/icon-512x512.png


--------------------------------------------------------------------------------
/src/assets/icons/icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pazel-io/ionic-angular-leaflet-offline-map-pwa/HEAD/src/assets/icons/icon-72x72.png


--------------------------------------------------------------------------------
/src/assets/icons/icon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pazel-io/ionic-angular-leaflet-offline-map-pwa/HEAD/src/assets/icons/icon-96x96.png


--------------------------------------------------------------------------------
/src/zone-flags.ts:
--------------------------------------------------------------------------------
1 | /**
2 |  * Prevents Angular change detection from
3 |  * running with certain Web Component callbacks
4 |  */
5 | // eslint-disable-next-line no-underscore-dangle
6 | (window as any).__Zone_disable_customElements = true;
7 | 


--------------------------------------------------------------------------------
/e2e/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/e2e",
 5 |     "module": "commonjs",
 6 |     "target": "es2018",
 7 |     "types": [
 8 |       "jasmine",
 9 |       "node"
10 |     ]
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-root',
 5 |   templateUrl: 'app.component.html',
 6 |   styleUrls: ['app.component.scss'],
 7 | })
 8 | export class AppComponent {
 9 |   constructor() {}
10 | }
11 | 


--------------------------------------------------------------------------------
/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   navigateTo() {
 5 |     return browser.get('/');
 6 |   }
 7 | 
 8 |   getParagraphText() {
 9 |     return element(by.deepCss('app-root ion-content')).getText();
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/index-replace-api-key.ts:
--------------------------------------------------------------------------------
1 | import { TargetOptions } from '@angular-builders/custom-webpack';
2 | 
3 | export default (targetOptions: TargetOptions, indexHtml: string) => {
4 |   console.log('process.env.API_KEY', process.env.API_KEY);
5 |   return indexHtml.replace('${API_KEY}', process.env.API_KEY);
6 | };
7 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see https://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.ts]
12 | quote_type = single
13 | 
14 | [*.md]
15 | max_line_length = off
16 | trim_trailing_whitespace = false
17 | 


--------------------------------------------------------------------------------
/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | 
 3 | describe('new App', () => {
 4 |   let page: AppPage;
 5 | 
 6 |   beforeEach(() => {
 7 |     page = new AppPage();
 8 |   });
 9 | 
10 |   it('should be blank', () => {
11 |     page.navigateTo();
12 |     expect(page.getParagraphText()).toContain('Start with Ionic UI Components');
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "./out-tsc/app",
 6 |     "types": []
 7 |   },
 8 |   "files": [
 9 |     "src/main.ts",
10 |     "src/polyfills.ts"
11 |   ],
12 |   "include": [
13 |     "src/**/*.d.ts"
14 |   ]
15 | }
16 | 


--------------------------------------------------------------------------------
/src/app/home/markerIcon.ts:
--------------------------------------------------------------------------------
1 | import { Icon } from 'leaflet';
2 | 
3 | export const markerIcon = () => new Icon({
4 |                               iconUrl: './assets/marker.png',
5 |                               iconSize: [30.8, 44.1],
6 |                               iconAnchor: [15.4, 44.1],
7 |                               popupAnchor:  [0, -44],
8 |                             });
9 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from '@angular/core';
 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 3 | 
 4 | import { AppModule } from './app/app.module';
 5 | import { environment } from './environments/environment';
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 |   .catch(err => console.log(err));
13 | 


--------------------------------------------------------------------------------
/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "./out-tsc/spec",
 6 |     "types": [
 7 |       "jasmine"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "src/test.ts",
12 |     "src/polyfills.ts"
13 |   ],
14 |   "include": [
15 |     "src/**/*.spec.ts",
16 |     "src/**/*.d.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/src/app/home/home-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { RouterModule, Routes } from '@angular/router';
 3 | import { HomePage } from './home.page';
 4 | 
 5 | const routes: Routes = [
 6 |   {
 7 |     path: '',
 8 |     component: HomePage,
 9 |   }
10 | ];
11 | 
12 | @NgModule({
13 |   imports: [RouterModule.forChild(routes)],
14 |   exports: [RouterModule]
15 | })
16 | export class HomePageRoutingModule {}
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Specifies intentionally untracked files to ignore when using Git
 2 | # http://git-scm.com/docs/gitignore
 3 | 
 4 | *~
 5 | *.sw[mnpcod]
 6 | .tmp
 7 | *.tmp
 8 | *.tmp.*
 9 | *.sublime-project
10 | *.sublime-workspace
11 | .DS_Store
12 | Thumbs.db
13 | UserInterfaceState.xcuserstate
14 | $RECYCLE.BIN/
15 | 
16 | *.log
17 | log.txt
18 | npm-debug.log*
19 | 
20 | /.idea
21 | /.ionic
22 | /.sass-cache
23 | /.sourcemaps
24 | /.versions
25 | /.vscode
26 | /coverage
27 | /dist
28 | /node_modules
29 | /platforms
30 | /plugins
31 | /www
32 | 


--------------------------------------------------------------------------------
/src/app/address-search-component/address-search-component.component.scss:
--------------------------------------------------------------------------------
 1 | :host {
 2 |   position: absolute;
 3 |   height: 60px;
 4 |   top: 60px;
 5 |   left: 5%;
 6 |   width: 90%;
 7 |   z-index: 1000;
 8 |   display: block;
 9 |   background-color: #121212;
10 |   border-radius: 10px;
11 | }
12 | 
13 | ion-list {
14 |   margin-top: -7px;
15 |   padding: 15px 5px 5px 5px;
16 |   border-bottom-right-radius: 10px;
17 |   border-bottom-left-radius: 10px;
18 | }
19 | 
20 | ion-item {
21 |   --inner-padding-bottom: 5px;
22 |   --inner-padding-top: 10px;
23 | }
24 | 


--------------------------------------------------------------------------------
/src/app/address-search-component/address-search-component.component.html:
--------------------------------------------------------------------------------
 1 | <ion-searchbar
 2 |   mode="ios"
 3 |   type="search"
 4 |   inputmode="search"
 5 |   placeholder="Enter address"
 6 |   [animated]="true"
 7 |   (ionChange)="lookupAddress($event)"
 8 |   (ionClear)="clearPredictions()"
 9 |   (ionFocus)="showPredictions()"
10 | ></ion-searchbar>
11 | <div #result style="display: none;"></div>
12 | <ion-list [hidden]="!predictionsVisible">
13 |   <ion-item *ngFor="let prediction of predictions"
14 |             (click)="getPlaceDetails(prediction.place_id)">{{prediction.description}}</ion-item>
15 | </ion-list>
16 | 


--------------------------------------------------------------------------------
/src/app/address-search-component/address-search-component.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { CommonModule } from '@angular/common';
 3 | import { FormsModule } from '@angular/forms';
 4 | 
 5 | import { IonicModule } from '@ionic/angular';
 6 | 
 7 | import { AddressSearchComponentComponent } from './address-search-component.component';
 8 | 
 9 | @NgModule({
10 |   imports: [ CommonModule, FormsModule, IonicModule,],
11 |   declarations: [AddressSearchComponentComponent],
12 |   exports: [AddressSearchComponentComponent]
13 | })
14 | export class AddressSearchComponentComponentModule {}
15 | 


--------------------------------------------------------------------------------
/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
 3 | 
 4 | const routes: Routes = [
 5 |   {
 6 |     path: 'home',
 7 |     loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
 8 |   },
 9 |   {
10 |     path: '',
11 |     redirectTo: 'home',
12 |     pathMatch: 'full'
13 |   },
14 | ];
15 | 
16 | @NgModule({
17 |   imports: [
18 |     RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules, useHash: true })
19 |   ],
20 |   exports: [RouterModule]
21 | })
22 | export class AppRoutingModule { }
23 | 


--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 2 | import { TestBed, waitForAsync } from '@angular/core/testing';
 3 | 
 4 | import { AppComponent } from './app.component';
 5 | 
 6 | describe('AppComponent', () => {
 7 | 
 8 |   beforeEach(waitForAsync(() => {
 9 | 
10 |     TestBed.configureTestingModule({
11 |       declarations: [AppComponent],
12 |       schemas: [CUSTOM_ELEMENTS_SCHEMA],
13 |     }).compileComponents();
14 |   }));
15 | 
16 |   it('should create the app', () => {
17 |     const fixture = TestBed.createComponent(AppComponent);
18 |     const app = fixture.debugElement.componentInstance;
19 |     expect(app).toBeTruthy();
20 |   });
21 |   // TODO: add more tests!
22 | 
23 | });
24 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "compileOnSave": false,
 4 |   "compilerOptions": {
 5 |     "baseUrl": "./",
 6 |     "outDir": "./dist/out-tsc",
 7 |     "sourceMap": true,
 8 |     "declaration": false,
 9 |     "downlevelIteration": true,
10 |     "experimentalDecorators": true,
11 |     "moduleResolution": "node",
12 |     "importHelpers": true,
13 |     "target": "es2015",
14 |     "module": "es2020",
15 |     "lib": ["es2018", "dom"]
16 |   },
17 |   "angularCompilerOptions": {
18 |     "enableI18nLegacyMessageIdFormat": false,
19 |     "strictInjectionParameters": true,
20 |     "strictInputAccessModifiers": true,
21 |     "strictTemplates": true
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // This file can be replaced during build by using the `fileReplacements` array.
 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 3 | // The list of file replacements can be found in `angular.json`.
 4 | 
 5 | export const environment = {
 6 |   production: false
 7 | };
 8 | 
 9 | /*
10 |  * For easier debugging in development mode, you can import the following file
11 |  * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 |  *
13 |  * This import should be commented out in production mode because it will have a negative impact
14 |  * on performance if an error is thrown.
15 |  */
16 | // import 'zone.js/dist/zone-error';  // Included with Angular CLI.
17 | 


--------------------------------------------------------------------------------
/ngsw-config.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "./node_modules/@angular/service-worker/config/schema.json",
 3 |   "index": "/index.html",
 4 |   "assetGroups": [
 5 |     {
 6 |       "name": "app",
 7 |       "installMode": "prefetch",
 8 |       "resources": {
 9 |         "files": [
10 |           "/favicon.ico",
11 |           "/index.html",
12 |           "/manifest.webmanifest",
13 |           "/*.css",
14 |           "/*.js"
15 |         ]
16 |       }
17 |     },
18 |     {
19 |       "name": "assets",
20 |       "installMode": "lazy",
21 |       "updateMode": "prefetch",
22 |       "resources": {
23 |         "files": [
24 |           "/assets/**",
25 |           "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
26 |         ]
27 |       }
28 |     }
29 |   ]
30 | }
31 | 


--------------------------------------------------------------------------------
/src/app/home/home.page.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 2 | import { IonicModule } from '@ionic/angular';
 3 | 
 4 | import { HomePage } from './home.page';
 5 | 
 6 | describe('HomePage', () => {
 7 |   let component: HomePage;
 8 |   let fixture: ComponentFixture<HomePage>;
 9 | 
10 |   beforeEach(waitForAsync(() => {
11 |     TestBed.configureTestingModule({
12 |       declarations: [ HomePage ],
13 |       imports: [IonicModule.forRoot()]
14 |     }).compileComponents();
15 | 
16 |     fixture = TestBed.createComponent(HomePage);
17 |     component = fixture.componentInstance;
18 |     fixture.detectChanges();
19 |   }));
20 | 
21 |   it('should create', () => {
22 |     expect(component).toBeTruthy();
23 |   });
24 | });
25 | 


--------------------------------------------------------------------------------
/.browserslistrc:
--------------------------------------------------------------------------------
 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
 2 | # For additional information regarding the format and rule options, please see:
 3 | # https://github.com/browserslist/browserslist#queries
 4 | 
 5 | # For the full list of supported browsers by the Angular framework, please see:
 6 | # https://angular.io/guide/browser-support
 7 | 
 8 | # You can see what browsers were selected by your queries by running:
 9 | #   npx browserslist
10 | 
11 | last 1 Chrome version
12 | last 1 Firefox version
13 | last 2 Edge major versions
14 | last 2 Safari major versions
15 | last 2 iOS major versions
16 | Firefox ESR
17 | not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
18 | 


--------------------------------------------------------------------------------
/src/app/home/home.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { CommonModule } from '@angular/common';
 3 | import { LeafletModule } from '@asymmetrik/ngx-leaflet';
 4 | import { IonicModule } from '@ionic/angular';
 5 | import { FormsModule } from '@angular/forms';
 6 | import { AddressSearchComponentComponentModule } from '../address-search-component/address-search-component.module';
 7 | import { HomePage } from './home.page';
 8 | 
 9 | import { HomePageRoutingModule } from './home-routing.module';
10 | 
11 | 
12 | @NgModule({
13 |   imports: [
14 |     CommonModule,
15 |     FormsModule,
16 |     IonicModule,
17 |     LeafletModule,
18 |     HomePageRoutingModule,
19 |     AddressSearchComponentComponentModule,
20 |   ],
21 |   declarations: [HomePage]
22 | })
23 | export class HomePageModule {}
24 | 


--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/dist/zone-testing';
 4 | import { getTestBed } from '@angular/core/testing';
 5 | import {
 6 |   BrowserDynamicTestingModule,
 7 |   platformBrowserDynamicTesting
 8 | } from '@angular/platform-browser-dynamic/testing';
 9 | 
10 | declare const require: {
11 |   context(path: string, deep?: boolean, filter?: RegExp): {
12 |     keys(): string[];
13 |     <T>(id: string): T;
14 |   };
15 | };
16 | 
17 | // First, initialize the Angular testing environment.
18 | getTestBed().initTestEnvironment(
19 |   BrowserDynamicTestingModule,
20 |   platformBrowserDynamicTesting()
21 | );
22 | // Then we find all the tests.
23 | const context = require.context('./', true, /\.spec\.ts$/);
24 | // And load the modules.
25 | context.keys().map(context);
26 | 


--------------------------------------------------------------------------------
/e2e/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | // Protractor configuration file, see link for more information
 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 4 | 
 5 | const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');
 6 | 
 7 | /**
 8 |  * @type { import("protractor").Config }
 9 |  */
10 | exports.config = {
11 |   allScriptsTimeout: 11000,
12 |   specs: [
13 |     './src/**/*.e2e-spec.ts'
14 |   ],
15 |   capabilities: {
16 |     browserName: 'chrome'
17 |   },
18 |   directConnect: true,
19 |   SELENIUM_PROMISE_MANAGER: false,
20 |   baseUrl: 'http://localhost:4200/',
21 |   framework: 'jasmine',
22 |   jasmineNodeOpts: {
23 |     showColors: true,
24 |     defaultTimeoutInterval: 30000,
25 |     print: function() {}
26 |   },
27 |   onPrepare() {
28 |     require('ts-node').register({
29 |       project: require('path').join(__dirname, './tsconfig.json')
30 |     });
31 |     jasmine.getEnv().addReporter(new SpecReporter({
32 |       spec: {
33 |         displayStacktrace: StacktraceOption.PRETTY
34 |       }
35 |     }));
36 |   }
37 | };
38 | 


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { BrowserModule } from '@angular/platform-browser';
 3 | import { RouteReuseStrategy } from '@angular/router';
 4 | 
 5 | import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 6 | 
 7 | import { AppComponent } from './app.component';
 8 | import { AppRoutingModule } from './app-routing.module';
 9 | import { ServiceWorkerModule } from '@angular/service-worker';
10 | import { environment } from '../environments/environment';
11 | 
12 | @NgModule({
13 |   declarations: [AppComponent],
14 |   entryComponents: [],
15 |   imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, ServiceWorkerModule.register('ngsw-worker.js', {
16 |   enabled: environment.production,
17 |   // Register the ServiceWorker as soon as the app is stable
18 |   // or after 30 seconds (whichever comes first).
19 |   registrationStrategy: 'registerImmediately'
20 | })],
21 |   providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
22 |   bootstrap: [AppComponent],
23 | })
24 | export class AppModule {}
25 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Ionic, Angular, Leaflet PWA with offline map
 2 | 
 3 | This is an Ionic app that demonstrate how to build an offline map with Angular and Leaflet and make it an installable PWA.
 4 | 
 5 | There is a blog describing how to build this app step by step.
 6 | 
 7 | https://pazel.dev/ionic-angular-leaflet-pwa-offline-maps-part-1
 8 | 
 9 | 
10 | ## Run Locally
11 | 
12 | You need to have a Node LTS and Ionic CLI installed.
13 | 
14 | https://ionicframework.com/docs/intro/cli
15 | 
16 | https://nodejs.org/en/
17 | 
18 | Clone the project
19 | 
20 | ```bash
21 |   git clone https://github.com/pazel-io/ionic-angular-leaflet-offline-map-pwa.git
22 | ```
23 | 
24 | Go to the project directory
25 | 
26 | ```bash
27 |   cd ionic-angular-leaflet-offline-map-pwa
28 | ```
29 | 
30 | Install dependencies
31 | 
32 | ```bash
33 |   npm install
34 | ```
35 | 
36 | Start the server
37 | 
38 | ```bash
39 |   ionic serve
40 | ```
41 | 
42 | To build
43 | 
44 | ```bash
45 |   ionic build
46 | ``` 
47 | 
48 | To test PWA you can use npm `serve` package after having a successfull build.
49 | https://www.npmjs.com/package/serve
50 | ```
51 | serve build -p 8100
52 | ```
53 | 
54 |   
55 | 


--------------------------------------------------------------------------------
/src/assets/shapes.svg:
--------------------------------------------------------------------------------
1 | <svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>
2 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8" />
 6 |   <title>Ionic Leaflet map</title>
 7 | 
 8 |   <base href="/" />
 9 | 
10 |   <meta name="color-scheme" content="light dark" />
11 |   <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
12 |   <meta name="format-detection" content="telephone=no" />
13 |   <meta name="msapplication-tap-highlight" content="no" />
14 | 
15 |   <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
16 |   <link rel="apple-touch-icon" href="/assets/icons/icon-192x192.png">
17 | 
18 |   <!-- add to homescreen for ios -->
19 |   <meta name="apple-mobile-web-app-capable" content="yes" />
20 |   <meta name="apple-mobile-web-app-status-bar-style" content="black" />
21 |   <link rel="manifest" href="manifest.webmanifest">
22 |   <meta name="theme-color" content="#1976d2">
23 | </head>
24 | 
25 | <body>
26 |   <app-root></app-root>
27 |   <script async
28 |           src="https://maps.googleapis.com/maps/api/js?key=${API_KEY}&libraries=places">
29 |   </script>
30 | </body>
31 | 
32 | </html>
33 | 


--------------------------------------------------------------------------------
/src/global.scss:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * App Global CSS
 3 |  * ----------------------------------------------------------------------------
 4 |  * Put style rules here that you want to apply globally. These styles are for
 5 |  * the entire app and not just one component. Additionally, this file can be
 6 |  * used as an entry point to import other CSS/Sass files to be included in the
 7 |  * output CSS.
 8 |  * For more information on global stylesheets, visit the documentation:
 9 |  * https://ionicframework.com/docs/layout/global-stylesheets
10 |  */
11 | 
12 | /* Core CSS required for Ionic components to work properly */
13 | @import "~@ionic/angular/css/core.css";
14 | 
15 | /* Basic CSS for apps built with Ionic */
16 | @import "~@ionic/angular/css/normalize.css";
17 | @import "~@ionic/angular/css/structure.css";
18 | @import "~@ionic/angular/css/typography.css";
19 | @import '~@ionic/angular/css/display.css';
20 | 
21 | /* Optional CSS utils that can be commented out */
22 | @import "~@ionic/angular/css/padding.css";
23 | @import "~@ionic/angular/css/float-elements.css";
24 | @import "~@ionic/angular/css/text-alignment.css";
25 | @import "~@ionic/angular/css/text-transformation.css";
26 | @import "~@ionic/angular/css/flex-utils.css";
27 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "root": true,
 3 |   "ignorePatterns": ["projects/**/*"],
 4 |   "overrides": [
 5 |     {
 6 |       "files": ["*.ts"],
 7 |       "parserOptions": {
 8 |         "project": ["tsconfig.json", "e2e/tsconfig.json"],
 9 |         "createDefaultProgram": true
10 |       },
11 |       "extends": [
12 |         "plugin:@angular-eslint/ng-cli-compat",
13 |         "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
14 |         "plugin:@angular-eslint/template/process-inline-templates"
15 |       ],
16 |       "rules": {
17 |         "@angular-eslint/component-class-suffix": [
18 |           "error",
19 |           {
20 |             "suffixes": ["Page", "Component"]
21 |           }
22 |         ],
23 |         "@angular-eslint/component-selector": [
24 |           "error",
25 |           {
26 |             "type": "element",
27 |             "prefix": "app",
28 |             "style": "kebab-case"
29 |           }
30 |         ],
31 |         "@angular-eslint/directive-selector": [
32 |           "error",
33 |           {
34 |             "type": "attribute",
35 |             "prefix": "app",
36 |             "style": "camelCase"
37 |           }
38 |         ]
39 |       }
40 |     },
41 |     {
42 |       "files": ["*.html"],
43 |       "extends": ["plugin:@angular-eslint/template/recommended"],
44 |       "rules": {}
45 |     }
46 |   ]
47 | }
48 | 


--------------------------------------------------------------------------------
/src/manifest.webmanifest:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "app",
 3 |   "short_name": "app",
 4 |   "theme_color": "#1976d2",
 5 |   "background_color": "#fafafa",
 6 |   "display": "standalone",
 7 |   "scope": "./",
 8 |   "start_url": "./",
 9 |   "icons": [
10 |     {
11 |       "src": "assets/icons/icon-72x72.png",
12 |       "sizes": "72x72",
13 |       "type": "image/png",
14 |       "purpose": "maskable any"
15 |     },
16 |     {
17 |       "src": "assets/icons/icon-96x96.png",
18 |       "sizes": "96x96",
19 |       "type": "image/png",
20 |       "purpose": "maskable any"
21 |     },
22 |     {
23 |       "src": "assets/icons/icon-128x128.png",
24 |       "sizes": "128x128",
25 |       "type": "image/png",
26 |       "purpose": "maskable any"
27 |     },
28 |     {
29 |       "src": "assets/icons/icon-144x144.png",
30 |       "sizes": "144x144",
31 |       "type": "image/png",
32 |       "purpose": "maskable any"
33 |     },
34 |     {
35 |       "src": "assets/icons/icon-152x152.png",
36 |       "sizes": "152x152",
37 |       "type": "image/png",
38 |       "purpose": "maskable any"
39 |     },
40 |     {
41 |       "src": "assets/icons/icon-192x192.png",
42 |       "sizes": "192x192",
43 |       "type": "image/png",
44 |       "purpose": "maskable any"
45 |     },
46 |     {
47 |       "src": "assets/icons/icon-384x384.png",
48 |       "sizes": "384x384",
49 |       "type": "image/png",
50 |       "purpose": "maskable any"
51 |     },
52 |     {
53 |       "src": "assets/icons/icon-512x512.png",
54 |       "sizes": "512x512",
55 |       "type": "image/png",
56 |       "purpose": "maskable any"
57 |     }
58 |   ]
59 | }
60 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       jasmine: {
17 |         // you can add configuration options for Jasmine here
18 |         // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19 |         // for example, you can disable the random execution with `random: false`
20 |         // or set a specific seed with `seed: 4321`
21 |       },
22 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
23 |     },
24 |     jasmineHtmlReporter: {
25 |       suppressAll: true // removes the duplicated traces
26 |     },
27 |     coverageReporter: {
28 |       dir: require('path').join(__dirname, './coverage/ngv'),
29 |       subdir: '.',
30 |       reporters: [
31 |         { type: 'html' },
32 |         { type: 'text-summary' }
33 |       ]
34 |     },
35 |     reporters: ['progress', 'kjhtml'],
36 |     port: 9876,
37 |     colors: true,
38 |     logLevel: config.LOG_INFO,
39 |     autoWatch: true,
40 |     browsers: ['Chrome'],
41 |     singleRun: false,
42 |     restartOnFileChange: true
43 |   });
44 | };
45 | 


--------------------------------------------------------------------------------
/src/app/home/placeLocationMarker.ts:
--------------------------------------------------------------------------------
 1 | import { LatLng, LayerGroup, marker, Marker } from 'leaflet';
 2 | import { fromEvent, Subscription } from 'rxjs';
 3 | import { filter, map, tap } from 'rxjs/operators';
 4 | import { markerIcon } from './markerIcon';
 5 | 
 6 | const subscribeToDeleteLocationMarker = (id: string, marco: Marker, layerGroup: LayerGroup): Subscription => {
 7 |   return fromEvent(document, 'click')
 8 |     .pipe(
 9 |       tap((event) => event.stopPropagation()),
10 |       map((event) => event.target),
11 |       filter((target: HTMLElement) => target.id === id),
12 |     )
13 |     .subscribe(($event) => layerGroup.clearLayers());
14 | };
15 | 
16 | const bindMarkerPopup = (marco: Marker, text: string, layerGroup: LayerGroup) => {
17 |   const id = `location-marker-${Date.now()}`;
18 |   marco.bindPopup(`
19 |         <p>${text}</p>
20 |         <div class="location-marker-popup__buttons">
21 |             <a class="location-marker-popup__button" id="${id}">delete</a>
22 |         </div>
23 |       `,          {
24 |     maxWidth: 200,
25 |     maxHeight: 120,
26 |     className: 'location-marker-popup',
27 |   });
28 |   let deleteMarkerSubscription;
29 |   marco.on('popupopen', () => deleteMarkerSubscription = subscribeToDeleteLocationMarker(id, marco, layerGroup));
30 |   marco.on('popupclose', () => deleteMarkerSubscription.unsubscribe());
31 |   marco.openPopup();
32 | };
33 | 
34 | export const placeLocationMarker = (layerGroup: LayerGroup, latLng: LatLng, text: string) => {
35 |   layerGroup.clearLayers();
36 |   const marco = marker(latLng, {icon: markerIcon()});
37 |   layerGroup.addLayer(marco);
38 |   bindMarkerPopup(marco, text, layerGroup);
39 | };
40 | 


--------------------------------------------------------------------------------
/src/app/home/home.page.html:
--------------------------------------------------------------------------------
 1 | <ion-header [translucent]="true">
 2 |   <ion-toolbar>
 3 |     <ion-title>
 4 |       Ionic Leaflet Map
 5 |     </ion-title>
 6 |   </ion-toolbar>
 7 | </ion-header>
 8 | 
 9 | <ion-content [fullscreen]="true" [scrollY]="false">
10 |   <ion-fab vertical="bottom" horizontal="start" slot="fixed">
11 |     <ion-fab-button>
12 |       <ion-icon name="layers-outline"></ion-icon>
13 |     </ion-fab-button>
14 |     <ion-fab-list side="top">
15 |       <ion-fab-button [color]="selectedBaseLayer === baseLayer.cycling ? 'danger' : 'primary'"
16 |                       (click)="switchBaseLayer(baseLayer.cycling)">
17 |         <ion-icon name="bicycle"></ion-icon>
18 |       </ion-fab-button>
19 |       <ion-fab-button [color]="selectedBaseLayer === baseLayer.transport ? 'danger' : 'primary'"
20 |                       (click)="switchBaseLayer(baseLayer.transport)">
21 |         <ion-icon name="car"></ion-icon>
22 |       </ion-fab-button>
23 |       <ion-fab-button [color]="selectedBaseLayer === baseLayer.osm ? 'danger' : 'primary'"
24 |                       (click)="switchBaseLayer(baseLayer.osm)">
25 |         <ion-icon name="map-outline"></ion-icon>
26 |       </ion-fab-button>
27 |     </ion-fab-list>
28 |   </ion-fab>
29 |   <ion-fab vertical="bottom" horizontal="end" slot="fixed" (click)="locate()">
30 |     <ion-fab-button>
31 |       <ion-icon name="locate"></ion-icon>
32 |     </ion-fab-button>
33 |   </ion-fab>
34 |   <app-address-search-component (placeSelect)="showAddressMarker($event)"></app-address-search-component>
35 |   <div class="leaflet" leaflet
36 |        [leafletOptions]="options"
37 |        (leafletMapReady)="onMapReady($event)">
38 |   </div>
39 | </ion-content>
40 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ionic-leaflet-offline-map-pwa",
 3 |   "version": "0.0.1",
 4 |   "author": "Ionic Framework",
 5 |   "homepage": "https://ionicframework.com/",
 6 |   "scripts": {
 7 |     "ng": "ng",
 8 |     "start": "ng serve",
 9 |     "build": "ng build --prod",
10 |     "test": "ng test",
11 |     "lint": "ng lint",
12 |     "e2e": "ng e2e"
13 |   },
14 |   "private": true,
15 |   "dependencies": {
16 |     "@angular/common": "~12.0.1",
17 |     "@angular/core": "~12.0.1",
18 |     "@angular/forms": "~12.0.1",
19 |     "@angular/platform-browser": "~12.0.1",
20 |     "@angular/platform-browser-dynamic": "~12.0.1",
21 |     "@angular/router": "~12.0.1",
22 |     "@angular/service-worker": "~12.0.1",
23 |     "@asymmetrik/ngx-leaflet": "^8.1.0",
24 |     "@ionic/angular": "^5.5.2",
25 |     "leaflet": "^1.7.1",
26 |     "rxjs": "~6.6.0",
27 |     "tslib": "^2.0.0",
28 |     "zone.js": "~0.11.4"
29 |   },
30 |   "devDependencies": {
31 |     "@angular-builders/custom-webpack": "^12.1.0",
32 |     "@angular-devkit/build-angular": "~12.0.1",
33 |     "@angular-eslint/builder": "~12.0.0",
34 |     "@angular-eslint/eslint-plugin": "~12.0.0",
35 |     "@angular-eslint/eslint-plugin-template": "~12.0.0",
36 |     "@angular-eslint/template-parser": "~12.0.0",
37 |     "@angular/cli": "~12.0.1",
38 |     "@angular/compiler": "~12.0.1",
39 |     "@angular/compiler-cli": "~12.0.1",
40 |     "@angular/language-service": "~12.0.1",
41 |     "@ionic/angular-toolkit": "^4.0.0",
42 |     "@types/google.maps": "^3.45.6",
43 |     "@types/jasmine": "~3.6.0",
44 |     "@types/jasminewd2": "~2.0.3",
45 |     "@types/node": "^12.11.1",
46 |     "@typescript-eslint/eslint-plugin": "4.16.1",
47 |     "@typescript-eslint/parser": "4.16.1",
48 |     "eslint": "^7.6.0",
49 |     "eslint-plugin-import": "2.22.1",
50 |     "eslint-plugin-jsdoc": "30.7.6",
51 |     "eslint-plugin-prefer-arrow": "1.2.2",
52 |     "jasmine-core": "~3.8.0",
53 |     "jasmine-spec-reporter": "~5.0.0",
54 |     "karma": "~6.3.2",
55 |     "karma-chrome-launcher": "~3.1.0",
56 |     "karma-coverage": "~2.0.3",
57 |     "karma-coverage-istanbul-reporter": "~3.0.2",
58 |     "karma-jasmine": "~4.0.0",
59 |     "karma-jasmine-html-reporter": "^1.5.0",
60 |     "protractor": "~7.0.0",
61 |     "ts-node": "~8.3.0",
62 |     "typescript": "~4.2.4"
63 |   },
64 |   "description": "An Ionic project"
65 | }
66 | 


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/guide/browser-support
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /** IE11 requires the following for NgClass support on SVG elements */
22 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
23 | 
24 | /**
25 |  * Web Animations `@angular/platform-browser/animations`
26 |  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
27 |  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
28 |  */
29 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
30 | 
31 | /**
32 |  * By default, zone.js will patch all possible macroTask and DomEvents
33 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
34 |  * because those flags need to be set before `zone.js` being loaded, and webpack
35 |  * will put import in the top of bundle, so user need to create a separate file
36 |  * in this directory (for example: zone-flags.ts), and put the following flags
37 |  * into that file, and then add the following code before importing zone.js.
38 |  * import './zone-flags';
39 |  *
40 |  * The flags allowed in zone-flags.ts are listed here.
41 |  *
42 |  * The following flags will work for all browsers.
43 |  *
44 |  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
45 |  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
46 |  * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
47 |  *
48 |  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
49 |  *  with the following flag, it will bypass `zone.js` patch for IE/Edge
50 |  *
51 |  *  (window as any).__Zone_enable_cross_context_check = true;
52 |  *
53 |  */
54 | 
55 | import './zone-flags';
56 | 
57 | /***************************************************************************************************
58 |  * Zone JS is required by default for Angular itself.
59 |  */
60 | import 'zone.js/dist/zone';  // Included with Angular CLI.
61 | 
62 | 
63 | /***************************************************************************************************
64 |  * APPLICATION IMPORTS
65 |  */
66 | 


--------------------------------------------------------------------------------
/src/app/address-search-component/address-search-component.component.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="google.maps" />
 2 | 
 3 | import { Component, EventEmitter, Output, ViewChild } from '@angular/core';
 4 | import AutocompleteResponse = google.maps.places.AutocompleteResponse;
 5 | import AutocompletePrediction = google.maps.places.AutocompletePrediction;
 6 | 
 7 | @Component({
 8 |   selector: 'app-address-search-component',
 9 |   templateUrl: './address-search-component.component.html',
10 |   styleUrls: ['./address-search-component.component.scss'],
11 | })
12 | export class AddressSearchComponentComponent {
13 |   @ViewChild('result') result: any;
14 |   @Output() placeSelect: EventEmitter<any> = new EventEmitter();
15 |   public predictions: AutocompletePrediction[] = [];
16 |   public predictionsVisible = false;
17 |   private autocompleteService: google.maps.places.AutocompleteService;
18 |   private placesService: google.maps.places.PlacesService;
19 |   private sessionToken: google.maps.places.AutocompleteSessionToken;
20 | 
21 |   constructor() {
22 |   }
23 | 
24 |   public async lookupAddress(event) {
25 |     if(event.target.value === ''){
26 |       return;
27 |     }
28 |     const addressQuery = event.target.value;
29 |     const autocompleteResponse = await this.getPlacePredictions(addressQuery);
30 |     this.predictions = autocompleteResponse.predictions;
31 |     this.predictionsVisible = this.predictions.length > 0;
32 |     console.log('predictions', autocompleteResponse.predictions);
33 |   }
34 | 
35 |   public showPredictions() {
36 |     this.predictionsVisible = this.predictions.length > 0;
37 |   }
38 | 
39 |   public clearPredictions() {
40 |     this.predictionsVisible = false;
41 |     this.predictions = [];
42 |   }
43 | 
44 |   public getPlaceDetails(placeId: string) {
45 |     this.predictionsVisible = false;
46 |     this.getPlacesService().getDetails({
47 |       placeId,
48 |       sessionToken: this.getSessionToken(),
49 |       fields: ['formatted_address', 'geometry'],
50 |     }, (placeResult) => this.placeSelect.emit(placeResult));
51 |   }
52 | 
53 |   private getPlacePredictions(addressQuery: string): Promise<AutocompleteResponse> {
54 |     return this.getAutocompleteService().getPlacePredictions({
55 |       componentRestrictions: {country: ['au']},
56 |       input: addressQuery,
57 |       sessionToken: this.getSessionToken(),
58 |       types: ['address'],
59 |     });
60 |   }
61 | 
62 |   private getPlacesService() {
63 |     if (this.placesService) {
64 |       return this.placesService;
65 |     }
66 |     this.placesService = new google.maps.places.PlacesService(this.result.nativeElement);
67 |     return this.placesService;
68 |   }
69 | 
70 |   private getAutocompleteService() {
71 |     if (this.autocompleteService) {
72 |       return this.autocompleteService;
73 |     }
74 |     this.autocompleteService = new google.maps.places.AutocompleteService();
75 |     return this.autocompleteService;
76 |   }
77 | 
78 |   private getSessionToken() {
79 |     if (this.sessionToken) {
80 |       return this.sessionToken;
81 |     }
82 |     this.sessionToken = new google.maps.places.AutocompleteSessionToken();
83 |     return this.sessionToken;
84 |   }
85 | }
86 | 


--------------------------------------------------------------------------------
/src/app/home/home.page.ts:
--------------------------------------------------------------------------------
  1 | import { Component } from '@angular/core';
  2 | import { AlertController, LoadingController } from '@ionic/angular';
  3 | import { circle, LayerGroup, Map as LMap, TileLayer } from 'leaflet';
  4 | import { BaseLayer } from './BaseLayer.enum';
  5 | import { placeLocationMarker } from './placeLocationMarker';
  6 | import PlaceResult = google.maps.places.PlaceResult;
  7 | 
  8 | @Component({
  9 |   selector: 'app-home',
 10 |   templateUrl: 'home.page.html',
 11 |   styleUrls: ['home.page.scss'],
 12 | })
 13 | export class HomePage {
 14 | 
 15 |   public map: LMap;
 16 |   public center = [
 17 |     -37.8182711,
 18 |     144.9648731
 19 |   ];
 20 | 
 21 |   public options = {
 22 |     zoom: 15,
 23 |     maxZoom: 18,
 24 |     zoomControl: false,
 25 |     preferCanvas: true,
 26 |     attributionControl: true,
 27 |     center: this.center,
 28 |   };
 29 | 
 30 |   public baseMapUrls = {
 31 |     [BaseLayer.cycling]: 'http://c.tile.thunderforest.com/cycle/{z}/{x}/{y}.png',
 32 |     [BaseLayer.transport]: 'http://c.tile.thunderforest.com/transport/{z}/{x}/{y}.png',
 33 |     [BaseLayer.osm]: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
 34 |   };
 35 | 
 36 |   public selectedBaseLayer;
 37 | 
 38 |   public baseLayer = BaseLayer;
 39 | 
 40 |   public locating = false;
 41 | 
 42 |   private baseMapLayerGroup = new LayerGroup();
 43 |   private locationLayerGroup = new LayerGroup();
 44 |   private gpsLoadingEl: HTMLIonLoadingElement;
 45 | 
 46 |   constructor(private alertController: AlertController, private loadingController: LoadingController) {
 47 |   }
 48 | 
 49 |   public async onMapReady(lMap: LMap) {
 50 |     this.map = lMap;
 51 |     this.map.addLayer(this.baseMapLayerGroup);
 52 |     this.map.addLayer(this.locationLayerGroup);
 53 |     this.switchBaseLayer(BaseLayer.osm);
 54 |     setTimeout(() => lMap.invalidateSize(true), 0);
 55 |   }
 56 | 
 57 |   public switchBaseLayer(baseLayerName: string) {
 58 |     if (this.selectedBaseLayer === baseLayerName){
 59 |       return;
 60 |     }
 61 |     this.baseMapLayerGroup.clearLayers();
 62 |     const baseMapTileLayer = new TileLayer(this.baseMapUrls[baseLayerName]);
 63 |     this.baseMapLayerGroup.addLayer(baseMapTileLayer);
 64 |     this.selectedBaseLayer = BaseLayer[baseLayerName];
 65 |   }
 66 | 
 67 |   public async locate() {
 68 |     this.locationLayerGroup.clearLayers();
 69 |     if (!navigator.geolocation) {
 70 |       console.error('Geolocation is not supported by your browser');
 71 |       return;
 72 |     }
 73 |     await this.presentLoading();
 74 |     navigator.geolocation.getCurrentPosition(
 75 |       (position) => this.onLocationSuccess(position),
 76 |       (error) => this.onLocateError(error),
 77 |       {enableHighAccuracy: true}
 78 |     );
 79 |   }
 80 | 
 81 |   public showAddressMarker(placeResult: PlaceResult) {
 82 |     const formattedAddress = placeResult.formatted_address;
 83 |     const [lat, lng] = [
 84 |       placeResult.geometry.location.lat(),
 85 |       placeResult.geometry.location.lng(),
 86 |     ];
 87 |     this.map.setView([lat, lng], 18);
 88 |     placeLocationMarker(this.locationLayerGroup, [lat, lng], formattedAddress);
 89 |   }
 90 | 
 91 |   private onLocationSuccess(position: GeolocationPosition) {
 92 |     const {accuracy, latitude, longitude} = position.coords;
 93 |     const latlng = [latitude, longitude];
 94 |     this.hideLoading();
 95 |     this.map.setView(latlng, 18);
 96 |     const accuracyValue = accuracy > 1000 ? accuracy / 1000 : accuracy;
 97 |     const accuracyUnit = accuracy > 1000 ? 'km' : 'm';
 98 |     placeLocationMarker(this.locationLayerGroup, latlng, `Accuracy is ${accuracyValue} ${accuracyUnit}`);
 99 |     const locationCircle = circle(latlng, accuracy);
100 |     this.locationLayerGroup.addLayer(locationCircle);
101 |   }
102 | 
103 |   private async onLocateError(error) {
104 |     this.hideLoading();
105 |     const alert = await this.alertController.create({
106 |       header: 'GPS error',
107 |       message: error.message,
108 |       buttons: ['OK']
109 |     });
110 | 
111 |     await alert.present();
112 |   }
113 | 
114 |   private async presentLoading() {
115 |     this.gpsLoadingEl = await this.loadingController.create({
116 |       message: 'Locating device ...',
117 |     });
118 |     await this.gpsLoadingEl.present();
119 |   }
120 | 
121 |   private hideLoading() {
122 |     this.gpsLoadingEl.dismiss();
123 |   }
124 | 
125 | }
126 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "defaultProject": "app",
  5 |   "newProjectRoot": "projects",
  6 |   "projects": {
  7 |     "app": {
  8 |       "root": "",
  9 |       "sourceRoot": "src",
 10 |       "projectType": "application",
 11 |       "prefix": "app",
 12 |       "schematics": {},
 13 |       "architect": {
 14 |         "build": {
 15 |           "builder": "@angular-builders/custom-webpack:browser",
 16 |           "options": {
 17 |             "indexTransform": "./index-replace-api-key.ts",
 18 |             "outputPath": "www",
 19 |             "index": "src/index.html",
 20 |             "main": "src/main.ts",
 21 |             "polyfills": "src/polyfills.ts",
 22 |             "tsConfig": "tsconfig.app.json",
 23 |             "assets": [
 24 |               {
 25 |                 "glob": "**/*",
 26 |                 "input": "src/assets",
 27 |                 "output": "assets"
 28 |               },
 29 |               {
 30 |                 "glob": "**/*.svg",
 31 |                 "input": "node_modules/ionicons/dist/ionicons/svg",
 32 |                 "output": "./svg"
 33 |               },
 34 |               "src/manifest.webmanifest"
 35 |             ],
 36 |             "styles": ["src/theme/variables.scss", "src/global.scss", "./node_modules/leaflet/dist/leaflet.css"],
 37 |             "scripts": [],
 38 |             "aot": false,
 39 |             "vendorChunk": true,
 40 |             "extractLicenses": false,
 41 |             "buildOptimizer": false,
 42 |             "sourceMap": true,
 43 |             "optimization": false,
 44 |             "namedChunks": true,
 45 |             "serviceWorker": true,
 46 |             "ngswConfigPath": "ngsw-config.json"
 47 |           },
 48 |           "configurations": {
 49 |             "production": {
 50 |               "fileReplacements": [
 51 |                 {
 52 |                   "replace": "src/environments/environment.ts",
 53 |                   "with": "src/environments/environment.prod.ts"
 54 |                 }
 55 |               ],
 56 |               "optimization": true,
 57 |               "outputHashing": "all",
 58 |               "sourceMap": false,
 59 |               "namedChunks": false,
 60 |               "aot": true,
 61 |               "extractLicenses": true,
 62 |               "vendorChunk": false,
 63 |               "buildOptimizer": true,
 64 |               "budgets": [
 65 |                 {
 66 |                   "type": "initial",
 67 |                   "maximumWarning": "2mb",
 68 |                   "maximumError": "5mb"
 69 |                 }
 70 |               ]
 71 |             },
 72 |             "ci": {
 73 |               "progress": false
 74 |             }
 75 |           }
 76 |         },
 77 |         "serve": {
 78 |           "builder": "@angular-devkit/build-angular:dev-server",
 79 |           "options": {
 80 |             "browserTarget": "app:build"
 81 |           },
 82 |           "configurations": {
 83 |             "production": {
 84 |               "browserTarget": "app:build:production"
 85 |             },
 86 |             "ci": {
 87 |               "progress": false
 88 |             }
 89 |           }
 90 |         },
 91 |         "extract-i18n": {
 92 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 93 |           "options": {
 94 |             "browserTarget": "app:build"
 95 |           }
 96 |         },
 97 |         "test": {
 98 |           "builder": "@angular-devkit/build-angular:karma",
 99 |           "options": {
100 |             "main": "src/test.ts",
101 |             "polyfills": "src/polyfills.ts",
102 |             "tsConfig": "tsconfig.spec.json",
103 |             "karmaConfig": "karma.conf.js",
104 |             "styles": [],
105 |             "scripts": [],
106 |             "assets": [
107 |               {
108 |                 "glob": "favicon.ico",
109 |                 "input": "src/",
110 |                 "output": "/"
111 |               },
112 |               {
113 |                 "glob": "**/*",
114 |                 "input": "src/assets",
115 |                 "output": "/assets"
116 |               },
117 |               "src/manifest.webmanifest"
118 |             ]
119 |           },
120 |           "configurations": {
121 |             "ci": {
122 |               "progress": false,
123 |               "watch": false
124 |             }
125 |           }
126 |         },
127 |         "lint": {
128 |           "builder": "@angular-eslint/builder:lint",
129 |           "options": {
130 |             "lintFilePatterns": [
131 |               "src/**/*.ts",
132 |               "src/**/*.html"
133 |             ]
134 |           }
135 |         },
136 |         "e2e": {
137 |           "builder": "@angular-devkit/build-angular:protractor",
138 |           "options": {
139 |             "protractorConfig": "e2e/protractor.conf.js",
140 |             "devServerTarget": "app:serve"
141 |           },
142 |           "configurations": {
143 |             "production": {
144 |               "devServerTarget": "app:serve:production"
145 |             },
146 |             "ci": {
147 |               "devServerTarget": "app:serve:ci"
148 |             }
149 |           }
150 |         },
151 |         "ionic-cordova-build": {
152 |           "builder": "@ionic/angular-toolkit:cordova-build",
153 |           "options": {
154 |             "browserTarget": "app:build"
155 |           },
156 |           "configurations": {
157 |             "production": {
158 |               "browserTarget": "app:build:production"
159 |             }
160 |           }
161 |         },
162 |         "ionic-cordova-serve": {
163 |           "builder": "@ionic/angular-toolkit:cordova-serve",
164 |           "options": {
165 |             "cordovaBuildTarget": "app:ionic-cordova-build",
166 |             "devServerTarget": "app:serve"
167 |           },
168 |           "configurations": {
169 |             "production": {
170 |               "cordovaBuildTarget": "app:ionic-cordova-build:production",
171 |               "devServerTarget": "app:serve:production"
172 |             }
173 |           }
174 |         }
175 |       }
176 |     }
177 |   },
178 |   "cli": {
179 |     "defaultCollection": "@ionic/angular-toolkit"
180 |   },
181 |   "schematics": {
182 |     "@ionic/angular-toolkit:component": {
183 |       "styleext": "scss"
184 |     },
185 |     "@ionic/angular-toolkit:page": {
186 |       "styleext": "scss"
187 |     }
188 |   }
189 | }
190 | 


--------------------------------------------------------------------------------
/src/theme/variables.scss:
--------------------------------------------------------------------------------
  1 | // Ionic Variables and Theming. For more info, please see:
  2 | // http://ionicframework.com/docs/theming/
  3 | 
  4 | /** Ionic CSS Variables **/
  5 | :root {
  6 |   /** primary **/
  7 |   --ion-color-primary: #3880ff;
  8 |   --ion-color-primary-rgb: 56, 128, 255;
  9 |   --ion-color-primary-contrast: #ffffff;
 10 |   --ion-color-primary-contrast-rgb: 255, 255, 255;
 11 |   --ion-color-primary-shade: #3171e0;
 12 |   --ion-color-primary-tint: #4c8dff;
 13 | 
 14 |   /** secondary **/
 15 |   --ion-color-secondary: #3dc2ff;
 16 |   --ion-color-secondary-rgb: 61, 194, 255;
 17 |   --ion-color-secondary-contrast: #ffffff;
 18 |   --ion-color-secondary-contrast-rgb: 255, 255, 255;
 19 |   --ion-color-secondary-shade: #36abe0;
 20 |   --ion-color-secondary-tint: #50c8ff;
 21 | 
 22 |   /** tertiary **/
 23 |   --ion-color-tertiary: #5260ff;
 24 |   --ion-color-tertiary-rgb: 82, 96, 255;
 25 |   --ion-color-tertiary-contrast: #ffffff;
 26 |   --ion-color-tertiary-contrast-rgb: 255, 255, 255;
 27 |   --ion-color-tertiary-shade: #4854e0;
 28 |   --ion-color-tertiary-tint: #6370ff;
 29 | 
 30 |   /** success **/
 31 |   --ion-color-success: #2dd36f;
 32 |   --ion-color-success-rgb: 45, 211, 111;
 33 |   --ion-color-success-contrast: #ffffff;
 34 |   --ion-color-success-contrast-rgb: 255, 255, 255;
 35 |   --ion-color-success-shade: #28ba62;
 36 |   --ion-color-success-tint: #42d77d;
 37 | 
 38 |   /** warning **/
 39 |   --ion-color-warning: #ffc409;
 40 |   --ion-color-warning-rgb: 255, 196, 9;
 41 |   --ion-color-warning-contrast: #000000;
 42 |   --ion-color-warning-contrast-rgb: 0, 0, 0;
 43 |   --ion-color-warning-shade: #e0ac08;
 44 |   --ion-color-warning-tint: #ffca22;
 45 | 
 46 |   /** danger **/
 47 |   --ion-color-danger: #eb445a;
 48 |   --ion-color-danger-rgb: 235, 68, 90;
 49 |   --ion-color-danger-contrast: #ffffff;
 50 |   --ion-color-danger-contrast-rgb: 255, 255, 255;
 51 |   --ion-color-danger-shade: #cf3c4f;
 52 |   --ion-color-danger-tint: #ed576b;
 53 | 
 54 |   /** dark **/
 55 |   --ion-color-dark: #222428;
 56 |   --ion-color-dark-rgb: 34, 36, 40;
 57 |   --ion-color-dark-contrast: #ffffff;
 58 |   --ion-color-dark-contrast-rgb: 255, 255, 255;
 59 |   --ion-color-dark-shade: #1e2023;
 60 |   --ion-color-dark-tint: #383a3e;
 61 | 
 62 |   /** medium **/
 63 |   --ion-color-medium: #92949c;
 64 |   --ion-color-medium-rgb: 146, 148, 156;
 65 |   --ion-color-medium-contrast: #ffffff;
 66 |   --ion-color-medium-contrast-rgb: 255, 255, 255;
 67 |   --ion-color-medium-shade: #808289;
 68 |   --ion-color-medium-tint: #9d9fa6;
 69 | 
 70 |   /** light **/
 71 |   --ion-color-light: #f4f5f8;
 72 |   --ion-color-light-rgb: 244, 245, 248;
 73 |   --ion-color-light-contrast: #000000;
 74 |   --ion-color-light-contrast-rgb: 0, 0, 0;
 75 |   --ion-color-light-shade: #d7d8da;
 76 |   --ion-color-light-tint: #f5f6f9;
 77 | }
 78 | 
 79 | @media (prefers-color-scheme: dark) {
 80 |   /*
 81 |    * Dark Colors
 82 |    * -------------------------------------------
 83 |    */
 84 | 
 85 |   body {
 86 |     --ion-color-primary: #428cff;
 87 |     --ion-color-primary-rgb: 66,140,255;
 88 |     --ion-color-primary-contrast: #ffffff;
 89 |     --ion-color-primary-contrast-rgb: 255,255,255;
 90 |     --ion-color-primary-shade: #3a7be0;
 91 |     --ion-color-primary-tint: #5598ff;
 92 | 
 93 |     --ion-color-secondary: #50c8ff;
 94 |     --ion-color-secondary-rgb: 80,200,255;
 95 |     --ion-color-secondary-contrast: #ffffff;
 96 |     --ion-color-secondary-contrast-rgb: 255,255,255;
 97 |     --ion-color-secondary-shade: #46b0e0;
 98 |     --ion-color-secondary-tint: #62ceff;
 99 | 
100 |     --ion-color-tertiary: #6a64ff;
101 |     --ion-color-tertiary-rgb: 106,100,255;
102 |     --ion-color-tertiary-contrast: #ffffff;
103 |     --ion-color-tertiary-contrast-rgb: 255,255,255;
104 |     --ion-color-tertiary-shade: #5d58e0;
105 |     --ion-color-tertiary-tint: #7974ff;
106 | 
107 |     --ion-color-success: #2fdf75;
108 |     --ion-color-success-rgb: 47,223,117;
109 |     --ion-color-success-contrast: #000000;
110 |     --ion-color-success-contrast-rgb: 0,0,0;
111 |     --ion-color-success-shade: #29c467;
112 |     --ion-color-success-tint: #44e283;
113 | 
114 |     --ion-color-warning: #ffd534;
115 |     --ion-color-warning-rgb: 255,213,52;
116 |     --ion-color-warning-contrast: #000000;
117 |     --ion-color-warning-contrast-rgb: 0,0,0;
118 |     --ion-color-warning-shade: #e0bb2e;
119 |     --ion-color-warning-tint: #ffd948;
120 | 
121 |     --ion-color-danger: #ff4961;
122 |     --ion-color-danger-rgb: 255,73,97;
123 |     --ion-color-danger-contrast: #ffffff;
124 |     --ion-color-danger-contrast-rgb: 255,255,255;
125 |     --ion-color-danger-shade: #e04055;
126 |     --ion-color-danger-tint: #ff5b71;
127 | 
128 |     --ion-color-dark: #f4f5f8;
129 |     --ion-color-dark-rgb: 244,245,248;
130 |     --ion-color-dark-contrast: #000000;
131 |     --ion-color-dark-contrast-rgb: 0,0,0;
132 |     --ion-color-dark-shade: #d7d8da;
133 |     --ion-color-dark-tint: #f5f6f9;
134 | 
135 |     --ion-color-medium: #989aa2;
136 |     --ion-color-medium-rgb: 152,154,162;
137 |     --ion-color-medium-contrast: #000000;
138 |     --ion-color-medium-contrast-rgb: 0,0,0;
139 |     --ion-color-medium-shade: #86888f;
140 |     --ion-color-medium-tint: #a2a4ab;
141 | 
142 |     --ion-color-light: #222428;
143 |     --ion-color-light-rgb: 34,36,40;
144 |     --ion-color-light-contrast: #ffffff;
145 |     --ion-color-light-contrast-rgb: 255,255,255;
146 |     --ion-color-light-shade: #1e2023;
147 |     --ion-color-light-tint: #383a3e;
148 |   }
149 | 
150 |   /*
151 |    * iOS Dark Theme
152 |    * -------------------------------------------
153 |    */
154 | 
155 |   .ios body {
156 |     --ion-background-color: #000000;
157 |     --ion-background-color-rgb: 0,0,0;
158 | 
159 |     --ion-text-color: #ffffff;
160 |     --ion-text-color-rgb: 255,255,255;
161 | 
162 |     --ion-color-step-50: #0d0d0d;
163 |     --ion-color-step-100: #1a1a1a;
164 |     --ion-color-step-150: #262626;
165 |     --ion-color-step-200: #333333;
166 |     --ion-color-step-250: #404040;
167 |     --ion-color-step-300: #4d4d4d;
168 |     --ion-color-step-350: #595959;
169 |     --ion-color-step-400: #666666;
170 |     --ion-color-step-450: #737373;
171 |     --ion-color-step-500: #808080;
172 |     --ion-color-step-550: #8c8c8c;
173 |     --ion-color-step-600: #999999;
174 |     --ion-color-step-650: #a6a6a6;
175 |     --ion-color-step-700: #b3b3b3;
176 |     --ion-color-step-750: #bfbfbf;
177 |     --ion-color-step-800: #cccccc;
178 |     --ion-color-step-850: #d9d9d9;
179 |     --ion-color-step-900: #e6e6e6;
180 |     --ion-color-step-950: #f2f2f2;
181 | 
182 |     --ion-item-background: #000000;
183 | 
184 |     --ion-card-background: #1c1c1d;
185 |   }
186 | 
187 |   .ios ion-modal {
188 |     --ion-background-color: var(--ion-color-step-100);
189 |     --ion-toolbar-background: var(--ion-color-step-150);
190 |     --ion-toolbar-border-color: var(--ion-color-step-250);
191 |   }
192 | 
193 | 
194 |   /*
195 |    * Material Design Dark Theme
196 |    * -------------------------------------------
197 |    */
198 | 
199 |   .md body {
200 |     --ion-background-color: #121212;
201 |     --ion-background-color-rgb: 18,18,18;
202 | 
203 |     --ion-text-color: #ffffff;
204 |     --ion-text-color-rgb: 255,255,255;
205 | 
206 |     --ion-border-color: #222222;
207 | 
208 |     --ion-color-step-50: #1e1e1e;
209 |     --ion-color-step-100: #2a2a2a;
210 |     --ion-color-step-150: #363636;
211 |     --ion-color-step-200: #414141;
212 |     --ion-color-step-250: #4d4d4d;
213 |     --ion-color-step-300: #595959;
214 |     --ion-color-step-350: #656565;
215 |     --ion-color-step-400: #717171;
216 |     --ion-color-step-450: #7d7d7d;
217 |     --ion-color-step-500: #898989;
218 |     --ion-color-step-550: #949494;
219 |     --ion-color-step-600: #a0a0a0;
220 |     --ion-color-step-650: #acacac;
221 |     --ion-color-step-700: #b8b8b8;
222 |     --ion-color-step-750: #c4c4c4;
223 |     --ion-color-step-800: #d0d0d0;
224 |     --ion-color-step-850: #dbdbdb;
225 |     --ion-color-step-900: #e7e7e7;
226 |     --ion-color-step-950: #f3f3f3;
227 | 
228 |     --ion-item-background: #1e1e1e;
229 | 
230 |     --ion-toolbar-background: #1f1f1f;
231 | 
232 |     --ion-tab-bar-background: #1f1f1f;
233 | 
234 |     --ion-card-background: #1e1e1e;
235 |   }
236 | }
237 | 


--------------------------------------------------------------------------------