title: How to use base64 encoded markers with Leafletjs
body: <p>I'm using leaflet to render government maps and adding custom markers via a Python backend. These markers are created using</p>
  
  <pre><code>        var markers = {
              {% for marker in markers.all %}
                  '{{ marker.slug }}': L.icon({
                      iconUrl: '{{ marker.icon.get_absolute_url }}',
                      {% if marker.shadow %}
                          shadowUrl: '{{ marker.shadow.get_absolute_url }}',
                      {% endif %}
                  }),
              {% endfor %}
  </code></pre>
  
  <p>I'm trying to send the icons for the markers as base64 encoded PNGs to save a roundtrip request to the server for each icon of each map of each user accessing the maps. I've tried sending the images base64 encoded in a way similar as how Google Maps supports it (<a href="https://stackoverflow.com/questions/13061780/marker-using-base64-encoded-string">Marker Using base64 encoded string</a>) with no success, the map rendering aborts with "Uncaught SyntaxError: Unexpected token ILLEGAL".</p>
  
  <p>EDIT:</p>
  
  <p>One possible solution: Extend Leaflet's Icon class
  <a href="https://github.com/cavis/leafpile/blob/master/src/LeafpileIcon.js#L28" rel="nofollow noreferrer">https://github.com/cavis/leafpile/blob/master/src/LeafpileIcon.js#L28</a> </p>