diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/nodes/MapBox/MapBox.tsx | 117 |
1 files changed, 74 insertions, 43 deletions
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx index 1892a5b61..ef45cdd1a 100644 --- a/src/client/views/nodes/MapBox/MapBox.tsx +++ b/src/client/views/nodes/MapBox/MapBox.tsx @@ -621,15 +621,19 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps } - infobox:any; + @action createPushpin = (latitude:number, longitude:number) =>{ // Stores the pushpin as a MapMarkerDocument + const mapMarker = Docs.Create.MapMarkerDocument(NumCast(latitude), NumCast(longitude), false, [], {}); this.addDocument(mapMarker, this.annotationKey); + // mapMarker.infoWindowOpen = true; + console.log("original:" + mapMarker) } + infobox:any; pushpinClicked = (e: { target: { metadata: { title: any; description: any; }; getLocation: () => any; }; }) => { //Make sure the infobox has metadata to display. if (e.target.metadata) { @@ -648,6 +652,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps // // set which place was clicked // this.selectedPlace = place; pin.infoWindowOpen = true; + console.log("later:" + pin.infoWindowOpen) } /** @@ -662,45 +667,47 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps * Called by search button's onClick * Finds the geocode of the searched contents and sets location to that location **/ - @action - bingSearch = async() =>{ //TODO: searching more formally - - // clear all pins - 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(); - - - - // // 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.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) - .length) - } - - /** - * Adds all pushpins in dataDoc onto the map - */ - @action - addAllPins = () =>{ - this.allMapPushpins.map(pin => this.createInfobox(pin)); - } + @action + bingSearch = async() =>{ + + // clear all pins + 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(); + + + + // // 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.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) + .length) + console.log(this.allMapPushpins + .map(marker => console.log(marker.infoWindowOpen))) + } + + /** + * Adds all pushpins in dataDoc onto the map + */ + @action + addAllPins = () =>{ + this.allMapPushpins.map(pin => this.createInfobox(pin)); + } @action createInfobox = (pin:any) =>{ @@ -720,8 +727,9 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps //Store some metadata with the pushpin. pushPin.metadata = { title: pushPin.title, - description: 'Pin description' + description: 'Pin description', }; + // pushPin.infoWindowOpen = true; //Add a click event handler to the pushpin. // For bing maps infobox @@ -732,8 +740,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps } - - /** * View options for bing maps @@ -753,6 +759,21 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps enableInertia:true, }; + + + /** + * Toggles mode for placing a pin down on map + */ + @observable + placePinOn: boolean | undefined; + @action + togglePlacePin = ()=>{ + if (this.placePinOn) + this.placePinOn = false; + else this.placePinOn = true; + } + + bingMapReady = (map: any) => (this._bingMap = map.map); render() { const renderAnnotations = (docFilters?: () => string[]) => null; @@ -793,6 +814,16 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps {!MapBox.UseBing ? null : <input type="button" value="Search" onClick={this.bingSearch}/>} + + {!MapBox.UseBing ? null : + this.placePinOn ? + <input type="button" value="Place Pin Mode On" + onClick={this.togglePlacePin}/> + : + <input type="button" value="Place Pin Mode Off" + onClick={this.togglePlacePin}/> + } + {!MapBox.UseBing ? null : <BingMapsReact onMapReady={this.bingMapReady} bingMapsKey={bingApiKey} height="100%" mapOptions={this.bingMapOptions} width="100%" viewOptions={this.bingViewOptions} > |