React Component Structure.jsx

<MapContainer>
	<Sidebar>
		<SearchFilters>
			<DateRange />
			<AdvancedFilters />
		</SearchFilters>

		<FilterTabs>
			<SearchTab />
			<OverlaysTab />
			<CollectionsTab />
		</FilterTabs>
	</Sidebar>

	<MapView>
		<Map />

		<MapControls />
	</MapView>

	<PinForm>
		<CollectionControl />	
	</PinForm>
</MapContainer>

<SearchTab>
	<input type="text" />
	<button>Go</button>

	<PlaceResultsContainer>
		<PlaceResult />
	</PlaceResultsContainer>

	<PinResultsContainer>
		<PinResult />
	</PinResultsContainer>
</SearchTab>	

<OverlaysTab>
	<OverlayResultsContainer>
		<OverlayResult />
	</OverlayResultsContainer>
</OverlaysTab>

<CollectionsTab>
	<CollectionResultsContainer>
		<CollectionResult />
	</CollectionResultsContainer>
</CollectionsTab>

<Map>
	<UpdateResultsControl />
	<AddPinControl />
	<MapControlsContainer>
		<MapNavigation />

	</MapControlsContainer>
	<PinContainer>
		<Pin>
			<PinContent />
		</Pin>
	</PinContainer>
	<Overlay />

</Map>