aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/nodes/MapBox/MapBox.tsx95
-rw-r--r--src/client/views/nodes/MapBox/MapBox2.tsx20
2 files changed, 67 insertions, 48 deletions
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index cc7d12128..ac26fbe08 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -604,9 +604,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
*
*
**/
-
- @observable
- pins: any[] = []; // List of active pushpins
+
bingSearchBarContents: any = "Boston, MA"; // For Bing Maps: The contents of the Bing search bar (string)
@@ -617,13 +615,13 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
@action
updateView = ()=> {
this._bingMap.current.setView({
- center: new this.MicrosoftMaps.Location(this.rootDoc.latitude, this.rootDoc.longitude),
+ center: new this.MicrosoftMaps.Location(this.dataDoc.latitude, this.dataDoc.longitude),
// zoom: location
});
}
- infobox:any;
+ infobox:any;
@action
createPushpin = (latitude:number, longitude:number) =>{
var pin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(latitude, longitude), {
@@ -641,13 +639,17 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
this.infobox.setMap(this._bingMap.current);
//Store some metadata with the pushpin.
pin.metadata = {
- title: 'Pin Title',
- description: 'Pin discription'
+ title: this.bingSearchBarContents,
+ description: 'Pin description'
};
//Add a click event handler to the pushpin.
this.MicrosoftMaps.Events.addHandler(pin, 'click', this.pushpinClicked);
//Add pushpin to the map.
this._bingMap.current.entities.push(pin);
+
+ // Stores the pushpin as a MapMarkerDocument
+ const mapMarker = Docs.Create.MapMarkerDocument(NumCast(latitude), NumCast(longitude), false, [], {});
+ this.addDocument(mapMarker, this.annotationKey);
}
@@ -656,13 +658,20 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
if (e.target.metadata) {
//Set the infobox options with the metadata of the pushpin. // HOW DO I GET THE CORRECT INFOBOX FOR THIS PIN? CAN I use this e?
this.infobox.setOptions({
- location: e.target.getLocation(),
- title: e.target.metadata.title,
- description: e.target.metadata.description,
- visible: true
+ location: e.target.getLocation(),
+ title: e.target.metadata.title,
+ description: e.target.metadata.description,
+ visible: true
});
}
- }
+ }
+
+ /**
+ * Returns a list of MapMarkerDocument
+ */
+ @computed get allMapPushpins() {
+ return DocListCast(this.dataDoc[this.annotationKey]);
+ }
/*
* For Bing Maps
@@ -670,20 +679,18 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
* Finds the geocode of the searched contents and sets location to that location
**/
@action
- bingSearch = async() =>{ //TODO: PlaceResult, searching more formally
+ bingSearch = async() =>{ //TODO: searching more formally
// 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;
+ this.dataDoc.latitude = location.latitude;
+ this.dataDoc.longitude = location.longitude;
this.updateView();
-
-
-
- //Create custom Pushpin TODO: MAKE THIS ITS OWN METHOD
+ // Each marker be its own document -- pin and info
+
this.createPushpin(location.latitude, location.longitude);
@@ -692,6 +699,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
// this._bingMap.current.entities.push(temp[i]);
// }
}
+ // const mapMarker = Docs.Create.MapMarkerDocument(NumCast(location.latitude), NumCast(location.longitude), false, [], {});
+ // this.addDocument(mapMarker, this.annotationKey);
// this.MicrosoftMaps.SpatialDataService.GeoDataAPIManager.getBoundary(
@@ -710,6 +719,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
// }
// );
+
// _loadPending = true;
// /**
// * store a reference to google map instance
@@ -746,27 +756,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
// };
- // /**
- // * For Bing Maps
- // * Place the marker on bing maps & store the empty marker as a MapMarker Document in allMarkers list
- // * @param location - this.MicrosoftMaps.Location
- // * @param map - this._bingMap
- // */
- // @action
- // private placeMarker = (location: any) => {
- // const pin = new this.MicrosoftMaps.Pushpin(location, {
- // title: this.bingSearchBarContents,
- // subTitle: 'subtitle here',
- // text: '1'
- // });
-
- // this._bingMap.current.panTo(location);
- // this._bingMap.current.entities.push(pin);
-
- // // const mapMarker = Docs.Create.MapMarkerDocument(NumCast(location.latitude), NumCast(location.longitude), false, [], {});
- // // this.addDocument(mapMarker, this.annotationKey);
- // };
-
@@ -774,17 +763,20 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
* View options for bing maps
*/
bingViewOptions = {
- center: { latitude: defaultCenter.lat, longitude: defaultCenter.lng },// TODO: latitude: this.rootDoc.latitude, longitude: this.rootDoc.longitude
+ center: { latitude: this.dataDoc.latitude ?? defaultCenter.lat , longitude: this.dataDoc.longitude ?? defaultCenter.lng},
+ zoom: this.dataDoc.latitude ?? 10,
mapTypeId: 'grayscale',
};
/**
* Map options
- * TODO: CHANGE TO BE MORE USER-FRIENDLY
*/
bingMapOptions = {
navigationBarMode: 'square',
+ backgroundColor:'#f1f3f4',
+ enableInertia:true,
};
+
bingMapReady = (map: any) => (this._bingMap = map.map);
render() {
const renderAnnotations = (docFilters?: () => string[]) => null;
@@ -826,10 +818,23 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
<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} />}
+ {this.allMapMarkers
+ .filter(marker => marker.infoWindowOpen)
+ .map(marker => (
+ <MapBoxInfoWindow
+ key={marker[Id]}
+ {...OmitKeys(this.props, ['NativeWidth', 'NativeHeight', 'setContentView']).omit}
+ place={marker}
+ markerMap={this.markerMap}
+ PanelWidth={this.infoWidth}
+ PanelHeight={this.infoHeight}
+ moveDocument={this.moveDocument}
+ isAnyChildContentActive={this.isAnyChildContentActive}
+ whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
+ />
+ ))}
+
<div style={{ display: MapBox.UseBing ? 'none' : undefined }}>
<GoogleMap mapContainerStyle={mapContainerStyle} onZoomChanged={this.zoomChanged} onCenterChanged={this.centered} onLoad={this.loadHandler} options={mapOptions}>
diff --git a/src/client/views/nodes/MapBox/MapBox2.tsx b/src/client/views/nodes/MapBox/MapBox2.tsx
index c11f76439..4c28d4df1 100644
--- a/src/client/views/nodes/MapBox/MapBox2.tsx
+++ b/src/client/views/nodes/MapBox/MapBox2.tsx
@@ -703,11 +703,25 @@ export class MapBox2 extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
{!MapBox2.UseBing ? null :
<input type="button" value="Search"
onClick={this.bingSearch}/>}
-
-
-
+
{!MapBox2.UseBing ? null : <BingMapsReact onMapReady={this.bingMapReady} bingMapsKey={bingApiKey} height="100%" mapOptions={this.bingMapOptions} width="100%" viewOptions={this.bingViewOptions} />}
+ {this.allMapMarkers
+ .filter(marker => marker.infoWindowOpen)
+ .map(marker => (
+ <MapBoxInfoWindow
+ key={marker[Id]}
+ {...OmitKeys(this.props, ['NativeWidth', 'NativeHeight', 'setContentView']).omit}
+ place={marker}
+ markerMap={this.markerMap}
+ PanelWidth={this.infoWidth}
+ PanelHeight={this.infoHeight}
+ moveDocument={this.moveDocument}
+ isAnyChildContentActive={this.isAnyChildContentActive}
+ whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
+ />
+ ))}
+
<div style={{ display: MapBox2.UseBing ? 'none' : undefined }}>
<GoogleMap mapContainerStyle={mapContainerStyle} onZoomChanged={this.zoomChanged} onCenterChanged={this.centered} onLoad={this.loadHandler} options={mapOptions}>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 20:40:44 +0000