aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/MapBox/MapBox.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/MapBox/MapBox.tsx')
-rw-r--r--src/client/views/nodes/MapBox/MapBox.tsx180
1 files changed, 81 insertions, 99 deletions
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index ac26fbe08..1892a5b61 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -624,29 +624,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
infobox:any;
@action
createPushpin = (latitude:number, longitude:number) =>{
- var pin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(latitude, longitude), {
- title: this.bingSearchBarContents,
- subTitle: 'subtitle here',
- text: '1'
- });
-
- //Create an infobox at the pin
- this.infobox = new this.MicrosoftMaps.Infobox(new this.MicrosoftMaps.Location(latitude, longitude), {
- visible: false
- });
-
- //Assign the infobox to a map instance.
- this.infobox.setMap(this._bingMap.current);
- //Store some metadata with the pushpin.
- pin.metadata = {
- 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);
@@ -666,6 +643,13 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
}
}
+ //PushpinClicked using MapBoxInfoWindow
+ private pushpinClicked2 = (e: { target: { metadata: { title: any; description: any; }; getLocation: () => any; }; }, pin: Doc) => {
+ // // set which place was clicked
+ // this.selectedPlace = place;
+ pin.infoWindowOpen = true;
+ }
+
/**
* Returns a list of MapMarkerDocument
*/
@@ -682,81 +666,73 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
bingSearch = async() =>{ //TODO: searching more formally
// clear all pins
- // this._bingMap.current.entities.clear();
+ this._bingMap.current.entities.clear();
+ //TODO: clear all infoboxes
const location = await this.bingGeocode(this._bingMap, this.bingSearchBarContents);
this.dataDoc.latitude = location.latitude;
this.dataDoc.longitude = location.longitude;
this.updateView();
- // Each marker be its own document -- pin and info
-
- this.createPushpin(location.latitude, location.longitude);
-
- // // Adds all pins to the map
- // for (let i = 0; i < temp.length; i++) {
- // 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(
- // this._bingMap.current.getCenter(),
- // this.geoDataRequestOptions,
- // this._bingMap.current,
- // function (data) {
- // if (data.results && data.results.length > 0) {
- // map.entities.push(data.results[0].Polygons);
- // }
- // },
- // null,
- // function errCallback(networkStatus, statusMessage) {
- // console.log(networkStatus);
- // console.log(statusMessage);
- // }
- // );
- // _loadPending = true;
- // /**
- // * 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
- // *
- // */
- // @action
- // private loadHandler = () => {
-
- // // this._loadPending = true;
-
- // // // for making GoogleMap markers
- // // // const centerControlDiv = this.CenterControl();
- // // // map.controls[google.maps.ControlPosition.TOP_RIGHT].push(centerControlDiv);
+ // // Creates a temporary pin but does not add it to the dataDoc, UNCOMMENT LATER
+ // var pin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(location.latitude, location.longitude), {
+ // title: this.bingSearchBarContents,
+ // subTitle: 'subtitle here',
+ // text: '1',
+ // color: 'blue'
+ // });
+ // this._bingMap.current.entities.push(pin);
- // // // this._bingMap.current.
+ this.createPushpin(location.latitude, location.longitude); // Creates an actual pushpin
+ this.addAllPins(); // Adds all pushpins in the datadoc onto the map
- // // map.setZoom(NumCast(this.dataDoc.mapZoom, 2.5));
- // // map.setCenter(new google.maps.LatLng(NumCast(this.dataDoc.mapLat), NumCast(this.dataDoc.mapLng)));
- // // setTimeout(() => {
- // // if (this._loadPending && this._map.getBounds()) {
- // // this._loadPending = false;
- // // this.layoutDoc.fitContentsToBox && this.fitBounds(this._map);
- // // }
- // // }, 250);
+ console.log(this.allMapPushpins
+ .filter(marker => marker.infoWindowOpen)
+ .length)
+ }
- // // // listener to addmarker event, creates pushpin onClick
- // // this._bingMap.addListener('click', (e: MouseEvent) => {
- // // if (this.toggleAddMarker === true) {
- // // this.placeMarker((e as any).latLng, map); //TODO: Implement placeMarker
- // // }
- // // });
- // };
+ /**
+ * Adds all pushpins in dataDoc onto the map
+ */
+ @action
+ addAllPins = () =>{
+ this.allMapPushpins.map(pin => this.createInfobox(pin));
+ }
+ @action
+ createInfobox = (pin:any) =>{
+ var pushPin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(pin.lat, pin.lng), {
+ title: this.bingSearchBarContents,
+ subTitle: 'subtitle here',
+ text: '1'
+ });
+ this._bingMap.current.entities.push(pushPin);
+ //Create an infobox at the pin
+ this.infobox = new this.MicrosoftMaps.Infobox(new this.MicrosoftMaps.Location(pin.lat, pin.lng), {
+ visible: false
+ });
+ //Assign the infobox to a map instance.
+ this.infobox.setMap(this._bingMap.current);
+ //Store some metadata with the pushpin.
+ pushPin.metadata = {
+ title: pushPin.title,
+ description: 'Pin description'
+ };
+ //Add a click event handler to the pushpin.
+ // For bing maps infobox
+ // this.MicrosoftMaps.Events.addHandler(pushPin, 'click', this.pushpinClicked);
+
+ // For our infowindow
+ this.MicrosoftMaps.Events.addHandler(pushPin, 'click', (e:any) => this.pushpinClicked2(e, pushPin));
+
+ }
+
+
/**
@@ -818,22 +794,28 @@ 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}
- />
- ))}
+ {!MapBox.UseBing ? null :
+ <BingMapsReact onMapReady={this.bingMapReady} bingMapsKey={bingApiKey} height="100%" mapOptions={this.bingMapOptions} width="100%" viewOptions={this.bingViewOptions} >
+ {this.allMapPushpins
+ .filter(marker => marker.infoWindowOpen)
+ .map(marker => (
+ console.log('this is a marker window')
+ // <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}
+ // />
+ ))}
+ </BingMapsReact>
+
+ }
+
<div style={{ display: MapBox.UseBing ? 'none' : undefined }}>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 17:37:01 +0000