1 files changed, 126 insertions, 0 deletions
diff --git a/src/map.ts b/src/map.ts
new file mode 100644
index 0000000..cc1df17
--- /dev/null
+++ b/src/map.ts
@@ -0,0 +1,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
+}