Show maki icons in overpass markers

css/style.css

@@ -54,15 +54,23 @@ table.dataTable {
     vertical-align: top;
 }
 
-.overpass-layer-icon i {
+.overpass-layer-icon .sign > * {
     position: absolute;
     top: -34px;
-    color: white;
     margin: auto;
     display: inline-block;
     font-size: 11px;
 }
 
+.overpass-layer-icon .icon-white {
+    color: white;
+}
+
+.overpass-layer-icon .icon-invert {
+    -webkit-filter: invert(1);
+    filter: invert(1);
+}
+
 /* wrap toolbar controls */
 .leaflet-top.leaflet-left {
     bottom: 0;

js/LayersConfig.js

@@ -183,7 +183,13 @@ BR.LayersConfig = L.Class.extend({
         }
     },
 
-    createOverpassLayer: function (query) {
+    createOverpassLayer: function (query, icon) {
+        let markerSign = '<i class="fa fa-search icon-white" style="width: 25px;"></i>';
+
+        if (icon && icon.startsWith('maki-')) {
+            markerSign = `<img class="icon-invert" src="dist/images/${icon.substr(5)}-11.svg" />`;
+        }
+
         return Object.assign(
             new OverpassLayer({
                 overpassFrontend: this.overpassFrontend,
@@ -195,7 +201,7 @@ BR.LayersConfig = L.Class.extend({
                         '<table class="overpass-tags">{% for k, v in tags %}{% if k[:5] != "addr:" %}<tr><th>{{ k }}</th><td>{% if k matches "/email/" %}<a href="mailto:{{ v }}">{{ v }}</a>{% elseif v matches "/^http/" %}<a href="{{ v }}">{{ v }}</a>{% elseif v matches "/^www/" %}<a href="http://{{ v }}">{{ v }}</a>{% else %}{{ v }}{% endif %}</td></tr>{% endif %}{% endfor %}</table>',
                     markerSymbol:
                         '<svg width="25px" height="41px" anchorX="12" anchorY="41" viewBox="0 0 32 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M16,1 C7.7146,1 1,7.65636364 1,15.8648485 C1,24.0760606 16,51 16,51 C16,51 31,24.0760606 31,15.8648485 C31,7.65636364 24.2815,1 16,1 L16,1 Z" fill="#436978"></path></svg>',
-                    markerSign: '<i class="fa fa-search icon-white" style="width: 25px;"></i>',
+                    markerSign,
                     style: function (overpassObject) {
                         return {
                             nodeFeature: 'Marker',
@@ -294,7 +300,7 @@ BR.LayersConfig = L.Class.extend({
                 layer.subdomains = props.subdomains;
             }
         } else if (props.dataSource === 'OverpassAPI') {
-            layer = this.createOverpassLayer(props.query);
+            layer = this.createOverpassLayer(props.query, props.icon);
         } else {
             // JOSM
             var josmUrl = url;

package.json

@@ -36,6 +36,7 @@
     ],
     "dependencies": {
         "@bagage/leaflet.restoreview": "1.0.1",
+        "@mapbox/maki": "^6.2.0",
         "@mapbox/polyline": "^0.2.0",
         "@mapbox/togeojson": "^0.16.0",
         "@turf/turf": "^6.2.0",
@@ -283,6 +284,36 @@
             "main": [
                 "dist/overpass-layer.js"
             ]
+        },
+        "@mapbox/maki": {
+            "main": [
+                "icons/art-gallery-11.svg",
+                "icons/bakery-11.svg",
+                "icons/bank-11.svg",
+                "icons/bar-11.svg",
+                "icons/bbq-11.svg",
+                "icons/beer-11.svg",
+                "icons/bicycle-11.svg",
+                "icons/cafe-11.svg",
+                "icons/campsite-11.svg",
+                "icons/car-11.svg",
+                "icons/car-rental-11.svg",
+                "icons/drinking-water-11.svg",
+                "icons/entrance-alt1-11.svg",
+                "icons/fast-food-11.svg",
+                "icons/fuel-11.svg",
+                "icons/grocery-11.svg",
+                "icons/hospital-11.svg",
+                "icons/information-11.svg",
+                "icons/lodging-11.svg",
+                "icons/picnic-site-11.svg",
+                "icons/restaurant-11.svg",
+                "icons/shelter-11.svg",
+                "icons/shop-11.svg",
+                "icons/star-11.svg",
+                "icons/toilet-11.svg",
+                "icons/water-11.svg"
+            ]
         }
     }
 }

yarn.lock

@@ -901,6 +901,11 @@
     minimist "1.2.0"
     sharkdown "^0.1.0"
 
+"@mapbox/maki@^6.2.0":
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/@mapbox/maki/-/maki-6.2.0.tgz#b61b3e8e7fc7637493e511ac40de0eea62cd1f8b"
+  integrity sha512-iFIRNT3ZpTOw69p2BFFOmQppujpav2PQTLPyL4+bZ5ZIUfdyB5Qtw45CTfPqzzHpP2AZGjEDbSNhGDRcG9/2fw==
+
 "@mapbox/polyline@^0.2.0":
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/@mapbox/polyline/-/polyline-0.2.0.tgz#6e25980744aa22331f94b645a542c02d3fcfee97"