Merge branch 'maki'

doc/Icons.md

@@ -0,0 +1,26 @@
+#### Font Awesome Icons
+Font Awesome 4 is included in OpenStreetBrowser, therefore you can use, e.g.:
+```html
+<i class="fa fa-compass" aria-hidden="true"></i>
+```
+
+You can use normal CSS to modify its look, e.g.
+```html
+<i style="color: red;" class="fa fa-compass" aria-hidden="true"></i>
+```
+
+#### Mapbox Maki Icons
+Mapbox Maki Icons 4 are also included in OpenStreetBrowser. They can be accessed as images with protocol 'maki', e.g.:
+```html
+<img src="maki:park">
+```
+
+This will include the park-15.svg icon. Mapbox Maki icons come in two sizes: 11 and 15. Default is 15, if you want to use 11 pass the size parameter with value 11:
+```html
+<img src="maki:park?size=11">
+```
+
+You can pass SVG options to the icon to modify its look. Note that every icon is a path:
+```html
+<img src="maki:park?size=11&amp;fill=red&amp;stroke=black&amp;stroke-width=0.5">
+```

package.json

@@ -7,6 +7,7 @@
   "author": "Stephan Bösch-Plepelits <skunk@xover.mud.at>",
   "license": "GPL-3.0",
   "dependencies": {
+    "@mapbox/maki": "^4.0.0",
     "async": "^2.5.0",
     "color-interpolate": "^1.0.2",
     "font-awesome": "^4.7.0",

src/CategoryOverpass.js

@@ -5,6 +5,9 @@ var CategoryBase = require('./CategoryBase')
 var state = require('./state')
 var tabs = require('modulekit-tabs')
 var markers = require('./markers')
+var maki = require('./maki')
+var qs = require('sheet-router/qs')
+
 var defaultValues = {
   feature: {
     title: "{{ localizedTag(tags, 'name') |default(localizedTag(tags, 'operator')) | default(localizedTag(tags, 'ref')) | default(trans('unnamed')) }}",
@@ -72,9 +75,7 @@ function CategoryOverpass (options, data) {
   data.feature.appUrl = '#' + this.id + '/{{ id }}'
   data.styleNoBindPopup = [ 'hover', 'selected' ]
   data.stylesNoAutoShow = [ 'hover', 'selected' ]
-  data.assetPrefix =
-    (typeof openstreetbrowserPrefix === 'undefined' ? '' : openstreetbrowserPrefix) +
-    'asset.php?repo=' + this.options.repositoryId + '&file='
+  data.updateAssets = this.updateAssets.bind(this)
 
   this.layer = new OverpassLayer(data)
 
@@ -165,6 +166,26 @@ function CategoryOverpass (options, data) {
   }.bind(this))
 }
 
+CategoryOverpass.prototype.updateAssets = function (div) {
+  var imgs = div.getElementsByTagName('img')
+  for (var i = 0; i < imgs.length; i++) {
+    let img = imgs[i]
+
+    var src = img.getAttribute('src')
+    if (src === null) {
+    } else if (src.match(/^maki:.*/)) {
+      let m = src.match(/^maki:([a-z0-9\-]*)(?:\?(.*))?$/)
+      img.removeAttribute('src')
+      maki(m[1], m[2] ? qs(m[2]) : {}, function (img, err, result) {
+        img.setAttribute('src', result)
+      }.bind(this, img))
+    } else if (!src.match(/^(https?:|data:|\.|\/)/)) {
+      img.setAttribute('src', (typeof openstreetbrowserPrefix === 'undefined' ? './' : openstreetbrowserPrefix) +
+      'asset.php?repo=' + this.options.repositoryId + '&file=' + encodeURIComponent(img.getAttribute('src')))
+    }
+  }
+}
+
 CategoryOverpass.prototype.load = function (callback) {
   OpenStreetBrowserLoader.getTemplate('popupBody', this.options, function (err, template) {
     if (err) {
@@ -274,6 +295,7 @@ CategoryOverpass.prototype.updateInfo = function () {
     data.map = { zoom: map.getZoom() }
   }
   this.domInfo.innerHTML = this.templateInfo.render(data)
+  this.updateAssets(this.domInfo)
   global.currentCategory = null
 }
 

src/maki.js

@@ -0,0 +1,57 @@
+var loadClash = {}
+var cache = {}
+
+function applyOptions (code, options) {
+  var style = ''
+
+  for (var k in options) {
+    if (k !== 'size') {
+      style += k + ':' + options[k] + ';'
+    }
+  }
+
+  return code.replace('path d=', 'path style="' + style + '" d=')
+}
+
+function maki (file, options, callback) {
+  var id
+  var size = options.size || 15
+
+  var m = file.match(/^(.*)\-(11|15)/)
+  if (!m) {
+    file += '-' + size
+  }
+
+  var url = (typeof openstreetbrowserPrefix === 'undefined' ? './' : openstreetbrowserPrefix) +
+    'node_modules/@mapbox/maki/icons/' + file + '.svg'
+
+  if (file in cache) {
+    return callback(null, 'data:image/svg+xml;utf8,' + applyOptions(cache[file], options))
+  }
+
+  if (file in loadClash) {
+    loadClash[file].push([ options, callback ])
+    return
+  } else {
+    loadClash[file] = [ [ options, callback ] ]
+  }
+
+  var req = new XMLHttpRequest()
+  req.addEventListener('load', function () {
+    if (req.status !== 200) {
+      loadClash[file].forEach(p => p[1](req.statusText, null))
+      delete loadClash[file]
+      return
+    }
+
+    cache[file] = req.responseText
+
+    loadClash[file].forEach(p => p[1](null, 'data:image/svg+xml;utf8,' + applyOptions(cache[file], p[0])))
+    delete loadClash[file]
+    return
+  })
+  req.open('GET', url)
+  req.send()
+}
+
+module.exports = maki