From 0221b60ce9ca0f0d44871aedcc7b386bddfc3124 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stephan=20B=C3=B6sch-Plepelits?= <skunk@xover.mud.at> Date: Sat, 24 Nov 2018 20:16:34 +0100 Subject: [PATCH] Also include the Temaki icon set see http://www.7thposition.com/temaki/docs/ --- doc/Icons.md | 7 +++++++ package.json | 1 + src/CategoryOverpass.js | 6 +++--- src/maki.js | 37 +++++++++++++++++++++---------------- 4 files changed, 32 insertions(+), 19 deletions(-) diff --git a/doc/Icons.md b/doc/Icons.md index 92fbd9f2..40217000 100644 --- a/doc/Icons.md +++ b/doc/Icons.md @@ -40,3 +40,10 @@ You can pass URL options to the icon to modify its look. Note that every icon is ```html <img data-src="maki:park?size=11&fill=red&stroke=black&stroke-width=0.5"> ``` + +#### Temaki Icons +[Temaki icons](http://www.7thposition.com/temaki/docs/) are additions to the Mapbox Maki Icons with the difference that they only exist in to size of 15px. +```html +<img data-src="temaki:shinto"> +<img data-src="temaki:shinto?fill=red"> +``` diff --git a/package.json b/package.json index 6209599c..01914645 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "overpass-layer": "^2.0.0", "query-string": "^5.0.0", "sheet-router": "^4.2.3", + "temaki": "^1.0.0", "weight-sort": "^1.3.0" }, "browserify": { diff --git a/src/CategoryOverpass.js b/src/CategoryOverpass.js index 702517fa..2b8fd58f 100644 --- a/src/CategoryOverpass.js +++ b/src/CategoryOverpass.js @@ -154,14 +154,14 @@ CategoryOverpass.prototype.updateAssets = function (div) { // TODO: 'src' is deprecated, use only data-src var src = img.getAttribute('src') || img.getAttribute('data-src') if (src === null) { - } else if (src.match(/^maki:.*/)) { - let m = src.match(/^maki:([a-z0-9-]*)(?:\?(.*))?$/) + } else if (src.match(/^(maki|temaki):.*/)) { + let m = src.match(/^(maki|temaki):([a-z0-9-]*)(?:\?(.*))?$/) if (m) { let span = document.createElement('span') img.parentNode.insertBefore(span, img) img.parentNode.removeChild(img) i-- - maki(m[1], m[2] ? qs(m[2]) : {}, function (err, result) { + maki(m[1], m[2], m[3] ? qs(m[3]) : {}, function (err, result) { if (err === null) { span.innerHTML = result } diff --git a/src/maki.js b/src/maki.js index f6feac82..aab3d538 100644 --- a/src/maki.js +++ b/src/maki.js @@ -1,6 +1,10 @@ /* global openstreetbrowserPrefix */ var loadClash = {} var cache = {} +var paths = { + maki: 'node_modules/@mapbox/maki/icons/ID-SIZE.svg', + temaki: 'node_modules/temaki/icons/ID.svg' +} function applyOptions (code, options) { var style = '' @@ -14,40 +18,41 @@ function applyOptions (code, options) { return code.replace(/<path/i, '<path style="' + style + '"') } -function maki (file, options, callback) { - var size = options.size || 15 - +function maki (set, file, options, callback) { var m = file.match(/^(.*)-(11|15)/) - if (!m) { - file += '-' + size + if (m) { + file = m[1] + options.size = m[2] } var url = (typeof openstreetbrowserPrefix === 'undefined' ? './' : openstreetbrowserPrefix) + - 'node_modules/@mapbox/maki/icons/' + file + '.svg' + paths[set] + .replace('ID', file) + .replace('SIZE', options.size || 15) - if (file in cache) { - return callback(null, applyOptions(cache[file], options)) + if (url in cache) { + return callback(null, applyOptions(cache[url], options)) } - if (file in loadClash) { - loadClash[file].push([ options, callback ]) + if (url in loadClash) { + loadClash[url].push([ options, callback ]) return } else { - loadClash[file] = [ [ options, callback ] ] + loadClash[url] = [ [ 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] + loadClash[url].forEach(p => p[1](req.statusText, null)) + delete loadClash[url] return } - cache[file] = req.responseText + cache[url] = req.responseText - loadClash[file].forEach(p => p[1](null, applyOptions(cache[file], p[0]))) - delete loadClash[file] + loadClash[url].forEach(p => p[1](null, applyOptions(cache[url], p[0]))) + delete loadClash[url] }) req.open('GET', url) req.send()