blob: 969a95a8b963fbe4922b35c1b97315bc8e36e03f (
plain)
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
|
let mapView =
H.div
[| HA.class_ "g-Layout__Page" |]
[| H.div
[| HA.class_ "g-Layout__Header" |]
[| H.a
[| HA.class_ "g-Layout__Home"
; HA.href "#"
|]
[| H.text "Map" |]
|]
; H.div
[| HA.class_ "g-Map" |]
[| H.div
[| HA.id "g-Map__Content" |]
[||]
|]
|]
let state_from_hash () =
let hash = Js.String.sliceToEnd ~from:1 (Location.hash Document.location) in
State.from_string hash
let installMap () =
let state = ref (state_from_hash ()) in
let map = Leaflet.map "g-Map__Content" in
let title_layer = Leaflet.title_layer "http://{s}.tile.osm.org/{z}/{x}/{y}.png" in
let markers = Leaflet.feature_group [| |] in
let () = Leaflet.add_layer map markers in
let () = Leaflet.add_layer map title_layer in
let rec reload_from_hash focus =
let update_state new_state =
let () = History.push_state "" "" ("#" ^ State.to_string new_state) () in
reload_from_hash false
in
let on_remove pos =
update_state (State.remove !state pos) in
let on_update previousPos pos name color icon =
update_state (State.update !state previousPos { pos = pos; name = name; color = color; icon = icon }) in
let () =
if Js.Array.length (Leaflet.get_layers markers ()) > 0 then
Leaflet.clear_layers markers
else
()
in
let () = state := state_from_hash () in
let () =
Js.Array.forEach
(fun (m: State.marker_state) -> Leaflet.add_layer markers (Marker.create on_remove on_update m.pos m.name m.color m.icon))
!state
in
if focus then
if Js.Array.length (Leaflet.get_layers markers ()) > 0 then
Leaflet.fit_bounds map (Leaflet.get_bounds markers ()) { padding = [| 50.; 50. |] }
else
Leaflet.setView map [| 51.505; -0.09 |] 2
else
()
in
(* Init markers from url *)
let () = reload_from_hash true in
(* Reload the map if the URL changes *)
let () = Element.addEventListener Window.window "popstate" (fun _ ->
reload_from_hash true)
in
(* Add a marker on right click *)
Leaflet.on map "contextmenu" (fun (event) ->
let pos = Leaflet.lat_lng event in
let new_marker =
match State.last_added !state with
| Some m -> { m with pos = pos; name = "" }
| None -> { pos = pos; name = ""; color = "#3f92cf"; icon = "" }
in
let new_state = State.update !state pos new_marker in
let () = History.push_state "" "" ("#" ^ State.to_string new_state) () in
reload_from_hash false)
let render () =
let _ = Js.Global.setTimeout installMap 0 in
mapView
|
