/
app.js
62 lines (55 loc) · 2.18 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
/* global google */
import '../../../common'
const htmlEncode = require('htmlencode')
const marked = require('marked')
marked.setOptions({ sanitize: true })
const ko = require('knockout')
const locationSelector = require('../../../location/locationSelector')
const googleMaps = require('../../../location/googleMaps')
const proximityRanges = require('../../../location/proximityRanges')
const OrgRetrieval = require('../../../models/all-organisations/listing')
const model = new OrgRetrieval(null, 10000)
ko.applyBindings(model)
window.initMap = function () {
const buildInfoWindowMarkup = (p) => {
return `<div class="card card--brand-h card--gmaps">
<div class="card__title">
<button class="card__close js-popup-close" title="close">⨯</button>
<h1 class="h2">${htmlEncode.htmlDecode(p.name)}</h1>
<p>${htmlEncode.htmlDecode(p.synopsis)}</p>
</div>
<div class="card__details">
<a href="/find-help/organisation/?organisation=${p.key}">View details</a>
</div>
</div>`
}
const displayMap = function (providers, userLocation) {
const map = googleMaps.buildMap(userLocation, { zoom: proximityRanges.getByRange(model.range()) })
let popup = null
providers
.forEach((p) => {
p.locations
.forEach((l) => {
const marker = googleMaps.buildMarker(l, map, { title: `${htmlEncode.htmlDecode(p.name)}` })
marker.addListener('click', function () {
document.querySelectorAll('.card__gmaps-container')
.forEach((p) => p.parentNode.removeChild(p))
popup = new googleMaps.Popup(
this.position.lat(),
this.position.lng(),
buildInfoWindowMarkup(p))
popup.setMap(map)
map.setCenter(new google.maps.LatLng(this.position.lat(), this.position.lng()))
})
})
})
googleMaps.addCircleMarker(userLocation, map)
}
model.organisations.subscribe((newValue) => {
locationSelector
.getPreviouslySetPostcode()
.then((result) => {
displayMap(newValue, result)
})
})
}