-
Notifications
You must be signed in to change notification settings - Fork 16
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat:types for map #1856
feat:types for map #1856
Changes from all commits
b814594
c6cce2b
889be14
209aef6
22fdd54
21a0f33
4d2a642
0dadc03
52a48a9
93b881a
b47be79
241e513
24df054
01d3291
4d6bbad
d64e30d
b14548d
27440c1
afba940
674e19b
cfb95c8
74f28b8
79d114e
bb761fa
493f31b
3d016a5
39221be
8281959
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,197 @@ | ||
import { | ||
TreeProjectClassification, | ||
CountryCode, | ||
CurrencyCode, | ||
TreeProjectMetadata, | ||
DefaultPaymentConfig, | ||
Tpo, | ||
UnitTypes, | ||
} from '@planet-sdk/common'; | ||
import { Nullable } from '@planet-sdk/common/build/types/util'; | ||
import { ContributionProps } from '../../user/RegisterTrees/RegisterTrees/SingleContribution'; | ||
import { FlyToInterpolator } from 'react-map-gl'; | ||
|
||
export interface ViewportProps { | ||
height: number | string; | ||
width: number | string; | ||
zoom: [number] | number | undefined; | ||
latitude?: number; | ||
longitude?: number; | ||
center?: [number, number]; | ||
transitionDuration?: number | undefined; | ||
transitionInterpolator?: FlyToInterpolator | undefined; | ||
transitionEasing?: (normalizedTime: number) => number; | ||
} | ||
|
||
export interface ProjectGeoJsonProps { | ||
type: 'Feature'; | ||
geometry: { | ||
type: string; | ||
coordinates: number[]; | ||
}; | ||
properties: { | ||
allowDonations: boolean; | ||
classification: TreeProjectClassification; | ||
countPlanted: number; | ||
countTarget: number; | ||
country: CountryCode; | ||
currency: CurrencyCode; | ||
id: string; | ||
image: string; | ||
isApproved: boolean; | ||
isFeatured: boolean; | ||
isTopProject: boolean; | ||
location: Nullable<string>; | ||
metadata: TreeProjectMetadata; | ||
minTreeCount: number; | ||
name: string; | ||
paymentDefaults: Nullable<DefaultPaymentConfig>; | ||
purpose: 'trees'; | ||
unit: 'tree'; | ||
slug: string; | ||
taxDeductionCountries: CountryCode[]; | ||
tpo: Tpo; | ||
treeCost: number; | ||
unitCost: number; | ||
unitType: UnitTypes; | ||
}; | ||
} | ||
|
||
export interface RegisterTreeGeometry { | ||
features?: []; | ||
coordinates: [number, number] | number[][]; | ||
type: 'Polygon' | 'Point'; | ||
} | ||
|
||
export interface RegisterTreesFormProps { | ||
setContributionGUID: React.Dispatch<React.SetStateAction<string>>; | ||
setContributionDetails: React.Dispatch< | ||
React.SetStateAction<ContributionProps | null> | ||
>; | ||
setRegistered: React.Dispatch<React.SetStateAction<boolean>>; | ||
} | ||
|
||
// Map styling | ||
|
||
export interface MapStyle { | ||
version: number; | ||
sprite: string; | ||
glyphs: string; | ||
sources: Sources; | ||
layers: Layer[]; | ||
metadata: Metadata; | ||
} | ||
|
||
export type RequiredMapStyle = Omit<MapStyle, 'sprite', 'glyphs', 'metadata'>; | ||
|
||
export interface Sources { | ||
esri: Esri; | ||
} | ||
|
||
export interface Esri { | ||
type: string; | ||
scheme: string; | ||
tilejson: string; | ||
format: string; | ||
maxzoom: number; | ||
tiles: string[]; | ||
name: string; | ||
} | ||
|
||
export interface Layer { | ||
id: string; | ||
type: string; | ||
paint: Paint; | ||
layout: Layout; | ||
showProperties?: boolean; | ||
source?: string; | ||
'source-layer'?: string; | ||
minzoom?: number; | ||
maxzoom?: number; | ||
filter?: any[]; | ||
} | ||
|
||
export interface Paint { | ||
'background-color'?: string; | ||
'fill-color': any; | ||
'fill-outline-color'?: string; | ||
'fill-pattern'?: string; | ||
'fill-opacity'?: number; | ||
'line-color': any; | ||
'line-width': any; | ||
'line-dasharray'?: number[]; | ||
'text-color'?: string; | ||
'text-halo-color'?: string; | ||
'fill-translate'?: FillTranslate; | ||
'fill-translate-anchor'?: string; | ||
'line-opacity'?: number; | ||
'text-halo-blur'?: number; | ||
'text-halo-width'?: number; | ||
} | ||
|
||
export interface FillTranslate { | ||
stops: [number, number[]][]; | ||
} | ||
|
||
export interface Layout { | ||
visibility?: string; | ||
'line-join'?: string; | ||
'line-cap'?: string; | ||
'symbol-placement'?: string; | ||
'symbol-avoid-edges'?: boolean; | ||
'icon-image'?: string; | ||
'symbol-spacing'?: number; | ||
'icon-rotation-alignment'?: string; | ||
'icon-allow-overlap'?: boolean; | ||
'icon-padding'?: number; | ||
'text-font'?: string[]; | ||
'text-size': any; | ||
'text-letter-spacing': any; | ||
'text-line-height'?: number; | ||
'text-max-width'?: number; | ||
'text-field'?: string; | ||
'text-padding'?: number; | ||
'text-max-angle'?: number; | ||
'text-offset'?: number[]; | ||
'text-rotation-alignment'?: string; | ||
'text-transform'?: string; | ||
'text-optional'?: boolean; | ||
} | ||
|
||
export interface Metadata { | ||
arcgisStyleUrl: string; | ||
arcgisOriginalItemTitle: string; | ||
arcgisQuickEditorWarning: boolean; | ||
arcgisQuickEditor: ArcgisQuickEditor; | ||
arcgisEditorExtents: ArcgisEditorExtent[]; | ||
arcgisMinimapVisibility: boolean; | ||
} | ||
|
||
export interface ArcgisQuickEditor { | ||
labelTextColor: string; | ||
labelHaloColor: string; | ||
baseColor: string; | ||
spriteProcessing: boolean; | ||
labelContrast: number; | ||
labelColorMode: string; | ||
colorMode: string; | ||
colors: Colors; | ||
boundaries: string; | ||
} | ||
|
||
export interface Colors { | ||
boundaries: string; | ||
} | ||
|
||
export interface ArcgisEditorExtent { | ||
spatialReference: SpatialReference; | ||
xmin: number; | ||
ymin: number; | ||
xmax: number; | ||
ymax: number; | ||
} | ||
|
||
export interface SpatialReference { | ||
wkid: number; | ||
latestWkid?: number; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -13,38 +13,43 @@ | |
import { ParamsContext } from '../../common/Layout/QueryParamsContext'; | ||
import { PopupData } from './maps/Markers'; | ||
|
||
interface ShowDetailsProps { | ||
coordinates: [number, number] | null; | ||
show: boolean; | ||
} | ||
|
||
export default function ProjectsMap(): ReactElement { | ||
const { | ||
project, | ||
showProjects, | ||
searchedProject, | ||
viewport, | ||
setViewPort, | ||
mapState, | ||
setMapState, | ||
isMobile, | ||
setLoaded, | ||
mapRef, | ||
defaultMapCenter, | ||
defaultZoom, | ||
zoomLevel, | ||
plIds, | ||
setHoveredPl, | ||
plantLocations, | ||
setSelectedPl, | ||
selectedPl, | ||
satellite, | ||
setSatellite, | ||
selectedMode, | ||
hoveredPl, | ||
setIsPolygonMenuOpen, | ||
setFilterOpen, | ||
setSamplePlantLocation, | ||
} = useProjectProps(); | ||
|
||
const { t } = useTranslation(['maps']); | ||
const { embed, showProjectList } = React.useContext(ParamsContext); | ||
//Map | ||
const _onStateChange = (state: any) => setMapState({ ...state }); | ||
const _onViewportChange = (view: any) => setViewPort({ ...view }); | ||
|
||
|
@@ -63,8 +68,8 @@ | |
loadMapStyle(); | ||
}, []); | ||
|
||
const [showDetails, setShowDetails] = React.useState<DetailsType>({ | ||
coordinates: [], | ||
const [showDetails, setShowDetails] = React.useState<ShowDetailsProps>({ | ||
coordinates: null, | ||
show: false, | ||
}); | ||
|
||
|
@@ -186,8 +191,12 @@ | |
</div> | ||
{showDetails.show && ( | ||
<Popup | ||
latitude={showDetails.coordinates[1]} | ||
longitude={showDetails.coordinates[0]} | ||
latitude={ | ||
showDetails?.coordinates ? showDetails?.coordinates[1] : 0 | ||
} | ||
longitude={ | ||
showDetails?.coordinates ? showDetails?.coordinates[1] : 0 | ||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Cleanup needed for DetailsType |
||
closeButton={false} | ||
closeOnClick={false} | ||
onClose={() => setPopupData({ show: false })} | ||
|
@@ -207,7 +216,7 @@ | |
</div> | ||
); | ||
} | ||
interface DetailsType { | ||
Check notice on line 219 in src/features/projects/components/ProjectsMap.tsx
|
||
coordinates: number[]; | ||
show: boolean; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -11,23 +11,19 @@ import { MapProject } from '../../../common/types/ProjectPropsContextInterface'; | |
type PopupClosedData = { | ||
show: false; | ||
}; | ||
|
||
type PopupOpenData = { | ||
show: true; | ||
lat: number; | ||
long: number; | ||
project: MapProject; | ||
}; | ||
|
||
export type PopupData = PopupClosedData | PopupOpenData; | ||
|
||
interface Props { | ||
searchedProject: MapProject[]; | ||
setPopupData: SetState<PopupData>; | ||
popupData: PopupData; | ||
isMobile: boolean; | ||
} | ||
|
||
export default function Markers({ | ||
searchedProject, | ||
setPopupData, | ||
|
@@ -36,11 +32,9 @@ export default function Markers({ | |
}: Props): ReactElement { | ||
let timer: NodeJS.Timeout; | ||
const router = useRouter(); | ||
|
||
const [open, setOpen] = React.useState(false); | ||
const buttonRef = React.useRef<HTMLButtonElement>(null); | ||
const { embed, callbackUrl } = React.useContext(ParamsContext); | ||
|
||
const handleClose = () => { | ||
setOpen(false); | ||
}; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. In |
||
|
@@ -83,7 +77,7 @@ export default function Markers({ | |
} | ||
); | ||
}} | ||
onKeyPress={() => { | ||
onKeyDown={() => { | ||
router.push( | ||
`/${projectMarker.properties.slug}/${ | ||
embed === 'true' | ||
|
@@ -162,7 +156,7 @@ export default function Markers({ | |
); | ||
} | ||
}} | ||
onKeyPress={() => { | ||
onKeyDown={() => { | ||
router.push( | ||
`/${popupData.project.properties.slug}/${ | ||
embed === 'true' | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
On line number 161
onStateChange
is not a part of the MapGL props