Use nodeFeature = Marker

css/style.css

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

js/LayersConfig.js

@@ -193,9 +193,14 @@ BR.LayersConfig = L.Class.extend({
                     title: '{{ tags.name }}',
                     body:
                         '<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: null,
+                    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>',
                     style: function (overpassObject) {
-                        return this.defaultBaseLayers?.[0] === 'cyclosm' ? { color: 'darkorange' } : {};
+                        return {
+                            nodeFeature: 'Marker',
+                            color: this.defaultBaseLayers?.[0] === 'cyclosm' ? 'darkorange' : '#3388ff',
+                        };
                     }.bind(this),
                 },
             }),