diff options
| -rw-r--r-- | src/client/views/nodes/MapBox/MapBox.tsx | 109 |
1 files changed, 102 insertions, 7 deletions
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx index 1323048d9..0cf3ae326 100644 --- a/src/client/views/nodes/MapBox/MapBox.tsx +++ b/src/client/views/nodes/MapBox/MapBox.tsx @@ -61,6 +61,7 @@ const drawingManager = new google.maps.drawing.DrawingManager({ }, }); + const options = { fields: ["formatted_address", "geometry", "name"], // note: level of details is charged by item per retrieval, not recommended to return all fields strictBounds: false, @@ -88,6 +89,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps @computed get allMapMarkers() { return DocListCast(this.dataDoc[this.annotationKey]); }; @observable private allMarkers: Doc[] = []; //TODO: change all markers to a filter function to change + @observable private toggleAddMarker = false; @observable _showSidebar = false; @@ -123,14 +125,78 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps } + /** + * Custom control for add marker button + * @param controlDiv + * @param map + */ + private CenterControl = (controlDiv: Element) => { + // Set CSS for the control border. + const controlUI = document.createElement("div"); + + controlUI.style.backgroundColor = "#fff"; + controlUI.style.border = "2px solid #fff"; + controlUI.style.borderRadius = "3px"; + controlUI.style.cursor = "pointer"; + controlUI.style.marginTop = "8px"; + controlUI.style.marginBottom = "22px"; + controlUI.style.textAlign = "center"; + controlUI.title = "Click to add marker to the location your pointer is at"; + controlDiv.appendChild(controlUI); + + // Set CSS for the control interior. + const controlText = document.createElement("div"); + + controlText.style.color = "rgb(25,25,25)"; + controlText.style.fontFamily = "Roboto,Arial,sans-serif"; + controlText.style.fontSize = "16px"; + controlText.style.lineHeight = "38px"; + controlText.style.paddingLeft = "5px"; + controlText.style.paddingRight = "5px"; + controlText.innerHTML = "Add Marker"; + controlUI.appendChild(controlText); + + // Setup the click event listeners + controlUI.addEventListener("click", () => { + if (this.toggleAddMarker == true) { + this.toggleAddMarker = false; + console.log("add marker button status:" + this.toggleAddMarker); + controlUI.style.backgroundColor = "#fff"; + controlText.style.color = "rgb(25,25,25)"; + } else { + this.toggleAddMarker = true; + console.log("add marker button status:" + this.toggleAddMarker); + controlUI.style.backgroundColor = "#4476f7"; + controlText.style.color = "rgb(255,255,255)"; + }; + }); + } + + /** + * Place the marker on google 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()), [], {}); + this.allMarkers.push(mapMarker); + } /** * A function that examines allMapMarkers docs in the map node and form MapMarkers */ private fillMarkers = () => { this.allMapMarkers?.forEach(doc => { + console.log(doc); // search for if the map marker exists, else create marker if (doc.lat !== undefined && doc.lng !== undefined) { + console.log("image found! loading into marker document...") const marker = Docs.Create.MapMarkerDocument(NumCast(doc.lat), NumCast(doc.lng), [doc], {}) this.allMarkers.push(marker) } @@ -153,7 +219,10 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps @action private loadHandler = (map: google.maps.Map) => { this._map = map; - drawingManager.setMap(map); + const centerControlDiv = document.createElement("div"); + this.CenterControl(centerControlDiv); + map.controls[google.maps.ControlPosition.TOP_RIGHT].push(centerControlDiv); + //drawingManager.setMap(map); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( (position: GeolocationPosition) => { @@ -168,17 +237,43 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps alert("Your geolocation is not supported by browser.") } this.fitBounds(map); + console.log("content in the allMapsMarker array:"); + console.log(this.allMapMarkers); + console.log("content in the sidebarDocs array:"); + console.log(this.allSidebarDocs); this.fillMarkers(); + + // listener to addmarker event + this._map.addListener('click', (e) => { + console.log("add marker map status:" + this.toggleAddMarker); + if (this.toggleAddMarker == true) { + this.placeMarker(e.latLng, map) + console.log(this.allMarkers) + } + }) // this._map.addListener(drawingManager, 'markercomplete', this.addMarker) } + + + // @action + // private addMarkerToMap = (latLng: google.maps.LatLng) => { + // const marker = new google.maps.Marker({ + // map: this._map, + // position: latLng, + // draggable: true + // }); + // const newMapMarker = Docs.Create.MapMarkerDocument(NumCast(latLng.lat()), NumCast(latLng.lng()), [], {}); + // this.allMarkers.push(newMapMarker); + // } + //TODO: Is this a valid way for adding marker from drawing manager..? If so, how do we update the allMarkers & render so info window appears - @action - private addMarker = (marker: google.maps.Marker) => { - const markerPosition = marker.getPosition(); - const newMapMarker = Docs.Create.MapMarkerDocument(NumCast(markerPosition?.lat()), NumCast(markerPosition?.lng()), [], {}) - this.allMarkers.push(newMapMarker) - } + // @action + // private addMarker = (marker: google.maps.Marker) => { + // const markerPosition = marker.getPosition(); + // const newMapMarker = Docs.Create.MapMarkerDocument(NumCast(markerPosition?.lat()), NumCast(markerPosition?.lng()), [], {}) + // this.allMarkers.push(newMapMarker) + // } @action private markerLoadHandler = (marker: google.maps.Marker, place: Doc) => { |