From 196be026ea68aa3371b901d698bb1cf959a2dec5 Mon Sep 17 00:00:00 2001 From: Masashi Katsumata Date: Wed, 8 Nov 2017 05:12:07 -0800 Subject: [PATCH] feat(google-maps): accept own properties for `addMarker()` and others (#2093) * Update index.ts * Update index.ts * Add missing features, and bug fix of methods * update: classname must be in pascal case * remove: duplicated class definition * export encode and spherical static classes * Add comma * Fix Encoding and Spherical * Add convenience methods * Fix decorators for Encoding and Spherical * Update: getMap() methods return the instance of the wrapper plugin * Update: getMap() methods return the instance of the wrapper plugin * Remove `@CordovaInstance` decorators from getMap() * Update: GoogleMapOptions (all fields are not optional). * Follow up: version `2.0.0-beta2-20170719-2226` of cordova-plugin-googlemaps * Fix: tslint error * Fix: tslint error * No more isAvailable() method. * Bug fix: description is incorrect * Bug fix: example code was wrong. * Bug fix: HtmlInfoWindow does not work https://github.com/ionic-team/ionic-native/pull/1815#issuecomment-318909795 * Bug fix: HtmlInfoWindow does not work * Bug fix: HtmlInfoWindow does not work * Bug fix: HtmlInfoWindow does not work * Bug fix: HtmlInfoWindow does not work * It seems the ionViewDidLoad() is enough delayed after platform.ready() * Bug fix: map.setDiv() * Bug fix: HtmlInfoWindow does not work * Bug fix: BaseArrayClass definition is incorrect * Bug fix: BaseArrayClass constructor is wrong * Bug fix: Geocoder class does not work * Bug fix: LatLngBounds constructor is wrong * update: noNotify option is not declared * Bug fix: Geocoder.geocode() returns array of GeocoderResult * Update: clarify acceptable parameters of BaseArrayClass * Add: AnimateCameraOption.padding is missing * Revert: BaseClass.empty() method does not have the noNotify option * Add `destruct` option to the CordovaOption. - This allows BaseClass.on() is able to pass multiple retuned values from the cordova plugin side to the event lister. * A semicolon is mixing * update: event names * Update: BaseClass.addEventListener(), addEventListenerOnce(), on(), and one() * Add: destruct option for otherPromise Change: inside event names (must use the version 2.0.0-beta3-20170808-1950 or higher) * Build for working group * Bug fix: map.getCameraTarget() definition is incorrect * Bug fix: The definition of VisibleRegion interface is incorrect * Fix: LatLng, LatLngBounds, and PolylineOptions classes Update: map.getVisibleRegion() Add: VisibleRegion class * Bug fix: the definition of map.clear() method is incorrect * Fix: map.fromLatLngToPoint() * Ignore the dist directory on the master branch * Remove the dist folder on the master branch * fixes and tweaks * use union types for CameraPosition fixes issue mentioned on slack by @wf9a5m75 * fix types * update AnimateCameraOptions interface * remove AnimateCameraOptions interface * add MarkerCluster class * Bug fix: Can not create an instance of BaseArrayClass * Bug fix: the icons property of MarkerClusterOptions * Bug fix: the zoom option is missing https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/1712 * Update index.ts * fix: need to convert instance type from the JS class to the wrapper class https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/1706 * remove test file * fix: Error: Illegal use of "@private" tag. * fix: The Environment, Encode, and Spherical are static class * fix: convert JS instance to the ionic instance add: BaseClass.destroy() add: getId() method for all instance classes * Documentation Error https://github.com/ionic-team/ionic-native/issues/1994 * Need to create another way to convert the instance for marker cluster * save * Remove the instance of wrapper class if the JS instance is removed. * Bug fix: HtmlInfoWindow missing .on and .one methods https://github.com/ionic-team/ionic-native/issues/2034 * Bug fix: HtmlInfoWindow constructor cause the error https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/1661 * Fix: Error when removing map https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/1823 * Add: the cssOptions argument for HtmlInfoWindow.setContent() method * Bug fix: Polyline.getPoints(), Polygon.getPoints() and Polygon.getHoles() Those methods need to create new instance of BaseArrayClass of wrapper plugin. * Add: forEachAsync(), mapAsync(), and filterAsync() methods into BaseArray class * update: use document.querySelector() instead of document.getElementById() if the passed element is string update: map.setDiv() Bug fix: can not create empty GoogleMap (pure JS version is available way) * Fix: wait until the page is fully ready * Fix: missing `clickable` option for PolygonOptions and PolylineOptions * Add: accept own properties for `addMarker()` and others #2087 Fix: some properties are required, but specified as optional. Add: descriptions for properties * Bug fix: Static classes are defined as non static class https://stackoverflow.com/questions/47083289/ionic-native-google-maps-plugin-set-app-background-color/47165721#47165721 * Add: poly class (plugin.google.maps.geometory.poly namespace) --- .../plugins/google-maps/index.ts | 495 +++++++++++++++++- 1 file changed, 471 insertions(+), 24 deletions(-) diff --git a/src/@ionic-native/plugins/google-maps/index.ts b/src/@ionic-native/plugins/google-maps/index.ts index 948f08826..fee5b298f 100644 --- a/src/@ionic-native/plugins/google-maps/index.ts +++ b/src/@ionic-native/plugins/google-maps/index.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { Cordova, CordovaCheck, CordovaInstance, Plugin, InstanceProperty, InstanceCheck, checkAvailability, IonicNativePlugin } from '@ionic-native/core'; +import { CordovaCheck, CordovaInstance, Plugin, InstanceProperty, InstanceCheck, checkAvailability, IonicNativePlugin } from '@ionic-native/core'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/fromEvent'; @@ -93,6 +93,9 @@ export class LatLngBounds implements ILatLngBounds { export interface GoogleMapOptions { + /** + * MapType + */ mapType?: MapType; controls?: { @@ -124,9 +127,25 @@ export interface GoogleMapOptions { }; gestures?: { + + /** + * Set false to disable the scroll gesture (default: true) + */ scroll?: boolean; + + /** + * Set false to disable the tilt gesture (default: true) + */ tilt?: boolean; + + /** + * Set false to disable the zoom gesture (default: true) + */ zoom?: boolean; + + /** + * Set false to disable the rotate gesture (default: true) + */ rotate?: boolean; }; @@ -171,6 +190,23 @@ export interface GoogleMapOptions { export interface CameraPosition { /** * The center location of the camera view. + * + * [usage 1] + * + * let cameraPos: CameraPosition = { + * target: {lat: ..., lng: ...}, + * zoom: 10 + * } + * + * [usage 2] The zoom property is ignored when you specify multiple position + * + * let cameraPos: CameraPosition = { + * target: [ + * {lat: ..., lng: ...}, + * {lat: ..., lng: ...}, + * {lat: ..., lng: ...} + * ] + * } */ target?: T; /** @@ -196,18 +232,91 @@ export interface CameraPosition { } export interface CircleOptions { - center?: ILatLng; - radius?: number; + /** + * Center position of circle + */ + center: ILatLng; + + /** + * Radius of circle in meter + */ + radius: number; + + /** + * Set the stroke color + * (rgb, rgba, #RRGGBB, "colorname", ...etc) + */ strokeColor?: string; + + /** + * Set the stroke width in pixel + */ strokeWidth?: number; + /** + * Set the inside color of polygon + * (rgb, rgba, #RRGGBB, "colorname", ...etc) + */ fillColor?: string; + + /** + * Set to true to receive the CIRCLE_CLICK event + * (default: false) + */ clickable?: boolean; + + /** + * Set to false to hide + */ visible?: boolean; + + /** + * Z-index + */ zIndex?: number; + + /** + * Accept own properties + * You can get the property later using `get()` method. + */ + [key: string]: any; } export interface GeocoderRequest { + + /** + * The address property or position property is required. + * You can not specify both property at the same time. + * + * [geocoding usage1] + * let request: GeocoderRequest = { + * address: "Los Angeles, California, USA" + * }; + * + * [geocoding usage2] + * let request: GeocoderRequest = { + * address: [ + * "Los Angeles, California, USA", + * "San Francisco, California, USA", + * ] + * }; + */ address?: string | string[]; + + /** + * + * [reverse-geocoding usage1] + * let request: GeocoderRequest = { + * position: {"lat": 37.421655, "lng": -122.085637} + * }; + * + * [reverse-geocoding usage2] + * let request: GeocoderRequest = { + * address: [ + * {"lat": 37.421655, "lng": -122.085637}, + * {"lat": 37.332, "lng": -122.030781} + * ] + * }; + */ position?: ILatLng | ILatLng[]; } @@ -236,31 +345,44 @@ export interface GroundOverlayOptions { /** * URL of overlay */ - url?: string; + url: string; + /** * Bounds, array of ILatLng */ - bounds?: Array; + bounds: Array; + /** - * Set to false to ignore click event + * Set to true to receive the GROUND_OVERLAY_CLICK event + * (default: false) */ clickable?: boolean; + /** * Set to false to hide */ visible?: boolean; + /** * Opacity. From 0.0 to 1.0 . */ opacity?: number; + /** * Bearing */ bearing?: number; + /** * Z-index */ zIndex?: number; + + /** + * Accept own properties + * You can get the property later using `get()` method. + */ + [key: string]: any; } export interface ILatLng { @@ -341,13 +463,52 @@ export interface MarkerOptions { * Set to true to disable auto panning when the marker is clicked. */ disableAutoPan?: boolean; + + /** + * Accept own properties + * You can get the property later using `get()` method. + */ + [key: string]: any; } export interface MarkerClusterOptions { + /** + * Maximum zoom level of clustering + * (default: 15, max: 18) + */ maxZoomLevel?: number; + + /** + * Draw a rectangle that contains all locations of clustered when you tap on a clister marker. + * (default: true) + */ boundsDraw?: boolean; + + /** + * Position list + * [ + * {title: "store A", position: {lat: ..., lng: ...}}, + * {title: "store B", position: {lat: ..., lng: ...}}, + * {title: "store C", position: {lat: ..., lng: ...}} + * ] + */ markers: MarkerOptions[]; + + /** + * Conditions of clustering + * [ + * {icon: "assets/small.png", min: 2, max: 10}, + * {icon: "assets/middle.png", min: 11, max: 30}, + * {icon: "assets/large.png", min: 31}, + * ] + */ icons: any[]; + + /** + * Accept own properties + * You can get the property later using `get()` method. + */ + [key: string]: any; } export interface MyLocation { @@ -363,38 +524,159 @@ export interface MyLocation { } export interface MyLocationOptions { + /** + * Set true if you want to try to use GPS mandatory. + * (In false, the plugin try to use GPS and network) + * (default: false) + */ enableHighAccuracy?: boolean; } export interface PolygonOptions { - points?: Array; + /** + * Pass ILatLng[] to specify the vertixes. + * You need to contain two points at least. + */ + points: Array; + + /** + * Set true if you want to draw the curve polygon based on the earth + * (default: false) + */ geodesic?: boolean; + + /** + * Set the stroke color + * (rgb, rgba, #RRGGBB, "colorname", ...etc) + */ strokeColor?: string; + + /** + * Set the stroke width in pixel + */ strokeWidth?: number; + + /** + * Set the inside color of polygon + * (rgb, rgba, #RRGGBB, "colorname", ...etc) + */ fillColor?: string; + + /** + * Set false if you want to create invisible polygon + * (Invisible polygon is not clickable, default true) + */ visible?: boolean; + + /** + * Hierarchy z-index + */ zIndex?: number; + + /** + * Pass ILatLng[][] to create holes in polygon + */ addHole?: Array>; + + /** + * Set true if you want to receive the POLYGON_CLICK event + * (default: false) + */ clickable?: boolean; + + /** + * Accept own properties + * You can get the property later using `get()` method. + */ + [key: string]: any; } export interface PolylineOptions { - points?: Array; + /** + * Pass ILatLng[] to specify the vertixes. + * You need to contain two points at least. + */ + points: Array; + + /** + * Set false if you want to create invisible polyline + * (Invisible polyline is not clickable, default true) + */ visible?: boolean; + + /** + * Set true if you want to draw the curve polyline based on the earth + * (default: false) + */ geodesic?: boolean; + + /** + * Set the stroke color + * (rgb, rgba, #RRGGBB, "colorname", ...etc) + */ color?: string; + + /** + * Set the stroke width in pixel + */ width?: number; + + /** + * Hierarchy z-index + */ zIndex?: number; + + /** + * Set true if you want to receive the POLYLINE_CLICK event + * (default: false) + */ clickable?: boolean; + + /** + * Accept own properties + * You can get the property later using `get()` method. + */ + [key: string]: any; } export interface TileOverlayOptions { + /** + * This callback must return string of image URL. + * If no tile, you need to return null. + */ getTile: (x: number, y: number, zoom: number) => string; + + /** + * Set false if you want to create invisible tilelayer + * (default true) + */ visible?: boolean; + + /** + * Hierarchy z-index of tilelayer + */ zIndex?: number; + + /** + * Default: 512px + */ tileSize?: number; + + /** + * Default: 1.0 + */ opacity?: number; + + /** + * Set true if you want to display the tile information over the tile images. + */ debug?: boolean; + + /** + * Accept own properties + * You can get the property later using `get()` method. + */ + [key: string]: any; } @@ -583,6 +865,7 @@ export const GoogleMapsMapTypeId: { [mapType: string]: MapType; } = { * Polygon * Polyline * Spherical + * Poly * TileOverlay * BaseClass * BaseArrayClass @@ -623,7 +906,7 @@ export class GoogleMaps extends IonicNativePlugin { * @param options {any} Options * @return {GoogleMap} */ - create(element: string | HTMLElement | GoogleMapOptions, options?: GoogleMapOptions): GoogleMap { + static create(element: string | HTMLElement | GoogleMapOptions, options?: GoogleMapOptions): GoogleMap { if (element instanceof HTMLElement) { if (element.getAttribute('__pluginMapId')) { console.error('GoogleMaps', element.tagName + '[__pluginMapId=\'' + element.getAttribute('__pluginMapId') + '\'] has already map.'); @@ -638,6 +921,15 @@ export class GoogleMaps extends IonicNativePlugin { return googleMap; } + /** + * @deprecation + * @hidden + */ + create(element: string | HTMLElement | GoogleMapOptions, options?: GoogleMapOptions): GoogleMap { + console.error('GoogleMaps', '[deprecated] Please use GoogleMaps.create()'); + return GoogleMaps.create(element, options); + } + } /** @@ -1188,20 +1480,37 @@ export class Environment { * Get the open source software license information for Google Maps SDK for iOS. * @return {Promise} */ - getLicenseInfo(): Promise { + static getLicenseInfo(): Promise { return new Promise((resolve) => { GoogleMaps.getPlugin().environment.getLicenseInfo((text: string) => resolve(text)); }); } + /** + * @deprecation + * @hidden + */ + getLicenseInfo(): Promise { + console.error('GoogleMaps', '[deprecated] This method is static. Please use Environment.getLicenseInfo()'); + return Environment.getLicenseInfo(); + } + /** * Specifies the background color of the app. * @param color */ - setBackgroundColor(color: string): void { + static setBackgroundColor(color: string): void { GoogleMaps.getPlugin().environment.setBackgroundColor(color); } + /** + * @deprecation + * @hidden + */ + setBackgroundColor(color: string): void { + console.error('GoogleMaps', '[deprecated] This method is static. Please use Environment.setBackgroundColor()'); + Environment.setBackgroundColor(color); + } } /** @@ -1214,12 +1523,22 @@ export class Environment { repo: '' }) export class Geocoder { + + /** + * @deprecation + * @hidden + */ + geocode(request: GeocoderRequest): Promise> { + console.error('GoogleMaps', '[deprecated] This method is static. Please use Geocoder.geocode()'); + return Geocoder.geocode(request); + } + /** * Converts position to address and vice versa * @param {GeocoderRequest} request Request object with either an address or a position * @return {Promise>} */ - geocode(request: GeocoderRequest): Promise> { + static geocode(request: GeocoderRequest): Promise> { if (request.address instanceof Array || Array.isArray(request.address) || request.position instanceof Array || Array.isArray(request.position)) { @@ -1269,22 +1588,71 @@ export class Geocoder { repo: '' }) export class Encoding { + + /** + * @deprecation + * @hidden + */ + decodePath(encoded: string, precision?: number): LatLng { + console.error('GoogleMaps', '[deprecated] This method is static. Please use Encoding.decodePath()'); + return Encoding.decodePath(encoded, precision); + } + + /** + * @deprecation + * @hidden + */ + encodePath(path: Array | BaseArrayClass): string { + console.error('GoogleMaps', '[deprecated] This method is static. Please use Encoding.encodePath()'); + return Encoding.encodePath(path); + } + /** * Decodes an encoded path string into a sequence of LatLngs. * @param encoded {string} an encoded path string * @param precision? {number} default: 5 * @return {LatLng} */ - @Cordova({ sync: true }) - decodePath(encoded: string, precision?: number): LatLng { return; } + static decodePath(encoded: string, precision?: number): LatLng { return; } /** * Encodes a sequence of LatLngs into an encoded path string. * @param path {Array | BaseArrayClass} a sequence of LatLngs * @return {string} */ - @Cordova({ sync: true }) - encodePath(path: Array | BaseArrayClass): string { return; } + static encodePath(path: Array | BaseArrayClass): string { return; } +} + +/** + * @hidden + */ +@Plugin({ + pluginName: 'GoogleMaps', + pluginRef: 'plugin.google.maps.geometry.poly', + plugin: 'cordova-plugin-googlemaps', + repo: '' +}) +export class Poly { + + /** + * Returns true if the speicified location is in the polygon path + * @param location {ILatLng} + * @param path {ILatLng[]} + * @return {boolean} + */ + static containsLocation(location: ILatLng, path: ILatLng[]): boolean { + return GoogleMaps.getPlugin().geometry.poly.containsLocation(location, path); + } + + /** + * Returns true if the speicified location is on the polyline path + * @param location {ILatLng} + * @param path {ILatLng[]} + * @return {boolean} + */ + static isLocationOnEdge(location: ILatLng, path: ILatLng[]): boolean { + return GoogleMaps.getPlugin().geometry.poly.isLocationOnEdge(location, path); + } } /** @@ -1297,13 +1665,92 @@ export class Encoding { repo: '' }) export class Spherical { + + /** + * @deprecation + * @hidden + */ + computeDistanceBetween(from: ILatLng, to: ILatLng): number { + console.error('GoogleMaps', '[deprecated] This method is static. Please use Spherical.computeDistanceBetween()'); + return Spherical.computeDistanceBetween(from, to); + } + + /** + * @deprecation + * @hidden + */ + computeOffset(from: ILatLng, distance: number, heading: number): LatLng { + console.error('GoogleMaps', '[deprecated] This method is static. Please use Spherical.computeOffset()'); + return Spherical.computeOffset(from, distance, heading); + } + + /** + * @deprecation + * @hidden + */ + computeOffsetOrigin(to: ILatLng, distance: number, heading: number): LatLng { + console.error('GoogleMaps', '[deprecated] This method is static. Please use Spherical.computeOffsetOrigin()'); + return Spherical.computeOffsetOrigin(to, distance, heading); + } + + /** + * @deprecation + * @hidden + */ + computeLength(path: Array | BaseArrayClass): number { + console.error('GoogleMaps', '[deprecated] This method is static. Please use Spherical.computeLength()'); + return Spherical.computeLength(path); + } + + /** + * @deprecation + * @hidden + */ + computeArea(path: Array | BaseArrayClass): number { + console.error('GoogleMaps', '[deprecated] This method is static. Please use Spherical.computeArea()'); + return Spherical.computeArea(path); + } + + /** + * @deprecation + * @hidden + */ + computeSignedArea(path: Array | BaseArrayClass): number { + console.error('GoogleMaps', '[deprecated] This method is static. Please use Spherical.computeSignedArea()'); + return Spherical.computeSignedArea(path); + } + + /** + * @deprecation + * @hidden + */ + computeHeading(from: ILatLng, to: ILatLng): number { + console.error('GoogleMaps', '[deprecated] This method is static. Please use Spherical.computeHeading()'); + return Spherical.computeHeading(from, to); + } + + /** + * @deprecation + * @hidden + */ + interpolate(from: ILatLng, to: ILatLng, fraction: number): LatLng { + console.error('GoogleMaps', '[deprecated] This method is static. Please use Spherical.interpolate()'); + return Spherical.interpolate(from, to, fraction); + } + + + + + + + /** * Returns the distance, in meters, between two LatLngs. * @param locationA {ILatLng} * @param locationB {ILatLng} * @return {number} */ - computeDistanceBetween(from: ILatLng, to: ILatLng): number { + static computeDistanceBetween(from: ILatLng, to: ILatLng): number { return GoogleMaps.getPlugin().geometry.spherical.computeDistanceBetween(from, to); } @@ -1314,7 +1761,7 @@ export class Spherical { * @param heading {number} * @return {LatLng} */ - computeOffset(from: ILatLng, distance: number, heading: number): LatLng { + static computeOffset(from: ILatLng, distance: number, heading: number): LatLng { return GoogleMaps.getPlugin().geometry.spherical.computeOffset(from, distance, heading); } @@ -1325,7 +1772,7 @@ export class Spherical { * @param heading {number} The heading in degrees clockwise from north. * @return {LatLng} */ - computeOffsetOrigin(to: ILatLng, distance: number, heading: number): LatLng { + static computeOffsetOrigin(to: ILatLng, distance: number, heading: number): LatLng { return GoogleMaps.getPlugin().geometry.spherical.computeOffsetOrigin(to, distance, heading); } @@ -1334,7 +1781,7 @@ export class Spherical { * @param path {Array | BaseArrayClass} * @return {number} */ - computeLength(path: Array | BaseArrayClass): number { + static computeLength(path: Array | BaseArrayClass): number { return GoogleMaps.getPlugin().geometry.spherical.computeLength(path); } @@ -1343,7 +1790,7 @@ export class Spherical { * @param path {Array | BaseArrayClass}. * @return {number} */ - computeArea(path: Array | BaseArrayClass): number { + static computeArea(path: Array | BaseArrayClass): number { return GoogleMaps.getPlugin().geometry.spherical.computeArea(path); } @@ -1352,7 +1799,7 @@ export class Spherical { * @param path {Array | BaseArrayClass}. * @return {number} */ - computeSignedArea(path: Array | BaseArrayClass): number { + static computeSignedArea(path: Array | BaseArrayClass): number { return GoogleMaps.getPlugin().geometry.spherical.computeSignedArea(path); } @@ -1362,7 +1809,7 @@ export class Spherical { * @param to {ILatLng} * @return {number} */ - computeHeading(from: ILatLng, to: ILatLng): number { + static computeHeading(from: ILatLng, to: ILatLng): number { return GoogleMaps.getPlugin().geometry.spherical.computeHeading(from, to); } @@ -1373,7 +1820,7 @@ export class Spherical { * @param fraction {number} A fraction of the distance to travel from 0.0 to 1.0 . * @return {LatLng} */ - interpolate(from: ILatLng, to: ILatLng, fraction: number): LatLng { + static interpolate(from: ILatLng, to: ILatLng, fraction: number): LatLng { return GoogleMaps.getPlugin().geometry.spherical.interpolate(from, to, fraction); } }