unfinihsed

7 years ago · d2627079e4
3 changed files with 122 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -79,6 +79,18 @@ ul.overpass-layer-list > li > a.title:active {
  background: white;
  border-right: 1px solid black;
  overflow: auto;
+}
+#object {
+  position: absolute;
+  z-index: 10000;
+  top: 0;
+  left: 0;
+  width: 200px;
+  bottom: 0;
+  background: white;
+  border-right: 1px solid black;
+  overflow: auto;
+  display: none;
 }
  </style>
  <script src="node_modules/leaflet/dist/leaflet.js"></script>
@ -87,5 +99,6 @@ ul.overpass-layer-list > li > a.title:active {
 <body>
  <div id='map'></div>
  <div id='info'></div>
+  <div id='object'></div>
 </body>
 </html>
--- a/index.js
+++ b/index.js
@ -36,4 +36,105 @@ window.onload = function() {
    category.setParentDom(document.getElementById('info'))
    category.open()
  })
+
+  show('gastro/n281657531', function () {})
+
+
+}
+
+function show (id, callback) {
+  document.getElementById('info').style.display = 'none'
+  document.getElementById('object').style.display = 'block'
+  document.getElementById('object').innerHTML = 'Loading ...'
+
+  id = id.split('/')
+
+  if (id.length < 2) {
+    alert('unknown request')
+    return
+  }
+
+  OpenStreetBrowserLoader.getCategory(id[0], function (err, category) {
+    if (err) {
+      alert('error loading category "' + id[0] + '": ' + err)
+      return
+    }
+
+    category.get(id[1], function (err, data) {
+      if (err) {
+        alert('error loading object "' + id[0] + '/' + id[1] +'": ' + err)
+        return
+      }
+
+      show1(data, category, callback)
+
+      callback(err)
+    })
+
+    category.setMap(map)
+    category.setParentDom(document.getElementById('info'))
+    category.open()
+  })
+}
+
+function show1 (data, category) {
+  category.show(data)
+  data.feature.openPopup()
+
+  var dom = document.getElementById('object')
+
+  dom.innerHTML = ''
+
+  var div = document.createElement('h1')
+  div.className = 'title'
+  div.innerHTML = data.data.featureTitle
+  dom.appendChild(div)
+
+  var div = document.createElement('div')
+  div.className = 'body'
+  div.innerHTML = data.data.featureBody
+  dom.appendChild(div)
+
+  var h = document.createElement('h3')
+  h.innerHTML = 'Attributes'
+  dom.appendChild(h)
+
+  var div = document.createElement('dl')
+  div.className = 'tags'
+  for (var k in data.object.tags) {
+    var dt = document.createElement('dt')
+    dt.appendChild(document.createTextNode(k))
+    div.appendChild(dt)
+    var dd = document.createElement('dd')
+    dd.appendChild(document.createTextNode(data.object.tags[k]))
+    div.appendChild(dd)
+  }
+  dom.appendChild(div)
+
+  var h = document.createElement('h3')
+  h.innerHTML = 'OSM Meta'
+  dom.appendChild(h)
+
+  var div = document.createElement('dl')
+  div.className = 'meta'
+  var dt = document.createElement('dt')
+  dt.appendChild(document.createTextNode('id'))
+  div.appendChild(dt)
+  var dd = document.createElement('dd')
+  var a = document.createElement('a')
+  a.appendChild(document.createTextNode(data.object.type + '/' + data.object.osm_id))
+  a.href = 'https://openstreetmap.org/' + data.object.type + '/' + data.object.osm_id
+  a.target = '_blank'
+
+  dd.appendChild(a)
+  div.appendChild(dd)
+  for (var k in data.object.meta) {
+    var dt = document.createElement('dt')
+    dt.appendChild(document.createTextNode(k))
+    div.appendChild(dt)
+    var dd = document.createElement('dd')
+    dd.appendChild(document.createTextNode(data.object.meta[k]))
+    div.appendChild(dd)
+  }
+  dom.appendChild(div)
 }
--- a/src/OpenStreetBrowserCategory.js
+++ b/src/OpenStreetBrowserCategory.js
@ -43,6 +43,14 @@ OpenStreetBrowserCategory.prototype.close = function () {
  this.isOpen = false
 }

+OpenStreetBrowserCategory.prototype.get = function (id, callback) {
+  this.layer.get(id, callback)
+}
+
+OpenStreetBrowserCategory.prototype.show = function (data) {
+  this.layer.show(data)
+}
+
 OpenStreetBrowserCategory.prototype.toggle = function () {
  if (this.isOpen) {
    this.close()