Documents User Interface Geographic Maps
Use the
FrameViewer object of terminusdb-documents-ui to automatically generate forms to enter map coordinates and display/embed visual maps for those coordinates in your forms. Use the MapViewer object (View mode only) to display maps with configurable zoom and scroll functionality.FrameViewer and MapViewer objects
Object
Modes supported
Import
Details
FrameViewerCreate
Edit
Viewimport {FrameViewer} from '@terminusdb/terminusdb-documents-ui'MapViewerViewimport {MapViewer} from '@terminusdb/terminusdb-documents-ui'Generate forms and maps using FrameViewer
Use
FrameViewer in Create or Edit mode to create a form and enter map coordinates respectively.Create a form to enter map coordinates
The example below creates a form defining coordinates representing latitude and longitude as
xsd:decimal fields.1
let frames = {
2
"@context": {
3
"@base": "terminusdb:///data/",
4
"@schema": "",
5
"@type": "@context"
6
},
7
"coordinates": {
8
"location": {
9
"@class": "Location",
10
"@subdocument": []
11
}
12
},
13
"Location": {
14
"@key": {
15
"@type": "Random"
16
},
17
"@subdocument": [],
18
"@type": "Class",
19
"city": "xsd:string",
20
"geometry_location": {
21
"@class": [
22
{
23
"@class": "Point",
24
"@subdocument": []
25
}
26
],
27
"@type": "Optional"
28
}
29
},
30
"Point": {
31
"@key": {
32
"@type": "Random"
33
},
34
"@subdocument": [],
35
"@type": "Class",
36
"coordinates": {
37
"@class": "xsd:decimal",
38
"@dimensions": 1,
39
"@type": "Array"
40
},
41
"type": {
42
"@id": "Point_Type",
43
"@type": "Enum",
44
"@values": [
45
"Point"
46
]
47
}
48
},
49
"Point_Type": {
50
"@type": "Enum",
51
"@values": [
52
"Point"
53
]
54
}
55
}
56
​
57
let type = "coordinates"
58
let mode = "Create"
59
​
60
return <FrameViewer
61
frame = {frames}
62
type = {type}
63
mode = {mode}/>
Copied!
Screen-print/s of the output:
View the map
In
View mode, FrameViewer displays a visual map for coordinates entered in Edit mode. In the example below, the formData parameter simulates data entered into the form in Edit mode.1
// Use the `frames` definition above
2
​
3
let formData = {
4
"@id": "coordinates/908cdf8db2fa9f843f063669171280eb448e3403d837cb440726ab394043e918",
5
"@type": "coordinates",
6
"location": {
7
"@id": "coordinates/908cdf8db2fa9f843f063669171280eb448e3403d837cb440726ab394043e918/coordinates/Location/cbf3d8956432778d2c3db84533eac02bff76326aa3407436e483361fdf55fd0c",
8
"@type": "Location",
9
"city": "Marigot",
10
"geometry_location": {
11
"@id": "coordinates/location/Location/cbf3d8956432778d2c3db84533eac02bff76326aa3407436e483361fdf55fd0c/geometry_location/Point/3ec3de24dab9a66311ff5010df341b05d67bbcd764537f6f3484a8d03d235843",
12
"@type": "Point",
13
"coordinates": [
14
15.53743,
15
-61.282
16
],
17
"type": "Point"
18
}
19
}
20
}
21
​
22
let type = "coordinates"
23
let mode = "View"
24
​
25
return <FrameViewer
26
frame = {frames}
27
formData = {formData}
28
type = {type}
29
mode = {mode}/>
Copied!
Screen-print/s of the output:
Display maps using MapViewer
Use
MapViewer to display maps with configurable zoom and scroll functionality.MapViewer parameters
Parameter
Type
Description
documentsArray
TerminusDB document/s retrieved using a WOQL Query or defined in a constant.
zoomInteger
Set the maximum zoom-in level.
scrollWheelZoomBoolean
Enable/disable zoom in/out.
MapViewer document structure
TerminusDB documents retrieved using a WOQL query must converted to the structure below.
1
let docId = "id of doc ..."
2
let docName = "name of doc ..."
3
let lat = -61.23 // a valid decimal value to display latitude
4
let lng = 15.42 // a valid decimal value to display longitude
5
let docs = [
6
{
7
id : docId,
8
name : docName,
9
lat : lat,
10
lng : lng
11
},
12
{ ... },
13
{ ... }
14
]
Copied!
MapViewer example
1
let docs = [
2
{
3
"id": "Asset/Communication%20tower%20near%20Good%20Hope%20",
4
"lng":-61.2554,
5
"name": "Communication tower near Good Hope ",
6
"lat":15.4125
7
},
8
{
9
"id": "Asset/La%20Plaine%20Police%20Station",
10
"lng":-61.2416,
11
"name": "La Plaine Police Station",
12
"lat":15.333
13
},
14
{
15
"id": "Asset/Mahaut%20River%20Health%20Centre",
16
"lat":15.4773,
17
"name": "Mahaut River Health Centre",
18
"lng":-61.2516
19
},
20
{
21
"id": "Asset/Belles%20Primary%20School",
22
"lat":15.42717,
23
"name": "Belles Primary School",
24
"lng":-61.3403
25
},
26
{
27
"id": "Asset/Trafalgar%20hydro%20power%20plan%20",
28
"lat":15.316919,
29
"name": "Trafalgar hydro power plan ",
30
"lng":-61.35083
31
},
32
{
33
"id": "Asset/Fort%20Young%20Hotel%20",
34
"lat":15.296,
35
"name": "Fort Young Hotel ",
36
"lng":-61.38627
37
},
38
{
39
"id": "Asset/Roseau-Canefield%20Airport",
40
"lat":15.33934,
41
"name": "Roseau-Canefield Airport",
42
"lng":-61.39179
43
},
44
{
45
"id": "Asset/Princess%20Margaret%20Hospital%20",
46
"lat":15.30705,
47
"name": "Princess Margaret Hospital ",
48
"lng":-61.3847
49
},
50
{
51
"id": "Asset/Justin%20Fadipe%20Hospital",
52
"lat":15.4281,
53
"name": "Justin Fadipe Hospital",
54
"lng":-61.4316
55
},
56
{
57
"id": "Asset/Dominica%20Air%20&%20Sea%20Ports%20Authority%20(DASPA)",
58
"lng":-61.3881,
59
"name": "Dominica Air & Sea Ports Authority (DASPA)",
60
"lat":15.3124
61
},
62
{
63
"id": "Asset/Petro%20Caribe%20Radio%20Tower",
64
"lng":-61.40316,
65
"name": "Petro Caribe Radio Tower",
66
"lat":15.3695
67
},
68
{
69
"id": "Asset/Portsmouth%20Town%20Council",
70
"lng":-61.4553,
71
"name": "Portsmouth Town Council",
72
"lat":15.574671
73
},
74
{
75
"id": "Asset/Castle%20bruce%20Electrical%20substation",
76
"lat":15.4393,
77
"name": "Castle bruce Electrical substation",
78
"lng":-61.2607
79
},
80
{
81
"id": "Asset/NEW%20ASSET%20",
82
"lat":53.307481,
83
"name": "NEW ASSET ",
84
"lng":-62.954872
85
},
86
{
87
"id": "Asset/TCD",
88
"lng":-62.5449,
89
"name": "TCD",
90
"lat":53.3439
91
}
92
]
93
​
94
return <MapViewer
95
documents = {docs}
96
zoom = {5}
97
scrollWheelZoom = {true}/>
Copied!
Screen-print/s of the output:
Last modified 30d ago