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)
This commit is contained in:
Masashi Katsumata 2017-11-08 05:12:07 -08:00 committed by Ibby Hadeed
parent 1fa7c91105
commit 196be026ea

View File

@ -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<T> {
/**
* The center location of the camera view.
*
* [usage 1]
*
* let cameraPos: CameraPosition<ILatLng> = {
* target: {lat: ..., lng: ...},
* zoom: 10
* }
*
* [usage 2] The zoom property is ignored when you specify multiple position
*
* let cameraPos: CameraPosition<ILatLng[]> = {
* target: [
* {lat: ..., lng: ...},
* {lat: ..., lng: ...},
* {lat: ..., lng: ...}
* ]
* }
*/
target?: T;
/**
@ -196,18 +232,91 @@ export interface CameraPosition<T> {
}
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<ILatLng>;
bounds: Array<ILatLng>;
/**
* 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<ILatLng>;
/**
* Pass ILatLng[] to specify the vertixes.
* You need to contain two points at least.
*/
points: Array<ILatLng>;
/**
* 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<Array<ILatLng>>;
/**
* 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<ILatLng>;
/**
* Pass ILatLng[] to specify the vertixes.
* You need to contain two points at least.
*/
points: Array<ILatLng>;
/**
* 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<any>}
*/
getLicenseInfo(): Promise<any> {
static getLicenseInfo(): Promise<any> {
return new Promise<any>((resolve) => {
GoogleMaps.getPlugin().environment.getLicenseInfo((text: string) => resolve(text));
});
}
/**
* @deprecation
* @hidden
*/
getLicenseInfo(): Promise<any> {
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<GeocoderResult[] | BaseArrayClass<GeocoderResult>> {
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<GeocoderResult[] | BaseArrayClass<GeocoderResult>>}
*/
geocode(request: GeocoderRequest): Promise<GeocoderResult[] | BaseArrayClass<GeocoderResult>> {
static geocode(request: GeocoderRequest): Promise<GeocoderResult[] | BaseArrayClass<GeocoderResult>> {
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<ILatLng> | BaseArrayClass<ILatLng>): 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<ILatLng> | BaseArrayClass<ILatLng>} a sequence of LatLngs
* @return {string}
*/
@Cordova({ sync: true })
encodePath(path: Array<ILatLng> | BaseArrayClass<ILatLng>): string { return; }
static encodePath(path: Array<ILatLng> | BaseArrayClass<ILatLng>): 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<ILatLng> | BaseArrayClass<ILatLng>): number {
console.error('GoogleMaps', '[deprecated] This method is static. Please use Spherical.computeLength()');
return Spherical.computeLength(path);
}
/**
* @deprecation
* @hidden
*/
computeArea(path: Array<ILatLng> | BaseArrayClass<ILatLng>): number {
console.error('GoogleMaps', '[deprecated] This method is static. Please use Spherical.computeArea()');
return Spherical.computeArea(path);
}
/**
* @deprecation
* @hidden
*/
computeSignedArea(path: Array<ILatLng> | BaseArrayClass<ILatLng>): 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<ILatLng> | BaseArrayClass<ILatLng>}
* @return {number}
*/
computeLength(path: Array<ILatLng> | BaseArrayClass<ILatLng>): number {
static computeLength(path: Array<ILatLng> | BaseArrayClass<ILatLng>): number {
return GoogleMaps.getPlugin().geometry.spherical.computeLength(path);
}
@ -1343,7 +1790,7 @@ export class Spherical {
* @param path {Array<ILatLng> | BaseArrayClass<ILatLng>}.
* @return {number}
*/
computeArea(path: Array<ILatLng> | BaseArrayClass<ILatLng>): number {
static computeArea(path: Array<ILatLng> | BaseArrayClass<ILatLng>): number {
return GoogleMaps.getPlugin().geometry.spherical.computeArea(path);
}
@ -1352,7 +1799,7 @@ export class Spherical {
* @param path {Array<ILatLng> | BaseArrayClass<ILatLng>}.
* @return {number}
*/
computeSignedArea(path: Array<ILatLng> | BaseArrayClass<ILatLng>): number {
static computeSignedArea(path: Array<ILatLng> | BaseArrayClass<ILatLng>): 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);
}
}