OurMap.jsx 30.6 KB
Newer Older
1
import React, {useState, useEffect, useReducer} from 'react';
2
import { FormGroup, FormControlLabel, Checkbox, FormLabel, Button, TextField, Switch, Grid, IconButton, Tabs, Tab, LinearProgress } from '@material-ui/core';
3
import Autocomplete from '@material-ui/lab/Autocomplete';
4
import ClearIcon from "@material-ui/icons/Clear";
Elisabeth Reuhl's avatar
Elisabeth Reuhl committed
5
import { useTranslation } from 'react-i18next';
6
import {Map, TileLayer, Marker, Rectangle, Circle} from 'react-leaflet';
7
//import { Icon } from 'leaflet';
8
import MarkerClusterGroup from "react-leaflet-markercluster";
9
import { ReturnPopup } from '../../components'
amarcic's avatar
amarcic committed
10
11
12

import { useQuery } from "@apollo/react-hooks";
import gql from 'graphql-tag';
Elisabeth Reuhl's avatar
Elisabeth Reuhl committed
13
14
15
16
17
18

const osmTiles = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
const osmAttr = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
const mapCenter = [11.5024338, 17.7578122];
const zoomLevel = 4;

19
const GET_CONTEXT_BY_ID = gql`
20
    query giveInf($arachneId: ID!) {
21
        entity(id: $arachneId) {
amarcic's avatar
amarcic committed
22
            identifier
23
            name
24
25
26
27
28
29
30
31
32
33
            spatial {
                identifier
                name
                coordinates
            }
            temporalArachne {
                title
                begin
                end
            }
34
            related(types: [Einzelobjekte]) {
amarcic's avatar
amarcic committed
35
36
                identifier
                name
37
                type
amarcic's avatar
amarcic committed
38
                spatial {
39
                    identifier
amarcic's avatar
amarcic committed
40
41
42
43
44
45
46
47
                    name
                    coordinates
                }
            }
        }
    }
`;

48
const GET_OBJECTS = gql`
49
    query search ($searchTerm: String, $project: [String], $bbox: [String], $periodTerm: String) {
50
        entitiesMultiFilter(searchString: $searchTerm, projects: $project, coordinates: $bbox, period: $periodTerm, entityTypes: [Einzelobjekte]) {
51
52
53
            identifier
            name
            spatial {
54
                identifier
55
56
57
                name
                coordinates
            }
58
            periodName
59
60
        }
    }
61
`;
62

63
64
65
66
67
68
const GET_ARCHAEOLOGICAL_SITES = gql`
    query searchArchaeoSites($searchTerm: String, $bbox: [String]) {
        archaeologicalSites(searchString: $searchTerm, coordinates: $bbox) {
            identifier
            name
            coordinates
69
70
71
72
73
74
75
76
77
78
79
80
81
            #locatedIn {
            #    identifier
            #    name
            #}
            #containedSites {
            #    identifier
            #    name
            #}
            #locatedInPlaces {
            #    identifier
            #    name
            #}
            #types
82
83
84
85
86
87
88
89
90
91
            #discoveryContext {
            #  identifier
            #}
            #linkedObjects(types: [Topographien]) {
            #  identifier
            #}
        }
    }
`;

92
93
94
95
96
97
98
99
100
101
const GET_SITES_BY_REGION = gql`
    query byRegion($searchTerm: String, $idOfRegion: ID!) {
        sitesByRegion(searchString: $searchTerm, id: $idOfRegion) {
            identifier
            name
            coordinates
        }
    }
`;

