aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/client/views/InkTranscription.tsx4
-rw-r--r--src/client/views/nodes/MapBox/AnimationUtility.ts16
-rw-r--r--src/client/views/nodes/MapBox/MapAnchorMenu.tsx38
-rw-r--r--src/client/views/nodes/MapBox/MapBox.tsx59
4 files changed, 56 insertions, 61 deletions
diff --git a/src/client/views/InkTranscription.tsx b/src/client/views/InkTranscription.tsx
index c5a9d3ba4..e800e0ae3 100644
--- a/src/client/views/InkTranscription.tsx
+++ b/src/client/views/InkTranscription.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
import { imageUrlToBase64 } from '../../ClientUtils';
import { aggregateBounds } from '../../Utils';
import { Doc, DocListCast } from '../../fields/Doc';
-import { InkData, InkField, InkTool } from '../../fields/InkField';
+import { InkData, InkField, InkInkTool, InkTool } from '../../fields/InkField';
import { Cast, DateCast, ImageCast, NumCast } from '../../fields/Types';
import { ImageField, URLField } from '../../fields/URLField';
import { gptHandwriting } from '../apis/gpt/GPT';
@@ -297,7 +297,7 @@ export class InkTranscription extends React.Component {
*/
createInkGroup() {
// TODO nda - if document being added to is a inkGrouping then we can just add to that group
- if (Doc.ActiveTool === InkTool.Write) {
+ if (Doc.ActiveTool === InkTool.Ink && Doc.ActiveInk === InkInkTool.Write) {
CollectionFreeFormView.collectionsWithUnprocessedInk.forEach(ffView => {
// TODO: nda - will probably want to go through ffView unprocessed docs and then see if any of the inksToGroup docs are in it and only use those
const selected = ffView.unprocessedDocs;
diff --git a/src/client/views/nodes/MapBox/AnimationUtility.ts b/src/client/views/nodes/MapBox/AnimationUtility.ts
index 3eac50f1f..a3ac68b99 100644
--- a/src/client/views/nodes/MapBox/AnimationUtility.ts
+++ b/src/client/views/nodes/MapBox/AnimationUtility.ts
@@ -1,11 +1,12 @@
import * as turf from '@turf/turf';
-import { Position } from '@turf/turf';
import * as d3 from 'd3';
-import { Feature, GeoJsonProperties, Geometry } from 'geojson';
-import mapboxgl, { MercatorCoordinate } from 'mapbox-gl';
+import { Feature, GeoJsonProperties, Geometry, LineString } from 'geojson';
+import { MercatorCoordinate } from 'mapbox-gl';
import { action, computed, makeObservable, observable, runInAction } from 'mobx';
import { MapRef } from 'react-map-gl';
+export type Position = [number, number];
+
export enum AnimationStatus {
START = 'start',
RESUME = 'resume',
@@ -23,7 +24,7 @@ export class AnimationUtility {
private ROUTE_COORDINATES: Position[] = [];
@observable
- private PATH?: turf.helpers.Feature<turf.helpers.LineString, turf.helpers.Properties> = undefined;
+ private PATH?: Feature<LineString> = undefined; // turf.helpers.Feature<turf.helpers.LineString, turf.helpers.Properties> = undefined;
private PATH_DISTANCE: number = 0;
private FLY_IN_START_PITCH = 40;
@@ -165,7 +166,8 @@ export class AnimationUtility {
}
@action
- public setPath = (path: turf.helpers.Feature<turf.helpers.LineString, turf.helpers.Properties>) => {
+ public setPath = (path: Feature<LineString>) => {
+ // turf.helpers.Feature<turf.helpers.LineString, turf.helpers.Properties>) => {
this.PATH = path;
};
@@ -178,7 +180,7 @@ export class AnimationUtility {
this.ROUTE_COORDINATES = routeCoordinates;
this.PATH = turf.lineString(routeCoordinates);
- this.PATH_DISTANCE = turf.length(this.PATH);
+ this.PATH_DISTANCE = turf.length(this.PATH as Feature<LineString>);
this.terrainDisplayed = terrainDisplayed;
const bearing = this.calculateBearing(
@@ -232,7 +234,7 @@ export class AnimationUtility {
if (!this.PATH) return;
// calculate the distance along the path based on the animationPhase
- const alongPath = turf.along(this.PATH, this.PATH_DISTANCE * animationPhase).geometry.coordinates;
+ const alongPath = turf.along(this.PATH as Feature<LineString>, this.PATH_DISTANCE * animationPhase).geometry.coordinates;
const lngLat = {
lng: alongPath[0],
diff --git a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
index cef202256..8079d96ea 100644
--- a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
+++ b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
@@ -1,9 +1,7 @@
-/* eslint-disable react/button-has-type */
import { IconLookup, faAdd, faArrowDown, faArrowLeft, faArrowsRotate, faBicycle, faCalendarDays, faCar, faDiamondTurnRight, faEdit, faPersonWalking, faRoute } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Autocomplete, Checkbox, FormControlLabel, TextField } from '@mui/material';
import { IconButton } from '@dash/components';
-import { Position } from 'geojson';
import { IReactionDisposer, ObservableMap, action, makeObservable, observable, reaction, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
@@ -19,6 +17,8 @@ import { DocumentView } from '../DocumentView';
import './MapAnchorMenu.scss';
import { MapboxApiUtility, TransportationType } from './MapboxApiUtility';
import { MarkerIcons } from './MarkerIcons';
+import { LngLatLike } from 'mapbox-gl';
+import { Position } from './AnimationUtility';
// import { GPTPopup, GPTPopupMode } from './../../GPTPopup/GPTPopup';
type MapAnchorMenuType = 'standard' | 'routeCreation' | 'calendar' | 'customize' | 'route';
@@ -44,10 +44,9 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
// public MakeTargetToggle: () => void = unimplementedFunction;
// public ShowTargetTrail: () => void = unimplementedFunction;
public IsTargetToggler: () => boolean = returnFalse;
-
- public DisplayRoute: (routeInfoMap: Record<TransportationType, any> | undefined, type: TransportationType) => void = unimplementedFunction;
- public AddNewRouteToMap: (coordinates: Position[], origin: string, destination: any, createPinForDestination: boolean) => void = unimplementedFunction;
- public CreatePin: (feature: any) => void = unimplementedFunction;
+ public DisplayRoute: (routeInfoMap: Record<TransportationType, { coordinates: Position[] }> | undefined, type: TransportationType) => void = unimplementedFunction;
+ public AddNewRouteToMap: (coordinates: Position[], origin: string, destination: { place_name: string; center: number[] }, createPinForDestination: boolean) => void = unimplementedFunction;
+ public CreatePin: (feature: { place_name: string; center: LngLatLike; properties: { wikiData: unknown } }) => void = unimplementedFunction;
public UpdateMarkerColor: (color: string) => void = unimplementedFunction;
public UpdateMarkerIcon: (iconKey: string) => void = unimplementedFunction;
@@ -212,19 +211,19 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
};
@observable
- destinationFeatures: any[] = [];
+ destinationFeatures: { place_name: string; center: number[] }[] = [];
@observable
destinationSelected: boolean = false;
@observable
- selectedDestinationFeature: any = undefined;
+ selectedDestinationFeature?: { place_name: string; center: number[] } = undefined;
@observable
createPinForDestination: boolean = true;
@observable
- currentRouteInfoMap: Record<TransportationType, any> | undefined = undefined;
+ currentRouteInfoMap: Record<TransportationType, { coordinates: Position[]; duration: number; distance: number }> | undefined = undefined;
@observable
selectedTransportationType: TransportationType = 'driving';
@@ -238,7 +237,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
};
@action
- handleSelectedDestinationFeature = (destinationFeature: any) => {
+ handleSelectedDestinationFeature = (destinationFeature?: { place_name: string; center: number[] }) => {
this.selectedDestinationFeature = destinationFeature;
};
@@ -258,7 +257,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
}
};
- getRoutes = async (destinationFeature: any) => {
+ getRoutes = async (destinationFeature: { center: number[] }) => {
const currentPinLong: number = NumCast(this.pinDoc?.longitude);
const currentPinLat: number = NumCast(this.pinDoc?.latitude);
@@ -280,8 +279,6 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
HandleAddRouteClick = () => {
if (this.currentRouteInfoMap && this.selectedTransportationType && this.selectedDestinationFeature) {
const { coordinates } = this.currentRouteInfoMap[this.selectedTransportationType];
- console.log(coordinates);
- console.log(this.selectedDestinationFeature);
this.AddNewRouteToMap(coordinates, this.title ?? '', this.selectedDestinationFeature, this.createPinForDestination);
}
};
@@ -441,27 +438,26 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
<Autocomplete
fullWidth
id="route-destination-searcher"
- onInputChange={(e: any, searchText: any) => this.handleDestinationSearchChange(searchText)}
- onChange={(e: any, feature: any, reason: any) => {
+ onInputChange={(e, searchText) => this.handleDestinationSearchChange(searchText)}
+ onChange={(e, feature: unknown, reason: unknown) => {
if (reason === 'clear') {
this.handleSelectedDestinationFeature(undefined);
} else if (reason === 'selectOption') {
- this.handleSelectedDestinationFeature(feature);
+ this.handleSelectedDestinationFeature(feature as { place_name: string; center: number[] });
}
}}
options={this.destinationFeatures.filter(feature => feature.place_name).map(feature => feature)}
- getOptionLabel={(feature: any) => feature.place_name}
- // eslint-disable-next-line react/jsx-props-no-spreading
- renderInput={(params: any) => <TextField {...params} placeholder="Enter a destination" />}
+ getOptionLabel={(feature: unknown) => (feature as { place_name: string }).place_name}
+ renderInput={params => <TextField {...params} placeholder="Enter a destination" />}
/>
{!this.selectedDestinationFeature
? null
- : !this.allMapPinDocs.some(pinDoc => pinDoc.title === this.selectedDestinationFeature.place_name) && (
+ : !this.allMapPinDocs.some(pinDoc => pinDoc.title === this.selectedDestinationFeature?.place_name) && (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '5px' }}>
<FormControlLabel label="Create pin for destination?" control={<Checkbox color="success" checked={this.createPinForDestination} onChange={this.toggleCreatePinForDestinationCheckbox} />} />
</div>
)}
- <button id="get-routes-button" disabled={!this.selectedDestinationFeature} onClick={() => this.getRoutes(this.selectedDestinationFeature)}>
+ <button id="get-routes-button" disabled={!this.selectedDestinationFeature} onClick={() => this.selectedDestinationFeature && this.getRoutes(this.selectedDestinationFeature)}>
Get routes
</button>
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index c4bb7c47d..541b41bf7 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -4,14 +4,13 @@ import { Checkbox, FormControlLabel, TextField } from '@mui/material';
import * as turf from '@turf/turf';
import { IconButton, Size, Type } from '@dash/components';
import * as d3 from 'd3';
-import { Feature, FeatureCollection, GeoJsonProperties, Geometry, LineString, Position } from 'geojson';
-import mapboxgl, { LngLatBoundsLike, MapLayerMouseEvent } from 'mapbox-gl';
+import { Feature, FeatureCollection, GeoJsonProperties, Geometry, LineString } from 'geojson';
+import { LngLatBoundsLike, LngLatLike, MapLayerMouseEvent } from 'mapbox-gl';
import { IReactionDisposer, ObservableMap, action, autorun, computed, makeObservable, observable, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { CirclePicker, ColorResult } from 'react-color';
import { Layer, MapProvider, MapRef, Map as MapboxMap, Marker, Source, ViewState, ViewStateChangeEvent } from 'react-map-gl';
-import { MarkerEvent } from 'react-map-gl/dist/esm/types';
import { ClientUtils, setupMoveUpEvents } from '../../../../ClientUtils';
import { emptyFunction } from '../../../../Utils';
import { Doc, DocListCast, Field, LinkedTo, Opt } from '../../../../fields/Doc';
@@ -30,11 +29,12 @@ import { DocumentView } from '../DocumentView';
import { FieldView, FieldViewProps } from '../FieldView';
import { FocusViewOptions } from '../FocusViewOptions';
import { fastSpeedIcon, mediumSpeedIcon, slowSpeedIcon } from './AnimationSpeedIcons';
-import { AnimationSpeed, AnimationStatus, AnimationUtility } from './AnimationUtility';
+import { AnimationSpeed, AnimationStatus, AnimationUtility, Position } from './AnimationUtility';
import { MapAnchorMenu } from './MapAnchorMenu';
import './MapBox.scss';
import { MapboxApiUtility, TransportationType } from './MapboxApiUtility';
import { MarkerIcons } from './MarkerIcons';
+import { RichTextField } from '../../../../fields/RichTextField';
// import { GeocoderControl } from './GeocoderControl';
// amongus
@@ -76,7 +76,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
makeObservable(this);
}
- @observable _featuresFromGeocodeResults: any[] = [];
+ @observable _featuresFromGeocodeResults: { place_name: string; center: LngLatLike | undefined }[] = [];
@observable _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>();
@observable _selectedPinOrRoute: Doc | undefined = undefined; // The pin that is selected
@observable _mapReady = false;
@@ -100,7 +100,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
geometry: { type: 'LineString', coordinates: [] },
};
- @observable path: turf.helpers.Feature<turf.helpers.LineString, turf.helpers.Properties> = {
+ @observable path: Feature<LineString> = {
+ // turf.helpers.Feature<turf.helpers.LineString, turf.helpers.Properties> = {
type: 'Feature',
geometry: { type: 'LineString', coordinates: [] },
properties: {},
@@ -168,7 +169,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
autorun(() => {
const animationUtil = this._animationUtility;
const concattedCoordinates = geometry.coordinates.concat(originalCoordinates.slice(endIndex));
- const newFeature: Feature<LineString, turf.Properties> = {
+ const newFeature: Feature<LineString> = {
type: 'Feature',
properties: {},
geometry: {
@@ -445,7 +446,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
/// this should use SELECTED pushpin for lat/long if there is a selection, otherwise CENTER
const anchor = Docs.Create.ConfigDocument({
title: 'MapAnchor:' + this.Document.title,
- text: (StrCast(this._selectedPinOrRoute?.map) || StrCast(this.Document.map) || 'map location') as any,
+ text: (StrCast(this._selectedPinOrRoute?.map) || StrCast(this.Document.map) || 'map location') as unknown as RichTextField, // strings are allowed for text
config_latitude: NumCast((existingPin ?? this._selectedPinOrRoute)?.latitude ?? this.dataDoc.latitude),
config_longitude: NumCast((existingPin ?? this._selectedPinOrRoute)?.longitude ?? this.dataDoc.longitude),
config_map_zoom: NumCast(this.dataDoc.map_zoom),
@@ -464,7 +465,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
return this.Document;
};
- map_docToPinMap = new Map<Doc, any>();
+ map_docToPinMap = new Map<Doc, unknown>();
map_pinHighlighted = new Map<Doc, boolean>();
/*
@@ -541,15 +542,17 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
* Creates Pushpin doc and adds it to the list of annotations
*/
@action
- createPushpin = undoable((latitude: number, longitude: number, location?: string, wikiData?: string) => {
+ createPushpin = undoable((center: LngLatLike, location?: string, wikiData?: string) => {
+ const lat = 'lat' in center ? center.lat : center[0];
+ const lon = 'lng' in center ? center.lng : 'lon' in center ? center.lon : center[1];
// Stores the pushpin as a MapMarkerDocument
const pushpin = Docs.Create.PushpinDocument(
- NumCast(latitude),
- NumCast(longitude),
+ lat,
+ lon,
false,
[],
{
- title: location ?? `lat=${NumCast(latitude)},lng=${NumCast(longitude)}`,
+ title: location ?? `lat=${lat},lng=${lon}`,
map: location,
description: '',
wikiData: wikiData,
@@ -567,7 +570,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
}, 'createpin');
@action
- createMapRoute = undoable((coordinates: Position[], originName: string, destination: any, createPinForDestination: boolean) => {
+ createMapRoute = undoable((coordinates: Position[], originName: string, destination: { place_name: string; center: number[] }, createPinForDestination: boolean) => {
if (originName !== destination.place_name) {
const mapRoute = Docs.Create.MapRouteDocument(false, [], { title: `${originName} --> ${destination.place_name}`, routeCoordinates: JSON.stringify(coordinates) });
this.addDocument(mapRoute, this.annotationKey);
@@ -586,23 +589,21 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
}, 'createmaproute');
@action
- searchbarKeyDown = (e: any) => {
+ searchbarKeyDown = (e: React.KeyboardEvent) => {
if (e.key === 'Enter' && this._featuresFromGeocodeResults) {
- const center = this._featuresFromGeocodeResults[0]?.center;
+ const center = this._featuresFromGeocodeResults[0];
this._featuresFromGeocodeResults = [];
- setTimeout(() => center && this._mapRef.current?.flyTo({ center }));
+ setTimeout(() => center && this._mapRef.current?.flyTo(center));
}
};
@action
- addMarkerForFeature = (feature: any) => {
+ addMarkerForFeature = (feature: { place_name: string; center: LngLatLike | undefined; properties?: { wikiData: unknown } }) => {
const location = feature.place_name;
if (feature.center) {
- const longitude = feature.center[0];
- const latitude = feature.center[1];
const wikiData = feature.properties?.wikiData;
- this.createPushpin(latitude, longitude, location, wikiData);
+ this.createPushpin(feature.center, location, wikiData);
if (this._mapRef.current) {
this._mapRef.current.flyTo({
@@ -727,7 +728,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
};
@action
- handleMarkerClick = (e: MarkerEvent<mapboxgl.Marker, MouseEvent>, pinDoc: Doc) => {
+ handleMarkerClick = (clientX: number, clientY: number, pinDoc: Doc) => {
this._featuresFromGeocodeResults = [];
this.deselectPinOrRoute(); // TODO: check this method
this._selectedPinOrRoute = pinDoc;
@@ -758,7 +759,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
// MapAnchorMenu.Instance.jumpTo(NumCast(pinDoc.longitude), NumCast(pinDoc.latitude)-3, true);
- MapAnchorMenu.Instance.jumpTo(e.originalEvent.clientX, e.originalEvent.clientY, true);
+ MapAnchorMenu.Instance.jumpTo(clientX, clientY, true);
document.addEventListener('pointerdown', this.tryHideMapAnchorMenu, true);
@@ -768,7 +769,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
};
@action
- displayRoute = (routeInfoMap: Record<TransportationType, any> | undefined, type: TransportationType) => {
+ displayRoute = (routeInfoMap: Record<TransportationType, { coordinates: Position[] }> | undefined, type: TransportationType) => {
if (routeInfoMap) {
const newTempRouteSource: FeatureCollection = {
type: 'FeatureCollection',
@@ -1052,7 +1053,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
<div id="divider">|</div>
<div style={{ display: 'flex', alignItems: 'center' }}>
<div>Select Line Color: </div>
- <CirclePicker circleSize={12} circleSpacing={5} width="100%" colors={['#ffff00', '#03a9f4', '#ff0000', '#ff5722', '#000000', '#673ab7']} onChange={(color: any) => this.setAnimationLineColor(color)} />
+ <CirclePicker circleSize={12} circleSpacing={5} width="100%" colors={['#ffff00', '#03a9f4', '#ff0000', '#ff5722', '#000000', '#673ab7']} onChange={color => this.setAnimationLineColor(color)} />
</div>
</div>
</>
@@ -1147,7 +1148,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
return MarkerIcons.getFontAwesomeIcon(markerType, '2x', markerColor) ?? null;
};
- _textRef = React.createRef<any>();
render() {
const scale = this._props.NativeDimScaling?.() || 1;
const parscale = scale === 1 ? 1 : (this.ScreenToLocalBoxXf().Scale ?? 1);
@@ -1161,7 +1161,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
style={{ transformOrigin: 'top left', transform: `scale(${scale})`, width: `calc(100% - ${this.sidebarWidthPercent})`, pointerEvents: this.pointerEvents() }}>
{!this._routeToAnimate && (
<div className="mapBox-searchbar" style={{ width: `${100 / scale}%`, zIndex: 1, position: 'relative', background: 'lightGray' }}>
- <TextField ref={this._textRef} fullWidth placeholder="Enter a location" onKeyDown={this.searchbarKeyDown} onChange={(e: any) => this.handleSearchChange(e.target.value)} />
+ <TextField fullWidth placeholder="Enter a location" onKeyDown={this.searchbarKeyDown} onChange={e => this.handleSearchChange(e.target.value)} />
<IconButton icon={<FontAwesomeIcon icon={faGear as IconLookup} size="1x" />} type={Type.TERT} onClick={() => this.toggleSettings()} />
<div style={{ opacity: 0 }}>
<IconButton icon={<FontAwesomeIcon icon={faGear as IconLookup} size="1x" />} type={Type.TERT} onClick={() => this.toggleSettings()} />
@@ -1217,7 +1217,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
.filter(feature => feature.place_name)
.map((feature, idx) => (
<div
- // eslint-disable-next-line react/no-array-index-key
key={idx}
className="search-result-container"
onClick={() => {
@@ -1321,8 +1320,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
this._animationPhase === 0 &&
this.allPushpins // .filter(anno => !anno.layout_unrendered)
.map((pushpin, idx) => (
- // eslint-disable-next-line react/no-array-index-key
- <Marker key={idx} longitude={NumCast(pushpin.longitude)} latitude={NumCast(pushpin.latitude)} anchor="bottom" onClick={(e: MarkerEvent<mapboxgl.Marker, MouseEvent>) => this.handleMarkerClick(e, pushpin)}>
+ <Marker key={idx} longitude={NumCast(pushpin.longitude)} latitude={NumCast(pushpin.latitude)} anchor="bottom" onClick={e => this.handleMarkerClick(e.originalEvent.clientX, e.originalEvent.clientY, pushpin)}>
{this.getMarkerIcon(pushpin)}
</Marker>
))}
@@ -1336,7 +1334,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
<div className="mapBox-sidebar" style={{ width: `${this.sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}>
<SidebarAnnos
ref={this._sidebarRef}
- // eslint-disable-next-line react/jsx-props-no-spreading
{...this._props}
fieldKey={this.fieldKey}
Document={this.Document}