diff options
| -rw-r--r-- | src/client/views/nodes/MapBox/MapBox.tsx | 54 |
1 files changed, 21 insertions, 33 deletions
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx index ee7f89ac2..7d3dcb811 100644 --- a/src/client/views/nodes/MapBox/MapBox.tsx +++ b/src/client/views/nodes/MapBox/MapBox.tsx @@ -3,6 +3,7 @@ import { GoogleMapProps, Marker } from '@react-google-maps/api'; import BingMapsReact from 'bingmaps-react'; import { EditableText } from 'browndash-components'; import e from 'connect-flash'; +import { truncateSync } from 'fs'; import { action, computed, IReactionDisposer, observable, ObservableMap, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; @@ -607,30 +608,21 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps mapMarker.infoWindowOpen = true; }; + + selectedPin: Doc | undefined; infobox: any; - pushpinClicked = (e: { - isSelected: boolean; target: { metadata: { title: any; description: any }; getLocation: () => any } -}, pin:Doc) => { - pin["infoWindowOpen"] = !pin.infoWindowOpen; - console.log("Pin clicked") - //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 = (pin:Doc) => { + pin["infoWindowOpen"] = + // true + !pin.infoWindowOpen; + // if (this.selectedPin){ + // this.selectedPin.infoWindowOpen = false; + // this.selectedPin = pin // } - }; - - //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 = !pin.infoWindowOpen; - // console.log("later:" + pin.infoWindowOpen) + // else{ + // this.selectedPin = pin + // } + this.addAllPins(); }; /** @@ -693,23 +685,21 @@ 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)); - + this.allMapPushpins.map(pin => this.createPushPin(pin)); + }; @action - createInfobox = (pin: any) => { + createPushPin = (pin: any) => { var pushPin:any; if (pin.infoWindowOpen){ 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', // height: '50px' }); } @@ -719,8 +709,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps this._bingMap.current.entities.push(pushPin); - console.log(this.allMapPushpins.filter(pin => pin.infoWindowOpen).length) - var id = Utils.GenerateGuid(); document.getElementById(id); var infoboxTemplate = '<div class="customInfobox"><div class="title">{title}</div>{description}</div>'; @@ -757,7 +745,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps // this.MicrosoftMaps.Events.addHandler(pushPin, 'click', this.pushpinClicked); // For our infowindow - this.MicrosoftMaps.Events.addHandler(pushPin, 'click', (e: any) => this.pushpinClicked(e, pushPin)); + this.MicrosoftMaps.Events.addHandler(pushPin, 'click', (e: any) => this.pushpinClicked(pin)); // this.MicrosoftMaps.Events.addHandler(pushPin, 'mouseover', (e:any) => this.onHover(e)); }; |