aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/MapBox/MapAnchorMenu.tsx')
-rw-r--r--src/client/views/nodes/MapBox/MapAnchorMenu.tsx76
1 files changed, 61 insertions, 15 deletions
diff --git a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
index fca3998c8..2c2879900 100644
--- a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
+++ b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
@@ -32,6 +32,9 @@ import { Autocomplete, Checkbox, FormControlLabel, TextField } from '@mui/materi
import { MapboxApiUtility, TransportationType } from './MapboxApiUtility';
import { MapBox } from './MapBox';
import { List } from '../../../../fields/List';
+import { MapboxColor, MarkerIcons } from './MarkerIcons';
+import { CirclePicker } from 'react-color';
+import { Position } from 'geojson';
type MapAnchorMenuType = 'standard' | 'route' | 'calendar' | 'customize';
@@ -58,9 +61,13 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
public DisplayRoute: (routeInfoMap: Record<TransportationType, any> | undefined, type: TransportationType) => void = unimplementedFunction;
public HideRoute: () => void = unimplementedFunction;
- public AddNewRouteToMap: (coordinates: List<any>, origin: string, destination: string) => void = unimplementedFunction;
+ public AddNewRouteToMap: (coordinates: Position[], origin: string, destination: string) => void = unimplementedFunction;
public CreatePin: (feature: any) => void = unimplementedFunction;
+ public UpdateMarkerColor: (color: string) => void = unimplementedFunction;
+ public UpdateMarkerIcon: (iconKey: string) => void = unimplementedFunction;
+
+
private allMapPinDocs: Doc[] = [];
@@ -151,11 +158,13 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
@action
CustomizeClick = () => {
+ this.currentRouteInfoMap = undefined;
this.menuType = 'customize';
}
@action
BackClick = () => {
+ this.currentRouteInfoMap = undefined;
this.menuType = 'standard';
}
@@ -238,11 +247,26 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
HandleAddRouteClick = () => {
if (this.currentRouteInfoMap && this.selectedTransportationType && this.selectedDestinationFeature){
const coordinates = this.currentRouteInfoMap[this.selectedTransportationType].coordinates;
- this.AddNewRouteToMap(this.currentRouteInfoMap![this.selectedTransportationType].coordinates, this.title ?? "", this.selectedDestinationFeature.place_name);
+ console.log(coordinates);
+ this.AddNewRouteToMap(coordinates, this.title ?? "", this.selectedDestinationFeature.place_name);
this.HideRoute();
}
}
+ getMarkerIcon = (): JSX.Element | undefined => {
+ if (this.pinDoc){
+ const markerType = StrCast(this.pinDoc.markerType);
+ const markerColor = StrCast(this.pinDoc.markerColor);
+
+ if (markerType.startsWith("MAPBOX")){
+ return MarkerIcons.getMapboxIcon(markerColor as MapboxColor);
+ } else { // font awesome icon
+ return MarkerIcons.getFontAwesomeIcon(markerType, markerColor);
+ }
+ }
+ return undefined;
+ }
+
render() {
const buttons = (
@@ -326,19 +350,6 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
color={SettingsManager.userColor}
/>
<IconButton
- tooltip="Upload image" //
- onPointerDown={this.TriggerFileInputClick}
- icon={<FontAwesomeIcon icon={faUpload as IconLookup} />}
- color={SettingsManager.userColor}
- />
- <input
- type="file"
- accept="image/*" // Optionally, specify accepted file types
- ref={this._fileInputRef}
- style={{ display: "none" }}
- onChange={() => {}}
- />
- <IconButton
tooltip="Revert to original" //
onPointerDown={this.BackClick}
icon={<FontAwesomeIcon icon={faArrowsRotate as IconLookup} />}
@@ -469,6 +480,41 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
}
+ {this.menuType === 'customize' &&
+ <div className='customized-marker-container'>
+ <div className='current-marker-container'>
+ <div>Current Marker: </div>
+ <div>
+ {this.getMarkerIcon()}
+ </div>
+ </div>
+ <div className='color-picker-container' style={{marginBottom: '10px'}}>
+ <CirclePicker
+ circleSize={15}
+ circleSpacing={7}
+ width='100%'
+ onChange={(color) => console.log(color.hex)}
+ />
+ </div>
+ <div className='all-markers-container'>
+ {Object.keys(MarkerIcons.FAMarkerIconsMap).map((iconKey) => {
+ const icon = MarkerIcons.getFontAwesomeIcon(iconKey);
+ if (icon){
+ return (
+ <div key={iconKey} className='marker-icon'>
+ <IconButton
+ onPointerDown={() => {}}
+ icon={MarkerIcons.getFontAwesomeIcon(iconKey, 'white')}
+ />
+ </div>
+ )
+ }
+ return null;
+ })}
+ </div>
+ <div style={{width: '100%', height:'3px', color: 'white'}}></div>
+ </div>
+ }
{buttons}
</div>
, true);