From 480f155d69bd5546f04f0a9f5a78f026f8b6533a Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 10 May 2023 10:44:30 -0400 Subject: formatting mapbox --- src/client/views/nodes/MapBox/MapBox.scss | 147 +++++++++++++------------- src/client/views/nodes/MapBox/MapBox.tsx | 71 +++++-------- src/client/views/nodes/MapBox/MapBox2.tsx | 168 ++---------------------------- 3 files changed, 112 insertions(+), 274 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss index fb15520f6..539c506c7 100644 --- a/src/client/views/nodes/MapBox/MapBox.scss +++ b/src/client/views/nodes/MapBox/MapBox.scss @@ -1,87 +1,92 @@ -@import "../../global/globalCssVariables.scss"; +@import '../../global/globalCssVariables.scss'; .mapBox { - width: 100%; - height: 100%; - overflow: hidden; - display: flex; + width: 100%; + height: 100%; + overflow: hidden; + display: flex; - .mapBox-infoWindow { - background-color: white; - opacity: 0.75; - padding: 12; - font-size: 17; - } + .mapBox-infoWindow { + background-color: white; + opacity: 0.75; + padding: 12; + font-size: 17; + } - .mapBox-overlayButton-sidebar { - background: #121721; - height: 25px; - width: 25px; - right: 5px; - display: flex; - position: absolute; - align-items: center; - justify-content: center; - border-radius: 3px; - pointer-events: all; - z-index: 1; // so it appears on top of the document's title, if shown - - box-shadow: $standard-box-shadow; - transition: 0.2s; - - &:hover{ - filter: brightness(0.85); - } - } + .mapBox-overlayButton-sidebar { + background: #121721; + height: 25px; + width: 25px; + right: 5px; + display: flex; + position: absolute; + align-items: center; + justify-content: center; + border-radius: 3px; + pointer-events: all; + z-index: 1; // so it appears on top of the document's title, if shown - .mapBox-wrapper { - width: 100%; - .mapBox-input { - box-sizing: border-box; - border: 1px solid transparent; - width: 240px; - height: 32px; - padding: 0 12px; - border-radius: 3px; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); - font-size: 14px; - outline: none; - text-overflow: ellipses; - position: absolute; - left: 50%; - margin-left: -120px; - } - } + box-shadow: $standard-box-shadow; + transition: 0.2s; - .mapBox-sidebar-handle { - top: 0; - //top: calc(50% - 17.5px); // use this to center vertically -- make sure it looks okay for slide views - width: 10px; - height: 100%; - max-height: 35px; - background: lightgray; - border-radius: 20px; - cursor:grabbing; + &:hover { + filter: brightness(0.85); } - .mapBox-addMarker { + } + + .mapBox-wrapper { + width: 100%; + .mapBox-input { + box-sizing: border-box; + border: 1px solid transparent; + width: 240px; + height: 32px; + padding: 0 12px; + border-radius: 3px; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); + font-size: 14px; + outline: none; + text-overflow: ellipses; + position: absolute; left: 50%; - margin-left: 120px; - right: unset !important; - margin-top: -10; - height: max-content; - } - .searchbox { - display:none; - } - .mapBox-addMarker { - display:none; + margin-left: -120px; } + } + .mapBox-sidebar { + position: absolute; + right: 0; + height: 100%; + } + + .mapBox-sidebar-handle { + top: 0; + //top: calc(50% - 17.5px); // use this to center vertically -- make sure it looks okay for slide views + width: 10px; + height: 100%; + max-height: 35px; + background: lightgray; + border-radius: 20px; + cursor: grabbing; + } + .mapBox-addMarker { + left: 50%; + margin-left: 120px; + right: unset !important; + margin-top: -10; + height: max-content; + } + .searchbox { + display: none; + } + .mapBox-addMarker { + display: none; + } } .mapBox:hover { .mapBox-addMarker { - display:block; + display: block; } .searchbox { - display :block; + display: block; } } diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx index c44f5765a..06021921c 100644 --- a/src/client/views/nodes/MapBox/MapBox.tsx +++ b/src/client/views/nodes/MapBox/MapBox.tsx @@ -55,14 +55,6 @@ const mapOptions = { }; const bingApiKey = process.env.BING_MAPS; // if you're running local, get a Bing Maps api key here: https://www.bingmapsportal.com/ and then add it to the .env file in the Dash-Web root directory as: _CLIENT_BING_MAPS= -const apiKey = process.env.GOOGLE_MAPS; - -const script = document.createElement('script'); -script.defer = true; -script.async = true; -script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places,drawing`; -console.log(script.src); -document.head.appendChild(script); /** * Consider integrating later: allows for drawing, circling, making shapes on map @@ -89,7 +81,6 @@ const options = { @observer export class MapBox extends ViewBoxAnnotatableComponent>() { - static UseBing = true; private _dropDisposer?: DragManager.DragDropDisposer; private _disposers: { [name: string]: IReactionDisposer } = {}; private _annotationLayer: React.RefObject = React.createRef(); @@ -111,7 +102,6 @@ export class MapBox extends ViewBoxAnnotatableComponent(); @observable private searchMarkers: google.maps.Marker[] = []; @observable private searchBox = new window.google.maps.places.Autocomplete(this.inputRef.current!, options); @@ -139,11 +129,6 @@ export class MapBox extends ViewBoxAnnotatableComponent { - this.searchBox = searchBox; - }; - // iterate allMarkers to size, center, and zoom map to contain all markers private fitBounds = (map: google.maps.Map) => { const curBounds = map.getBounds() ?? new window.google.maps.LatLngBounds(); @@ -503,7 +488,6 @@ export class MapBox extends ViewBoxAnnotatableComponent { this._marqueeing = undefined; - this._isAnnotating = false; x !== undefined && y !== undefined && this._setPreviewCursor?.(x, y, false, false); }; @@ -813,33 +797,32 @@ export class MapBox extends ViewBoxAnnotatableComponent (this.bingSearchBarContents = newText)} placeholder="..." size="medium" text="Boston, MA" onKeyPress={(e: { key: any }) => console.log(e.key)} />} - - {!MapBox.UseBing ? null : } - - {!MapBox.UseBing ? null : this.placePinOn ? : } - - {!MapBox.UseBing ? null : ( - - {this.allMapPushpins - .filter(marker => marker.infoWindowOpen) - .map(marker => ( - // console.log('this is a marker window') - - ))} - - )} + ({})} editing onEdit={(newText: string) => (this.bingSearchBarContents = newText)} placeholder="..." text="Boston, MA" /> + + + + {this.placePinOn ? : } + + + {this.allMapPushpins + .filter(marker => marker.infoWindowOpen) + .map(marker => ( + // console.log('this is a marker window') + + ))} + + {/* {/* */} -
+
const apiKey = process.env.GOOGLE_MAPS; const script = document.createElement('script'); @@ -88,15 +85,14 @@ const options = { } as google.maps.places.AutocompleteOptions; @observer -export class MapBox2 extends ViewBoxAnnotatableComponent>() { - static UseBing = true; +export class MapBox extends ViewBoxAnnotatableComponent>() { private _dropDisposer?: DragManager.DragDropDisposer; private _disposers: { [name: string]: IReactionDisposer } = {}; private _annotationLayer: React.RefObject = React.createRef(); @observable private _overlayAnnoInfo: Opt; showInfo = action((anno: Opt) => (this._overlayAnnoInfo = anno)); public static LayoutString(fieldKey: string) { - return FieldView.LayoutString(MapBox2, fieldKey); + return FieldView.LayoutString(MapBox, fieldKey); } public get SidebarKey() { return this.fieldKey + '-sidebar'; @@ -557,113 +553,9 @@ export class MapBox2 extends ViewBoxAnnotatableComponent this._sidebarRef.current?.anchorMenuClick; savedAnnotations = () => this._savedAnnotations; - _bingSearchManager: any; - _bingMap: any; get MicrosoftMaps() { return (window as any).Microsoft.Maps; } - // uses Bing Search to retrieve lat/lng for a location. eg., - // const results = this.geocodeQuery(map.map, 'Philadelphia, PA'); - // to move the map to that location: - // const location = await this.geocodeQuery(this._bingMap, 'Philadelphia, PA'); - // this._bingMap.current.setView({ - // mapTypeId: this.MicrosoftMaps.MapTypeId.aerial, - // center: new this.MicrosoftMaps.Location(loc.latitude, loc.longitude), - // }); - // - bingGeocode = (map: any, query: string) => { - return new Promise<{ latitude: number; longitude: number }>((res, reject) => { - //If search manager is not defined, load the search module. - if (!this._bingSearchManager) { - //Create an instance of the search manager and call the geocodeQuery function again. - this.MicrosoftMaps.loadModule('Microsoft.Maps.Search', () => { - this._bingSearchManager = new this.MicrosoftMaps.Search.SearchManager(map.current); - res(this.bingGeocode(map, query)); - }); - } else { - this._bingSearchManager.geocode({ - where: query, - callback: action((r: any) => { - res(r.results[0].location); - }), - errorCallback: (e: any) => reject(), - }); - } - }); - }; - - - - - 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 },// TODO: latitude: this.rootDoc.latitude, longitude: this.rootDoc.longitude - mapTypeId: 'grayscale', - }; - bingMapOptions = { - navigationBarMode: 'square', - }; - bingMapReady = (map: any) => (this._bingMap = map.map); render() { const renderAnnotations = (docFilters?: () => string[]) => null; return ( @@ -673,57 +565,14 @@ export class MapBox2 extends ViewBoxAnnotatableComponent e.stopPropagation()} onPointerDown={async e => { e.button === 0 && !e.ctrlKey && e.stopPropagation(); - // just a simple test of bing maps geocode api - // const loc = await this.bingGeocode(this._bingMap, 'Philadelphia, PA'); - // this._bingMap.current.setView({ - // mapTypeId: this.MicrosoftMaps.MapTypeId.aerial, - // center: new this.MicrosoftMaps.Location(loc.latitude, loc.longitude), - // zoom: 15, - // }); }} - style={{ width: `calc(100% - ${this.sidebarWidthPercent})` }}> - - + style={{ width: `calc(100% - ${this.sidebarWidthPercent})`, pointerEvents: this.pointerEvents() }}>
{renderAnnotations(this.transparentFilter)}
{renderAnnotations(this.opaqueFilter)} {SnappingManager.GetIsDragging() ? null : renderAnnotations()} {this.annotationLayer} - - - {!MapBox2.UseBing ? null : - this.bingSearchBarContents = newText} - placeholder="..." - size="medium" - text="Boston, MA" - onKeyPress={e => console.log(e.key)} - />} - - {!MapBox2.UseBing ? null : - } - - - {!MapBox2.UseBing ? null : } - {this.allMapMarkers - .filter(marker => marker.infoWindowOpen) - .map(marker => ( - - ))} - - -
+
e.stopPropagation()} placeholder="Enter location" /> @@ -735,7 +584,8 @@ export class MapBox2 extends ViewBoxAnnotatableComponent (
- {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? null : ( {/* */} -
+