Elisabeth Reuhl's avatar
Elisabeth Reuhl committed
102
103
104
105
106
107
108
export const OurMap = () => {
    const {t, i18n} = useTranslation();

    const changeLanguage = lng => {
        i18n.changeLanguage(lng);
    };

109
    //state
110
    function inputReducer(state, action) {
111
112
        const {type, payload} = action;
        switch (type) {
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
            case 'UPDATE_INPUT':
                return {
                    ...state,
                    [payload.field]: payload.value
                };
            case 'CHECK_ITEM':
                return {
                    ...state,
                    [payload.field]: [...state[payload.field], payload.toggledItem]
                };
            case 'UNCHECK_ITEM':
                return {
                    ...state,
                    [payload.field]: state[payload.field].filter(checked => checked !== payload.toggledItem)
                };
            case 'TOGGLE_STATE':
                return {
                    ...state,
                    [payload.toggledField]: !state[payload.toggledField]
132
133
134
135
                };
            case 'DRAW_BBOX':
                return {
                    ...state,
136
137
                    boundingBoxCorner1: state.boundingBoxCorner1.length === 0 ? [String(payload.lat), String(payload.lng)] : state.boundingBoxCorner1,
                    boundingBoxCorner2: state.boundingBoxCorner1.length === 0 ? state.boundingBoxCorner2 : [String(payload.lat), String(payload.lng)]
138
139
                };
            case 'MANUAL_BBOX':
140
                payload.value = payload.valueString.split(",").map(coordinateString => {
141
142
143
144
145
146
                    return parseFloat(coordinateString).toFixed(coordinateString.split(".")[1].length)
                });
                return {
                    ...state,
                    [payload.field]: payload.value
                };
147
            default:
148
            //return { ...state, [type]: payload };
149
        }
150
151
152
    }

    const initialInput = {
153
        objectId: 0,
154
155
        regionId: 0,
        searchStr: "",
156
        projectList: [{"projectLabel": "African Archaeology Archive Cologne", "projectBestandsname": "AAArC"},
157
158
159
160
            {
                "projectLabel": "Syrian Heritage Archive Project",
                "projectBestandsname": "Syrian-Heritage-Archive-Project"
            },
161
            {"projectLabel": "Friedrich Rakob’s Bequest", "projectBestandsname": "dai-rom-nara"}],
162
        checkedProjects: [],
163
        mode: "archaeoSites",
164
        sitesMode: "",
165
166
        showSearchResults: false,
        showArchaeoSites: true,
167
        showRelatedObjects: false,
168
169
        chronOntologyTerm: "",
        boundingBoxCorner1: [],
170
171
        boundingBoxCorner2: [],
        drawBBox: false
172
173
    };

174
    const [input, dispatch] = useReducer(inputReducer, initialInput);
175

176
    const [mapDataContext, setMapDataContext] = useState({});
177
    const [mapDataObjectsByString, setMapDataObjectsByString] = useState({});
178
    const [mapDataArchaeoSites, setMapDataArchaeoSites] = useState({});
179
    const [mapDataSitesByRegion, setMapDataSitesByRegion] = useState({});
180

181
    //queries
182
183
184
185
186
    const {data: dataContext, loading: loadingContext, error: errorContext} = useQuery(GET_CONTEXT_BY_ID, {variables: {arachneId: input.objectId}});
    const {data: dataObjectsByString, loading: loadingObjectsByString, error: errorObjectsByString} =
        useQuery(GET_OBJECTS, {
            variables: {
                searchTerm: input.searchStr, project: input.checkedProjects,
187
                // only send coordinates if entered values have valid format (floats with at least one decimal place)
188
                bbox: (/-?\d{1,2}\.\d+,-?\d{1,3}\.\d+/.test(input.boundingBoxCorner1)) && (/-?\d{1,2}\.\d+,-?\d{1,3}\.\d+/.test(input.boundingBoxCorner2))
189
190
                    ? input.boundingBoxCorner1.concat(input.boundingBoxCorner2)
                    : [],
191
192
193
194
195
196
197
198
199
200
201
202
203
204
                periodTerm: input.chronOntologyTerm
            }
        });
    const {data: dataArchaeoSites, loading: loadingArchaeoSites, error: errorArchaeoSites} = useQuery(GET_ARCHAEOLOGICAL_SITES, {
        variables: {
            searchTerm: input.searchStr,
            // only send coordinates if entered values have valid format (floats with at least one decimal place)
            bbox: (/-?\d{1,2}\.\d+,-?\d{1,3}\.\d+/.test(input.boundingBoxCorner1)) && (/-?\d{1,2}\.\d+,-?\d{1,3}\.\d+/.test(input.boundingBoxCorner2))
                ? input.boundingBoxCorner1.concat(input.boundingBoxCorner2)
                : []
        }
    });
    const {data: dataSitesByRegion, loading: loadingSitesByRegion, error: errorSitesByRegion} = useQuery(GET_SITES_BY_REGION, {
        variables: {searchTerm: input.searchStr, idOfRegion: input.regionId}});
205

206
207
208
209
210
    const chronOntologyTerms = [
        'antoninisch', 'archaisch', 'augusteisch', 'FM III', 'frühkaiserzeitlich', 'geometrisch', 'hadrianisch',
        'hellenistisch', 'hochhellenistisch', 'kaiserzeitlich',  'klassisch', 'MM II', 'MM IIB', 'römisch', 'SB II',
        'severisch', 'SH IIIB', 'SM I', 'SM IB', 'trajanisch'
    ];
211

212
213
    const regions = [
        {title: 'Africa', id: 2042601},
214
215
216
217
218
219
        {title: 'Egypt', id: 2042786},
        {title: 'Meroe', id: 2293921},
        {title: 'Republic of Namibia', id: 2293917},
        {title: 'Sudan', id: 2042707},
        {title: 'Tschad', id: 2128989},
        {title: 'Wadi Howar Region Sudan', id: 2042736},
220
221
    ];

222
    const handleRelatedObjects = (id) => {
223
        dispatch({type: "UPDATE_INPUT", payload: {field: "objectId", value: id ? Number(id) : input.objectId}});
224
225
        dispatch({type: "TOGGLE_STATE", payload: {toggledField: "showSearchResults"}})
        dispatch({type: "TOGGLE_STATE", payload: {toggledField: "showRelatedObjects"}})
226
        console.log("handleRelatedObjects!");
227
    };
228

229
    useEffect( () => {
230
231
        if(dataContext&&input.showRelatedObjects) {
            setMapDataContext(dataContext);
232
233
234
            console.log("rerender dataContext!");
            console.log("rerender dataContext --> dataContext: ", dataContext);
            console.log("rerender dataContext --> input:", input);
235
236
        }
    }, [dataContext, input.showRelatedObjects]);
237

238
    useEffect( () => {
239
240
        if (dataObjectsByString && input.showSearchResults && (input.searchStr!==""||input.projectList.length!==0||input.chronOntologyTerm!==""
            ||(input.boundingBoxCorner1.length!==0&&input.boundingBoxCorner2.length!==0))) {
241
            setMapDataObjectsByString(dataObjectsByString);
242
243
244
            console.log("rerender dataObjectsByString!");
            console.log("rerender dataObjectsByString --> dataObjectsByString: ", dataObjectsByString);
            console.log("rerender dataObjectsByString --> input:", input);
245
        }
246
    }, [dataObjectsByString, input.showSearchResults, input.searchStr, input.checkedProjects, input.chronOntologyTerm, input.boundingBoxCorner1, input.boundingBoxCorner2]);
247

248
249
250
251
252
253
254
    useEffect( () => {
        if (dataArchaeoSites && input.showArchaeoSites && (input.searchStr!==""||(input.boundingBoxCorner1.length!==0&&input.boundingBoxCorner2.length!==0))) {
            setMapDataArchaeoSites(dataArchaeoSites);
            console.log("rerender dataArchaeoSites!");
            console.log("rerender dataArchaeoSites --> dataArchaeoSites: ", dataArchaeoSites);
            console.log("rerender dataArchaeoSites --> input:", input);
        }
255
    }, [dataArchaeoSites, input.showArchaeoSites, input.searchStr, input.boundingBoxCorner1, input.boundingBoxCorner2, input.sitesMode]);
256

257
258
259
260
261
262
263
    useEffect( () => {
        if (dataSitesByRegion && input.showArchaeoSites && (input.searchStr!==""||(input.regionId!==0))) {
            setMapDataSitesByRegion(dataSitesByRegion);
            console.log("rerender dataSitesByRegion!");
            console.log("rerender dataSitesByRegion --> dataSitesByRegion: ", dataSitesByRegion);
            console.log("rerender dataSitesByRegion --> input:", input);
        }
264
    }, [dataSitesByRegion, input.showArchaeoSites, input.searchStr, input.regionId, input.sitesMode]);
265

266

Elisabeth Reuhl's avatar
Elisabeth Reuhl committed
267
268
269
    return(
        <div>
            <h2>{t('Map')}</h2>
270
            <div>
271
                <Grid container spacing={3}>
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
                    <Grid item xs={7}>
                        <FormLabel component="legend">Search mode</FormLabel>
                        <Tabs
                            name="mapMode"
                            value={input.mode}
                            indicatorColor="primary"
                            textColor="primary"
                            centered
                            onChange={(event, newValue) => {
                                dispatch({type: "UPDATE_INPUT", payload: {field: "mode", value: newValue}})
                                dispatch({type: "TOGGLE_STATE", payload: {toggledField: "showArchaeoSites"}})
                                dispatch({type: "TOGGLE_STATE", payload: {toggledField: "showSearchResults"}})
                            }}
                        >
                            <Tab
                                value="archaeoSites"
                                label="Search for Archaeological Sites"
                                wrapped
                            />
                            <Tab
                                value="objects"
                                label="Search for Objects"
                                wrapped
                            />
                        </Tabs>
                    </Grid>
298
299
300
                    <Grid item xs={12} lg={6}>
                        <FormGroup>
                            <FormLabel component="legend">Filter by search term</FormLabel>
Elisabeth Reuhl's avatar
Elisabeth Reuhl committed
301
                            <TextField
302
                                type="text"
Elisabeth Reuhl's avatar
Elisabeth Reuhl committed
303
                                variant="outlined"
304
305
306
                                name="searchStr"
                                defaultValue={input.searchStr}
                                placeholder="*"
307
                                onChange={event => dispatch({type: "UPDATE_INPUT", payload: {field: event.currentTarget.name, value: event.currentTarget.value}})}
308
309
310
                            />
                        </FormGroup>
                    </Grid>
Elisabeth Reuhl's avatar
Elisabeth Reuhl committed
311
                    {!input.showArchaeoSites&&<Grid item xs={12} lg={6}>
312
                        <FormGroup>
313
                            <FormLabel component="legend" disabled={input.showArchaeoSites}>Filter by projects</FormLabel>
314
315
316
                            {input.projectList && input.projectList.map(project => {
                                return (project
                                    && <FormControlLabel
317
                                        key={project.projectBestandsname}
318
319
320
                                        control={
                                            <Checkbox
                                                checked={input.checkedProjects.includes(project.projectBestandsname)}
321
322
                                                onChange={() => {
                                                    dispatch({
323
                                                        type: input.checkedProjects.includes(project.projectBestandsname) ? "UNCHECK_ITEM" : "CHECK_ITEM",
324
325
326
                                                        payload: {field: "checkedProjects", toggledItem: project.projectBestandsname}
                                                    })
                                                }}
327
328
                                                name={project.projectBestandsname}
                                                key={project.projectBestandsname}
329
                                                disabled={input.showArchaeoSites}
330
331
332
                                            />
                                        }
                                        label={project.projectLabel}
333
                                    />
334
335
336
                                )
                            })}
                        </FormGroup>
Elisabeth Reuhl's avatar
Elisabeth Reuhl committed
337
338
339
                    </Grid>}
                    {!input.showArchaeoSites&&<Grid item xs={12} lg={6}>
                        <FormGroup>
340
341
342
343
344
345
346
347
348
                            <FormLabel component="legend" disabled={input.showArchaeoSites}>Filter by time</FormLabel>
                            <Autocomplete
                                name="chronOntologyTerm"
                                options={chronOntologyTerms}
                                onChange={(event, newValue) => {dispatch({type: "UPDATE_INPUT", payload: {field: "chronOntologyTerm", value: newValue}})}}
                                renderInput={(params) => <TextField {...params} label="iDAI.chronontology term" variant="outlined" />}
                                autoSelect={true}
                                disabled={input.showArchaeoSites}
                            />
Elisabeth Reuhl's avatar
Elisabeth Reuhl committed
349
350
                        </FormGroup>
                    </Grid>}
351
352
353
354
355
356
357
358
359
360
361
362
                    {!input.showSearchResults && <Grid item xs={12} lg={6}>
                        <FormGroup>
                            <FormLabel component="legend">Filter by region</FormLabel>
                            <Autocomplete
                                name="regionId"
                                options={regions}
                                getOptionLabel={(option) => option.title}
                                getOptionSelected={(option, value) => {
                                    return (option.id === value.id)
                                }}
                                onChange={(event, newValue) => {
                                    dispatch({type: "UPDATE_INPUT", payload: {field: "sitesMode", value: "region"}})
363
364
365
                                    newValue===null
                                        ? (dispatch({type: "UPDATE_INPUT", payload: {field: "regionId", value: 0}}), dispatch({type: "UPDATE_INPUT", payload: {field: "sitesMode", value: ""}}))
                                        : dispatch({type: "UPDATE_INPUT", payload: {field: "regionId", value: newValue.id}});
366
367
368
369
370
371
372
373
                                }}
                                renderInput={(params) => <TextField {...params} label="" variant="outlined" />}
                                autoSelect={true}
                                disabled={input.sitesMode==="bbox"}
                            />
                        </FormGroup>
                    </Grid>}
                    {<Grid item xs={12} lg={6}>
374
                        <FormGroup>
Elisabeth Reuhl's avatar
Elisabeth Reuhl committed
375
                            <FormLabel component="legend">Filter by coordinates (bounding box)</FormLabel>
376
                            <TextField
377
                                type="text"
378
                                variant="outlined"
379
380
381
                                name="boundingBoxCorner1"
                                value={input.boundingBoxCorner1}
                                placeholder="North, East decimal degrees"
382
                                label="North, East decimal degrees"
383
                                onChange={(event) => {
384
                                    dispatch({type: "UPDATE_INPUT", payload: {field: "sitesMode", value: "bbox"}});
385
                                    // only create bbox if entered values have valid format (floats with at least one decimal place)
386
387
388
389
390
391
                                    if(/-?\d{1,2}\.\d+,-?\d{1,3}\.\d+/.test(event.currentTarget.value)) {
                                        dispatch({type: "MANUAL_BBOX", payload: {field: event.currentTarget.name, valueString: event.currentTarget.value}})
                                    }
                                    else {
                                        dispatch({type: "UPDATE_INPUT", payload: {field: event.currentTarget.name, value: event.currentTarget.value}})
                                    }
392
                                }}
393
394
                                InputProps={{
                                    endAdornment: (
395
                                        input.boundingBoxCorner1.length!==0
396
                                        &&<IconButton
397
398
                                            onClick={() => {
                                                dispatch({type: "UPDATE_INPUT", payload: {field: "sitesMode", value: ""}});
399
                                                dispatch({type: "UPDATE_INPUT", payload: {field: "boundingBoxCorner1", value: []}})}
400
                                            }
401
402
403
404
405
                                        >
                                            <ClearIcon />
                                        </IconButton>
                                    )
                                }}
406
                                disabled={input.sitesMode==="region"}
407
                            />
408
                            <TextField
409
                                type="text"
410
                                variant="outlined"
411
412
413
                                name="boundingBoxCorner2"
                                value={input.boundingBoxCorner2}
                                placeholder="South, West decimal degrees"
414
                                label="South, West decimal degrees"
415
                                onChange={(event) => {
416
417
                                    dispatch({type: "UPDATE_INPUT", payload: {field: "sitesMode", value: "bbox"}});

418
                                    // only create bbox if entered values have valid format (floats with at least one decimal place)
419
420
421
422
423
424
425
                                    if(/-?\d{1,2}\.\d+,-?\d{1,3}\.\d+/.test(event.currentTarget.value)) {
                                        dispatch({type: "MANUAL_BBOX", payload: {field: event.currentTarget.name, valueString: event.currentTarget.value}})
                                    }
                                    else {
                                        dispatch({type: "UPDATE_INPUT", payload: {field: event.currentTarget.name, value: event.currentTarget.value}})

                                    }
426
                                }}
427
428
                                InputProps={{
                                    endAdornment: (
429
                                        input.boundingBoxCorner2.length!==0
430
                                        &&<IconButton
431
432
433
434
                                            onClick={() => {
                                                dispatch({type: "UPDATE_INPUT", payload: {field: "sitesMode", value: ""}});
                                                dispatch({type: "UPDATE_INPUT", payload: {field: "boundingBoxCorner2", value: []}})
                                            }}
435
436
437
438
439
                                        >
                                            <ClearIcon />
                                        </IconButton>
                                    )
                                }}
440
                                disabled={input.sitesMode==="region"}
441
442
443
444
                            />
                            <FormControlLabel control={
                                <Switch
                                    name="drawBBox"
445
                                    checked={input.drawBBox}
446
                                    color="primary"
447
                                    onChange={() => dispatch({type: "TOGGLE_STATE", payload: {toggledField: "drawBBox"}})}
448
                                    disabled={input.sitesMode==="region"}
449
450
451
452
453
454
                                />
                            }
                                              label="Activate switch to select a bounding box directly on the map. Click the map in two places to select first the north-east corner, then the south-west corner."
                                              labelPlacement="start"
                            />
                        </FormGroup>
455
                    </Grid>}
456
457
                </Grid>

458
                {input.showSearchResults && <span>Showing search results</span>}
459
460
461
                {input.showRelatedObjects && <span>Showing related objects of </span>}
                {input.showRelatedObjects&&mapDataContext&&mapDataContext.entity&&<p>{mapDataContext.entity.name}</p>}
                {input.showArchaeoSites && <span>Showing archaeological sites</span>}
462
                {input.showArchaeoSites && mapDataSitesByRegion&& mapDataSitesByRegion.sitesByRegion&&mapDataSitesByRegion.sitesByRegion.length!==0 && <span> (by region)</span>}
463

464
                {loadingContext && <span>...loadingContext</span> && <LinearProgress />}
465
                {errorContext && <span>...errorContext: {errorContext.message}</span> && console.log(errorContext.message)}
466
                {loadingObjectsByString && <span>...loadingObjectsByString</span> && <LinearProgress />}
467
                {errorObjectsByString && <span>...errorObjectsByString</span> && console.log(errorObjectsByString.message)}
468
                {loadingArchaeoSites && <span>...loadingArchaeoSites</span> && <LinearProgress />}
469
                {errorArchaeoSites && <span>...errorArchaeoSites</span> && console.log(errorArchaeoSites.message)}
470
471
                {loadingSitesByRegion && <span>...loadingSitesByRegion</span> && <LinearProgress />}
                {errorSitesByRegion && <span>...errorSitesByRegion</span> && console.log(errorSitesByRegion.message)}
472

473
                {input.showRelatedObjects && <Button
amarcic's avatar
amarcic committed
474
                    onClick={() => handleRelatedObjects()}
475
476
477
478
479
                    name="hideRelatedObjects"
                    variant="contained"
                    color="primary">
                    Return to search results (hide related objects)
                </Button>}
480
            </div>
Elisabeth Reuhl's avatar
Elisabeth Reuhl committed
481
            <Map
482
                className="markercluster-map"
Elisabeth Reuhl's avatar
Elisabeth Reuhl committed
483
484
                center={mapCenter}
                zoom={zoomLevel}
485
486
                minZoom={3}
                maxBounds={[[-90, -180], [90, 180]]}
487
                onClick={(event) => {
488
489
                    if (input.drawBBox && (!(/-?\d{1,2}\.\d+,-?\d{1,3}\.\d+/.test(input.boundingBoxCorner1)) || !(/-?\d{1,2}\.\d+,-?\d{1,3}\.\d+/.test(input.boundingBoxCorner2)))) {
                        dispatch({type: "DRAW_BBOX", payload: event.latlng});
490
491
                    }
                }}
Elisabeth Reuhl's avatar
Elisabeth Reuhl committed
492
493
494
495
            >
                <TileLayer
                    attribution={osmAttr}
                    url={osmTiles}
496
                    noWrap={true}
Elisabeth Reuhl's avatar
Elisabeth Reuhl committed
497
                />
498
                {(/-?\d{1,2}\.\d+,-?\d{1,3}\.\d+/.test(input.boundingBoxCorner1))
499
500
501
502
                &&<Circle
                    center={input.boundingBoxCorner1}
                    opacity={0.5}
                />}
503
                {(/-?\d{1,2}\.\d+,-?\d{1,3}\.\d+/.test(input.boundingBoxCorner2))
504
505
506
507
                &&<Circle
                    center={input.boundingBoxCorner2}
                    opacity={0.5}
                />}
508
                {(/-?\d{1,2}\.\d+,-?\d{1,3}\.\d+/.test(input.boundingBoxCorner1))&&(/-?\d{1,2}\.\d+,-?\d{1,3}\.\d+/.test(input.boundingBoxCorner2))
509
510
511
512
513
514
                &&<Rectangle
                    bounds={[input.boundingBoxCorner1,input.boundingBoxCorner2]}
                    weight={2}
                    opacity={0.25}
                    fillOpacity={0.05}
                />}
515
                {input.showRelatedObjects&&input.objectId&&mapDataContext&&mapDataContext.entity&&mapDataContext.entity.spatial
516
517
518
519
520
521
522
                &&mapDataContext.entity.spatial.map( (place, indexPlace) =>
                {return(place
                    &&<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}
Elisabeth Reuhl's avatar
Elisabeth Reuhl committed
523
                    >
524
                        <ReturnPopup object={mapDataContext.entity} place={place} handleRelatedObjects={handleRelatedObjects} showRelatedObjects={input.showRelatedObjects}/>
Elisabeth Reuhl's avatar
Elisabeth Reuhl committed
525
                    </Marker>
526
                )})}
527
                <MarkerClusterGroup>
528
529
530
531
532
533
534
535
536
537
538
539
                    {input.showRelatedObjects&&input.objectId&&mapDataContext&&mapDataContext.entity&&mapDataContext.entity.related
                    &&mapDataContext.entity.related.map( (relatedObj, indexRelatedObj) =>
                    {
                        if(relatedObj===null) return;
                        return(relatedObj.spatial
                            &&relatedObj.spatial.map( (place, indexPlace) =>
                            {return(place
                                &&<Marker
                                    key={`${place.identifier}-${indexPlace}-${indexRelatedObj}`}
                                    //coordinates need to be reversed because of different standards between geojson and leaflet
                                    position={place.coordinates.split(", ").reverse()}
                                    opacity={0.5}
540
                                >
541
                                    <ReturnPopup object={relatedObj} place={place} handleRelatedObjects={handleRelatedObjects} showRelatedObjects={input.showRelatedObjects}/>
542
543
544
545
546
547
548
549
550
551
552
553
554
555
                                </Marker>
                            )})
                        )
                    })}
                    {input.showSearchResults&&(input.searchStr!==""||input.projectList.length!==0||input.chronOntologyTerm!==""
                        ||(input.boundingBoxCorner1.length!==0&&input.boundingBoxCorner2.length!==0))&&mapDataObjectsByString
                    &&mapDataObjectsByString.entitiesMultiFilter&&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()}
Elisabeth Reuhl's avatar
Elisabeth Reuhl committed
556
                                >
557
                                    <ReturnPopup object={entity} place={place} handleRelatedObjects={handleRelatedObjects} showRelatedObjects={input.showRelatedObjects}/>
558
559
560
561
                                </Marker>
                            )}
                        )
                    )})}
562
563
564
565
566
567
568
569
570
571
572
573
574
575
                    {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>
                            )
                        }
                    )
                    }
576
                    {input.showArchaeoSites&&(input.searchStr!==""||(input.boundingBoxCorner1.length!==0&&input.boundingBoxCorner2.length!==0))&&mapDataArchaeoSites
577
578
579
580
581
582
583
584
585
586
587
588
589
                    && mapDataArchaeoSites.archaeologicalSites && mapDataArchaeoSites.archaeologicalSites.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>
                            )
                        }
                    )
                    }
590
                </MarkerClusterGroup>
Elisabeth Reuhl's avatar
Elisabeth Reuhl committed
591
592
593
594
            </Map>
        </div>
    );
};