browser example

digidem · Jan 28, 2016 · a4f3ff5 · a4f3ff5
1 parent e2e558a
commit a4f3ff5
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+example/*/bundle.js
diff --git a/browser.js b/browser.js
@@ -10,6 +10,6 @@ module.exports = function (opts) {
   return osmdb({
     log: log,
     db: level(opts.indexName || 'index'),
-    store: idbStore(opts.chunkSize || 4096)
+    store: idbstore(opts.chunkSize || 4096)
   })
 }
diff --git a/example/browser/index.html b/example/browser/index.html
@@ -0,0 +1,35 @@
+<body>
+  <h1>add point</h1>
+  <form id="add">
+    <table>
+      <tr>
+        <th>lat</th>
+        <td><input type="text" name="lat"></td>
+      </tr>
+      <tr>
+        <th>lon</th>
+        <td><input type="text" name="lon"></td>
+      </tr>
+    </table>
+    <button type="submit">add point</button>
+  </form>
+  <hr>
+  <h1>query</h1>
+  <form id="query">
+    <table>
+      <tr>
+        <th>lat</th>
+        <td>min=<input type="text" name="minlat"></td>
+        <td>max=<input type="text" name="maxlat"></td>
+      </tr>
+      <tr>
+        <th>lon</th>
+        <td>min=<input type="text" name="minlon"></td>
+        <td>max=<input type="text" name="maxlon"></td>
+      </tr>
+    </table>
+    <button type="submit">query</button>
+    <pre id="query-results"></pre>
+  </form>
+  <script src="bundle.js"></script>
+</body>
diff --git a/example/browser/main.js b/example/browser/main.js
@@ -0,0 +1,31 @@
+var osmdb = require('../../')
+var osm = osmdb()
+
+document.querySelector('form#add').addEventListener('submit', onadd)
+document.querySelector('form#query').addEventListener('submit', onquery)
+
+function onadd (ev) {
+  var form = this
+  ev.preventDefault()
+  var doc = {
+    lat: this.elements.lat.value,
+    lon: this.elements.lon.value
+  }
+  osm.create(doc, function (err, key, node) {
+    if (err) console.error(err)
+    else form.reset()
+  })
+}
+
+function onquery (ev) {
+  ev.preventDefault()
+  var q = [
+    [ this.elements.minlat.value, this.elements.maxlat.value ],
+    [ this.elements.minlon.value, this.elements.maxlon.value ]
+  ]
+  osm.query(q, function (err, results) {
+    document.querySelector('#query-results').innerText
+      = results.map(str).join('\n')
+    function str (row) { return JSON.stringify(row) }
+  })
+}
diff --git a/example/browser/package.json b/example/browser/package.json
@@ -0,0 +1,7 @@
+{
+  "scripts": {
+    "build": "browserify main.js > bundle.js",
+    "watch": "watchify main.js -o bundle.js -dv",
+    "start": "ecstatic -p 8000 ."
+  }
+}
diff --git a/readme.markdown b/readme.markdown
@@ -49,3 +49,7 @@ $ node osm.js query 61,65 -149,-147
 ```
 
 # browser example
+
+``` js
+```
+