feat/google-map-utils

README.md

@@ -17,6 +17,7 @@
 - [@nativescript/fingerprint-auth](packages/fingerprint-auth/README.md)
 - [@nativescript/geolocation](packages/geolocation/README.md)
 - [@nativescript/google-maps](packages/google-maps/README.md)
+- [@nativescript/google-maps-utils](packages/google-maps-utils/README.md)
 - [@nativescript/google-signin](packages/google-signin/README.md)
 - [@nativescript/haptics](packages/haptics/README.md)
 - [@nativescript/imagepicker](packages/imagepicker/README.md)

apps/demo-angular/package.json

@@ -2,6 +2,9 @@
 	"main": "./src/main.ts",
 	"dependencies": {
 		"@nativescript/core": "file:../../node_modules/@nativescript/core",
+		"@nativescript/google-maps": "file:../../dist/packages/google-maps",
+		"@nativescript/google-maps-utils": "file:../../dist/packages/google-maps-utils",
+		"@nativescript/jetpack-compose": "file:../../dist/packages/jetpack-compose",
 		"@nativescript/animated-circle": "file:../../dist/packages/animated-circle",
 		"@nativescript/appavailability": "file:../../dist/packages/appavailability",
 		"@nativescript/apple-sign-in": "file:../../dist/packages/apple-sign-in",
@@ -20,7 +23,6 @@
 		"@nativescript/facebook": "file:../../dist/packages/facebook",
 		"@nativescript/fingerprint-auth": "file:../../dist/packages/fingerprint-auth",
 		"@nativescript/geolocation": "file:../../dist/packages/geolocation",
-		"@nativescript/google-maps": "file:../../dist/packages/google-maps",
 		"@nativescript/google-signin": "file:../../dist/packages/google-signin",
 		"@nativescript/haptics": "file:../../dist/packages/haptics",
 		"@nativescript/imagepicker": "file:../../dist/packages/imagepicker",

apps/demo-angular/src/app-routing.module.ts

@@ -26,6 +26,7 @@ const routes: Routes = [
 	{ path: 'fingerprint-auth', loadChildren: () => import('./plugin-demos/fingerprint-auth.module').then((m) => m.FingerprintAuthModule) },
 	{ path: 'geolocation', loadChildren: () => import('./plugin-demos/geolocation.module').then((m) => m.GeolocationModule) },
 	{ path: 'google-maps', loadChildren: () => import('./plugin-demos/google-maps.module').then((m) => m.GoogleMapsModule) },
+	{ path: 'google-maps-utils', loadChildren: () => import('./plugin-demos/google-maps-utils.module').then((m) => m.GoogleMapsUtilsModule) },
 	{ path: 'google-signin', loadChildren: () => import('./plugin-demos/google-signin.module').then((m) => m.GoogleSigninModule) },
 	{ path: 'haptics', loadChildren: () => import('./plugin-demos/haptics.module').then((m) => m.HapticsModule) },
 	{ path: 'imagepicker', loadChildren: () => import('./plugin-demos/imagepicker.module').then((m) => m.ImagepickerModule) },

apps/demo-angular/src/home.component.ts

@@ -63,6 +63,9 @@ export class HomeComponent {
 		{
 			name: 'google-maps',
 		},
+		{
+			name: 'google-maps-utils',
+		},
 		{
 			name: 'google-signin',
 		},

apps/demo-angular/src/plugin-demos/google-maps-utils.component.html

@@ -0,0 +1,8 @@
+<ActionBar title="google-maps-utils" class="action-bar"> </ActionBar>
+<StackLayout class="p-20">
+  <ScrollView class="h-full">
+    <StackLayout>
+      <Button text="Test google-maps-utils" (tap)="demoShared.testIt()" class="btn btn-primary"></Button>
+    </StackLayout>
+  </ScrollView>
+</StackLayout>

apps/demo-angular/src/plugin-demos/google-maps-utils.component.ts

@@ -0,0 +1,19 @@
+import { Component, NgZone } from '@angular/core';
+import { DemoSharedGoogleMapsUtils } from '@demo/shared';
+import { } from '@nativescript/google-maps-utils';
+
+@Component({
+	selector: 'demo-google-maps-utils',
+	templateUrl: 'google-maps-utils.component.html',
+})
+export class GoogleMapsUtilsComponent {
+
+  demoShared: DemoSharedGoogleMapsUtils;
+
+	constructor(private _ngZone: NgZone) {}
+
+  ngOnInit() {
+    this.demoShared = new DemoSharedGoogleMapsUtils();
+  }
+
+}

apps/demo-angular/src/plugin-demos/google-maps-utils.module.ts

@@ -0,0 +1,10 @@
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NativeScriptCommonModule, NativeScriptRouterModule } from '@nativescript/angular';
+import { GoogleMapsUtilsComponent } from './google-maps-utils.component';
+
+@NgModule({
+	imports: [NativeScriptCommonModule, NativeScriptRouterModule.forChild([{ path: '', component: GoogleMapsUtilsComponent }])],
+  declarations: [GoogleMapsUtilsComponent],
+  schemas: [ NO_ERRORS_SCHEMA]
+})
+export class GoogleMapsUtilsModule {}

apps/demo/package.json

@@ -5,6 +5,9 @@
 	"repository": "<fill-your-repository-here>",
 	"dependencies": {
 		"@nativescript/core": "file:../../node_modules/@nativescript/core",
+		"@nativescript/google-maps": "file:../../packages/google-maps",
+		"@nativescript/google-maps-utils": "file:../../packages/google-maps-utils",
+		"@nativescript/jetpack-compose": "file:../../packages/jetpack-compose",
 		"@nativescript/animated-circle": "file:../../packages/animated-circle",
 		"@nativescript/appavailability": "file:../../packages/appavailability",
 		"@nativescript/apple-sign-in": "file:../../packages/apple-sign-in",
@@ -23,7 +26,6 @@
 		"@nativescript/facebook": "file:../../packages/facebook",
 		"@nativescript/fingerprint-auth": "file:../../packages/fingerprint-auth",
 		"@nativescript/geolocation": "file:../../packages/geolocation",
-		"@nativescript/google-maps": "file:../../packages/google-maps",
 		"@nativescript/google-signin": "file:../../packages/google-signin",
 		"@nativescript/haptics": "file:../../packages/haptics",
 		"@nativescript/imagepicker": "file:../../packages/imagepicker",

apps/demo/src/main-page.xml

@@ -24,6 +24,7 @@
         <Button text="fingerprint-auth" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
         <Button text="geolocation" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
         <Button text="google-maps" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
+        <Button text="google-maps-utils" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
         <Button text="google-signin" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
         <Button text="haptics" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
         <Button text="imagepicker" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>

apps/demo/src/plugin-demos/google-maps-utils.ts

@@ -0,0 +1,12 @@
+import { Observable, EventData, Page } from '@nativescript/core';
+import { DemoSharedGoogleMapsUtils } from '@demo/shared';
+import { } from '@nativescript/google-maps-utils';
+
+export function navigatingTo(args: EventData) {
+	const page = <Page>args.object;
+	page.bindingContext = new DemoModel();
+}
+
+export class DemoModel extends DemoSharedGoogleMapsUtils {
+
+}

apps/demo/src/plugin-demos/google-maps-utils.xml

@@ -0,0 +1,14 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:map="@nativescript/google-maps" navigatingTo="navigatingTo" class="page">
+    <Page.actionBar>
+        <ActionBar title="google-maps-utils" icon="" class="action-bar">
+        </ActionBar>
+    </Page.actionBar>
+    <StackLayout class="p-20">
+			<StackLayout>
+				<Button text="Test google-maps-utils" tap="{{ testIt }}" class="btn btn-primary"/>
+				<map:MapView
+					ready="{{ onMapReady }}"
+				/>
+			</StackLayout>
+    </StackLayout>
+</Page>

package.json

@@ -33,6 +33,7 @@
 		"@nativescript/types": "~8.5.0",
 		"@nativescript/webpack": "~5.0.5",
 		"@ngtools/webpack": "^15.0.0",
+		"@types/geojson": "^7946.0.10",
 		"@types/mkdirp": "^1.0.1",
 		"@types/sprintf-js": "^1.1.0",
 		"husky": "^8.0.0",

packages/google-maps-utils/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*", "node_modules/**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

packages/google-maps-utils/README.md

@@ -0,0 +1,98 @@
+# @nativescript/google-maps-utils
+
+```javascript
+ns plugin add @nativescript/google-maps-utils
+```
+*Requires google maps plugin [@nativescript/google-maps](packages/google-maps/README.md)* 
+
+## Installation
+Install the mixins to the GoogleMaps object
+```javascript
+import { installMixins } from '@nativescript/google-maps-utils';
+installMixins();
+```
+
+## Usage
+You can access the google maps utilities from the GoogleMaps object after the mixins have been installed.
+```javascript
+onMapReady(args: MapReadyEvent) {
+	const map = args.map;
+}
+```
+
+---
+
+## HeatMaps
+```javascript
+import { HeatmapTileProvider, HeatmapOptions } from '@nativescript/google-maps-utils';
+import { GoogleMap, Coordinate } from '@nativescript/google-maps';
+
+addHeatmapOverlay(map: GoogleMap, heatmapOptions: HeatmapOptions) {
+	// Create a new heat map tile provider
+	const heatmapProvider = new HeatmapTileProvider(heatmapOptions);
+	// Pass tile provider to Google Maps 
+	const heatmapOverlay = map.addTileOverlay({
+		tileProvider: heatmapProvider,
+	});
+}
+```
+
+### HeatmapOptions
+
+| Property | Type 
+|:---------|:-----
+|	`coordinates` | `Coordinate[]`;
+|	`opacity` | `number`;
+|	`radius` | `number`;
+|	`maxIntensity` | `number`;
+|	`gradient` | ` IGradient[]`;
+
+---
+
+## Clustering
+```javascript
+import { ClusterManager } from '@nativescript/google-maps-utils';
+import { GoogleMap, MarkerOptions } from '@nativescript/google-maps';
+
+addClusteredMarkers(map: GoogleMap, markers: MarkerOptions[]) {
+	const clusterManager: ClusterManager = map.clusterManager(markers);
+}
+```
+
+---
+
+## Experimental Features
+Features that are not yet fully implemented or likely to change.
+### GeoJson Layers
+
+Currently only supports GeoJson Objects.
+
+```javascript
+import { GeoJsonLayer, IGeometryStyle } from '@nativescript/google-maps-utils';
+
+onMapReady(args: MapReadyEvent) {
+	const style: Partial<IGeometryStyle> = { 
+		fillColor: new Color('blue'),
+		strokeColor: new Color('red'),
+		width: 4,
+	}
+
+	map.addGeoJson({
+		geoJson: geoJson,
+		style: style,
+	});
+}
+```
+
+```javascript
+import { GeoJsonLayer } from '@nativescript/google-maps-utils';
+
+removeGeoJsonLayer(map: GoogleMap, layer: GeoJsonLayer) {
+	map.removeGeoJson(layer);
+}
+```
+
+
+## License
+
+Apache License Version 2.0