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
|
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'
const L = window.L
let map
export function view() {
// let state = ref (state_from_hash ()) in
// let map = ref None in
// let markers = Leaflet.feature_group [| |] in
window.setTimeout(() => map = getMap(), 0)
return element()
}
function element(): Element {
return h('div',
{ className: 'g-Layout__Page' },
h('div',
{ className: 'g-Layout__Header' },
h('a',
{ className: 'g-Layout__Home',
href: '#'
},
'Map'
),
Layout.line(
{ className: 'g-Layout__HeaderImportExport' },
h('input',
{ id: 'g-Header__ImportInput',
type: 'file',
onchange: () => {
// match !map with
// | Some map ->
// let reader = File.reader () in
// let () = Element.add_event_listener reader 'load' (fun _ ->
// let str = File.result reader in
// let new_state = State.from_dicts (CSV.to_dicts (CSV.parse str)) in
// let () = History.push_state '' '' ('#' ^ State.to_url_string new_state) () in
// reload_from_hash state map markers true)
// in
// File.read_as_text reader (
// Js.Array.unsafe_get (Element.files (Event.target e)) 0)
// | _ ->
// ())
}
}
),
h('label',
{ for: 'g-Header__ImportInput',
className: 'g-Button__Text'
},
'Import'
),
Button.text({}, 'Export')
// { onclick: () => File.download 'map.csv' (State.to_csv_string !state)) |]
)
)
, h('div',
{ className: 'g-Map' },
h('div', { id: 'g-Map__Content' })
)
)
}
function getMap(): object {
const map = L.map('g-Map__Content', {
center: [51.505, -0.09],
zoom: 13,
attributionControl: false
})
// map.addLayer(markers)
map.addLayer(L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png'))
// (* Init markers from url *)
// let () = reload_from_hash state map markers true in
// (* Reload the map if the URL changes *)
// let () = Element.add_event_listener Window.window 'popstate' (fun _ ->
// reload_from_hash state map markers true)
// in
// Context menu
map.addEventListener('contextmenu', e => {
ContextMenu.show(
e.originalEvent,
[ { label: 'Add a marker',
action: () => {
const pos = e.latlng
const marker = { pos, name: '', color: '#3F92CF', icon: '' }
const colors: string[] = []
const add_marker = (name: string, color: string, icon: string) => {
console.log('adding marker…')
// let new_marker = { State.pos = pos; name = name; color = color; icon = icon } in
// let new_state = State.update !state pos new_marker in
// let () = History.push_state '' '' ('#' ^ State.to_url_string new_state) () in
// reload_from_hash state map markers false
}
// let marker =
// match State.last_added !state with
// | Some m -> { m with pos = pos; name = '' }
// | _ -> { pos = pos; name = ''; color = '#3f92cf'; icon = '' }
// in
// let colors = State.colors !state in
Modal.show(Marker.form(
add_marker,
colors,
marker.name,
marker.color,
marker.icon
))
}
}
]
)
})
return map
}
|
