title: How to draw svg markers on PixiOverlay?
body: <p>I am trying to draw svg markers on a <a href="https://github.com/dzwiedzmin/Leaflet.PixiOverlay" rel="nofollow noreferrer">PixiOverlay.js</a> (a drawing overlay using Pixi.js). Completely new to Pixi myself, I think I have put something together that draws a diamond shape, see first code snippet (if it is not correct, or needs improvement let me know)</p>
  
  <p>On pixiOverlay github page there is a <a href="https://manubb.github.io/Leaflet.PixiOverlay/demo.html#6/46.943/2.922" rel="nofollow noreferrer">nice demo</a> that renders lots of polygons on a map. I have stripped this demo down to its bare minimum (see second code snippet below). In this code there is a <code>drawPoly</code> function which as the name suggests, draws the polygons.</p>
  
  <p>I want to replace that with another function that just draws the diamond-shaped svg marker at some predefined point (could be the first point in the polygon coordinates for example, or just a random one)</p>
  
  <p>How can I do this please?</p>
  
  <p>In real life I have quite a few of these markers, all some geometric shape like triangles, stars, squares, circles, etc, and in total there will be several thousands of them (like 100K or even more, depending on the zoom level ofcourse. At zoom=0 could be close to a million)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Title&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;script src='https://d157l7jdn8e5sf.cloudfront.net/dev/pixi.js'&gt;&lt;/script&gt;
  &lt;!--&lt;script src="https://cdn.rawgit.com/manubb/Leaflet.PixiOverlay/master/docs/js/example.min.js"&gt;--&gt;&lt;/script&gt;
  
  &lt;script id="rendered-js"&gt;
      var renderer;
      renderer = PIXI.autoDetectRenderer();
      document.body.appendChild(renderer.view);
  
      var graphics = new PIXI.Graphics();
      graphics.lineStyle(5, 0x00FF00, 1);
      graphics.moveTo(0, 75);
      graphics.lineTo(50, 0);
      graphics.lineTo(100, 75);
      graphics.lineTo(50, 150);
      graphics.lineTo(0, 75);
      graphics.cacheAsBitmap = true;
  
      renderer.render(graphics);
  
  
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html style="height: 100%; margin: 0;"&gt;
  &lt;head&gt;
      &lt;title&gt;Leaflet.PixiOverlay example&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width"&gt;
  
      &lt;!--jquery --&gt;
      &lt;script src="https://code.jquery.com/jquery-3.3.1.js"&gt;&lt;/script&gt;
  
      &lt;!--d3 --&gt;
      &lt;script src='https://d3js.org/d3.v4.min.js'&gt;&lt;/script&gt;
  
      &lt;!-- leaflet v 1.0.3 --&gt;
      &lt;link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"/&gt;
      &lt;script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet-src.js"&gt;&lt;/script&gt;
  
      &lt;!--  I think this Pixi.js and PixiOverlay.js in one file?? --&gt;
      &lt;script src="https://cdn.rawgit.com/manubb/Leaflet.PixiOverlay/master/docs/js/example.min.js"&gt;&lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body style="height: 100%; margin: 0; overflow: hidden;"&gt;
  &lt;div id="mymap" style="height: 100%; width: 100%;" &gt;
  &lt;/div&gt;
  &lt;script&gt;
      var countries =
          {
              "type": "FeatureCollection",
              "features": [
                  {
                      "type": "Feature",
                      "properties": {"name": "UK"},
                      "geometry": {
                          "type": "Polygon",
                          "coordinates": [
                              [
                                  [-4.965, 58.58], [-5.97, 57.58], [-6.459, 56.31], [-5.05, 54.72],[-3.47, 54.36], [-4.08, 53.27],[-5.22, 51.78],[-3.38, 51.37],[-5.58, 50.12], [1.31, 51.09],[0.61, 51.42], [1.66, 52.69],[0.04, 52.88], [0.39, 53.40],[-2.32, 55.97], [-1.80, 57.53],[-3.95, 57.58], [-3.03, 58.60], [-4.96, 58.58],
                              ]
                          ]
                      }
                  },
                  {
                      "type": "Feature",
                      "properties": {"name": "France"},
                      "geometry": {
                          "type": "Polygon",
                          "coordinates": [
                              [
                                  [2.54, 51.09],[-4.65, 48.37],[-1.23, 46.01],[-1.49, 43.61],[3.03, 42.45],[3.64, 43.45],[7.69, 43.77], [5.97, 46.37],[8.04, 48.98],[2.54, 51.09],
                              ]
                          ]
                      }
                  }
              ]
          };
  
      function drawPoly(color, alpha, project, container) {
          return function (poly) {
              var shape = new PIXI.Polygon(poly[0].map(function (point) {
                  var proj = project([point[1], point[0]]);
                  return new PIXI.Point(proj.x, proj.y);
              }));
              container.beginFill(color, alpha);
              container.drawShape(shape);
          };
      }
  
      function renderChart() {
          var map = L.map('mymap').setView(new L.LatLng(50, 1.0), 5);
          L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
              minZoom: 0,
              maxZoom: 9
          }).addTo(map);
          map.zoomControl.setPosition('bottomright');
  
          var firstDraw = true;
          var pixiContainer = new PIXI.Graphics();
          var doubleBuffering = /iPad|iPhone|iPod/.test(navigator.userAgent) &amp;&amp; !window.MSStream;
  
          var pixiOverlay = L.pixiOverlay(function (utils) {
              var container = utils.getContainer();
              var renderer = utils.getRenderer();
              var project = utils.latLngToLayerPoint;
              var bounds;
              if (firstDraw) {
                  countries.features.forEach(function (feature, index) {
                      var color = 0xFF0000,
                          alpha = 0.8;
                      if (feature.geometry === null) return;
                      if (feature.geometry.type === 'Polygon') {
                          bounds = L.bounds(feature.geometry.coordinates[0]);
                          drawPoly(color, alpha, project, container)(feature.geometry.coordinates);
                      }
                  });
              }
              firstDraw = false;
              renderer.render(container);
          }, pixiContainer, {
              doubleBuffering: doubleBuffering,
              destroyInteractionManager: true
          });
  
          pixiOverlay.addTo(map);
  
      };
  
      renderChart()
  
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>