From 31185fe81aaf856bf6e60bb9d550a627fc2b14f7 Mon Sep 17 00:00:00 2001 From: Olivier Date: Tue, 25 Apr 2017 16:52:56 +0200 Subject: [PATCH] Add generics support to MVCArray. (#15432) Tests cleaning. --- types/googlemaps/googlemaps-tests.ts | 219 +++++++++++++++------------ types/googlemaps/index.d.ts | 81 +++++----- 2 files changed, 169 insertions(+), 131 deletions(-) diff --git a/types/googlemaps/googlemaps-tests.ts b/types/googlemaps/googlemaps-tests.ts index 7c5e9d1ed4..f57a4e80e0 100644 --- a/types/googlemaps/googlemaps-tests.ts +++ b/types/googlemaps/googlemaps-tests.ts @@ -1,7 +1,20 @@ // Test file for Google Maps JavaScript API Definition file +/***** Create map *****/ +let map = new google.maps.Map( + document.getElementById('map'), { + backgroundColor: "#fff", + center: { lat: -25.363, lng: 131.044 }, + clickableIcons: true, + draggable: true, + fullscreenControl: true, + fullscreenControlOptions: { + position: google.maps.ControlPosition.RIGHT_TOP + }, + scrollwheel: true, + zoom: 4 +}); -var map = new google.maps.Map(document.querySelector("☺")); /***** Data *****/ @@ -28,7 +41,7 @@ data.forEach((feature: google.maps.Data.Feature) => { console.log(feature.getId()); }); -var map: google.maps.Map = data.getMap(); +map = data.getMap(); data.setMap(map); var style = data.getStyle(); @@ -39,7 +52,7 @@ data.setStyle({ cursor: "pointer", fillColor: "#79B55B", fillOpacity: 1, - icon: {}, + icon: { url: "//maps.google.com/mapfiles/ms/icons/blue.png" }, shape: { coords: [1, 2, 3], type: "circle" }, strokeColor: "#79B55B", strokeOpacity: 1, @@ -50,11 +63,20 @@ data.setStyle({ }); data.overrideStyle(feature, { visible: true }); - data.revertStyle(feature); -data.addGeoJson({}); -data.addGeoJson({}, { idPropertyName: "Test feature" }); +data.addGeoJson({ "type": "Feature", "geometry": { "type": "Point", "coordinates": [59.327090, 18.103701] } }); +data.addGeoJson({ + "type": "FeatureCollection", + "features": [{ + "type": "Feature", + "properties": { "dymmy": "7", }, + "geometry": { + "type": "Polygon", + "coordinates": [[[123.61, -22.14], [122.38, -21.73], [121.06, -21.69], [119.66, -22.22], [119.00, -23.40], [123.61, -22.14]]] + } + }], +}, { idPropertyName: "Test feature" }); data.loadGeoJson("http://magicGeoJsonSource.com"); @@ -141,115 +163,67 @@ var mapTypeStyle: google.maps.MapTypeStyle ={ stylers: [], }; + + +/***** MARKERS *****/ // https://developers.google.com/maps/documentation/javascript/markers -function initMap1() { - var myLatLng = {lat: -25.363, lng: 131.044}; - - var map = new google.maps.Map(document.getElementById('map'), { - zoom: 4, - center: myLatLng - }); - - var marker = new google.maps.Marker({ - position: myLatLng, - map: map, - title: 'Hello World!' - }); -} - -var myLatlng = new google.maps.LatLng(-25.363882,131.044922); -var mapOptions = { - zoom: 4, - center: myLatlng -} -var map = new google.maps.Map(document.getElementById("map"), mapOptions); - -var marker = new google.maps.Marker({ - position: myLatlng, - title:"Hello World!" +map.setCenter({ lat: 59.332457, lng: 18.064790 }); +// Marker with map and LatLngLiteral position +let markerSimple = new google.maps.Marker({ + label: "A", + position: { lat: 59.33555, lng: 18.029851 }, + map: map, + title: 'Hello World!' }); -// To add the marker to the map, call setMap(); -marker.setMap(map); - -marker.setMap(null); +// Marker without map and LatLng position +let markerRemovable = new google.maps.Marker({ + position: new google.maps.LatLng(59.337647,18.089950), + title:"Hello World!" +}); +markerRemovable.setMap(map); // Add marker +markerRemovable.setMap(null); // Remove marker, should accept null +// Marker with animation // The following example creates a marker in Stockholm, Sweden using a DROP // animation. Clicking on the marker will toggle the animation between a BOUNCE // animation and no animation. - -var marker: google.maps.Marker; - -function initMap2() { - var map = new google.maps.Map(document.getElementById('map'), { - zoom: 13, - center: {lat: 59.325, lng: 18.070} - }); - - marker = new google.maps.Marker({ - map: map, - draggable: true, - animation: google.maps.Animation.DROP, - position: {lat: 59.327, lng: 18.067} - }); - marker.addListener('click', toggleBounce); -} +let markerBounce = new google.maps.Marker({ + map: map, + draggable: true, + animation: google.maps.Animation.DROP, + position: { lat: 59.327, lng: 18.067 } +}); +markerBounce.addListener("click", toggleBounce); function toggleBounce() { - if (marker.getAnimation() !== null) { - marker.setAnimation(null); + if (markerBounce.getAnimation() !== null) { + markerBounce.setAnimation(null); } else { - marker.setAnimation(google.maps.Animation.BOUNCE); + markerBounce.setAnimation(google.maps.Animation.BOUNCE); } } -// In the following example, markers appear when the user clicks on the map. -// Each marker is labeled with a single alphabetical character. -var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; -var labelIndex = 0; -function initialize() { - var bangalore = { lat: 12.97, lng: 77.59 }; - var map = new google.maps.Map(document.getElementById('map'), { - zoom: 12, - center: bangalore - }); - - // This event listener calls addMarker() when the map is clicked. - google.maps.event.addListener(map, 'click', function(event: any) { - addMarker(event.latLng, map); - }); - - // Add a marker at the center of the map. - addMarker(bangalore, map); -} - -// Adds a marker to the map. -function addMarker(location: google.maps.LatLngLiteral, map: google.maps.Map) { - // Add the marker at the clicked location, and add the next-available label - // from the array of alphabetical characters. - var marker = new google.maps.Marker({ - position: location, - label: labels[labelIndex++ % labels.length], - map: map - }); -} - -google.maps.event.addDomListener(window, 'load', initialize); /***** OverlayView *****/ // https://developers.google.com/maps/documentation/javascript/customoverlays var div = document.createElement('div'); -var overlay = new google.maps.OverlayView(); -var panes = overlay.getPanes(); -panes.floatPane.appendChild(div); -panes.floatShadow.appendChild(div); -panes.mapPane.appendChild(div); -panes.markerLayer.appendChild(div); -panes.overlayImage.appendChild(div); -panes.overlayLayer.appendChild(div); -panes.overlayMouseTarget.appendChild(div); -panes.overlayShadow.appendChild(div); +class Overlay extends google.maps.OverlayView { + public draw(): void { + var panes = this.getPanes(); + panes.floatPane.appendChild(div); + panes.floatShadow.appendChild(div); + panes.mapPane.appendChild(div); + panes.markerLayer.appendChild(div); + panes.overlayImage.appendChild(div); + panes.overlayLayer.appendChild(div); + panes.overlayMouseTarget.appendChild(div); + panes.overlayShadow.appendChild(div); + }; +} +var overlay = new Overlay(); +overlay.setMap(map); /***** Rectangles *****/ // https://developers.google.com/maps/documentation/javascript/examples/rectangle-simple @@ -291,6 +265,7 @@ var circle2 = new google.maps.Circle({ strokeWeight: 1 }); + /***** StreetViewPanorama *****/ var panoramaOptions: google.maps.StreetViewPanoramaOptions = { zoom: 0, @@ -304,3 +279,53 @@ var panoramaOptions: google.maps.StreetViewPanoramaOptions = { motionTrackingControl: true }; var panorama = new google.maps.StreetViewPanorama(document.createElement("div"), panoramaOptions); + + +/***** MVCArray *****/ + +// MVCArray should be generic +let mvcArrayStr = new google.maps.MVCArray(["a", "b", "c"]); +mvcArrayStr.forEach((elem: string, i: number): void => { elem.toUpperCase(); }); +mvcArrayStr.getArray()[0].toUpperCase(); +mvcArrayStr.getAt(0).toUpperCase(); +mvcArrayStr.insertAt(2, "x"); +mvcArrayStr.pop().toUpperCase(); +mvcArrayStr.push("y"); +mvcArrayStr.removeAt(0).toUpperCase(); +mvcArrayStr.setAt(0, "z"); + +/***** HeatMaps *****/ + +let heatmap = new google.maps.visualization.HeatmapLayer({ + data: [new google.maps.LatLng(37.782551, -122.445368), new google.maps.LatLng(37.782745, -122.444586), new google.maps.LatLng(37.782842, -122.443688)], + map: map +}); + +// setData Should Accept MVCArray +heatmap.setData(new google.maps.MVCArray( + [new google.maps.LatLng(37.782551, -122.445368), new google.maps.LatLng(37.782745, -122.444586), new google.maps.LatLng(37.782842, -122.443688)] +)); + +// getData Should return MVCArray +let heatmapDataMvcLL = heatmap.getData(); +console.log(heatmapDataMvcLL.getAt(0).lat()); // should not throw + +// setData Should Accept MVCArray +heatmap.setData(new google.maps.MVCArray([ + { weight: 1, location: new google.maps.LatLng(37.782551, -122.445368) }, + { weight: 2, location: new google.maps.LatLng(37.782745, -122.444586) }, + { weight: 3, location: new google.maps.LatLng(37.782842, -122.443688) } +])); + +// getData Should return MVCArray +let heatmapDataWL = heatmap.getData(); +console.log(heatmapDataWL.getAt(0).weight); // should not throw + +// setData Should Accept LatLng[] +heatmap.setData([new google.maps.LatLng(37.782551, -122.445368), new google.maps.LatLng(37.782745, -122.444586), new google.maps.LatLng(37.782842, -122.443688)]); + +// setData Should Accept WeightedLocation[] +heatmap.setData([ + { weight: 1, location: new google.maps.LatLng(37.782551, -122.445368) }, + { weight: 2, location: new google.maps.LatLng(37.782745, -122.444586) } +]); \ No newline at end of file diff --git a/types/googlemaps/index.d.ts b/types/googlemaps/index.d.ts index 8816db47e3..1ca49880c9 100644 --- a/types/googlemaps/index.d.ts +++ b/types/googlemaps/index.d.ts @@ -51,10 +51,10 @@ declare namespace google.maps { setStreetView(panorama: StreetViewPanorama): void; setTilt(tilt: number): void; setZoom(zoom: number): void; - controls: MVCArray[]; //Array> + controls: MVCArray[]; data: Data; mapTypes: MapTypeRegistry; - overlayMapTypes: MVCArray; // MVCArray + overlayMapTypes: MVCArray; } export interface MapOptions { @@ -831,13 +831,13 @@ declare namespace google.maps { getDraggable(): boolean; getEditable(): boolean; getMap(): Map; - getPath(): MVCArray; // MVCArray + getPath(): MVCArray; getVisible(): boolean; setDraggable(draggable: boolean): void; setEditable(editable: boolean): void; setMap(map: Map | null): void; setOptions(options: PolylineOptions): void; - setPath(path: MVCArray|LatLng[]|LatLngLiteral[]): void; // MVCArray|Array + setPath(path: MVCArray|LatLng[]|LatLngLiteral[]): void; setVisible(visible: boolean): void; } @@ -871,7 +871,7 @@ declare namespace google.maps { * Note that if you pass a simple array, it will be converted to an MVCArray Inserting or removing LatLngs * in the MVCArray will automatically update the polyline on the map. */ - path?: MVCArray|LatLng[]|LatLngLiteral[]; // MVCArray|Array + path?: MVCArray|LatLng[]|LatLngLiteral[]; /** The stroke color. All CSS3 colors are supported except for extended named colors. */ strokeColor?: string; /** The stroke opacity between 0.0 and 1.0. */ @@ -896,20 +896,17 @@ declare namespace google.maps { getDraggable(): boolean; getEditable(): boolean; getMap(): Map; - getPath(): MVCArray; // MVCArray - getPaths(): MVCArray; // MVCArray> + /** Retrieves the first path. */ + getPath(): MVCArray; + /** Retrieves the paths for this polygon. */ + getPaths(): MVCArray>; getVisible(): boolean; setDraggable(draggable: boolean): void; setEditable(editable: boolean): void; setMap(map: Map | null): void; setOptions(options: PolygonOptions): void; - setPath(path: MVCArray|LatLng[]|LatLngLiteral[]): void; - setPaths(paths: MVCArray): void; - setPaths(paths: MVCArray[]): void; - setPaths(path: LatLng[]): void; - setPaths(path: LatLng[][]): void; - setPaths(path: LatLngLiteral[]): void; - setPaths(path: LatLngLiteral[][]): void; + setPath(path: MVCArray|LatLng[]|LatLngLiteral[]): void; + setPaths(paths: MVCArray> | MVCArray | LatLng[][] | LatLngLiteral[][] | LatLng[] | LatLngLiteral[]): void; setVisible(visible: boolean): void; } @@ -950,7 +947,7 @@ declare namespace google.maps { * converted into MVCArrays. Inserting or removing LatLngs from the MVCArray * will automatically update the polygon on the map. */ - paths?: any[]; // MVCArray>|MVCArray|Array>|Array + paths?: MVCArray> | MVCArray | LatLng[][] | LatLngLiteral[][] | LatLng[] | LatLngLiteral[]; /** * The stroke color. * All CSS3 colors are supported except for extended named colors. @@ -1930,7 +1927,7 @@ declare namespace google.maps { /***** Street View *****/ export class StreetViewPanorama { constructor(container: Element, opts?: StreetViewPanoramaOptions); - controls: MVCArray[]; // Array> + controls: MVCArray[]; getLinks(): StreetViewLink[]; getLocation(): StreetViewLocation; getMotionTracking(): boolean; @@ -2282,25 +2279,43 @@ declare namespace google.maps { unbindAll(): void; } - export class MVCArray extends MVCObject { - constructor(array?: any[]); + /** This class extends MVCObject. */ + export class MVCArray extends MVCObject { + /** A mutable MVC Array. */ + constructor(array?: T[]); + /** Removes all elements from the array. */ clear(): void; - forEach(callback: (elem: any, i: number) => void): void; - getArray(): any[]; - getAt(i: number): any; + /** + * Iterate over each element, calling the provided callback. + * The callback is called for each element like: callback(element, index). + */ + forEach(callback: (elem: T, i: number) => void): void; + /** + * Returns a reference to the underlying Array. + * Warning: if the Array is mutated, no events will be fired by this object. + */ + getArray(): T[]; + /** Returns the element at the specified index. */ + getAt(i: number): T; + /** Returns the number of elements in this array. */ getLength(): number; - insertAt(i: number, elem: any): void; - pop(): any; - push(elem: any): number; - removeAt(i: number): any; - setAt(i: number, elem: any): void; + /** Inserts an element at the specified index. */ + insertAt(i: number, elem: T): void; + /** Removes the last element of the array and returns that element. */ + pop(): T; + /** Adds one element to the end of the array and returns the new length of the array. */ + push(elem: T): number; + /** Removes an element from the specified index. */ + removeAt(i: number): T; + /** Sets an element at the specified index. */ + setAt(i: number, elem: T): void; } /***** Geometry Library *****/ export module geometry { export class encoding { static decodePath(encodedPath: string): LatLng[]; - static encodePath(path: any[]): string; // LatLng[]|MVCArray + static encodePath(path: LatLng[] | MVCArray): string; } /** @@ -2314,7 +2329,7 @@ declare namespace google.maps { * The radius defaults to the Earth's radius in meters, * in which case the area is in square meters. */ - static computeArea(path: any[], radius?: number): number; // LatLng[]|MVCArray + static computeArea(path: LatLng[] | MVCArray, radius?: number): number; /** * Returns the distance, in meters, between two LatLngs. * You can optionally specify a custom radius. @@ -2329,7 +2344,7 @@ declare namespace google.maps { /** * Returns the length of the given path. */ - static computeLength(path: any[], radius?: number): number; // LatLng[]|MVCArray + static computeLength(path: LatLng[] | MVCArray, radius?: number): number; /** * Returns the LatLng resulting from moving a distance from an origin in the * specified heading (expressed in degrees clockwise from north). @@ -2347,7 +2362,7 @@ declare namespace google.maps { * The radius defaults to the Earth's radius in meters, in which case the area is in * square meters. */ - static computeSignedArea(loop: any[], radius?: number): number; // LatLng[]|MVCArray + static computeSignedArea(loop: LatLng[] | MVCArray, radius?: number): number; /** * Returns the LatLng which lies the given fraction of the way between the origin * LatLng and the destination LatLng. @@ -2793,11 +2808,9 @@ declare namespace google.maps { export class HeatmapLayer extends MVCObject { constructor(opts?: HeatmapLayerOptions); - getData(): MVCArray; + getData(): MVCArray; getMap(): Map; - setData(data: MVCArray): void; - setData(data: LatLng[]): void; - setData(data: WeightedLocation[]): void; + setData(data: MVCArray | LatLng[] | WeightedLocation[]): void; setMap(map: Map | null): void; }