Fixed make map error

1 files changed, 185 insertions, 102 deletions

diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index d35a5ef2e..b01426bcd 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -201,6 +201,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         markerIcon.style.position = 'absolute';
         markerIcon.innerHTML = 'Add';
         controlUI.appendChild(markerIcon);
+        
 
         // Setup the click event listeners
         controlUI.addEventListener('click', () => {
@@ -219,6 +220,27 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         controlDiv.appendChild(controlUI);
         return controlDiv;
     };
+    /**
+     * Load and render all map markers
+     * @param marker
+     * @param place
+     */
+    @action
+    private markerLoadHandler = (marker: google.maps.Marker, place: Doc) => {
+        place[Id] ? (this.markerMap[place[Id]] = marker) : null;
+    };
+
+    /**
+     * on clicking the map marker, set the selected place to the marker document & set infowindowopen to be true
+     * @param e
+     * @param place
+     */
+    @action
+    private markerClickHandler = (e: google.maps.MapMouseEvent, place: Doc) => {
+        // set which place was clicked
+        this.selectedPlace = place;
+        place.infoWindowOpen = true;
+    };
 
     /**
      * Place the marker on google maps & store the empty marker as a MapMarker Document in allMarkers list
@@ -299,27 +321,52 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     };
 
     /**
-     * Load and render all map markers
-     * @param marker
-     * @param place
+     * function that reads the place inputed from searchbox, then zoom in on the location that's been autocompleted;
+     * add a customized temporary marker on the map
      */
     @action
-    private markerLoadHandler = (marker: google.maps.Marker, place: Doc) => {
-        place[Id] ? (this.markerMap[place[Id]] = marker) : null;
-    };
+    private handlePlaceChanged = () => {
+        const place = this.searchBox.getPlace();
 
-    /**
-     * on clicking the map marker, set the selected place to the marker document & set infowindowopen to be true
-     * @param e
-     * @param place
-     */
-    @action
-    private markerClickHandler = (e: google.maps.MapMouseEvent, place: Doc) => {
-        // set which place was clicked
-        this.selectedPlace = place;
-        place.infoWindowOpen = true;
+        if (!place.geometry || !place.geometry.location) {
+            // user entered the name of a place that wasn't suggested & pressed the enter key, or place details request failed
+            window.alert("No details available for input: '" + place.name + "'");
+            return;
+        }
+
+        // zoom in on the location of the search result
+        if (place.geometry.viewport) {
+            this._map.fitBounds(place.geometry.viewport);
+        } else {
+            this._map.setCenter(place.geometry.location);
+            this._map.setZoom(17);
+        }
+
+        // customize icon => customized icon for the nature of the location selected
+        const icon = {
+            url: place.icon as string,
+            size: new google.maps.Size(71, 71),
+            origin: new google.maps.Point(0, 0),
+            anchor: new google.maps.Point(17, 34),
+            scaledSize: new google.maps.Size(25, 25),
+        };
+
+        // put temporary cutomized marker on searched location
+        this.searchMarkers.forEach(marker => {
+            marker.setMap(null);
+        });
+        this.searchMarkers = [];
+        this.searchMarkers.push(
+            new window.google.maps.Marker({
+                map: this._map,
+                icon,
+                title: place.name,
+                position: place.geometry.location,
+            })
+        );
     };
 
+
     /**
      * Called when dragging documents into map sidebar or directly into infowindow; to create a map marker, ref to MapMarkerDocument in Documents.ts
      * @param doc
@@ -398,52 +445,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     }
 
     /**
-     * function that reads the place inputed from searchbox, then zoom in on the location that's been autocompleted;
-     * add a customized temporary marker on the map
-     */
-    @action
-    private handlePlaceChanged = () => {
-        const place = this.searchBox.getPlace();
-
-        if (!place.geometry || !place.geometry.location) {
-            // user entered the name of a place that wasn't suggested & pressed the enter key, or place details request failed
-            window.alert("No details available for input: '" + place.name + "'");
-            return;
-        }
-
-        // zoom in on the location of the search result
-        if (place.geometry.viewport) {
-            this._map.fitBounds(place.geometry.viewport);
-        } else {
-            this._map.setCenter(place.geometry.location);
-            this._map.setZoom(17);
-        }
-
-        // customize icon => customized icon for the nature of the location selected
-        const icon = {
-            url: place.icon as string,
-            size: new google.maps.Size(71, 71),
-            origin: new google.maps.Point(0, 0),
-            anchor: new google.maps.Point(17, 34),
-            scaledSize: new google.maps.Size(25, 25),
-        };
-
-        // put temporary cutomized marker on searched location
-        this.searchMarkers.forEach(marker => {
-            marker.setMap(null);
-        });
-        this.searchMarkers = [];
-        this.searchMarkers.push(
-            new window.google.maps.Marker({
-                map: this._map,
-                icon,
-                title: place.name,
-                position: place.geometry.location,
-            })
-        );
-    };
-
-    /**
      * Handles toggle of sidebar on click the little comment button
      */
     @computed get sidebarHandle() {
@@ -595,71 +596,153 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
 
 
 
+    /**
+     *
+     * 
+     *  ERIC'S BING MAP CODE BELOW
+     * 
+     * 
+     * 
+    **/
+
+    @observable
+    _bingLatitude:number | undefined;
+
+    @observable
+    _bingLongitude:number | undefined;
+
     bingSearchBarContents: any = "Boston, MA"; // For Bing Maps: The contents of the Bing search bar (string)
 
+    geoDataRequestOptions = {
+        entityType: 'PopulatedPlace'
+    };
     /*
      * For Bing Maps
      * Called by search button's onClick 
      * Finds the geocode of the searched contents and sets location to that location
     **/
    @action
-     bingSearch = async() =>{
-
-        // clear all pins
-        this._bingMap.current.entities.clear();
-
-        const location = await this.bingGeocode(this._bingMap, this.bingSearchBarContents);
-
-        // this.rootDoc.latitude =location.latitude;
-        // this.rootDoc.longitude =location.longitude; // TODO: How to update the rootDoc with the correct info?
-        //DocComponents file is where rootDoc is
-
-        // call a helper method that updates the this._bingMap.current.setView, 
-        // replaces this method call below
-        this._bingMap.current.setView({
-           center: new this.MicrosoftMaps.Location(location.latitude, location.longitude),
-        //    zoom: ,
-        });
-
-        //Create custom Pushpin
-        var pin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(location.latitude, location.longitude), {
-            title: this.bingSearchBarContents,
-            subTitle: 'subtitle here',
-            text: '1'
-        });
-
-        //Add the pushpin to the map
-        this._bingMap.current.entities.push(pin);
-        // const mapMarker = Docs.Create.MapMarkerDocument(this._bingMap.location.latitude, this._bingMap.location.latitude, false, [], {});
-        //     this.addDocument(mapMarker, this.annotationKey); // tells mapbox to add this marker to set of annotations on doc
-    }
+   bingSearch = async() =>{ //TODO: PlaceResult, searching more formally
+
+      // clear all pins
+      // this._bingMap.current.entities.clear();
+
+      const location = await this.bingGeocode(this._bingMap, this.bingSearchBarContents);
+
+      this.rootDoc.latitude = location.latitude;
+      this.rootDoc.longitude = location.longitude;
+
+      // this.rootDoc.latitude =location.latitude;
+      // this.rootDoc.longitude =location.longitude; // TODO: How to update the rootDoc with the correct info?
+      //DocComponents file is where rootDoc is
+
+      // call a helper method that updates the this._bingMap.current.setView, 
+      // replaces this method call below
+      this._bingMap.current.setView({
+         center: new this.MicrosoftMaps.Location(location.latitude, location.longitude),
+          // zoom: location
+      });
+      // this.MicrosoftMaps.SpatialDataService.GeoDataAPIManager.getBoundary(
+      //     this._bingMap.current.getCenter(),
+      //     this.geoDataRequestOptions,
+      //     this._bingMap.current,
+      //     function (data) {
+      //         if (data.results && data.results.length > 0) {
+      //             map.entities.push(data.results[0].Polygons);
+      //         }
+      //     },
+      //     null,
+      //     function errCallback(networkStatus, statusMessage) {
+      //         console.log(networkStatus);
+      //         console.log(statusMessage);
+      //     }
+      // );
+
+      //Create custom Pushpin
+      var pin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(location.latitude, location.longitude), {
+          title: this.bingSearchBarContents,
+          subTitle: 'subtitle here',
+          text: '1'
+      });
+
+      //Add the pushpin to the map
+      this._bingMap.current.entities.push(pin);
+      // const mapMarker = Docs.Create.MapMarkerDocument(this._bingMap.location.latitude, this._bingMap.location.latitude, false, [], {});
+      //     this.addDocument(mapMarker, this.annotationKey); // tells mapbox to add this marker to set of annotations on doc
+  }
+
+  // _loadPending = true;
+  // /**
+  //  * store a reference to google map instance
+  //  * setup the drawing manager on the top right corner of map
+  //  * fit map bounds to contain all markers
+  //  * 
+  //  */
+  // @action
+  // private loadHandler = () => {
+
+  //     // this._loadPending = true;
+
+  //     // // for making GoogleMap markers
+  //     // // const centerControlDiv = this.CenterControl();
+  //     // // map.controls[google.maps.ControlPosition.TOP_RIGHT].push(centerControlDiv);
+      
+  //     // // this._bingMap.current.
+
+  //     // map.setZoom(NumCast(this.dataDoc.mapZoom, 2.5));
+  //     // map.setCenter(new google.maps.LatLng(NumCast(this.dataDoc.mapLat), NumCast(this.dataDoc.mapLng)));
+  //     // setTimeout(() => {
+  //     //     if (this._loadPending && this._map.getBounds()) {
+  //     //         this._loadPending = false;
+  //     //         this.layoutDoc.fitContentsToBox && this.fitBounds(this._map);
+  //     //     }
+  //     // }, 250);
+
+  //     // // listener to addmarker event, creates pushpin onClick
+  //     // this._bingMap.addListener('click', (e: MouseEvent) => {
+  //     //     if (this.toggleAddMarker === true) {
+  //     //         this.placeMarker((e as any).latLng, map); //TODO: Implement placeMarker
+  //     //     }
+  //     // });
+  // };
 
 
     // /**
     //  * For Bing Maps
     //  * Place the marker on bing maps & store the empty marker as a MapMarker Document in allMarkers list
-    //  * @param position - the LatLng position where the marker is placed
-    //  * @param map
+    //  * @param location - this.MicrosoftMaps.Location
+    //  * @param map - this._bingMap
     //  */
     // @action
-    // private placeMarker = (position: google.maps.LatLng, map: google.maps.Map) => {
-    //     const marker = new google.maps.Marker({
-    //         position: position,
-    //         map: map,
+    // private placeMarker = (location: any) => {
+    //     const pin = new this.MicrosoftMaps.Pushpin(location, {
+    //         title: this.bingSearchBarContents,
+    //         subTitle: 'subtitle here',
+    //         text: '1'
     //     });
-    //     map.panTo(position);
-    //     const mapMarker = Docs.Create.MapMarkerDocument(NumCast(position.lat()), NumCast(position.lng()), false, [], {});
-    //     this.addDocument(mapMarker, this.annotationKey);
-    // };
 
+    //     this._bingMap.current.panTo(location);
+    //     this._bingMap.current.entities.push(pin);
 
+    //     // const mapMarker = Docs.Create.MapMarkerDocument(NumCast(location.latitude), NumCast(location.longitude), false, [], {});
+    //     // this.addDocument(mapMarker, this.annotationKey);
+    // };
 
 
 
+
+    /** 
+     * View options for bing maps
+    */
     bingViewOptions = {
         center: { latitude: defaultCenter.lat, longitude: defaultCenter.lng },// TODO: latitude: this.rootDoc.latitude, longitude: this.rootDoc.longitude
         mapTypeId: 'grayscale',
     };
+
+    /**
+     * Map options
+     * TODO: CHANGE TO BE MORE USER-FRIENDLY
+     */
     bingMapOptions = {
         navigationBarMode: 'square',
     };