aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/nodes/MapBox/MapBox.scss28
-rw-r--r--src/client/views/nodes/MapBox/MapBox.tsx873
2 files changed, 367 insertions, 534 deletions
diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss
index ba1e99f84..81f123758 100644
--- a/src/client/views/nodes/MapBox/MapBox.scss
+++ b/src/client/views/nodes/MapBox/MapBox.scss
@@ -4,6 +4,7 @@
height: 100%;
overflow: hidden;
display: flex;
+ position: absolute;
.mapBox-infoWindow {
background-color: white;
@@ -27,7 +28,7 @@
// }
}
- .mapbox-settings-panel{
+ .mapbox-settings-panel {
z-index: 900;
padding: 10px 20px;
display: flex;
@@ -41,7 +42,7 @@
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
- .mapbox-style-select{
+ .mapbox-style-select {
display: flex;
flex-direction: column;
align-items: flex-start;
@@ -49,14 +50,13 @@
gap: 4px;
}
- .mapbox-terrain-selection{
+ .mapbox-terrain-selection {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 4px;
}
-
}
.mapbox-geocoding-search-results {
@@ -75,11 +75,10 @@
.search-result-container {
width: 100%;
padding: 10px;
- &:hover{
+ &:hover {
background-color: lighten(rgb(187, 187, 187), 10%);
}
}
-
}
.animation-panel {
@@ -105,7 +104,7 @@
align-items: center;
gap: 7px;
- .animation-suboptions{
+ .animation-suboptions {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
@@ -113,25 +112,23 @@
gap: 7px;
width: 100%;
- .first-person-label{
+ .first-person-label {
width: '130px' !important;
}
- label{
+ label {
margin-bottom: 0;
}
-
- .speed-label{
+
+ .speed-label {
margin-right: 5px;
}
- #divider{
+ #divider {
margin-left: 10px;
margin-right: 10px;
}
}
-
-
}
}
@@ -148,10 +145,8 @@
bottom: 5px;
left: 5px;
padding: 3px;
-
}
-
.mapBox-topbar {
display: flex;
flex-direction: row;
@@ -235,4 +230,3 @@
display: block;
}
}
-
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index 25299532a..d3b293bc2 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -3,7 +3,7 @@ import BingMapsReact from 'bingmaps-react';
// import 'mapbox-gl/dist/mapbox-gl.css';
import { Button, EditableText, IconButton, Size, Type } from 'browndash-components';
-import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction, flow, toJS, autorun} from 'mobx';
+import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction, flow, toJS, autorun } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { Doc, DocListCast, Field, LinkedTo, Opt } from '../../../../fields/Doc';
@@ -28,28 +28,27 @@ import { FieldView, FieldViewProps } from '../FieldView';
import { FormattedTextBox } from '../formattedText/FormattedTextBox';
import { PinProps, PresBox } from '../trails';
import { MapAnchorMenu } from './MapAnchorMenu';
-import * as HME from "h264-mp4-encoder";
-import {simd} from 'wasm-feature-detect';
-import {
+import {
Map as MapboxMap,
MapRef,
- Marker,
- ControlPosition,
- FullscreenControl,
- MapProvider,
- MarkerProps,
- NavigationControl,
- ScaleControl,
- ViewState,
+ Marker,
+ ControlPosition,
+ FullscreenControl,
+ MapProvider,
+ MarkerProps,
+ NavigationControl,
+ ScaleControl,
+ ViewState,
ViewStateChangeEvent,
useControl,
GeolocateControl,
Popup,
MapEvent,
Source,
- Layer} from 'react-map-gl';
-import MapboxGeocoder, {GeocoderOptions} from '@mapbox/mapbox-gl-geocoder';
+ Layer,
+} from 'react-map-gl';
+import MapboxGeocoder, { GeocoderOptions } from '@mapbox/mapbox-gl-geocoder';
import debounce from 'debounce';
import './MapBox.scss';
import { NumberLiteralType } from 'typescript';
@@ -57,7 +56,7 @@ import { NumberLiteralType } from 'typescript';
import mapboxgl, { LngLat, LngLatBoundsLike, LngLatLike, MapLayerMouseEvent, MercatorCoordinate } from 'mapbox-gl';
import { Feature, FeatureCollection, GeoJsonProperties, Geometry, LineString, MultiLineString, Position } from 'geojson';
import { MarkerEvent } from 'react-map-gl/dist/esm/types';
-import { MapboxApiUtility, TransportationType} from './MapboxApiUtility';
+import { MapboxApiUtility, TransportationType } from './MapboxApiUtility';
import { Autocomplete, Checkbox, FormControlLabel, TextField } from '@mui/material';
import { List } from '../../../../fields/List';
import { listSpec } from '../../../../fields/Schema';
@@ -65,7 +64,7 @@ import { IconLookup, faCircleXmark, faFileExport, faGear, faMinus, faPause, faPl
import { MarkerIcons } from './MarkerIcons';
import { SettingsManager } from '../../../util/SettingsManager';
import * as turf from '@turf/turf';
-import * as d3 from "d3";
+import * as d3 from 'd3';
import { AnimationSpeed, AnimationStatus, AnimationUtility } from './AnimationUtility';
import { fastSpeedIcon, mediumSpeedIcon, slowSpeedIcon } from './AnimationSpeedIcons';
import { CirclePicker, ColorState } from 'react-color';
@@ -91,24 +90,24 @@ const MAPBOX_FORWARD_GEOCODE_BASE_URL = 'https://api.mapbox.com/geocoding/v5/map
const MAPBOX_REVERSE_GEOCODE_BASE_URL = 'https://api.mapbox.com/geocoding/v5/mapbox.places/';
type PopupInfo = {
- longitude: number,
- latitude: number,
- title: string,
- description: string
-}
+ longitude: number;
+ latitude: number;
+ title: string;
+ description: string;
+};
export type GeocoderControlProps = Omit<GeocoderOptions, 'accessToken' | 'mapboxgl' | 'marker'> & {
- mapboxAccessToken: string,
+ mapboxAccessToken: string;
marker?: Omit<MarkerProps, 'longitude' | 'latitude'>;
position: ControlPosition;
onResult: (...args: any[]) => void;
-}
+};
type MapMarker = {
- longitude: number,
- latitude: number
-}
+ longitude: number;
+ latitude: number;
+};
/**
* Consider integrating later: allows for drawing, circling, making shapes on map
@@ -157,7 +156,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
const originalCoordinates: Position[] = JSON.parse(StrCast(this.routeToAnimate.routeCoordinates));
// const index = Math.floor(this.animationPhase * originalCoordinates.length);
const index = this.animationPhase * (originalCoordinates.length - 1); // Calculate the fractional index
- console.log("Animation phase", this.animationPhase);
+ console.log('Animation phase', this.animationPhase);
const startIndex = Math.floor(index);
const endIndex = Math.ceil(index);
let feature: Feature<Geometry, GeoJsonProperties>;
@@ -173,7 +172,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
feature = {
type: 'Feature',
properties: {
- 'routeTitle': StrCast(this.routeToAnimate.title)
+ routeTitle: StrCast(this.routeToAnimate.title),
},
geometry: geometry,
};
@@ -186,7 +185,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
const interpolator = d3.interpolateArray(startCoord, endCoord);
const interpolatedCoord = interpolator(fraction);
-
+
const coordinates = originalCoordinates.slice(0, startIndex + 1).concat([interpolatedCoord]);
geometry = {
@@ -196,12 +195,12 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
feature = {
type: 'Feature',
properties: {
- 'routeTitle': StrCast(this.routeToAnimate.title)
+ routeTitle: StrCast(this.routeToAnimate.title),
},
geometry: geometry,
};
}
-
+
autorun(() => {
const animationUtil = this.animationUtility;
const concattedCoordinates = geometry.coordinates.concat(originalCoordinates.slice(endIndex));
@@ -210,28 +209,28 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
properties: {},
geometry: {
type: 'LineString',
- coordinates: concattedCoordinates
- }
- }
- if (animationUtil){
- animationUtil.setPath(newFeature)
+ coordinates: concattedCoordinates,
+ },
+ };
+ if (animationUtil) {
+ animationUtil.setPath(newFeature);
}
- })
+ });
return feature;
}
- console.log("ERROR");
+ console.log('ERROR');
return {
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
- coordinates: []
+ coordinates: [],
},
};
}
@computed get selectedRouteCoordinates(): Position[] {
let coordinates: Position[] = [];
- if (this.routeToAnimate?.routeCoordinates){
+ if (this.routeToAnimate?.routeCoordinates) {
coordinates = JSON.parse(StrCast(this.routeToAnimate.routeCoordinates));
}
return coordinates;
@@ -247,7 +246,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
return {
type: 'Feature',
properties: {
- 'routeTitle': routeDoc.title},
+ routeTitle: routeDoc.title,
+ },
geometry: geometry,
};
});
@@ -274,10 +274,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
componentDidMount() {
this._unmounting = false;
this.props.setContentView?.(this);
-
}
-
_unmounting = false;
componentWillUnmount(): void {
this._unmounting = true;
@@ -509,7 +507,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
// The pin that is selected
@observable selectedPinOrRoute: Doc | undefined;
-
@action
deselectPinOrRoute = () => {
if (this.selectedPinOrRoute) {
@@ -517,7 +514,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
// Doc.setDocFilter(this.rootDoc, 'latitude', this.selectedPin.latitude, 'remove');
// Doc.setDocFilter(this.rootDoc, 'longitude', this.selectedPin.longitude, 'remove');
// Doc.setDocFilter(this.rootDoc, LinkedTo, `mapPin=${Field.toScriptString(DocCast(this.selectedPin))}`, 'remove');
-
// const temp = this.selectedPin;
// if (!this._unmounting) {
// this._bingMap.current.entities.remove(this.map_docToPinMap.get(temp));
@@ -533,7 +529,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
}
};
-
getView = async (doc: Doc) => {
if (this._sidebarRef?.current?.makeDocUnfiltered(doc) && !this.SidebarShown) this.toggleSidebar();
return new Promise<Opt<DocumentView>>(res => DocumentManager.Instance.AddViewRenderedCb(doc, dv => res(dv)));
@@ -692,8 +687,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu, true);
}, 'delete pin');
-
-
tryHideMapAnchorMenu = (e: PointerEvent) => {
let target = document.elementFromPoint(e.x, e.y);
while (target) {
@@ -711,8 +704,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
centerOnSelectedPin = () => {
if (this.selectedPinOrRoute) {
this._mapRef.current?.flyTo({
- center: [NumCast(this.selectedPinOrRoute.longitude), NumCast(this.selectedPinOrRoute.latitude)]
- })
+ center: [NumCast(this.selectedPinOrRoute.longitude), NumCast(this.selectedPinOrRoute.latitude)],
+ });
}
// if (this.selectedPin) {
// this.dataDoc.latitude = this.selectedPin.latitude;
@@ -733,7 +726,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
mapTypeId: 'grayscale',
};
-
/**
* Map options
*/
@@ -752,8 +744,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
},
};
-
-
recolorPin = (pin: Doc, color?: string) => {
// this._bingMap.current.entities.remove(this.map_docToPinMap.get(pin));
// this.map_docToPinMap.delete(pin);
@@ -829,22 +819,24 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
setupMoveUpEvents(
e,
e,
- e => { // move event
+ e => {
+ // move event
if (!dragClone) {
- dragClone = this._dragRef.current?.cloneNode(true) as HTMLDivElement; // copy draggable pin
+ dragClone = this._dragRef.current?.cloneNode(true) as HTMLDivElement; // copy draggable pin
dragClone.style.position = 'absolute';
dragClone.style.zIndex = '10000';
- DragManager.Root().appendChild(dragClone); // add clone to root
+ DragManager.Root().appendChild(dragClone); // add clone to root
}
dragClone.style.transform = `translate(${e.clientX - 15}px, ${e.clientY - 15}px)`;
return false;
},
- e => { // up event
+ e => {
+ // up event
if (!dragClone) return;
DragManager.Root().removeChild(dragClone);
let target = document.elementFromPoint(e.x, e.y); // element for specified x and y coordinates
while (target) {
- if (target === this._ref.current) {
+ if (target === this._ref.current) {
const cpt = this.props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY);
const x = cpt[0] - (this.props.PanelWidth() - this.sidebarWidth()) / 2;
const y = cpt[1] - 20 /* height of search bar */ - this.props.PanelHeight() / 2;
@@ -864,7 +856,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
);
};
- // incrementer: number = 0;
+ // incrementer: number = 0;
/*
* Creates Pushpin doc and adds it to the list of annotations
*/
@@ -877,13 +869,13 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
false,
[],
{
- title: location ?? `lat=${NumCast(latitude)},lng=${NumCast(longitude)}`,
- map: location,
- description: "",
+ title: location ?? `lat=${NumCast(latitude)},lng=${NumCast(longitude)}`,
+ map: location,
+ description: '',
wikiData: wikiData,
markerType: 'MAP_PIN',
- markerColor: '#ff5722'
- },
+ markerColor: '#ff5722',
+ }
// { title: map ?? `lat=${latitude},lng=${longitude}`, map: map },
// ,'pushpinIDamongus'+ this.incrementer++
);
@@ -896,12 +888,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
@action
createMapRoute = undoable((coordinates: Position[], originName: string, destination: any, createPinForDestination: boolean) => {
- if (originName !== destination.place_name){
- const mapRoute = Docs.Create.MapRouteDocument(
- false,
- [],
- {title: `${originName} --> ${destination.place_name}`, routeCoordinates: JSON.stringify(coordinates)},
- );
+ 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);
if (createPinForDestination) {
this.createPushpin(destination.center[1], destination.center[0], destination.place_name);
@@ -909,48 +897,33 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
return mapRoute;
}
// TODO: Display error that can't create route to same location
-
}, 'createmaproute');
searchbarKeyDown = (e: any) => e.key === 'Enter' && this.bingSearch();
-
-
-
-
-
@observable
featuresFromGeocodeResults: any[] = [];
-
@action
addMarkerForFeature = (feature: any) => {
const location = feature.place_name;
- if (feature.center){
+ if (feature.center) {
const longitude = feature.center[0];
const latitude = feature.center[1];
const wikiData = feature.properties?.wikiData;
-
- this.createPushpin(
- latitude,
- longitude,
- location,
- wikiData
- )
-
- if (this._mapRef.current){
+
+ this.createPushpin(latitude, longitude, location, wikiData);
+
+ if (this._mapRef.current) {
this._mapRef.current.flyTo({
- center: feature.center
+ center: feature.center,
});
}
this.featuresFromGeocodeResults = [];
-
} else {
// TODO: handle error
}
- }
-
-
+ };
/**
* Makes a forward geocoding API call to Mapbox to retrieve locations based on the search input
@@ -958,12 +931,12 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
*/
handleSearchChange = async (searchText: string) => {
const features = await MapboxApiUtility.forwardGeocodeForFeatures(searchText);
- if (features && !this.isAnimating){
+ if (features && !this.isAnimating) {
runInAction(() => {
- this.settingsOpen= false;
+ this.settingsOpen = false;
this.featuresFromGeocodeResults = features;
this.routeToAnimate = undefined;
- })
+ });
}
// try {
// const url = MAPBOX_FORWARD_GEOCODE_BASE_URL + encodeURI(searchText) +'.json' +`?access_token=${MAPBOX_ACCESS_TOKEN}`;
@@ -973,35 +946,32 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
// this.featuresFromGeocodeResults = data.features;
// })
// } catch (error: any){
- // // TODO: handle error in better way
+ // // TODO: handle error in better way
// console.log(error);
// }
- }
+ };
// @action
// debouncedCall = React.useCallback(debounce(this.debouncedOnSearchBarChange, 300), []);
-
@action
handleMapClick = (e: MapLayerMouseEvent) => {
this.featuresFromGeocodeResults = [];
- if (this._mapRef.current){
- const features = this._mapRef.current.queryRenderedFeatures(
- e.point, {
- layers: ['map-routes-layer']
- }
- );
+ if (this._mapRef.current) {
+ const features = this._mapRef.current.queryRenderedFeatures(e.point, {
+ layers: ['map-routes-layer'],
+ });
console.error(features);
if (features && features.length > 0 && features[0].properties && features[0].geometry) {
const geometry = features[0].geometry as LineString;
const routeTitle: string = features[0].properties['routeTitle'];
- const routeDoc: Doc | undefined = this.allRoutes.find((routeDoc) => routeDoc.title === routeTitle);
+ const routeDoc: Doc | undefined = this.allRoutes.find(routeDoc => routeDoc.title === routeTitle);
this.deselectPinOrRoute(); // TODO: Also deselect route if selected
- if (routeDoc){
+ if (routeDoc) {
this.selectedPinOrRoute = routeDoc;
Doc.setDocFilter(this.rootDoc, LinkedTo, `mapRoute=${Field.toScriptString(this.selectedPinOrRoute)}`, 'check');
- // TODO: Recolor route
+ // TODO: Recolor route
MapAnchorMenu.Instance.Delete = this.deleteSelectedPinOrRoute;
MapAnchorMenu.Instance.Center = this.centerOnSelectedPin;
@@ -1011,9 +981,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
MapAnchorMenu.Instance.setRouteDoc(routeDoc);
// TODO: Subject to change
- MapAnchorMenu.Instance.setAllMapboxPins(
- this.allAnnotations.filter(anno => !anno.layout_unrendered)
- )
+ MapAnchorMenu.Instance.setAllMapboxPins(this.allAnnotations.filter(anno => !anno.layout_unrendered));
MapAnchorMenu.Instance.DisplayRoute = this.displayRoute;
MapAnchorMenu.Instance.HideRoute = this.hideRoute;
@@ -1028,16 +996,15 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
MapAnchorMenu.Instance.jumpTo(e.originalEvent.clientX, e.originalEvent.clientY, true);
document.addEventListener('pointerdown', this.tryHideMapAnchorMenu, true);
- }
+ }
}
}
- }
-
+ };
/**
* Makes a reverse geocoding API call to retrieve features corresponding to a map click (based on longitude
- * and latitude). Sets the search results accordingly.
- * @param e
+ * and latitude). Sets the search results accordingly.
+ * @param e
*/
handleMapDblClick = async (e: MapLayerMouseEvent) => {
e.preventDefault();
@@ -1046,13 +1013,13 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
const latitude: number = lngLat.lat;
const features = await MapboxApiUtility.reverseGeocodeForFeatures(longitude, latitude);
- if (features){
+ if (features) {
runInAction(() => {
this.featuresFromGeocodeResults = features;
- })
+ });
}
- // // REVERSE GEOCODE TO GET LOCATION DETAILS
+ // // REVERSE GEOCODE TO GET LOCATION DETAILS
// try {
// const url = MAPBOX_REVERSE_GEOCODE_BASE_URL + encodeURI(longitude.toString() + "," + latitude.toString()) + '.json' +
// `?access_token=${MAPBOX_ACCESS_TOKEN}`;
@@ -1066,9 +1033,9 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
// // TODO: handle error in better way
// console.log(error);
// }
- }
+ };
- @observable
+ @observable
currentPopup: PopupInfo | undefined = undefined;
@action
@@ -1083,18 +1050,15 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
Doc.setDocFilter(this.rootDoc, LinkedTo, `mapPin=${Field.toScriptString(this.selectedPinOrRoute)}`, 'check');
this.recolorPin(this.selectedPinOrRoute, 'green'); // TODO: check this method
-
-
+
MapAnchorMenu.Instance.Delete = this.deleteSelectedPinOrRoute;
MapAnchorMenu.Instance.Center = this.centerOnSelectedPin;
MapAnchorMenu.Instance.OnClick = this.createNoteAnnotation;
MapAnchorMenu.Instance.StartDrag = this.startAnchorDrag;
- // pass in the pinDoc
+ // pass in the pinDoc
MapAnchorMenu.Instance.setPinDoc(pinDoc);
- MapAnchorMenu.Instance.setAllMapboxPins(
- this.allAnnotations.filter(anno => !anno.layout_unrendered)
- )
+ MapAnchorMenu.Instance.setAllMapboxPins(this.allAnnotations.filter(anno => !anno.layout_unrendered));
MapAnchorMenu.Instance.DisplayRoute = this.displayRoute;
MapAnchorMenu.Instance.HideRoute = this.hideRoute;
@@ -1109,22 +1073,20 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
document.addEventListener('pointerdown', this.tryHideMapAnchorMenu, true);
-
- // this._mapRef.current.flyTo({
- // center: [NumCast(pinDoc.longitude), NumCast(pinDoc.latitude)-3]
- // })
-
+ // this._mapRef.current.flyTo({
+ // center: [NumCast(pinDoc.longitude), NumCast(pinDoc.latitude)-3]
+ // })
};
@observable
temporaryRouteSource: FeatureCollection = {
type: 'FeatureCollection',
- features: []
- }
+ features: [],
+ };
@action
displayRoute = (routeInfoMap: Record<TransportationType, any> | undefined, type: TransportationType) => {
- if (routeInfoMap){
+ if (routeInfoMap) {
const newTempRouteSource: FeatureCollection = {
type: 'FeatureCollection',
features: [
@@ -1133,16 +1095,16 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
properties: {},
geometry: {
type: 'LineString',
- coordinates: routeInfoMap[type].coordinates
- }
- }
- ]
- }
- // TODO: Create pin for destination
- // TODO: Fly to point where full route will be shown
+ coordinates: routeInfoMap[type].coordinates,
+ },
+ },
+ ],
+ };
+ // TODO: Create pin for destination
+ // TODO: Fly to point where full route will be shown
this.temporaryRouteSource = newTempRouteSource;
}
- }
+ };
@observable
isAnimating: boolean = false;
@@ -1150,10 +1112,10 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
@observable
routeToAnimate: Doc | undefined = undefined;
- @observable
+ @observable
animationPhase: number = 0;
- @observable
+ @observable
finishedFlyTo: boolean = false;
@action
@@ -1161,74 +1123,73 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
this.animationPhase = newValue;
};
- @observable
+ @observable
frameId: number | null = null;
@action
setFrameId = (frameId: number) => {
this.frameId = frameId;
- }
+ };
- @observable
+ @observable
animationUtility: AnimationUtility | null = null;
@action
setAnimationUtility = (util: AnimationUtility) => {
this.animationUtility = util;
- }
+ };
@action
openAnimationPanel = (routeDoc: Doc | undefined) => {
- if (routeDoc){
+ if (routeDoc) {
MapAnchorMenu.Instance.fadeOut(true);
document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu, true);
this.featuresFromGeocodeResults = [];
this.routeToAnimate = routeDoc;
}
- }
+ };
- @observable
- mapboxMapViewState: ViewState = {
- zoom: this.dataDoc.map_zoom ? NumCast(this.dataDoc.map_zoom) : 8,
- longitude: this.dataDoc.longitude ? NumCast(this.dataDoc.longitude) : -71.4128,
- latitude: this.dataDoc.latitude ? NumCast(this.dataDoc.latitude) : 41.8240,
- pitch: this.dataDoc.map_pitch ? NumCast(this.dataDoc.map_pitch) : 0,
- bearing: this.dataDoc.map_bearing ? NumCast(this.dataDoc.map_bearing) : 0,
- padding: {
- top: 0,
- bottom: 0,
- left: 0,
- right: 0
- },
+ @computed get mapboxMapViewState(): ViewState {
+ return {
+ zoom: NumCast(this.dataDoc.map_zoom, 8),
+ longitude: NumCast(this.dataDoc.longitude, -71.4128),
+ latitude: NumCast(this.dataDoc.latitude, 41.824),
+ pitch: NumCast(this.dataDoc.map_pitch),
+ bearing: NumCast(this.dataDoc.map_bearing),
+ padding: {
+ top: 0,
+ bottom: 0,
+ left: 0,
+ right: 0,
+ },
+ };
}
- @computed
+ @computed
get preAnimationViewState() {
- if (!this.isAnimating){
+ if (!this.isAnimating) {
return this.mapboxMapViewState;
}
}
-
- @observable
+ @observable
isStreetViewAnimation: boolean = false;
- @observable
+ @observable
animationSpeed: AnimationSpeed = AnimationSpeed.MEDIUM;
-
@observable
animationLineColor: string = '#ffff00';
@action
setAnimationLineColor = (color: ColorState) => {
this.animationLineColor = color.hex;
- }
+ };
@action
updateAnimationSpeed = () => {
let newAnimationSpeed: AnimationSpeed;
- switch (this.animationSpeed){
+ switch (this.animationSpeed) {
case AnimationSpeed.SLOW:
newAnimationSpeed = AnimationSpeed.MEDIUM;
break;
@@ -1243,63 +1204,62 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
break;
}
this.animationSpeed = newAnimationSpeed;
- if (this.animationUtility){
+ if (this.animationUtility) {
this.animationUtility.updateAnimationSpeed(newAnimationSpeed);
}
- }
+ };
@computed get animationSpeedTooltipText(): string {
switch (this.animationSpeed) {
- case AnimationSpeed.SLOW:
- return '1x speed';
- case AnimationSpeed.MEDIUM:
- return '2x speed';
- case AnimationSpeed.FAST:
- return '3x speed';
- default:
- return '2x speed';
+ case AnimationSpeed.SLOW:
+ return '1x speed';
+ case AnimationSpeed.MEDIUM:
+ return '2x speed';
+ case AnimationSpeed.FAST:
+ return '3x speed';
+ default:
+ return '2x speed';
}
}
- @computed get animationSpeedIcon(): JSX.Element{
+ @computed get animationSpeedIcon(): JSX.Element {
switch (this.animationSpeed) {
case AnimationSpeed.SLOW:
- return slowSpeedIcon;
+ return slowSpeedIcon;
case AnimationSpeed.MEDIUM:
- return mediumSpeedIcon;
+ return mediumSpeedIcon;
case AnimationSpeed.FAST:
- return fastSpeedIcon;
+ return fastSpeedIcon;
default:
- return mediumSpeedIcon;
- }
+ return mediumSpeedIcon;
+ }
}
@action
toggleIsStreetViewAnimation = () => {
const newVal = !this.isStreetViewAnimation;
this.isStreetViewAnimation = newVal;
- if (this.animationUtility){
- this.animationUtility.updateIsStreetViewAnimation(newVal)
+ if (this.animationUtility) {
+ this.animationUtility.updateIsStreetViewAnimation(newVal);
}
- }
+ };
- @observable
+ @observable
dynamicRouteFeature: Feature<Geometry, GeoJsonProperties> = {
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
- coordinates: []
- }
+ coordinates: [],
+ },
};
-
- @observable
+ @observable
path: turf.helpers.Feature<turf.helpers.LineString, turf.helpers.Properties> = {
type: 'Feature',
geometry: {
type: 'LineString',
- coordinates: []
+ coordinates: [],
},
- properties: {}
+ properties: {},
};
getFeatureFromRouteDoc = (routeDoc: Doc): Feature<Geometry, GeoJsonProperties> => {
@@ -1310,14 +1270,15 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
return {
type: 'Feature',
properties: {
- 'routeTitle': routeDoc.title},
+ routeTitle: routeDoc.title,
+ },
geometry: geometry,
};
- }
+ };
- @action
+ @action
playAnimation = (status: AnimationStatus) => {
- if (!this._mapRef.current || !this.routeToAnimate){
+ if (!this._mapRef.current || !this.routeToAnimate) {
return;
}
@@ -1326,43 +1287,32 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
this.finishedFlyTo = AnimationStatus.RESUME ? this.finishedFlyTo : false;
const path = turf.lineString(this.selectedRouteCoordinates);
-
+
this.settingsOpen = false;
this.path = path;
this.isAnimating = true;
runInAction(() => {
- return new Promise<void>(async (resolve) => {
+ return new Promise<void>(async resolve => {
const targetLngLat = {
lng: this.selectedRouteCoordinates[0][0],
lat: this.selectedRouteCoordinates[0][1],
};
- const animationUtil = new AnimationUtility(
- targetLngLat,
- this.selectedRouteCoordinates,
- this.isStreetViewAnimation,
- this.animationSpeed,
- this.showTerrain,
- this._mapRef.current
- );
+ const animationUtil = new AnimationUtility(targetLngLat, this.selectedRouteCoordinates, this.isStreetViewAnimation, this.animationSpeed, this.showTerrain, this._mapRef.current);
runInAction(() => {
this.setAnimationUtility(animationUtil);
- })
-
+ });
const updateFrameId = (newFrameId: number) => {
this.setFrameId(newFrameId);
- }
+ };
- const updateAnimationPhase = (
- newAnimationPhase: number,
- ) => {
+ const updateAnimationPhase = (newAnimationPhase: number) => {
this.setAnimationPhase(newAnimationPhase);
};
-
- if (status !== AnimationStatus.RESUME) {
+ if (status !== AnimationStatus.RESUME) {
const result = await animationUtil.flyInAndRotate({
map: this._mapRef.current!,
// targetLngLat,
@@ -1376,18 +1326,17 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
updateFrameId,
});
- console.log("Bearing: ", result.bearing);
- console.log("Altitude: ", result.altitude);
-
- }
+ console.log('Bearing: ', result.bearing);
+ console.log('Altitude: ', result.altitude);
+ }
runInAction(() => {
this.finishedFlyTo = true;
- })
+ });
// follow the path while slowly rotating the camera, passing in the camera bearing and altitude from the previous animation
await animationUtil.animatePath({
- map: this._mapRef.current!,
+ map: this._mapRef.current!,
// path: this.path,
// startBearing: -20,
// startAltitude: this.isStreetViewAnimation ? 80 : 12000,
@@ -1396,43 +1345,39 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
updateAnimationPhase,
updateFrameId,
});
-
+
// get the bounds of the linestring, use fitBounds() to animate to a final view
const bbox3d = turf.bbox(this.path);
-
+
const bbox2d: LngLatBoundsLike = [bbox3d[0], bbox3d[1], bbox3d[2], bbox3d[3]];
-
+
this._mapRef.current!.fitBounds(bbox2d, {
duration: 3000,
pitch: 30,
bearing: 0,
padding: 120,
});
-
+
setTimeout(() => {
this.isStreetViewAnimation = false;
resolve();
}, 10000);
});
-
- })
-
-
- }
-
+ });
+ };
- @action
+ @action
pauseAnimation = () => {
- if (this.frameId && this.animationPhase > 0){
+ if (this.frameId && this.animationPhase > 0) {
window.cancelAnimationFrame(this.frameId);
this.frameId = null;
this.isAnimating = false;
}
- }
+ };
@action
stopAnimation = (close: boolean) => {
- if (this.frameId){
+ if (this.frameId) {
window.cancelAnimationFrame(this.frameId);
}
this.animationPhase = 0;
@@ -1445,22 +1390,15 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
this.routeToAnimate = undefined;
this.animationUtility = null;
}
- if (this.preAnimationViewState){
- this.mapboxMapViewState = this.preAnimationViewState;
- }
-
-
- }
+ };
@action
- exportAnimationToVideo = () => {
-
- }
+ exportAnimationToVideo = () => {};
getRouteAnimationOptions = (): JSX.Element => {
return (
<>
- <IconButton
+ <IconButton
tooltip={this.isAnimating && this.finishedFlyTo ? 'Pause Animation' : 'Play Animation'}
onPointerDown={() => {
if (this.isAnimating && this.finishedFlyTo) {
@@ -1471,87 +1409,57 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
this.playAnimation(AnimationStatus.START); // Play from the beginning
}
}}
- icon={this.isAnimating && this.finishedFlyTo ?
- <FontAwesomeIcon icon={faPause as IconLookup}/>
- :
- <FontAwesomeIcon icon={faPlay as IconLookup}/>
- }
- color='black'
- size={Size.MEDIUM}
- />
- {this.isAnimating && this.finishedFlyTo &&
- <IconButton
- tooltip='Restart animation'
- onPointerDown={() => {
- this.stopAnimation(false);
- this.playAnimation(AnimationStatus.START)
- }}
- icon={<FontAwesomeIcon icon={faRotate as IconLookup}/>}
- color='black'
- size={Size.MEDIUM}
- />
-
- }
- <IconButton
- style={{marginRight: '10px'}}
- tooltip='Stop and close animation'
- onPointerDown={() => this.stopAnimation(true)}
- icon={<FontAwesomeIcon icon={faCircleXmark as IconLookup}/>}
- color='black'
+ icon={this.isAnimating && this.finishedFlyTo ? <FontAwesomeIcon icon={faPause as IconLookup} /> : <FontAwesomeIcon icon={faPlay as IconLookup} />}
+ color="black"
size={Size.MEDIUM}
/>
+ {this.isAnimating && this.finishedFlyTo && (
+ <IconButton
+ tooltip="Restart animation"
+ onPointerDown={() => {
+ this.stopAnimation(false);
+ this.playAnimation(AnimationStatus.START);
+ }}
+ icon={<FontAwesomeIcon icon={faRotate as IconLookup} />}
+ color="black"
+ size={Size.MEDIUM}
+ />
+ )}
+ <IconButton style={{ marginRight: '10px' }} tooltip="Stop and close animation" onPointerDown={() => this.stopAnimation(true)} icon={<FontAwesomeIcon icon={faCircleXmark as IconLookup} />} color="black" size={Size.MEDIUM} />
<>
- <div className='animation-suboptions'>
+ <div className="animation-suboptions">
<div>|</div>
<FormControlLabel
- className='first-person-label'
- style={{width: '130px'}}
- label='1st person animation:'
- labelPlacement='start'
- control={
- <Checkbox
- color='success'
- checked={this.isStreetViewAnimation}
- onChange={this.toggleIsStreetViewAnimation}
- />
- }
- />
- <div id='divider'>|</div>
- <IconButton
- tooltip={this.animationSpeedTooltipText}
- onPointerDown={this.updateAnimationSpeed}
- icon={this.animationSpeedIcon}
- size={Size.MEDIUM}
+ className="first-person-label"
+ style={{ width: '130px' }}
+ label="1st person animation:"
+ labelPlacement="start"
+ control={<Checkbox color="success" checked={this.isStreetViewAnimation} onChange={this.toggleIsStreetViewAnimation} />}
/>
- <div id='divider'>|</div>
- <div style={{width: '230px'}}>Select Line Color: </div>
- <CirclePicker
- circleSize={12}
- circleSpacing={5}
- width='100%'
- colors={['#ffff00', '#03a9f4', '#ff0000', '#ff5722', '#000000', '#673ab7']}
- onChange={(color) => this.setAnimationLineColor(color)}
- />
+ <div id="divider">|</div>
+ <IconButton tooltip={this.animationSpeedTooltipText} onPointerDown={this.updateAnimationSpeed} icon={this.animationSpeedIcon} size={Size.MEDIUM} />
+ <div id="divider">|</div>
+ <div style={{ width: '230px' }}>Select Line Color: </div>
+ <CirclePicker circleSize={12} circleSpacing={5} width="100%" colors={['#ffff00', '#03a9f4', '#ff0000', '#ff5722', '#000000', '#673ab7']} onChange={color => this.setAnimationLineColor(color)} />
</div>
- </>
+ </>
</>
- )
- }
+ );
+ };
@action
hideRoute = () => {
this.temporaryRouteSource = {
type: 'FeatureCollection',
- features: []
- }
- }
-
+ features: [],
+ };
+ };
- @observable
+ @observable
settingsOpen: boolean = false;
- @observable
- mapStyle: string = 'mapbox://styles/mapbox/streets-v12'
+ @observable
+ mapStyle: string = 'mapbox://styles/mapbox/streets-v12';
@observable
showTerrain: boolean = true;
@@ -1562,103 +1470,77 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
this.featuresFromGeocodeResults = [];
this.settingsOpen = !this.settingsOpen;
}
- }
+ };
@action
changeMapStyle = (e: React.ChangeEvent<HTMLSelectElement>) => {
this.dataDoc.map_style = `mapbox://styles/mapbox/${e.target.value}`;
// this.mapStyle = `mapbox://styles/mapbox/${e.target.value}`
- }
+ };
- @action
+ @action
onBearingChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const bearing = parseInt(e.target.value);
- if (!isNaN(bearing) && this._mapRef.current){
+ if (!isNaN(bearing) && this._mapRef.current) {
const fixedBearing = Math.max(0, Math.min(360, bearing));
this._mapRef.current.setBearing(fixedBearing);
this.dataDoc.map_bearing = fixedBearing;
- this.mapboxMapViewState = {
- ...this.mapboxMapViewState,
- bearing: fixedBearing
- }
}
- }
+ };
- @action
+ @action
onPitchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const pitch = parseInt(e.target.value);
- if (!isNaN(pitch) && this._mapRef.current){
+ if (!isNaN(pitch) && this._mapRef.current) {
const fixedPitch = Math.max(0, Math.min(85, pitch));
this._mapRef.current.setPitch(fixedPitch);
this.dataDoc.map_pitch = fixedPitch;
- this.mapboxMapViewState = {
- ...this.mapboxMapViewState,
- pitch: fixedPitch
- }
}
- }
+ };
- @action
+ @action
onZoomChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const zoom = parseInt(e.target.value);
- if (!isNaN(zoom) && this._mapRef.current){
+ if (!isNaN(zoom) && this._mapRef.current) {
const fixedZoom = Math.max(0, Math.min(16, zoom));
this._mapRef.current.setZoom(fixedZoom);
this.dataDoc.map_zoom = fixedZoom;
- this.mapboxMapViewState = {
- ...this.mapboxMapViewState,
- zoom: fixedZoom
- }
}
- }
+ };
@action
onStepZoomChange = (increment: boolean) => {
if (this._mapRef.current) {
let newZoom: number;
if (increment) {
- console.log('inc')
- newZoom = this.mapboxMapViewState.zoom + 1;
-
+ console.log('inc');
+ newZoom = Math.min(16, this.mapboxMapViewState.zoom + 1);
} else {
- console.log('dec')
- newZoom = this.mapboxMapViewState.zoom - 1;
+ console.log('dec');
+ newZoom = Math.max(0, this.mapboxMapViewState.zoom - 1);
}
this._mapRef.current.setZoom(newZoom);
this.dataDoc.map_zoom = newZoom;
- this.mapboxMapViewState = {
- ...this.mapboxMapViewState,
- zoom: increment ? Math.min(16, newZoom) : Math.max(0, newZoom)
- }
}
-
- }
-
+ };
@action
onMapMove = (e: ViewStateChangeEvent) => {
- this.mapboxMapViewState = e.viewState;
this.dataDoc.longitude = e.viewState.longitude;
this.dataDoc.latitude = e.viewState.latitude;
- }
+ };
@action
toggleShowTerrain = () => {
this.showTerrain = !this.showTerrain;
- }
+ };
getMarkerIcon = (pinDoc: Doc): JSX.Element | null => {
const markerType = StrCast(pinDoc.markerType);
const markerColor = StrCast(pinDoc.markerColor);
return MarkerIcons.getFontAwesomeIcon(markerType, '2x', markerColor) ?? null;
-
- }
-
-
-
-
-
+ };
static _firstRender = true;
static _rerenderDelay = 500;
@@ -1680,6 +1562,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
return null;
}
const scale = this.props.NativeDimScaling?.() || 1;
+ const parscale = scale === 1 ? 1 : this.props.ScreenToLocalTransform().Scale ?? 1;
const renderAnnotations = (childFilters?: () => string[]) => null;
return (
@@ -1690,109 +1573,76 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
onPointerDown={async e => {
e.button === 0 && !e.ctrlKey && e.stopPropagation();
}}
- style={{ width: `calc(100% - ${this.sidebarWidthPercent})`, pointerEvents: this.pointerEvents() }}>
- {/* style={{ transformOrigin: "top left", transform: `scale(${scale})`, width: `calc(100% - ${this.sidebarWidthPercent})`, pointerEvents: this.pointerEvents() }}> */}
+ style={{ transformOrigin: 'top left', transform: `scale(${scale})`, width: `calc(100% - ${this.sidebarWidthPercent})`, pointerEvents: this.pointerEvents() }}>
<div style={{ mixBlendMode: 'multiply' }}>{renderAnnotations(this.transparentFilter)}</div>
{renderAnnotations(this.opaqueFilter)}
{SnappingManager.GetIsDragging() ? null : renderAnnotations()}
- {!this.routeToAnimate &&
+ {!this.routeToAnimate && (
<div className="mapBox-searchbar" style={{ zIndex: 1, position: 'relative', background: 'lightGray' }}>
- <TextField
- fullWidth
- placeholder='Enter a location'
- onChange={(e) => this.handleSearchChange(e.target.value)}
- />
- <IconButton
- icon={<FontAwesomeIcon icon={faGear as IconLookup} size='1x'/>}
- type={Type.TERT}
- onClick={(e) => this.toggleSettings()}
-
- />
- </div>
- }
- {this.settingsOpen && !this.routeToAnimate &&
- <div className='mapbox-settings-panel' style={{right: `${0+ this.sidebarWidth()}px`}}>
- <div className='mapbox-style-select'>
- <div>
- Map Style:
- </div>
+ <TextField fullWidth placeholder="Enter a location" onChange={e => this.handleSearchChange(e.target.value)} />
+ <IconButton icon={<FontAwesomeIcon icon={faGear as IconLookup} size="1x" />} type={Type.TERT} onClick={e => this.toggleSettings()} />
+ </div>
+ )}
+ {this.settingsOpen && !this.routeToAnimate && (
+ <div className="mapbox-settings-panel" style={{ right: `${0 + this.sidebarWidth()}px` }}>
+ <div className="mapbox-style-select">
+ <div>Map Style:</div>
<div>
<select onChange={this.changeMapStyle}>
- <option value='streets-v11'>Streets</option>
- <option value='outdoors-v12'>Outdoors</option>
- <option value='light-v11'>Light</option>
- <option value='dark-v11'>Dark</option>
- <option value='satellite-v9'>Satellite</option>
- <option value='satellite-streets-v12'>Satellite Streets</option>
- <option value='navigation-day-v1'>Navigation Day</option>
- <option value='navigation-night-v1'>Navigation Night</option>
+ <option value="streets-v11">Streets</option>
+ <option value="outdoors-v12">Outdoors</option>
+ <option value="light-v11">Light</option>
+ <option value="dark-v11">Dark</option>
+ <option value="satellite-v9">Satellite</option>
+ <option value="satellite-streets-v12">Satellite Streets</option>
+ <option value="navigation-day-v1">Navigation Day</option>
+ <option value="navigation-night-v1">Navigation Night</option>
</select>
</div>
</div>
- <div className='mapbox-bearing-selection'>
+ <div className="mapbox-bearing-selection">
<div>Bearing: </div>
- <input
- value={NumCast(this.mapboxMapViewState.bearing).toFixed(2)}
- type='number'
- onChange={this.onBearingChange}/>
+ <input value={NumCast(this.mapboxMapViewState.bearing).toFixed(2)} type="number" onChange={this.onBearingChange} />
</div>
- <div className='mapbox-pitch-selection'>
+ <div className="mapbox-pitch-selection">
<div>Pitch: </div>
- <input
- value={NumCast(this.mapboxMapViewState.pitch).toFixed(2)}
- type='number'
- onChange={this.onPitchChange}/>
+ <input value={NumCast(this.mapboxMapViewState.pitch).toFixed(2)} type="number" onChange={this.onPitchChange} />
</div>
- <div className='mapbox-pitch-selection'>
+ <div className="mapbox-pitch-selection">
<div>Zoom: </div>
- <input
- value={NumCast(this.mapboxMapViewState.zoom).toFixed(2)}
- type='number'
- onChange={this.onZoomChange}/>
+ <input value={NumCast(this.mapboxMapViewState.zoom).toFixed(2)} type="number" onChange={this.onZoomChange} />
</div>
- <div className='mapbox-terrain-selection'>
+ <div className="mapbox-terrain-selection">
<div>Show terrain: </div>
- <input
- type='checkbox'
- checked={this.showTerrain}
- onChange={this.toggleShowTerrain}
- />
+ <input type="checkbox" checked={this.showTerrain} onChange={this.toggleShowTerrain} />
</div>
</div>
- }
- {this.routeToAnimate &&
- <div className='animation-panel' style={{width: this.sidebarWidth() === 0 ? '100%' : `calc(100% - ${this.sidebarWidth()}px)`}}>
- <div id='route-to-animate-title'>
- {StrCast(this.routeToAnimate.title)}
- </div>
- <div className='route-animation-options'>
- {this.getRouteAnimationOptions()}
- </div>
+ )}
+ {this.routeToAnimate && (
+ <div className="animation-panel" style={{ width: this.sidebarWidth() === 0 ? '100%' : `calc(100% - ${this.sidebarWidth()}px)` }}>
+ <div id="route-to-animate-title">{StrCast(this.routeToAnimate.title)}</div>
+ <div className="route-animation-options">{this.getRouteAnimationOptions()}</div>
</div>
- }
+ )}
{this.featuresFromGeocodeResults.length > 0 && (
- <div className='mapbox-geocoding-search-results'>
+ <div className="mapbox-geocoding-search-results">
<React.Fragment>
<h4>Choose a location for your pin: </h4>
{this.featuresFromGeocodeResults
.filter(feature => feature.place_name)
.map((feature, idx) => (
- <div
- key={idx}
- className='search-result-container'
- onClick={() => {
- this.handleSearchChange("");
- this.addMarkerForFeature(feature);
- }}
- >
- <div className='search-result-place-name'>
- {feature.place_name}
+ <div
+ key={idx}
+ className="search-result-container"
+ onClick={() => {
+ this.handleSearchChange('');
+ this.addMarkerForFeature(feature);
+ }}>
+ <div className="search-result-place-name">{feature.place_name}</div>
</div>
- </div>
- ))}
+ ))}
</React.Fragment>
-
- </div>
+ </div>
)}
{/* <div className='zoom-box'>
<IconButton // increment
@@ -1813,119 +1663,102 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
<MapboxMap
ref={this._mapRef}
mapboxAccessToken={MAPBOX_ACCESS_TOKEN}
- id="mapbox-map"
+ viewState={this.isAnimating ? undefined : { ...this.mapboxMapViewState, width: NumCast(this.layoutDoc._width), height: NumCast(this.layoutDoc._height) }}
mapStyle={this.dataDoc.map_style ? StrCast(this.dataDoc.map_style) : 'mapbox://styles/mapbox/streets-v11'}
style={{
- transformOrigin: 'center',
- transform: `scale(${scale < 1 ? 1 : scale})`,
+ position: 'absolute',
+ top: 0,
+ left: 0,
zIndex: '0',
- width: '100%',
- height: '100%',
+ width: NumCast(this.layoutDoc._width) * parscale,
+ height: NumCast(this.layoutDoc._height) * parscale,
}}
initialViewState={this.isAnimating ? undefined : this.mapboxMapViewState}
onMove={this.onMapMove}
onClick={this.handleMapClick}
onDblClick={this.handleMapDblClick}
- terrain={this.showTerrain ? { source: 'mapbox-dem', exaggeration: 2.0 } : undefined}
-
-
- >
- <Source
- id="mapbox-dem"
- type="raster-dem"
- url="mapbox://mapbox.mapbox-terrain-dem-v1"
- tileSize={512}
- maxzoom={14}
- />
- <Source id='temporary-route' type='geojson' data={this.temporaryRouteSource}/>
- <Source id='map-routes' type='geojson' data={this.allRoutesGeoJson}/>
- <Layer
- id='temporary-route-layer'
- type='line'
- source='temporary-route'
- layout={{"line-join": "round", "line-cap": "round"}}
- paint={{"line-color": "#36454F", "line-width": 4, "line-dasharray": [1,1]}}
- />
- {!this.isAnimating && this.animationPhase == 0 &&
- <Layer
- id='map-routes-layer'
- type='line'
- source='map-routes'
- layout={{"line-join": "round", "line-cap": "round"}}
- paint={{"line-color": "#FF0000", "line-width": 4}}
- />
- }
- {this.routeToAnimate && (this.isAnimating || this.animationPhase > 0) &&
+ terrain={this.showTerrain ? { source: 'mapbox-dem', exaggeration: 2.0 } : undefined}>
+ <Source id="mapbox-dem" type="raster-dem" url="mapbox://mapbox.mapbox-terrain-dem-v1" tileSize={512} maxzoom={14} />
+ <Source id="temporary-route" type="geojson" data={this.temporaryRouteSource} />
+ <Source id="map-routes" type="geojson" data={this.allRoutesGeoJson} />
+ <Layer id="temporary-route-layer" type="line" source="temporary-route" layout={{ 'line-join': 'round', 'line-cap': 'round' }} paint={{ 'line-color': '#36454F', 'line-width': 4, 'line-dasharray': [1, 1] }} />
+ {!this.isAnimating && this.animationPhase == 0 && <Layer id="map-routes-layer" type="line" source="map-routes" layout={{ 'line-join': 'round', 'line-cap': 'round' }} paint={{ 'line-color': '#FF0000', 'line-width': 4 }} />}
+ {this.routeToAnimate && (this.isAnimating || this.animationPhase > 0) && (
<>
- {!this.isStreetViewAnimation &&
+ {!this.isStreetViewAnimation && (
<>
- <Source id='animated-route' type='geojson' data={this.updatedRouteCoordinates}/>
- <Layer
- id='dynamic-animation-line'
- type='line'
- source='animated-route'
- paint={{
- 'line-color': this.animationLineColor,
- 'line-width': 5,
- }}
+ <Source id="animated-route" type="geojson" data={this.updatedRouteCoordinates} />
+ <Layer
+ id="dynamic-animation-line"
+ type="line"
+ source="animated-route"
+ paint={{
+ 'line-color': this.animationLineColor,
+ 'line-width': 5,
+ }}
/>
</>
- }
- <Source id='start-pin-base' type='geojson' data={AnimationUtility.createGeoJSONCircle(this.selectedRouteCoordinates[0], 0.04)}/>
- <Source id='start-pin-top' type='geojson' data={AnimationUtility.createGeoJSONCircle(this.selectedRouteCoordinates[0], 0.25)}/>
- <Source id='end-pin-base' type='geojson' data={AnimationUtility.createGeoJSONCircle(this.selectedRouteCoordinates.slice(-1)[0], 0.04)}/>
- <Source id='end-pin-top' type='geojson' data={AnimationUtility.createGeoJSONCircle(this.selectedRouteCoordinates.slice(-1)[0], 0.25)}/>
- <Layer id='start-fill-pin-base' type='fill-extrusion' source='start-pin-base'
+ )}
+ <Source id="start-pin-base" type="geojson" data={AnimationUtility.createGeoJSONCircle(this.selectedRouteCoordinates[0], 0.04)} />
+ <Source id="start-pin-top" type="geojson" data={AnimationUtility.createGeoJSONCircle(this.selectedRouteCoordinates[0], 0.25)} />
+ <Source id="end-pin-base" type="geojson" data={AnimationUtility.createGeoJSONCircle(this.selectedRouteCoordinates.slice(-1)[0], 0.04)} />
+ <Source id="end-pin-top" type="geojson" data={AnimationUtility.createGeoJSONCircle(this.selectedRouteCoordinates.slice(-1)[0], 0.25)} />
+ <Layer
+ id="start-fill-pin-base"
+ type="fill-extrusion"
+ source="start-pin-base"
paint={{
'fill-extrusion-color': '#0bfc03',
- 'fill-extrusion-height': 1000
+ 'fill-extrusion-height': 1000,
}}
/>
- <Layer id='start-fill-pin-top' type='fill-extrusion' source='start-pin-top'
+ <Layer
+ id="start-fill-pin-top"
+ type="fill-extrusion"
+ source="start-pin-top"
paint={{
'fill-extrusion-color': '#0bfc03',
'fill-extrusion-base': 1000,
- 'fill-extrusion-height': 1200
+ 'fill-extrusion-height': 1200,
}}
/>
- <Layer id='end-fill-pin-base' type='fill-extrusion' source='end-pin-base'
+ <Layer
+ id="end-fill-pin-base"
+ type="fill-extrusion"
+ source="end-pin-base"
paint={{
'fill-extrusion-color': '#eb1c1c',
- 'fill-extrusion-height': 1000
+ 'fill-extrusion-height': 1000,
}}
/>
- <Layer id='end-fill-pin-top' type='fill-extrusion' source='end-pin-top'
+ <Layer
+ id="end-fill-pin-top"
+ type="fill-extrusion"
+ source="end-pin-top"
paint={{
'fill-extrusion-color': '#eb1c1c',
'fill-extrusion-base': 1000,
- 'fill-extrusion-height': 1200
+ 'fill-extrusion-height': 1200,
}}
/>
-
</>
- }
-
+ )}
<>
- {!this.isAnimating && this.animationPhase == 0 && this.allPushpins
- // .filter(anno => !anno.layout_unrendered)
- .map((pushpin, idx) => (
- <Marker
- key={idx}
- longitude={NumCast(pushpin.longitude)}
- latitude={NumCast(pushpin.latitude)}
- anchor='bottom'
- onClick={(e: MarkerEvent<mapboxgl.Marker, MouseEvent>) => this.handleMarkerClick(e, pushpin)}
- >
- {this.getMarkerIcon(pushpin)}
- </Marker>
- ))}
+ {!this.isAnimating &&
+ this.animationPhase == 0 &&
+ this.allPushpins
+ // .filter(anno => !anno.layout_unrendered)
+ .map((pushpin, idx) => (
+ <Marker key={idx} longitude={NumCast(pushpin.longitude)} latitude={NumCast(pushpin.latitude)} anchor="bottom" onClick={(e: MarkerEvent<mapboxgl.Marker, MouseEvent>) => this.handleMarkerClick(e, pushpin)}>
+ {this.getMarkerIcon(pushpin)}
+ </Marker>
+ ))}
</>
-
+
{/* {this.mapMarkers.length > 0 && this.mapMarkers.map((marker, idx) => (
<Marker key={idx} longitude={marker.longitude} latitude={marker.latitude}/>
))} */}
-
</MapboxMap>
</MapProvider>
@@ -2005,7 +1838,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
}
}
-{/* <Autocomplete
+{
+ /* <Autocomplete
fullWidth
id="map-location-searcher"
freeSolo
@@ -2024,8 +1858,10 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
placeholder='Enter a location'
/>
)}
- /> */}
- {/* <EditableText
+ /> */
+}
+{
+ /* <EditableText
// editing
setVal={(newText: string | number) => typeof newText === 'string' && this.handleSearchChange(newText)}
// onEnter={e => this.bingSearch()}
@@ -2034,8 +1870,10 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
// placeholder={this.bingSearchBarContents || 'Enter a location'}
placeholder='Enter a location'
textAlign="center"
- /> */}
- {/* <IconButton
+ /> */
+}
+{
+ /* <IconButton
icon={
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="magnifying-glass" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" color="#DFDFDF">
<path
@@ -2048,4 +1886,5 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
/>
<div style={{ width: 30, height: 30 }} ref={this._dragRef} onPointerDown={this.dragToggle}>
<Button tooltip="drag to place a pushpin" icon={<FontAwesomeIcon size={'lg'} icon={'bullseye'} />} />
- </div> */} \ No newline at end of file
+ </div> */
+}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 06:33:47 +0000