map as node

9 files changed, 140 insertions, 108 deletions

diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts
index 8565784b4..422d9c2e3 100644
--- a/src/client/documents/DocumentTypes.ts
+++ b/src/client/documents/DocumentTypes.ts
@@ -2,44 +2,47 @@ export enum DocumentType {
     NONE = "none",
 
     // core data types
-    RTF = "rtf",      // rich text
-    IMG = "image",      // image box
-    WEB = "web",        // web page or html clipping
-    COL = "collection", // collection
-    KVP = "kvp",        // key value pane
-    VID = "video",      // video
-    AUDIO = "audio",    // audio
-    PDF = "pdf",        // pdf
-    INK = "inks",        // ink stroke
-    SCREENSHOT = "screenshot",  // view of a desktop application
-    FONTICON = "fonticonbox",   // font icon
+    RTF = "rtf",
+    IMG = "image",
+    WEB = "web",
+    COL = "collection",
+    KVP = "kvp",
+    VID = "video",
+    AUDIO = "audio",
+    PDF = "pdf",
+    INK = "inks",
+    SCREENSHOT = "screenshot",
+    FONTICON = "fonticonbox",
     FILTER = "filter",
-    SEARCH = "search",          // search query
-    LABEL = "label",            // simple text label
-    BUTTON = "button",          // onClick button
-    WEBCAM = "webcam",          // webcam
-    HTMLANCHOR = "htmlanchor",  // text selection anchor in PDF/Web
-    DATE = "date",              // calendar view of a date
-    SCRIPTING = "script",       // script editor
-    EQUATION = "equation",      // equation editor
-    FUNCPLOT = "funcplot",      // function plotter
+    SEARCH = "search",
+    LABEL = "label",
+    BUTTON = "button",
+    WEBCAM = "webcam",
+    HTMLANCHOR = "htmlanchor",
+    DATE = "date",
+    SCRIPTING = "script",
+    EQUATION = "equation",
+    FUNCPLOT = "funcplot",
+    MAP = "MAP",
+
 
     // special purpose wrappers that either take no data or are compositions of lower level types
-    LINK = "link",              // link  (view of a document that acts as a link)
-    LINKANCHOR = "linkanchor",  // blue dot link anchor  (view of a link document's anchor)
-    IMPORT = "import",          // directory import box  (file system directory)
-    SLIDER = "slider",          // number slider  (view of a number)
-    PRES = "presentation",      // presentation   (view of a collection) --- shouldn't this be a view type?  technically requires a special view in which documents must have their aliasOf fields filled in
-    PRESELEMENT = "preselement",// presentation item (view of a document in a collection)
-    COLOR = "color",            // color picker (view of a color picker for a color string)
-    YOUTUBE = "youtube",        // youtube directory (view of you tube search results)
+    LINK = "link",
+    LINKANCHOR = "linkanchor",
+    IMPORT = "import",
+    SLIDER = "slider",
+    PRES = "presentation",
+    PRESELEMENT = "preselement",
+    COLOR = "color",
+    YOUTUBE = "youtube",
     SEARCHITEM = "searchitem",
-    COMPARISON = "comparison",  // before/after view with slider (view of 2 images)
-    GROUP = "group",            // group of users
+    COMPARISON = "comparison",
+    GROUP = "group",
 
-    LINKDB = "linkdb",          // database of links  ??? why do we have this
-    SCRIPTDB = "scriptdb",      // database of scripts
-    GROUPDB = "groupdb",        // database of groups
+    LINKDB = "linkdb",
+    SCRIPTDB = "scriptdb",
+    GROUPDB = "groupdb",
 
-    TEXTANCHOR = "textanchor"   // selection of text in a text box
+    TEXTANCHOR = "textanchor" // selection of text in a text box
+    ,
 }
\ No newline at end of file
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 24682cbd0..5ec0b0063 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -11,7 +11,7 @@ import { RichTextField } from "../../fields/RichTextField";
 import { SchemaHeaderField } from "../../fields/SchemaHeaderField";
 import { ComputedField, ScriptField } from "../../fields/ScriptField";
 import { Cast, NumCast, StrCast } from "../../fields/Types";
