Skip to content

Commit 6d26365

Browse files
jason-foxjason-fox
committed
Switch to maplibre
1 parent 3d7ef19 commit 6d26365

3 files changed

Lines changed: 101 additions & 79 deletions

File tree

‎app/controllers/ngsi-ld/farm.js‎

Lines changed: 0 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -10,26 +10,6 @@ const ngsiLD = require('../../lib/ngsi-ld');
1010
const Context = process.env.IOTA_JSON_LD_CONTEXT || 'http://context/ngsi-context.jsonld';
1111
const LinkHeader = '<' + Context + '>; rel="http://www.w3.org/ns/json-ld#context"; type="application/ld+json">';
1212

13-
function mapTileUrl(zoom, location) {
14-
const tilesPerRow = Math.pow(2, zoom);
15-
let longitude = location.coordinates[0];
16-
let latitude = location.coordinates[1];
17-
18-
longitude /= 360;
19-
longitude += 0.5;
20-
latitude = 0.5 - Math.log(Math.tan(Math.PI / 4 + (latitude * Math.PI) / 360)) / Math.PI / 2.0;
21-
22-
return (
23-
'https://a.tile.openstreetmap.org/' +
24-
zoom +
25-
'/' +
26-
Math.floor(longitude * tilesPerRow) +
27-
'/' +
28-
Math.floor(latitude * tilesPerRow) +
29-
'.png'
30-
);
31-
}
32-
3313
// This function receives the details of a building from the context
3414
//
3515
// It is effectively processing the following cUrl command:
@@ -50,8 +30,6 @@ async function displayFarm(req, res) {
5030
{ options: 'keyValues' },
5131
ngsiLD.setHeaders(req.session.access_token, LinkHeader)
5232
);
53-
// If a building has been found display it on screen
54-
building.mapUrl = mapTileUrl(15, building.location);
5533
return res.render('building', { title: building.name, building });
5634
} catch (error) {
5735
// If no farm has been found, display an error screen

‎app/views/agri-farm.pug‎

Lines changed: 82 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,93 @@
11
extends layout
22

33
block content
4+
5+
script(src='https://code.jquery.com/jquery-1.11.1.js')
6+
7+
link(rel="stylesheet" href="https://unpkg.com/maplibre-gl@5.4.0/dist/maplibre-gl.css")
8+
script(src="https://unpkg.com/maplibre-gl@5.4.0/dist/maplibre-gl.js")
9+
410
h1= title
511

612
div.row
7-
div.col
8-
div(class="card m-2")
9-
div.card-body
10-
div.container
11-
div.row
12-
div.col-sm-4
13-
dl.row
14-
dt address:
15-
dd
16-
address
17-
| #{farm.address.streetAddress} #[br]
18-
| #{farm.address.addressLocality} #[br]
19-
| #{farm.address.postalCode} #[br]
20-
| #{farm.address.addressRegion} #[br]
21-
div.row
22-
- if (farm.description)
23-
dt.col-lg-3 Description:
24-
dd.col-lg-9 #{farm.description}
25-
div.row
26-
- if (farm.category)
27-
dt.col-lg-3 Category:
28-
dd.col-lg-9
29-
code #{farm.category.vocab}
30-
div.row
31-
- if (farm.controlledProperty)
32-
dt.col-lg-3 Controlled Property:
33-
dd.col-lg-9 #{farm.controlledProperty}
34-
div.row
35-
- if (farm.hasAgriParcel)
36-
dt.col-lg-3 Agri Parcel:
37-
dd.col-lg-9
38-
ul
39-
each item in farm.hasAgriParcel
40-
li
41-
a(class="link-underline link-underline-opacity-0" href=`/app/agriparcel/${item}`) #{item}
42-
43-
div.row
44-
- if (farm.hasBuilding)
45-
dt.col-lg-3 Buildings:
46-
dd.col-lg-9
47-
ul
48-
each item in farm.hasBuilding
49-
li
50-
a(class="link-underline link-underline-opacity-0" href=`/app/building/${item}`) #{item}
13+
div.row
14+
div.col-lg
15+
div(class="card m-2")
16+
div.card-body
17+
div.container
18+
div.row
19+
div.col-sm-4
20+
div(id="map" style="height:100%;width:100%;background:#eee;min-height:30vh;")
21+
div.col-sm-8
22+
dl.row
23+
dt address:
24+
dd
25+
address
26+
| #{farm.address.streetAddress} #[br]
27+
| #{farm.address.addressLocality} #[br]
28+
| #{farm.address.postalCode} #[br]
29+
| #{farm.address.addressRegion} #[br]
30+
div.row
31+
div.col
32+
div(class="card m-2")
33+
div.card-body
34+
div.container
35+
div.row
36+
- if (farm.description)
37+
dt.col-lg-3 Description:
38+
dd.col-lg-9 #{farm.description}
39+
div.row
40+
- if (farm.category)
41+
dt.col-lg-3 Category:
42+
dd.col-lg-9
43+
code #{farm.category.vocab}
44+
div.row
45+
- if (farm.controlledProperty)
46+
dt.col-lg-3 Controlled Property:
47+
dd.col-lg-9 #{farm.controlledProperty}
48+
div.row
49+
- if (farm.hasAgriParcel)
50+
dt.col-lg-3 Agri Parcel:
51+
dd.col-lg-9
52+
ul
53+
each item in farm.hasAgriParcel
54+
li
55+
a(class="link-underline link-underline-opacity-0" href=`/app/agriparcel/${item}`) #{item}
56+
57+
div.row
58+
- if (farm.hasBuilding)
59+
dt.col-lg-3 Buildings:
60+
dd.col-lg-9
61+
ul
62+
each item in farm.hasBuilding
63+
li
64+
a(class="link-underline link-underline-opacity-0" href=`/app/building/${item}`) #{item}
65+
66+
div.row
67+
- if (farm.location)
68+
dt.col-lg-3 Location:
69+
dd.col-lg-9 #{farm.location.coordinates[1]}&deg;N, #{farm.location.coordinates[0]}&deg;E
5170

52-
div.row
53-
- if (farm.location)
54-
dt.col-lg-3 Location:
55-
dd.col-lg-9 #{farm.location.coordinates[1]}&deg;N, #{farm.location.coordinates[0]}&deg;E
71+
div.row
72+
- if (farm.owner)
73+
dt.col-lg-3 Owned By:
74+
dd.col-lg-9
75+
a(class="link-underline link-underline-opacity-0" href=`/app/person/${farm.owner}`) #{farm.owner}
5676

57-
div.row
58-
- if (farm.owner)
59-
dt.col-lg-3 Owned By:
60-
dd.col-lg-9
61-
a(class="link-underline link-underline-opacity-0" href=`/app/person/${farm.owner}`) #{farm.owner}
77+
script.
78+
$(function () {
79+
const map = new maplibregl.Map({
80+
container: 'map',
81+
style: 'https://api.maptiler.com/maps/streets-v2/style.json?key=foqzh86Jk2Ia9CL7w8ks',
82+
center: [#{farm.location.coordinates[0]}, #{farm.location.coordinates[1]}],
83+
zoom: 15,
84+
attributionControl: {compact: true}
85+
});
86+
map.addControl(new maplibregl.NavigationControl());
87+
const marker = new maplibregl.Marker()
88+
.setLngLat([#{farm.location.coordinates[0]}, #{farm.location.coordinates[1]}])
89+
.addTo(map);
90+
});
6291

6392
div.row
6493
div.col

‎app/views/building.pug‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ block content
77
script(src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.5/socket.io.min.js')
88
script(src='https://code.jquery.com/jquery-1.11.1.js')
99

10+
link(rel="stylesheet" href="https://unpkg.com/maplibre-gl@5.4.0/dist/maplibre-gl.css")
11+
script(src="https://unpkg.com/maplibre-gl@5.4.0/dist/maplibre-gl.js")
12+
1013
h1= title
1114
div.row
1215
div.col-lg
@@ -15,10 +18,7 @@ block content
1518
div.container
1619
div.row
1720
div.col-sm-8
18-
img.img-thumbnail(src=`${building.mapUrl}`)
19-
small(style="display: inherit")
20-
a(href="https://www.openstreetmap.org/copyright")
21-
| © OpenStreetMap contributors
21+
div(id="map" style="height:100%;width:100%;background:#eee;min-height:30vh;")
2222
div.col-sm-4
2323
dl.row
2424
dt address:
@@ -131,8 +131,23 @@ block content
131131
}
132132
});
133133
});
134+
const map = new maplibregl.Map({
135+
container: 'map',
136+
style: 'https://api.maptiler.com/maps/streets-v2/style.json?key=foqzh86Jk2Ia9CL7w8ks',
137+
center: [#{building.location.coordinates[0]}, #{building.location.coordinates[1]}],
138+
zoom: 15,
139+
attributionControl: {compact: true}
140+
});
141+
map.addControl(new maplibregl.NavigationControl());
142+
const marker = new maplibregl.Marker()
143+
.setLngLat([#{building.location.coordinates[0]}, #{building.location.coordinates[1]}])
144+
.addTo(map);
134145
});
135146

147+
148+
149+
150+
136151
//- div(style="float: left; padding:0px 20px 20px 20px; border: none;")
137152
iframe(width='560', height='270', src=`/app/building/${building.id}/till`, frameborder='0')
138153
div(style="clear: both;")

0 commit comments

Comments
 (0)