Commit 69a56b6f authored by amarcic's avatar amarcic
Browse files

added more section comments(incomplete)

parent 30f85921
...@@ -106,7 +106,7 @@ export const OurMap = () => { ...@@ -106,7 +106,7 @@ export const OurMap = () => {
i18n.changeLanguage(lng); i18n.changeLanguage(lng);
}; };
//state //state management with reducer
function inputReducer(state, action) { function inputReducer(state, action) {
const {type, payload} = action; const {type, payload} = action;
switch (type) { switch (type) {
...@@ -584,6 +584,7 @@ export const OurMap = () => { ...@@ -584,6 +584,7 @@ export const OurMap = () => {
</Grid>) </Grid>)
} }
</Grid> </Grid>
{/*loading indicator and button to toggle display of related objects*/}
<Grid item className="grid-loading-indicator" xs={12}> <Grid item className="grid-loading-indicator" xs={12}>
{/*{input.showSearchResults && <span>Showing search results</span>} {/*{input.showSearchResults && <span>Showing search results</span>}
{input.showRelatedObjects && <span>Showing related objects of </span>} {input.showRelatedObjects && <span>Showing related objects of </span>}
...@@ -611,6 +612,7 @@ export const OurMap = () => { ...@@ -611,6 +612,7 @@ export const OurMap = () => {
Return to search results (hide related objects) Return to search results (hide related objects)
</Button>} </Button>}
</Grid> </Grid>
{/*and finally: the map!*/}
<Grid className="grid-map" item xs={12} lg={9}> <Grid className="grid-map" item xs={12} lg={9}>
<Map <Map
className="markercluster-map" className="markercluster-map"
...@@ -631,6 +633,7 @@ export const OurMap = () => { ...@@ -631,6 +633,7 @@ export const OurMap = () => {
url={osmTiles} url={osmTiles}
noWrap={true} noWrap={true}
/> />
{/*drawing the bounding box*/}
{(/-?\d{1,2}\.\d+,-?\d{1,3}\.\d+/.test(input.boundingBoxCorner1)) {(/-?\d{1,2}\.\d+,-?\d{1,3}\.\d+/.test(input.boundingBoxCorner1))
&&<Circle &&<Circle
center={input.boundingBoxCorner1} center={input.boundingBoxCorner1}
...@@ -648,20 +651,40 @@ export const OurMap = () => { ...@@ -648,20 +651,40 @@ export const OurMap = () => {
opacity={0.25} opacity={0.25}
fillOpacity={0.05} fillOpacity={0.05}
/>} />}
{input.showRelatedObjects&&input.objectId&&mapDataContext&&mapDataContext.entity&&mapDataContext.entity.spatial { //conditions for displaying markers, for which related objects are displayed
&&mapDataContext.entity.spatial.map( (place, indexPlace) => input.showRelatedObjects
{return(place &&input.objectId
&&<Marker &&mapDataContext
key={`${place.identifier}-${indexPlace}`} &&mapDataContext.entity
//coordinates need to be reversed because of different standards between geojson and leaflet &&mapDataContext.entity.spatial
position={place.coordinates.split(", ").reverse()} //creating markers for each set of spatial data
opacity={1} &&mapDataContext.entity.spatial.map( (place, indexPlace) =>
> {return(place
<ReturnPopup object={mapDataContext.entity} place={place} handleRelatedObjects={handleRelatedObjects} showRelatedObjects={input.showRelatedObjects} mapDataContextEntity={mapDataContext.entity}/> &&<Marker
</Marker> key={`${place.identifier}-${indexPlace}`}
)})} //coordinates need to be reversed because of different standards between geojson and leaflet
position={place.coordinates.split(", ").reverse()}
opacity={1}
>
<ReturnPopup
object={mapDataContext.entity}
place={place}
handleRelatedObjects={handleRelatedObjects}
showRelatedObjects={input.showRelatedObjects}
mapDataContextEntity={mapDataContext.entity}
/>
</Marker>
)}
)}
{/*Marker Cluster for markers of related objects*/}
<MarkerClusterGroup> <MarkerClusterGroup>
{input.showRelatedObjects&&input.objectId&&mapDataContext&&mapDataContext.entity&&mapDataContext.entity.related {//conditions for displaying markers for related objects
input.showRelatedObjects
&&input.objectId
&&mapDataContext
&&mapDataContext.entity
&&mapDataContext.entity.related
//creating markers for each related object
&&mapDataContext.entity.related.map( (relatedObj, indexRelatedObj) => &&mapDataContext.entity.related.map( (relatedObj, indexRelatedObj) =>
{ {
if(relatedObj===null) return; if(relatedObj===null) return;
...@@ -679,53 +702,79 @@ export const OurMap = () => { ...@@ -679,53 +702,79 @@ export const OurMap = () => {
)}) )})
) )
})} })}
{input.showSearchResults&&(input.searchStr!==""||input.projectList.length!==0||input.chronOntologyTerm!=="" {//conditions for
||(input.boundingBoxCorner1.length!==0&&input.boundingBoxCorner2.length!==0))&&mapDataObjectsByString input.showSearchResults
&&mapDataObjectsByString.entitiesMultiFilter&&mapDataObjectsByString.entitiesMultiFilter.map( (entity, indexEntity) => &&(
{return(entity.spatial input.searchStr!==""
&& entity.spatial.map( (place, indexPlace) => ||input.projectList.length!==0
{ return( place ||input.chronOntologyTerm!==""
&& <Marker ||(
key={`${place.identifier}-${indexPlace}-${indexEntity}`} input.boundingBoxCorner1.length!==0
//coordinates need to be reversed because of different standards between geojson and leaflet &&input.boundingBoxCorner2.length!==0
position={place.coordinates.split(", ").reverse()} )
> )&&mapDataObjectsByString
<ReturnPopup object={entity} place={place} handleRelatedObjects={handleRelatedObjects} showRelatedObjects={input.showRelatedObjects} mapDataContextEntity={mapDataContext.entity}/> &&mapDataObjectsByString.entitiesMultiFilter
</Marker> //creating markers for...
&&mapDataObjectsByString.entitiesMultiFilter.map( (entity, indexEntity) =>
{return(entity.spatial
&& entity.spatial.map( (place, indexPlace) =>
{ return( place
&& <Marker
key={`${place.identifier}-${indexPlace}-${indexEntity}`}
//coordinates need to be reversed because of different standards between geojson and leaflet
position={place.coordinates.split(", ").reverse()}
>
<ReturnPopup object={entity} place={place} handleRelatedObjects={handleRelatedObjects} showRelatedObjects={input.showRelatedObjects} mapDataContextEntity={mapDataContext.entity}/>
</Marker>
)}
)
)} )}
)}
{//conditions for
input.showArchaeoSites
&&(
input.searchStr!==""
||input.regionId!==0
)&&mapDataSitesByRegion
//creating markers for...
&& mapDataSitesByRegion.sitesByRegion && mapDataSitesByRegion.sitesByRegion.map((site, indexSite) => {
return (site
&& <Marker
key={`${site.identifier}-${indexSite}`}
//coordinates need to be reversed because of different standards between geojson and leaflet
position={site.coordinates.split(", ").reverse()}
>
<ReturnPopup object={site}/>
</Marker>
)
}
) )
)})}
{input.showArchaeoSites&&(input.searchStr!==""||input.regionId!==0)&&mapDataSitesByRegion
&& mapDataSitesByRegion.sitesByRegion && mapDataSitesByRegion.sitesByRegion.map((site, indexSite) => {
return (site
&& <Marker
key={`${site.identifier}-${indexSite}`}
//coordinates need to be reversed because of different standards between geojson and leaflet
position={site.coordinates.split(", ").reverse()}
>
<ReturnPopup object={site}/>
</Marker>
)
}
)
} }
{input.showArchaeoSites&&(input.searchStr!==""||(input.boundingBoxCorner1.length!==0&&input.boundingBoxCorner2.length!==0))&&mapDataArchaeoSites {
&& mapDataArchaeoSites.archaeologicalSites && mapDataArchaeoSites.archaeologicalSites.map((site, indexSite) => { input.showArchaeoSites
return (site &&(
&& <Marker input.searchStr!==""
key={`${site.identifier}-${indexSite}`} ||(input.boundingBoxCorner1.length!==0
//coordinates need to be reversed because of different standards between geojson and leaflet &&input.boundingBoxCorner2.length!==0)
position={site.coordinates.split(", ").reverse()} )&&mapDataArchaeoSites
> //creating markers for...
<ReturnPopup object={site}/> && mapDataArchaeoSites.archaeologicalSites && mapDataArchaeoSites.archaeologicalSites.map((site, indexSite) => {
</Marker> return (site
) && <Marker
} key={`${site.identifier}-${indexSite}`}
) //coordinates need to be reversed because of different standards between geojson and leaflet
position={site.coordinates.split(", ").reverse()}
>
<ReturnPopup object={site}/>
</Marker>
)
}
)
} }
</MarkerClusterGroup> </MarkerClusterGroup>
</Map> </Map>
</Grid> </Grid>
{/*search/filter result list*/}
{<Grid className="grid-results-list-outer" item xs={12} lg={3} container direction="column"> {<Grid className="grid-results-list-outer" item xs={12} lg={3} container direction="column">
{/*<Paper>*/} {/*<Paper>*/}
{<Grid className="grid-results-list" item container direction="column"> {<Grid className="grid-results-list" item container direction="column">
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment