diff options
| -rw-r--r-- | package-lock.json | 8 | ||||
| -rw-r--r-- | src/client/views/nodes/MapBox/MapBox.tsx | 91 |
2 files changed, 90 insertions, 9 deletions
diff --git a/package-lock.json b/package-lock.json index 4695adf40..3b834a75e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22156,13 +22156,7 @@ "tweetnacl": { "version": "0.14.5", "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz", - "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=" - }, - "type": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz", - "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==", - "dev": true + "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==" }, "type-check": { "version": "0.4.0", diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx index 0064a2022..d35a5ef2e 100644 --- a/src/client/views/nodes/MapBox/MapBox.tsx +++ b/src/client/views/nodes/MapBox/MapBox.tsx @@ -1,6 +1,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Autocomplete, GoogleMap, GoogleMapProps, Marker } from '@react-google-maps/api'; import BingMapsReact from 'bingmaps-react'; +import { EditableText } from 'browndash-components'; import { action, computed, IReactionDisposer, observable, ObservableMap, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; @@ -580,7 +581,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps res(this.bingGeocode(map, query)); }); } else { - this._bingSearchManager.geocode({ + this._bingSearchManager.geocode({ where: query, callback: action((r: any) => { res(r.results[0].location); @@ -591,8 +592,72 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps }); }; + + + + bingSearchBarContents: any = "Boston, MA"; // For Bing Maps: The contents of the Bing search bar (string) + + /* + * 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 + } + + + // /** + // * 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 + // */ + // @action + // private placeMarker = (position: google.maps.LatLng, map: google.maps.Map) => { + // const marker = new google.maps.Marker({ + // position: position, + // map: map, + // }); + // map.panTo(position); + // const mapMarker = Docs.Create.MapMarkerDocument(NumCast(position.lat()), NumCast(position.lng()), false, [], {}); + // this.addDocument(mapMarker, this.annotationKey); + // }; + + + + + bingViewOptions = { - center: { latitude: defaultCenter.lat, longitude: defaultCenter.lng }, + center: { latitude: defaultCenter.lat, longitude: defaultCenter.lng },// TODO: latitude: this.rootDoc.latitude, longitude: this.rootDoc.longitude mapTypeId: 'grayscale', }; bingMapOptions = { @@ -617,12 +682,33 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps // }); }} style={{ width: `calc(100% - ${this.sidebarWidthPercent})` }}> + + <div style={{ mixBlendMode: 'multiply' }}>{renderAnnotations(this.transparentFilter)}</div> {renderAnnotations(this.opaqueFilter)} {SnappingManager.GetIsDragging() ? null : renderAnnotations()} {this.annotationLayer} + + + {!MapBox.UseBing ? null : + <EditableText editing + onEdit={(newText: string) => this.bingSearchBarContents = newText} + placeholder="..." + size="medium" + text="Boston, MA" + onKeyPress={e => console.log(e.key)} + />} + + {!MapBox.UseBing ? null : + <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} />} + <div style={{ display: MapBox.UseBing ? 'none' : undefined }}> <GoogleMap mapContainerStyle={mapContainerStyle} onZoomChanged={this.zoomChanged} onCenterChanged={this.centered} onLoad={this.loadHandler} options={mapOptions}> <Autocomplete onLoad={this.setSearchBox} onPlaceChanged={this.handlePlaceChanged}> @@ -648,6 +734,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps {/* {this.handleMapCenter(this._map)} */} </GoogleMap> </div> + {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? null : ( <MarqueeAnnotator rootDoc={this.rootDoc} |