-import { AudioField, ImageField, PdfField, VideoField, WebField, YoutubeField } from "../../fields/URLField";
+import { AudioField, ImageField, MapField, PdfField, VideoField, WebField, YoutubeField } from "../../fields/URLField";
 import { SharingPermissions } from "../../fields/util";
 import { MessageStore } from "../../server/Message";
 import { Upload } from "../../server/SharedMediaTypes";
@@ -60,6 +60,7 @@ import { EquationBox } from "../views/nodes/EquationBox";
 import { FunctionPlotBox } from "../views/nodes/FunctionPlotBox";
 import { CurrentUserUtils } from "../util/CurrentUserUtils";
 import { FieldViewProps } from "../views/nodes/FieldView";
+import { MapBox } from "../views/nodes/MapBox/MapBox";
 const path = require('path');
 
 const defaultNativeImageDim = Number(DFLT_IMAGE_NATIVE_DIM.replace("px", ""));
@@ -362,6 +363,10 @@ export namespace Docs {
                 layout: { view: PDFBox, dataField: defaultDataKey },
                 options: { _curPage: 1, _fitWidth: true, links: ComputedField.MakeFunction("links(self)") as any }
             }],
+            [DocumentType.MAP, {
+                layout: { view: MapBox, dataField: defaultDataKey },
+                options: { _height: 600, _width: 800, links: ComputedField.MakeFunction("links(self)") as any }
+            }],
             [DocumentType.IMPORT, {
                 layout: { view: DirectoryImportBox, dataField: defaultDataKey },
                 options: { _height: 150 }
@@ -797,6 +802,10 @@ export namespace Docs {
             return InstanceFromProto(Prototypes.get(DocumentType.WEB), new HtmlField(html), options);
         }
 
+        export function MapDocument(initial: List<Doc> = new List(), options: DocumentOptions = {}) {
+            return InstanceFromProto(Prototypes.get(DocumentType.MAP), initial, options);
+        }
+
         export function KVPDocument(document: Doc, options: DocumentOptions = {}) {
             return InstanceFromProto(Prototypes.get(DocumentType.KVP), document, { title: document.title + ".kvp", ...options });
         }
@@ -822,7 +831,7 @@ export namespace Docs {
             return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { ...options, _viewType: CollectionViewType.Linear }, id);
         }
 
-        export function MapDocument(documents: Array<Doc>, options: DocumentOptions = {}) {
+        export function MapCollectionDocument(documents: Array<Doc>, options: DocumentOptions = {}) {
             return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { ...options, _viewType: CollectionViewType.Map });
         }
 
@@ -1148,7 +1157,11 @@ export namespace DocUtils {
         } else if (field instanceof List && field[0] instanceof Doc) {
             created = Docs.Create.StackingDocument(DocListCast(field), resolved);
             layout = CollectionView.LayoutString;
-        } else {
+        } else if (field instanceof MapField) {
+            created = Docs.Create.MapDocument((field).url.href, resolved);
+            layout = MapBox.LayoutString;
+        }
+        else {
             created = Docs.Create.TextDocument("", { ...{ _width: 200, _height: 25, _autoHeight: true }, ...resolved });
             layout = FormattedTextBox.LayoutString;
         }
@@ -1179,6 +1192,11 @@ export namespace DocUtils {
             if (!options._width) options._width = 400;
             if (!options._height) options._height = (options._width as number) * 1200 / 927;
         }
+        if (type.indexOf("map") !== -1) {
+            ctor = Docs.Create.MapDocument;
+            if (!options._width) options._width = 800;
+            if (!options._height) options._height = (options._width as number) * 3 / 4;
+        }
         if (type.indexOf("html") !== -1) {
             if (path.includes(window.location.hostname)) {
                 const s = path.split('/');
@@ -1296,6 +1314,8 @@ export namespace DocUtils {
             fieldTemplate = Docs.Create.AudioDocument("http://www.cs.brown.edu", options);
         } else if (doc.data instanceof ImageField) {
             fieldTemplate = Docs.Create.ImageDocument("http://www.cs.brown.edu", options);
+        } else if (doc.data instanceof MapField) {
+            fieldTemplate = Docs.Create.MapDocument("http://www.cs.brown.edu", options);
         }
         const docTemplate = docLayoutTemplate || creator?.(fieldTemplate ? [fieldTemplate] : [], { title: customName + "(" + doc.title + ")", isTemplateDoc: true, _width: _width + 20, _height: Math.max(100, _height + 45) });
 
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 12733e815..21c4ac110 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -447,6 +447,10 @@ export class CurrentUserUtils {
         if (doc.emptyWebpage === undefined) {
             doc.emptyWebpage = Docs.Create.WebDocument("", { title: "webpage", _nativeWidth: 850, isTemplateDoc: true, _height: 512, _width: 400, useCors: true, system: true, cloneFieldFilter: new List<string>(["system"]) });
         }
+        if (doc.emptyMap === undefined) {
+            doc.emptyMap = Docs.Create.MapDocument(new List<Doc>(), { title: "google map", _width: 800, _height: 600, system: true, cloneFieldFilter: new List<string>(["system"]) });
+            // ((doc.emptyMap as Doc).proto as Doc)["dragFactory-count"] = 0;
+        }
         if (doc.activeMobileMenu === undefined) {
             this.setupActiveMobileMenu(doc);
         }
@@ -466,6 +470,7 @@ export class CurrentUserUtils {
             { toolTip: "Tap to create a mobile view in a new pane, drag for a mobile view", title: "Phone", icon: "mobile", click: 'openOnRight(Doc.UserDoc().activeMobileMenu)', drag: 'this.dragFactory', dragFactory: doc.activeMobileMenu as Doc },
             { toolTip: "Tap to create a custom header note document, drag for a custom header note", title: "Custom", icon: "window-maximize", click: 'openOnRight(delegateDragFactory(this.dragFactory))', drag: 'delegateDragFactory(this.dragFactory)', dragFactory: doc.emptyHeader as Doc },
             { toolTip: "Toggle a Calculator REPL", title: "repl", icon: "calculator", click: 'addOverlayWindow("ScriptingRepl", { x: 300, y: 100, width: 200, height: 200, title: "Scripting REPL" })' },
+            { toolTip: "Tap to create a map in the new pane, drag for a map", title: "Map", icon: "map-marker-alt", click: 'openOnRight(copyDragFactory(this.dragFactory))', drag: 'copyDragFactory(this.dragFactory)', dragFactory: doc.emptyMap as Doc, noviceMode: true}
         ];
 
     }
diff --git a/src/client/util/type_decls.d b/src/client/util/type_decls.d
index ac0bea46a..9063dc894 100644
--- a/src/client/util/type_decls.d
+++ b/src/client/util/type_decls.d
@@ -208,6 +208,7 @@ declare const Docs: {
     PdfDocument(url: string, options?: DocumentOptions): Doc;
     WebDocument(url: string, options?: DocumentOptions): Doc;
     HtmlDocument(html: string, options?: DocumentOptions): Doc;
+    MapDocument(url: string, options?: DocumentOptions): Doc;
     KVPDocument(document: Doc, options?: DocumentOptions): Doc;
     FreeformDocument(documents: Doc[], options?: DocumentOptions): Doc;
     SchemaDocument(columns: string[], documents: Doc[], options?: DocumentOptions): Doc;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 4eeb1fc95..6be298085 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -169,7 +169,7 @@ export class MainView extends React.Component {
             fa.faArrowAltCircleDown, fa.faArrowAltCircleUp, fa.faArrowAltCircleLeft, fa.faArrowAltCircleRight, fa.faStopCircle, fa.faCheckCircle, fa.faGripVertical,
             fa.faSortUp, fa.faSortDown, fa.faTable, fa.faTh, fa.faThList, fa.faProjectDiagram, fa.faSignature, fa.faColumns, fa.faChevronCircleUp, fa.faUpload, fa.faBorderAll,
             fa.faBraille, fa.faChalkboard, fa.faPencilAlt, fa.faEyeSlash, fa.faSmile, fa.faIndent, fa.faOutdent, fa.faChartBar, fa.faBan, fa.faPhoneSlash, fa.faGripLines,
-            fa.faSave, fa.faBookmark);
+            fa.faSave, fa.faBookmark, fa.faMapMarkedAlt);
         this.initAuthenticationRouters();
     }
 
@@ -180,8 +180,8 @@ export class MainView extends React.Component {
             const targClass = targets[0].className.toString();
             if (SearchBox.Instance._searchbarOpen || SearchBox.Instance.open) {
                 const check = targets.some((thing) =>
-                    (thing.className === "collectionSchemaView-searchContainer" || (thing as any)?.dataset.icon === "filter" ||
-                        thing.className === "collectionSchema-header-menuOptions"));
+                (thing.className === "collectionSchemaView-searchContainer" || (thing as any)?.dataset.icon === "filter" ||
+                    thing.className === "collectionSchema-header-menuOptions"));
                 !check && SearchBox.Instance.resetSearch(true);
             }
             !targClass.includes("contextMenu") && ContextMenu.Instance.closeMenu();
diff --git a/src/client/views/collections/MapView/CollectionMapView.tsx b/src/client/views/collections/MapView/CollectionMapView.tsx
index ebf57c0c1..290972364 100644
--- a/src/client/views/collections/MapView/CollectionMapView.tsx
+++ b/src/client/views/collections/MapView/CollectionMapView.tsx
@@ -52,7 +52,7 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Part
 
 
     @observable private _map = null as unknown as google.maps.Map;
-    @observable private selectedPlace: Doc = ;
+    @observable private selectedPlace: LocationData = null as any;
     @observable private markerMap = {};
     @observable private center = defaultCenter;
     @observable private zoom = 2.5;
@@ -114,7 +114,7 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Part
     }
 
     @action
-    private markerClickHandler = (e: MouseEvent, place: Doc) => {
+    private markerClickHandler = (e: MouseEvent, place: LocationData) => {
         // set which place was clicked
         this.selectedPlace = place
 
@@ -150,7 +150,7 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Part
 
     @action
     @undoBatch
-    private handleDragMarker = (marker: any, place: Doc) => {
+    private handleDragMarker = (marker: any, place: LocationData) => {
         // if (marker != null) {
         //     place = {
         //         id: place.id,
@@ -210,58 +210,58 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Part
         )
     }
 
-    @computed get markerContent() {
-        const allMarkers = this.childLayoutPairs
-        const markerId = NumCast(this.layoutDoc._itemIndex);
-        const selectedMarker = this.childLayoutPairs?.[markerId];
-        const position = {
-            lat: NumCast(this.layoutDoc.lat),
-            lng: NumCast(this.layoutDoc.lng)
-        }
-        return <>
-            {
-                allMarkers?.map(place => (
-                    <Marker
-                        key={markerId}
-                        position={position}
-                        onClick={e => this.markerClickHandler(e, place.layout)} //??
-                        draggable={true}
-                        onDragEnd={marker => this.handleDragMarker(marker, place.layout)}
-                    />
-                ))
-            }
-            {this.infoWindowOpen && selectedMarker && (
-                <InfoBox
-                    //anchor={selectedMarker}
-                    // onCloseClick={this.handleInfoWindowClose}
-                    position={position}
-                // options={{ enableEventPropagation: true }}
-                >
-                    <div style={{ backgroundColor: 'white', opacity: 0.75, padding: 12 }}>
-                        <div style={{ fontSize: 16 }}>
-                            {/* the linkmenu as the ones in other nodes */}
-                            <div>
-                                <a>a link to another node</a>
-                                <hr />
-                            </div>
-                            <div>
-                                <a>a link to another node</a>
-                                <hr />
-                            </div>
-                            <div>
-                                <a>a link to another node</a>
-                                <hr />
-                            </div>
-                            <div>
-                                <button>New +</button>
-                            </div>
-                        </div>
-                    </div>
-                </InfoBox>
-            )}
-
-        </>
-    }
+    // @computed get markerContent() {
+    //     const allMarkers = this.childLayoutPairs
+    //     const markerId = NumCast(this.layoutDoc._itemIndex);
+    //     const selectedMarker = this.childLayoutPairs?.[markerId];
+    //     const position = {
+    //         lat: NumCast(this.layoutDoc.lat),
+    //         lng: NumCast(this.layoutDoc.lng)
+    //     }
+    //     return <>
+    //         {
+    //             allMarkers?.map(place => (
+    //                 <Marker
+    //                     key={markerId}
+    //                     position={position}
+    //                     onClick={e => this.markerClickHandler(e, place.layout)} //??
+    //                     draggable={true}
+    //                     onDragEnd={marker => this.handleDragMarker(marker, place.layout)}
+    //                 />
+    //             ))
+    //         }
+    //         {this.infoWindowOpen && selectedMarker && (
+    //             <InfoBox
+    //                 //anchor={selectedMarker}
+    //                 // onCloseClick={this.handleInfoWindowClose}
+    //                 position={position}
+    //             // options={{ enableEventPropagation: true }}
+    //             >
+    //                 <div style={{ backgroundColor: 'white', opacity: 0.75, padding: 12 }}>
+    //                     <div style={{ fontSize: 16 }}>
+    //                         {/* the linkmenu as the ones in other nodes */}
+    //                         <div>
+    //                             <a>a link to another node</a>
+    //                             <hr />
+    //                         </div>
+    //                         <div>
+    //                             <a>a link to another node</a>
+    //                             <hr />
+    //                         </div>
+    //                         <div>
+    //                             <a>a link to another node</a>
+    //                             <hr />
+    //                         </div>
+    //                         <div>
+    //                             <button>New +</button>
+    //                         </div>
+    //                     </div>
+    //                 </div>
+    //             </InfoBox>
+    //         )}
+
+    //     </>
+    // }
 
     @action
     private addMarker = (location: google.maps.LatLng | undefined, map: google.maps.Map) => {
@@ -271,18 +271,18 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Part
         });
     }
 
-    @action
-    private renderMarkerToMap = (marker: Doc) => {
-        const id = StrCast(marker.id);
-        const lat = NumCast(marker.lat);
-        const lng = NumCast(marker.lng);
-
-        return <Marker
-            key={id}
-            position={{ lat: lat, lng: lng }}
-            onClick={e => this.markerClickHandler(e, marker)}
-        />
-    }
+    // @action
+    // private renderMarkerToMap = (marker: Doc) => {
+    //     const id = StrCast(marker.id);
+    //     const lat = NumCast(marker.lat);
+    //     const lng = NumCast(marker.lng);
+
+    //     return <Marker
+    //         key={id}
+    //         position={{ lat: lat, lng: lng }}
+    //         onClick={e => this.markerClickHandler(e, marker)}
+    //     />
+    // }
 
     render() {
         const { Document, fieldKey, isContentActive: active } = this.props;
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index f0a54e4ac..388e6aafe 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -40,6 +40,7 @@ import { VideoBox } from "./VideoBox";
 import { WebBox } from "./WebBox";
 import React = require("react");
 import XRegExp = require("xregexp");
+import { MapBox } from "./MapBox/MapBox";
 
 const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
 
@@ -224,7 +225,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & Fo
                     FormattedTextBox, ImageBox, DirectoryImportBox, FontIconBox, LabelBox, EquationBox, SliderBox, FieldView,
                     CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox,
                     PDFBox, VideoBox, AudioBox, PresBox, YoutubeBox, PresElementBox, SearchBox, FilterBox, FunctionPlotBox,
-                    ColorBox, DashWebRTCVideo, LinkAnchorBox, InkingStroke, LinkBox, ScriptingBox,
+                    ColorBox, DashWebRTCVideo, LinkAnchorBox, InkingStroke, LinkBox, ScriptingBox, MapBox,
                     ScreenshotBox,
                     HTMLtag, ComparisonBox
                 }}
diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx
index 349690b20..5d9c51915 100644
--- a/src/client/views/search/IconButton.tsx
+++ b/src/client/views/search/IconButton.tsx
@@ -70,6 +70,7 @@ export class IconButton extends React.Component<IconButtonProps>{
             case (DocumentType.RTF): return "sticky-note";
             case (DocumentType.VID): return "video";
             case (DocumentType.WEB): return "globe-asia";
+            case (DocumentType.MAP): return "map-marker-alt";
             default: return "caret-down";
         }
     }
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index bd0ba3ad7..63d491b07 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -1177,6 +1177,7 @@ export namespace Doc {
             case DocumentType.INK: return "pen-nib";
             case DocumentType.PDF: return "file-pdf";
             case DocumentType.LINK: return "link";
+            case DocumentType.MAP: return "map-marker-alt"
             default: return "question";
         }
     }