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
FrameViewer
Create Edit View
import {FrameViewer} from '@terminusdb/terminusdb-documents-ui'
MapViewer
View
import {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
documents
Array
TerminusDB document/s retrieved using a WOQL Query or defined in a constant.
zoom
Integer
Set the maximum zoom-in level.
scrollWheelZoom
Boolean
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: