From becf6eeac2bd370fef2eb67c107ccfaeef5805e4 Mon Sep 17 00:00:00 2001 From: Aubrey-Li <63608597+Aubrey-Li@users.noreply.github.com> Date: Sat, 21 Aug 2021 13:52:34 -0700 Subject: render map marker gps updates --- src/client/views/nodes/MapBox/MapBox.tsx | 163 +++++++++++++++++++++++-------- 1 file changed, 120 insertions(+), 43 deletions(-) (limited to 'src/client/views/nodes/MapBox/MapBox.tsx') diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx index 56203f3ae..e62f835b2 100644 --- a/src/client/views/nodes/MapBox/MapBox.tsx +++ b/src/client/views/nodes/MapBox/MapBox.tsx @@ -1,19 +1,24 @@ import { Autocomplete, GoogleMap, GoogleMapProps, InfoWindow, Marker } from '@react-google-maps/api'; -import { action, computed, IReactionDisposer, observable } from 'mobx'; +import { action, computed, IReactionDisposer, observable, ObservableMap } from 'mobx'; import { observer } from "mobx-react"; import * as React from "react"; -import { Doc, DocListCast, WidthSym } from '../../../../fields/Doc'; +import { DataSym, Doc, DocListCast, FieldsSym, WidthSym } from '../../../../fields/Doc'; import { documentSchema } from '../../../../fields/documentSchemas'; import { makeInterface } from '../../../../fields/Schema'; import { NumCast, StrCast } from '../../../../fields/Types'; import { emptyFunction, setupMoveUpEvents } from '../../../../Utils'; +import { Docs } from '../../../documents/Documents'; import { DragManager } from '../../../util/DragManager'; import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from '../../DocComponent'; +import { AnchorMenu } from '../../pdf/AnchorMenu'; import { SidebarAnnos } from '../../SidebarAnnos'; import { StyleProp } from '../../StyleProvider'; import { FieldView, FieldViewProps } from '../FieldView'; import "./MapBox.scss"; import { MapMarker } from './MapMarker'; +import { DocumentType } from '../../../documents/DocumentTypes'; +import { identity } from 'lodash'; +import { Id } from '../../../../fields/FieldSymbols'; type MapDocument = makeInterface<[typeof documentSchema]>; const MapDocument = makeInterface(documentSchema); @@ -76,7 +81,10 @@ export class MapBox extends ViewBoxAnnotatableComponent(); @observable private searchMarkers: google.maps.Marker[] = []; @observable private searchBox = new window.google.maps.places.Autocomplete(this.inputRef.current!, options); - @observable private childDocs: MapMarker[] = []; + @observable private _savedAnnotations = new ObservableMap(); + @computed get allSidebarDocs() { return DocListCast(this.dataDoc[this.SidebarKey]); }; + @computed get allMapMarkers() { return DocListCast(this.dataDoc[this.annotationKey]); }; + @observable private allMarkers: Doc[] = []; @observable _showSidebar = false; @@ -96,17 +104,43 @@ export class MapBox extends ViewBoxAnnotatableComponent { console.log('map bound is:' + this.bounds); - this.childDocs.map(place => { - this.bounds.extend(place._latlngLocation); + this.allMarkers.map(place => { + this.bounds.extend({ lat: NumCast(place.lat), lng: NumCast(place.lng) }); return place._markerId; }); map.fitBounds(this.bounds) } - // store a reference to google map instance; fit map bounds to contain all markers + + private hasGeolocation = (doc: Doc) => { + return doc.type === DocumentType.IMG + + } + + + /** + * A function that examines allMapMarkers docs in the map node and form MapMarkers + */ + private fillMarkers = () => { + this.allMapMarkers?.forEach(doc => { + // search for if the map marker exists, else create marker + if (doc.lat !== undefined && doc.lng !== undefined) { + const marker = Docs.Create.MapMarkerDocument(NumCast(doc.lat), NumCast(doc.lng), [], {}) + this.allMarkers.push(marker) + } + }) + } + + + /** + * store a reference to google map instance + * setup the drawing manager on the top right corner of map + * fit map bounds to contain all markers + * @param map + */ @action private loadHandler = (map: google.maps.Map) => { this._map = map; @@ -125,11 +159,12 @@ export class MapBox extends ViewBoxAnnotatableComponent { - place._markerId ? this.markerMap[place._markerId] = marker : null; + private markerLoadHandler = (marker: google.maps.Marker, place: Doc) => { + place[Id] ? this.markerMap[place[Id]] = marker : null; } @action @@ -156,7 +191,14 @@ export class MapBox extends ViewBoxAnnotatableComponent { if (!this.layoutDoc._showSidebar) this.toggleSidebar(); - return this.addDocument(doc, sidebarKey); + const docs = doc instanceof Doc ? [doc] : doc + docs.forEach(doc => { + if (doc.lat !== undefined && doc.lng !== undefined) { + const marker = Docs.Create.MapMarkerDocument(NumCast(doc.lat), NumCast(doc.lng), [], {}) + this.addDocument(marker, this.annotationKey) + } + }) //add to annotation list + return this.addDocument(doc, sidebarKey); // add to sidebar list } /** @@ -183,6 +225,10 @@ export class MapBox extends ViewBoxAnnotatableComponent { console.log(this.searchBox); @@ -228,6 +274,7 @@ export class MapBox extends ViewBoxAnnotatableComponent { if (this.infoWindowOpen) { @@ -246,6 +293,7 @@ export class MapBox extends ViewBoxAnnotatableComponent d?.author).length; return (!annotated && !this.isContentActive()) ? (null) :
; } + @action toggleSidebar = () => { const prevWidth = this.sidebarWidth(); @@ -271,6 +320,65 @@ export class MapBox extends ViewBoxAnnotatableComponent { + const anchor = + AnchorMenu.Instance?.GetAnchor(this._savedAnnotations) ?? + this.rootDoc // if anchormenu pops up else return rootDoc (map) + // Docs.Create.MapMarkerDocument(this.allMapMarkers, { + // title: StrCast(this.rootDoc.title + " " + this.layoutDoc._scrollTop), + // annotationOn: this.rootDoc, + // y: NumCast(this.layoutDoc._scrollTop), + // }); + // this.addDocument(anchor); + return anchor; + } + + private saveMarkerInfo = () => { + + } + // create marker prop --> func that + private renderMarkers = () => { + this.allMarkers.map(place => ( + this.markerLoadHandler(marker, place)} + onClick={e => this.markerClickHandler(e, place)} + /> + )) + } + + private renderInfoWindow = (marker: MapMarker) => { + return this.infoWindowOpen && this.selectedPlace && ( + +
+
+
+ {// TODO need to figure out how to render these childDocs of the MapMarker in InfoWindow + marker.childDocs} +
+
+
+
+
+ + +
+
+
+ +
+
+
+
+ + ) + } + render() { return
@@ -295,39 +403,8 @@ export class MapBox extends ViewBoxAnnotatableComponent - {this.childDocs.map(place => ( - this.markerLoadHandler(marker, place)} - onClick={e => this.markerClickHandler(e, place)} - /> - ))} - {this.infoWindowOpen && this.selectedPlace && ( - -
-
-
- -
-
-
-
-
- -
-
-
- -
-
-
-
- - )} + {this.renderMarkers} + {this.renderInfoWindow}
{/* {/* */} -- cgit v1.2.3-70-g09d2