inline the google maps pin svg

htdocs/css/openwebrx.css

@@ -1079,14 +1079,9 @@ img.openwebrx-mirror-img
     content: "Down: ";
 }
 
-.openwebrx-maps-pin {
+.openwebrx-maps-pin svg {
-    background-image: url("../gfx/google_maps_pin.svg");
-    background-position: center;
-    background-repeat: no-repeat;
     width: 15px;
     height: 15px;
-    background-size: contain;
-    display: inline-block;
 }
 
 .openwebrx-message-panel {

htdocs/gfx/svg-defs.svg

@@ -20,5 +20,6 @@
         <g id="bookmark"><path d="M62.5 0h-45A7.5 7.5 0 0 0 10 7.5V80l30-17.5L70 80V7.5A7.5 7.5 0 0 0 62.5 0zm0 66.942L40 53.817 17.5 66.942V8.437a.938.938 0 0 1 .938-.938h43.124c.518 0 .938.42.938.937z" fill="#fff"/></g>
         <g id="rx-details-arrow-down"><path d="M5 0C2.5 0 0 2.5 0 5v7h43V5c0-2.5-2.5-5-5-5zm8 4h17l-8.5 6.5z" fill="#999" fill-opacity=".196"/><path d="M13 4h17l-8.5 6.5z" fill="#848484" fill-opacity=".592"/></g>
         <g id="rx-details-arrow-up"><path d="M5 0C2.5 0 0 2.5 0 5v7h43V5c0-2.5-2.5-5-5-5zm16.5 3L30 9.5H13z" fill="#999" fill-opacity=".196"/><path d="M30 9.5H13L21.5 3z" fill="#848484" fill-opacity=".592"/></g>
+        <g id="maps-pin" transform="translate(-965.78 -331.788) scale(1.1856)"><path d="M817.11 282.97c-1.258 1.343-2.046 3.299-2.016 5.139.064 3.845 1.797 5.3 4.569 10.592.998 2.328 2.04 4.792 3.031 8.873.138.602.272 1.16.334 1.21.062.048.197-.513.334-1.115.991-4.081 2.033-6.543 3.032-8.872 2.77-5.291 4.504-6.747 4.568-10.592.03-1.84-.76-3.797-2.018-5.14-1.437-1.534-3.605-2.67-5.916-2.717-2.311-.047-4.48 1.088-5.918 2.622z" fill="#ff4646" stroke="#d73534"/><circle cx="823.03" cy="288.25" r="3.035" fill="#590000"/></g>
     </defs>
 </svg>

htdocs/lib/MessagePanel.js

@@ -180,6 +180,7 @@ PacketMessagePanel.prototype.pushMessage = function(msg) {
         }
     } else if (msg.lat && msg.lon) {
         classes.push('openwebrx-maps-pin');
+        overlay = '<svg viewBox="0 0 20 35"><use xlink:href="static/gfx/svg-defs.svg#maps-pin"></use></svg>';
     }
     var attrs = [
         'class="' + classes.join(' ') + '"',

htdocs/lib/MetaPanel.js

@@ -145,7 +145,7 @@ YsfMetaPanel.prototype.setLocation = function(lat, lon, callsign) {
     this.hasLocation = hasLocation; this.callsign = callsign;
     var html = '';
     if (hasLocation) {
-        html = '<a class="openwebrx-maps-pin" href="map?callsign=' + encodeURIComponent(callsign) + '" target="_blank"></a>';
+        html = '<a class="openwebrx-maps-pin" href="map?callsign=' + encodeURIComponent(callsign) + '" target="_blank"><svg viewBox="0 0 20 35"><use xlink:href="static/gfx/svg-defs.svg#maps-pin"></use></svg></a>';
     }
     this.el.find('.openwebrx-ysf-source .location').html(html);
 };

inkscape files/google_maps_pin.svg

@@ -1,6 +1,4 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
 <svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:cc="http://creativecommons.org/ns#"
@@ -14,8 +12,8 @@
    viewBox="0 0 20 34.892337"
    id="svg3455"
    version="1.1"
-   inkscape:version="0.91 r13725"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)"
-   sodipodi:docname="Map Pin.svg">
+   sodipodi:docname="google_maps_pin.svg">
   <defs
      id="defs3457" />
   <sodipodi:namedview
@@ -31,15 +29,16 @@
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
      showgrid="false"
-     inkscape:window-width="1024"
+     inkscape:window-width="2560"
-     inkscape:window-height="705"
+     inkscape:window-height="1381"
-     inkscape:window-x="-4"
+     inkscape:window-x="0"
-     inkscape:window-y="-4"
+     inkscape:window-y="348"
      inkscape:window-maximized="1"
      fit-margin-top="0"
      fit-margin-left="0"
      fit-margin-right="0"
-     fit-margin-bottom="0" />
+     fit-margin-bottom="0"
+     inkscape:document-rotation="0" />
   <metadata
      id="metadata3460">
     <rdf:RDF>