diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/collections/MapView/CollectionMapView.tsx | 206 |
1 files changed, 99 insertions, 107 deletions
diff --git a/src/client/views/collections/MapView/CollectionMapView.tsx b/src/client/views/collections/MapView/CollectionMapView.tsx index 42059b61c..4243b89a5 100644 --- a/src/client/views/collections/MapView/CollectionMapView.tsx +++ b/src/client/views/collections/MapView/CollectionMapView.tsx @@ -1,4 +1,4 @@ -import { GoogleMap, Marker, InfoWindow, InfoBox, LoadScript, GoogleMapProps, StandaloneSearchBox, DrawingManager } from '@react-google-maps/api'; +import { GoogleMap, Marker, InfoWindow, InfoBox, useJsApiLoader, LoadScript, GoogleMapProps, StandaloneSearchBox, DrawingManager } from '@react-google-maps/api'; import { observable, action, computed, Lambda, runInAction } from "mobx"; import { observer } from "mobx-react"; import { Doc, DocListCast, Field, FieldResult, Opt } from "../../../../fields/Doc"; @@ -35,6 +35,7 @@ const defaultCenter = { @observer export default class CollectionMapView extends CollectionSubView<MapSchema, GoogleMapProps>(MapSchema) { + @observable private _map = null as any @observable private mapRef = null as any; @observable private selectedPlace: LocationData = { id: undefined, pos: undefined }; @observable private markerMap = {}; @@ -42,6 +43,10 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Goog @observable private zoom = 2.5; @observable private clickedLatLng = null; @observable private infoWindowOpen = false; + @observable private bounds = new window.google.maps.LatLngBounds(); + @observable private inputRef = React.createRef<HTMLInputElement>(); + @observable private searchBox = new window.google.maps.places.SearchBox(this.inputRef.current!); + @observable private searchMarkers: google.maps.Marker[] = []; @observable private myPlaces = [ { id: 1, pos: { lat: 39.09366509575983, lng: -94.58751660204751 } }, @@ -50,15 +55,19 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Goog { id: 4, pos: { lat: 36.7783, lng: 119.4179 } } ]; + @action + private setSearchBox = (searchBox: any) => { + this.searchBox = searchBox; + } + // iterate myPlaces to size, center, and zoom map to contain all markers private fitBounds = (map: any) => { - const bounds = new window.google.maps.LatLngBounds(); - console.log('map bound is:' + bounds); + console.log('map bound is:' + this.bounds); this.myPlaces.map(place => { - bounds.extend(place.pos); + this.bounds.extend(place.pos); return place.id; }); - map.fitBounds(bounds) + map.fitBounds(this.bounds) } // store a reference to google map instance; fit map bounds to contain all markers @@ -125,31 +134,9 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Goog } } - /** - * func that handles user's search location and zoom/pan on the input location - */ - private searchLocation = () => { - - } - - /** - * func that adds marker to google maps - */ - @undoBatch - private addMarker = () => { - - } - - /** - * func that updates suggested results (and auto-complete) during user input - */ - private handleChange = () => { - - } - // private mapRef = document.getElementById("map") // private markers: google.maps.Marker[] = []; - @observable private inputRef = React.createRef<HTMLInputElement>(); + // @action // private setInputRef = (element: HTMLInputElement) => { @@ -159,8 +146,9 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Goog // } // } - @observable private searchBox = new window.google.maps.places.SearchBox(this.inputRef.current!); + // @observable private searchBox = new window.google.maps.places.SearchBox(this.inputRef.current!); + @action private handlePlacesChanged = () => { console.log(this.searchBox); const places = this.searchBox.getPlaces(); @@ -169,49 +157,51 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Goog if (places.length == 0) { return; } - // // clear out old markers - // this.markers.forEach((marker) => { - // marker.setMap(null); - // }); - // this.markers = [] + // clear out old markers + this.searchMarkers.forEach((marker) => { + marker.setMap(null); + }); + this.searchMarkers = [] - // // for each place, get icon, name, location - const bounds = new window.google.maps.LatLngBounds(); + // for each place, get icon, name, location places.forEach((place) => { if (!place.geometry || !place.geometry.location) { console.log("Returned place contains no geometry"); return; } - // const icon = { - // url: place.icon as string, - // size: new google.maps.Size(71, 71), - // origin: new google.maps.Point(0, 0), - // anchor: new google.maps.Point(17, 34), - // scaledSize: new google.maps.Size(25, 25), - // } - - // //create a marker for each place - // this.markers.push( - // new google.maps.Marker({ - // mapRef, - // title: place.name, - // position: place.geometry.location, - // }) - // ); + const icon = { + url: place.icon as string, + size: new google.maps.Size(71, 71), + origin: new google.maps.Point(0, 0), + anchor: new google.maps.Point(17, 34), + scaledSize: new google.maps.Size(25, 25), + } + + //create a marker for each place + this.searchMarkers.push( + new google.maps.Marker({ + map: this._map, + icon: icon, + title: place.name, + position: place.geometry.location, + }) + ); if (place.geometry.viewport) { // only geocodes have viewport - bounds.union(place.geometry.viewport); + this.bounds.union(place.geometry.viewport); } else { - bounds.extend(place.geometry.location); + this.bounds.extend(place.geometry.location); } }); + + console.log(this.searchMarkers); } private onBoundsChanged = () => { - this.searchBox.setBounds(this.mapRef.getBounds()) + this.searchBox.setBounds(this.bounds); } private onCenterChanged = () => { @@ -250,62 +240,64 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Goog style={{ pointerEvents: active() ? undefined : "none", overflow: 'hidden' }} onWheel={e => e.stopPropagation()} onPointerDown={e => (e.button === 0 && !e.ctrlKey) && e.stopPropagation()} > - <LoadScript + {/* <LoadScript googleMapsApiKey={process.env.GOOGLE_MAPS!} libraries={['places', 'drawing']} - > - <div className="map-wrapper"> - <GoogleMap - mapContainerStyle={mapContainerStyle} - zoom={this.zoom} - center={this.center} - onLoad={map => this.loadHandler(map)} - onBoundsChanged={this.onBoundsChanged} - onCenterChanged={this.onCenterChanged} - > - <StandaloneSearchBox - onPlacesChanged={this.handlePlacesChanged}> - <input ref={this.inputRef} className="searchbox" type="text" placeholder="Search anywhere:" /> - </StandaloneSearchBox> - - {this.myPlaces.map(place => ( - <Marker - key={place.id} - position={place.pos} - // onLoad={marker => this.markerLoadHandler(marker, place)} - onClick={e => this.markerClickHandler(e, place)} - draggable={true} - onDragEnd={marker => this.handleDragMarker(marker, place)} - /> - ))} - {this.infoWindowOpen && this.selectedPlace && ( - <InfoWindow - // anchor={this.markerMap[this.selectedPlace.id]} - onCloseClick={this.handleInfoWindowClose} - position={this.selectedPlace.pos} - // options={{ enableEventPropagation: true }} - > - <div style={{ backgroundColor: 'white', opacity: 0.75, padding: 12 }}> - <div style={{ fontSize: 16 }}> - <div> - <a>a link to another node</a> - </div> - <div> - <a>a link to another node</a> - </div> - <div> - <a>a link to another node</a> - </div> - <div> - <button>New +</button> - </div> + > */} + <div className="map-wrapper"> + <GoogleMap + ref={(map) => this._map = map} + mapContainerStyle={mapContainerStyle} + zoom={this.zoom} + center={this.center} + onLoad={map => this.loadHandler(map)} + onBoundsChanged={this.onBoundsChanged} + onCenterChanged={this.onCenterChanged} + > + <StandaloneSearchBox + onLoad={this.setSearchBox} + onPlacesChanged={this.handlePlacesChanged}> + <input ref={this.inputRef} className="searchbox" type="text" placeholder="Search anywhere:" /> + </StandaloneSearchBox> + + {this.myPlaces.map(place => ( + <Marker + key={place.id} + position={place.pos} + // onLoad={marker => this.markerLoadHandler(marker, place)} + onClick={e => this.markerClickHandler(e, place)} + draggable={true} + onDragEnd={marker => this.handleDragMarker(marker, place)} + /> + ))} + {this.infoWindowOpen && this.selectedPlace && ( + <InfoWindow + // anchor={this.markerMap[this.selectedPlace.id]} + onCloseClick={this.handleInfoWindowClose} + position={this.selectedPlace.pos} + // options={{ enableEventPropagation: true }} + > + <div style={{ backgroundColor: 'white', opacity: 0.75, padding: 12 }}> + <div style={{ fontSize: 16 }}> + <div> + <a>a link to another node</a> + </div> + <div> + <a>a link to another node</a> + </div> + <div> + <a>a link to another node</a> + </div> + <div> + <button>New +</button> </div> </div> - </InfoWindow> - )} - </GoogleMap> - </div> - </LoadScript > + </div> + </InfoWindow> + )} + </GoogleMap> + </div> + {/* </LoadScript > */} </div > </div >; } |