diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/nodes/MapBox/MapBox.tsx | 83 | ||||
| -rw-r--r-- | src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx | 4 |
2 files changed, 64 insertions, 23 deletions
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx index ef45cdd1a..902aa2d13 100644 --- a/src/client/views/nodes/MapBox/MapBox.tsx +++ b/src/client/views/nodes/MapBox/MapBox.tsx @@ -239,7 +239,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps private markerClickHandler = (e: google.maps.MapMouseEvent, place: Doc) => { // set which place was clicked this.selectedPlace = place; - place.infoWindowOpen = true; + // place.infoWindowOpen = true; }; /** @@ -629,7 +629,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps const mapMarker = Docs.Create.MapMarkerDocument(NumCast(latitude), NumCast(longitude), false, [], {}); this.addDocument(mapMarker, this.annotationKey); // mapMarker.infoWindowOpen = true; - console.log("original:" + mapMarker) } @@ -646,13 +645,25 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps }); } } + onHover = (e: { target: { metadata: { title: any; description: any; }; getLocation: () => any; }; }) => { + //Make sure the infobox has metadata to display. + if (e.target.metadata) { + //Set the infobox options with the metadata of the pushpin. // HOW DO I GET THE CORRECT INFOBOX FOR THIS PIN? CAN I use this e? + this.infobox.setOptions({ + location: e.target.getLocation(), + title: e.target.metadata.title, + description: e.target.metadata.description, + visible: true + }); + } + } //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; - console.log("later:" + pin.infoWindowOpen) + // console.log("later:" + pin.infoWindowOpen) } /** @@ -661,7 +672,20 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps @computed get allMapPushpins() { return DocListCast(this.dataDoc[this.annotationKey]); } + /** + * Map OnClick create pushpin + */ + @action + mapOnClick=(e: { location: { latitude: any; longitude: any;}; })=>{ + if(this.placePinOn){ + this.createPushpin(e.location.latitude, e.location.longitude); + this.addAllPins(); + this.placePinOn = false; + } + } + + searched_pin:any; /* * For Bing Maps * Called by search button's onClick @@ -669,10 +693,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps **/ @action bingSearch = async() =>{ - - // clear all pins - this._bingMap.current.entities.clear(); - //TODO: clear all infoboxes + this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'click', this.mapOnClick); + this.addAllPins(); const location = await this.bingGeocode(this._bingMap, this.bingSearchBarContents); @@ -680,19 +702,19 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps this.dataDoc.longitude = location.longitude; this.updateView(); - - - // // 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); + // Creates a temporary pin but does not add it to the dataDoc + var temp = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(location.latitude, location.longitude), { + // title: this.bingSearchBarContents, + // subTitle: 'subtitle here', + // text: '1', + color: 'blue' + }); + if (temp!=this.searched_pin || this.searched_pin==null){ + this._bingMap.current.entities.push(this.searched_pin); + this.searched_pin = temp; + } + - this.createPushpin(location.latitude, location.longitude); // Creates an actual pushpin - this.addAllPins(); // Adds all pushpins in the datadoc onto the map console.log(this.allMapPushpins .filter(marker => marker.infoWindowOpen) @@ -706,15 +728,20 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps */ @action addAllPins = () =>{ + this._bingMap.current.entities.clear(); + //TODO: clear all infoboxes + if(this.searched_pin) + this._bingMap.current.entities.push(this.searched_pin); this.allMapPushpins.map(pin => this.createInfobox(pin)); + this.allMapPushpins.map(pin => this._bingMap.current.entities.push(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' + // title: this.bingSearchBarContents, + // subTitle: 'subtitle here', + // text: '1' }); this._bingMap.current.entities.push(pushPin); @@ -737,6 +764,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps // For our infowindow this.MicrosoftMaps.Events.addHandler(pushPin, 'click', (e:any) => this.pushpinClicked2(e, pushPin)); + this.MicrosoftMaps.Events.addHandler(pushPin, 'mouseover', (e:any) => this.onHover(e)); } @@ -846,6 +874,17 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps </BingMapsReact> } + {/* <MapBoxInfoWindow + key={Docs.Create.MapMarkerDocument(NumCast(40), NumCast(40), false, [], {})[Id]} + {...OmitKeys(this.props, ['NativeWidth', 'NativeHeight', 'setContentView']).omit} + place={Docs.Create.MapMarkerDocument(NumCast(40), NumCast(40), false, [], {})} + markerMap={this.markerMap} + PanelWidth={this.infoWidth} + PanelHeight={this.infoHeight} + moveDocument={this.moveDocument} + isAnyChildContentActive={this.isAnyChildContentActive} + whenChildContentsActiveChanged={this.whenChildContentsActiveChanged} + /> */} diff --git a/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx b/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx index 00bedafbe..08ed7b40f 100644 --- a/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx +++ b/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx @@ -47,7 +47,9 @@ export class MapBoxInfoWindow extends React.Component<MapBoxInfoWindowProps & Vi removeDoc = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((p, d) => p && Doc.RemoveDocFromList(this.props.place, 'data', d), true as boolean); render() { return ( - <InfoWindow anchor={this.props.markerMap[this.props.place[Id]]} onCloseClick={this.handleInfoWindowClose}> + <InfoWindow + // anchor={this.props.markerMap[this.props.place[Id]]} + onCloseClick={this.handleInfoWindowClose}> <div className="mapbox-infowindow"> <div style={{ width: this.props.PanelWidth(), height: this.props.PanelHeight() }}> <CollectionStackingView |