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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
import { h } from 'lib/h'
import * as Button from 'lib/button'
import * as ContextMenu from 'lib/contextMenu'
import * as Layout from 'lib/layout'
import * as Modal from 'lib/modal'
import * as Marker from 'marker'
import * as MarkerForm from 'markerForm'
import * as State from 'state'
import * as Serialization from 'serialization'
const L = window.L
export function view() {
// Wait for elements to be on page before installing map
window.setTimeout(installMap, 0)
return layout()
}
const mapId: string = 'g-Map__Content'
function layout(): Element {
return h('div',
{ className: 'g-Layout__Page' },
h('div',
{ className: 'g-Layout__Header' },
h('a',
{ className: 'g-Layout__Home',
href: '#'
},
'Map'
)
)
, h('div',
{ className: 'g-Map' },
h('div', { id: mapId})
)
)
}
function installMap(): object {
const map = L.map(mapId, {
center: [51.505, -0.09],
zoom: 2,
attributionControl: false
})
map.addLayer(L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png'))
const mapMarkers = L.featureGroup()
map.addLayer(mapMarkers)
map.addEventListener('contextmenu', e => {
ContextMenu.show(
e.originalEvent,
[ { label: 'Add a marker',
action: () => {
const pos = e.latlng
const lastMarker = State.last()
Modal.show(MarkerForm.view({
onValidate: (color: string, icon: string, name: string, radius: number) => {
const id = State.add({ pos, color, icon, name, radius })
Marker.add({
id,
pos,
color,
icon,
name,
radius,
addToMap: marker => mapMarkers.addLayer(marker),
removeFromMap: marker => mapMarkers.removeLayer(marker)
})
Modal.hide()
},
onCancel: () => Modal.hide(),
color: lastMarker ? lastMarker.color : '#3F92CF',
icon: lastMarker ? lastMarker.icon : '',
name: '',
radius: 0,
}))
}
}
]
)
})
// Init from hash
const hash = window.location.hash.substr(1)
const state = Serialization.decode(hash)
State.reset(state)
addMarkers({ map, mapMarkers, state, isInit: true })
// Reload from hash
window.addEventListener('popstate', _ => reloadFromHash(map, mapMarkers))
return map
}
export function reloadFromHash(map: L.Map, mapMarkers: L.FeatureGroup) {
const state = Serialization.decode(window.location.hash.substr(1))
mapMarkers.clearLayers()
addMarkers({ map, mapMarkers, state, isInit: false })
}
interface AddMarkersOptions {
map: L.Map,
mapMarkers: L.FeatureGroup,
state: State.State,
isInit: boolean,
}
function addMarkers({ map, mapMarkers, state, isInit }: AddMarkersOptions) {
state.forEach((marker, id) => {
const { pos, color, icon, name, radius } = marker
Marker.add({
id,
pos,
color,
icon,
name,
radius,
addToMap: marker => mapMarkers.addLayer(marker),
removeFromMap: marker => mapMarkers.removeLayer(marker)
})
})
// Focus
if (state.length > 0 && (isInit || !map.getBounds().contains(mapMarkers.getBounds()))) {
map.fitBounds(mapMarkers.getBounds(), { padding: [ 50, 50 ] })
}
}
|
