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.tsx287
1 files changed, 185 insertions, 102 deletions
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index d35a5ef2e..b01426bcd 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -201,6 +201,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
markerIcon.style.position = 'absolute';
markerIcon.innerHTML = 'Add';
controlUI.appendChild(markerIcon);
+
// Setup the click event listeners
controlUI.addEventListener('click', () => {
@@ -219,6 +220,27 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
controlDiv.appendChild(controlUI);
return controlDiv;
};
+ /**
+ * Load and render all map markers
+ * @param marker
+ * @param place
+ */
+ @action
+ private markerLoadHandler = (marker: google.maps.Marker, place: Doc) => {
+ place[Id] ? (this.markerMap[place[Id]] = marker) : null;
+ };
+
+ /**
+ * on clicking the map marker, set the selected place to the marker document & set infowindowopen to be true
+ * @param e
+ * @param place
+ */
+ @action
+ private markerClickHandler = (e: google.maps.MapMouseEvent, place: Doc) => {
+ // set which place was clicked
+ this.selectedPlace = place;
+ place.infoWindowOpen = true;
+ };
/**
* Place the marker on google maps & store the empty marker as a MapMarker Document in allMarkers list
@@ -299,27 +321,52 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
};
/**
- * Load and render all map markers
- * @param marker
- * @param place
+ * function that reads the place inputed from searchbox, then zoom in on the location that's been autocompleted;
+ * add a customized temporary marker on the map
*/
@action
- private markerLoadHandler = (marker: google.maps.Marker, place: Doc) => {
- place[Id] ? (this.markerMap[place[Id]] = marker) : null;
- };
+ private handlePlaceChanged = () => {
+ const place = this.searchBox.getPlace();
- /**
- * on clicking the map marker, set the selected place to the marker document & set infowindowopen to be true
- * @param e
- * @param place
- */
- @action
- private markerClickHandler = (e: google.maps.MapMouseEvent, place: Doc) => {
- // set which place was clicked
- this.selectedPlace = place;
- place.infoWindowOpen = true;
+ if (!place.geometry || !place.geometry.location) {
+ // user entered the name of a place that wasn't suggested & pressed the enter key, or place details request failed
+ window.alert("No details available for input: '" + place.name + "'");
+ return;
+ }
+
+ // zoom in on the location of the search result
+ if (place.geometry.viewport) {
+ this._map.fitBounds(place.geometry.viewport);
+ } else {
+ this._map.setCenter(place.geometry.location);
+ this._map.setZoom(17);
+ }
+
+ // customize icon => customized icon for the nature of the location selected
+ const icon = {
+ url: place.icon as string,
+ size: new google.maps.Size(71, 71),
+ origin: new google.maps.Point(0, 0),
+ anchor: new google.maps.Point(17, 34),
+ scaledSize: new google.maps.Size(25, 25),
+ };
+
+ // put temporary cutomized marker on searched location
+ this.searchMarkers.forEach(marker => {
+ marker.setMap(null);
+ });
+ this.searchMarkers = [];
+ this.searchMarkers.push(
+ new window.google.maps.Marker({
+ map: this._map,
+ icon,
+ title: place.name,
+ position: place.geometry.location,
+ })
+ );
};
+
/**
* Called when dragging documents into map sidebar or directly into infowindow; to create a map marker, ref to MapMarkerDocument in Documents.ts
* @param doc
@@ -398,52 +445,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
}
/**
- * function that reads the place inputed from searchbox, then zoom in on the location that's been autocompleted;
- * add a customized temporary marker on the map
- */
- @action
- private handlePlaceChanged = () => {
- const place = this.searchBox.getPlace();
-
- if (!place.geometry || !place.geometry.location) {
- // user entered the name of a place that wasn't suggested & pressed the enter key, or place details request failed
- window.alert("No details available for input: '" + place.name + "'");
- return;
- }
-
- // zoom in on the location of the search result
- if (place.geometry.viewport) {
- this._map.fitBounds(place.geometry.viewport);
- } else {
- this._map.setCenter(place.geometry.location);
- this._map.setZoom(17);
- }
-
- // customize icon => customized icon for the nature of the location selected
- const icon = {
- url: place.icon as string,
- size: new google.maps.Size(71, 71),
- origin: new google.maps.Point(0, 0),
- anchor: new google.maps.Point(17, 34),
- scaledSize: new google.maps.Size(25, 25),
- };
-
- // put temporary cutomized marker on searched location
- this.searchMarkers.forEach(marker => {
- marker.setMap(null);
- });
- this.searchMarkers = [];
- this.searchMarkers.push(
- new window.google.maps.Marker({
- map: this._map,
- icon,
- title: place.name,
- position: place.geometry.location,
- })
- );
- };
-
- /**
* Handles toggle of sidebar on click the little comment button
*/
@computed get sidebarHandle() {
@@ -595,71 +596,153 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
+ /**
+ *
+ *
+ * ERIC'S BING MAP CODE BELOW
+ *
+ *
+ *
+ **/
+
+ @observable
+ _bingLatitude:number | undefined;
+
+ @observable
+ _bingLongitude:number | undefined;
+
bingSearchBarContents: any = "Boston, MA"; // For Bing Maps: The contents of the Bing search bar (string)
+ geoDataRequestOptions = {
+ entityType: 'PopulatedPlace'
+ };
/*
* 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
- }
+ bingSearch = async() =>{ //TODO: PlaceResult, 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.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: location
+ });
+ // 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);
+ // }
+ // );
+
+ //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
+ }
+
+ // _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);
+
+ // // // this._bingMap.current.
+
+ // // 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);
+
+ // // // 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
+ // // }
+ // // });
+ // };
// /**
// * 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
+ // * @param location - this.MicrosoftMaps.Location
+ // * @param map - this._bingMap
// */
// @action
- // private placeMarker = (position: google.maps.LatLng, map: google.maps.Map) => {
- // const marker = new google.maps.Marker({
- // position: position,
- // map: map,
+ // private placeMarker = (location: any) => {
+ // const pin = new this.MicrosoftMaps.Pushpin(location, {
+ // title: this.bingSearchBarContents,
+ // subTitle: 'subtitle here',
+ // text: '1'
// });
- // map.panTo(position);
- // const mapMarker = Docs.Create.MapMarkerDocument(NumCast(position.lat()), NumCast(position.lng()), false, [], {});
- // this.addDocument(mapMarker, this.annotationKey);
- // };
+ // 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);
+ // };
+
+ /**
+ * View options for bing maps
+ */
bingViewOptions = {
center: { latitude: defaultCenter.lat, longitude: defaultCenter.lng },// TODO: latitude: this.rootDoc.latitude, longitude: this.rootDoc.longitude
mapTypeId: 'grayscale',
};
+
+ /**
+ * Map options
+ * TODO: CHANGE TO BE MORE USER-FRIENDLY
+ */
bingMapOptions = {
navigationBarMode: 'square',
};
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 05:32:46 +0000