diff options
| -rw-r--r-- | src/client/views/nodes/MapBox/MapBox.tsx | 180 |
1 files changed, 81 insertions, 99 deletions
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx index ac26fbe08..1892a5b61 100644 --- a/src/client/views/nodes/MapBox/MapBox.tsx +++ b/src/client/views/nodes/MapBox/MapBox.tsx @@ -624,29 +624,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps infobox:any; @action createPushpin = (latitude:number, longitude:number) =>{ - var pin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(latitude, longitude), { - title: this.bingSearchBarContents, - subTitle: 'subtitle here', - text: '1' - }); - - //Create an infobox at the pin - this.infobox = new this.MicrosoftMaps.Infobox(new this.MicrosoftMaps.Location(latitude, longitude), { - visible: false - }); - - //Assign the infobox to a map instance. - this.infobox.setMap(this._bingMap.current); - //Store some metadata with the pushpin. - pin.metadata = { - title: this.bingSearchBarContents, - description: 'Pin description' - }; - //Add a click event handler to the pushpin. - this.MicrosoftMaps.Events.addHandler(pin, 'click', this.pushpinClicked); - //Add pushpin to the map. - this._bingMap.current.entities.push(pin); - // Stores the pushpin as a MapMarkerDocument const mapMarker = Docs.Create.MapMarkerDocument(NumCast(latitude), NumCast(longitude), false, [], {}); this.addDocument(mapMarker, this.annotationKey); @@ -666,6 +643,13 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps } } + //PushpinClicked using MapBoxInfoWindow + private pushpinClicked2 = (e: { target: { metadata: { title: any; description: any; }; getLocation: () => any; }; }, pin: Doc) => { + // // set which place was clicked + // this.selectedPlace = place; + pin.infoWindowOpen = true; + } + /** * Returns a list of MapMarkerDocument */ @@ -682,81 +666,73 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps bingSearch = async() =>{ //TODO: searching more formally // clear all pins - // this._bingMap.current.entities.clear(); + this._bingMap.current.entities.clear(); + //TODO: clear all infoboxes const location = await this.bingGeocode(this._bingMap, this.bingSearchBarContents); this.dataDoc.latitude = location.latitude; this.dataDoc.longitude = location.longitude; this.updateView(); - // Each marker be its own document -- pin and info - - this.createPushpin(location.latitude, location.longitude); - - // // Adds all pins to the map - // for (let i = 0; i < temp.length; i++) { - // this._bingMap.current.entities.push(temp[i]); - // } - } - // const mapMarker = Docs.Create.MapMarkerDocument(NumCast(location.latitude), NumCast(location.longitude), false, [], {}); - // this.addDocument(mapMarker, this.annotationKey); - - - // 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); - // } - // ); - // _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); + // // Creates a temporary pin but does not add it to the dataDoc, UNCOMMENT LATER + // var pin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(location.latitude, location.longitude), { + // title: this.bingSearchBarContents, + // subTitle: 'subtitle here', + // text: '1', + // color: 'blue' + // }); + // this._bingMap.current.entities.push(pin); - // // // this._bingMap.current. + this.createPushpin(location.latitude, location.longitude); // Creates an actual pushpin + this.addAllPins(); // Adds all pushpins in the datadoc onto the map - // // 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); + console.log(this.allMapPushpins + .filter(marker => marker.infoWindowOpen) + .length) + } - // // // 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 - // // } - // // }); - // }; + /** + * Adds all pushpins in dataDoc onto the map + */ + @action + addAllPins = () =>{ + this.allMapPushpins.map(pin => this.createInfobox(pin)); + } + @action + createInfobox = (pin:any) =>{ + var pushPin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(pin.lat, pin.lng), { + title: this.bingSearchBarContents, + subTitle: 'subtitle here', + text: '1' + }); + this._bingMap.current.entities.push(pushPin); + //Create an infobox at the pin + this.infobox = new this.MicrosoftMaps.Infobox(new this.MicrosoftMaps.Location(pin.lat, pin.lng), { + visible: false + }); + //Assign the infobox to a map instance. + this.infobox.setMap(this._bingMap.current); + //Store some metadata with the pushpin. + pushPin.metadata = { + title: pushPin.title, + description: 'Pin description' + }; + //Add a click event handler to the pushpin. + // For bing maps infobox + // this.MicrosoftMaps.Events.addHandler(pushPin, 'click', this.pushpinClicked); + + // For our infowindow + this.MicrosoftMaps.Events.addHandler(pushPin, 'click', (e:any) => this.pushpinClicked2(e, pushPin)); + + } + + /** @@ -818,22 +794,28 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps <input type="button" value="Search" onClick={this.bingSearch}/>} - {!MapBox.UseBing ? null : <BingMapsReact onMapReady={this.bingMapReady} bingMapsKey={bingApiKey} height="100%" mapOptions={this.bingMapOptions} width="100%" viewOptions={this.bingViewOptions} />} - {this.allMapMarkers - .filter(marker => marker.infoWindowOpen) - .map(marker => ( - <MapBoxInfoWindow - key={marker[Id]} - {...OmitKeys(this.props, ['NativeWidth', 'NativeHeight', 'setContentView']).omit} - place={marker} - markerMap={this.markerMap} - PanelWidth={this.infoWidth} - PanelHeight={this.infoHeight} - moveDocument={this.moveDocument} - isAnyChildContentActive={this.isAnyChildContentActive} - whenChildContentsActiveChanged={this.whenChildContentsActiveChanged} - /> - ))} + {!MapBox.UseBing ? null : + <BingMapsReact onMapReady={this.bingMapReady} bingMapsKey={bingApiKey} height="100%" mapOptions={this.bingMapOptions} width="100%" viewOptions={this.bingViewOptions} > + {this.allMapPushpins + .filter(marker => marker.infoWindowOpen) + .map(marker => ( + console.log('this is a marker window') + // <MapBoxInfoWindow + // key={marker[Id]} + // {...OmitKeys(this.props, ['NativeWidth', 'NativeHeight', 'setContentView']).omit} + // place={marker} + // markerMap={this.markerMap} + // PanelWidth={this.infoWidth} + // PanelHeight={this.infoHeight} + // moveDocument={this.moveDocument} + // isAnyChildContentActive={this.isAnyChildContentActive} + // whenChildContentsActiveChanged={this.whenChildContentsActiveChanged} + // /> + ))} + </BingMapsReact> + + } + <div style={{ display: MapBox.UseBing ? 'none' : undefined }}> |