title: Custom SRID in Django-Leaflet
body: <p>I'm having trouble specifying a custom SRID with <a href="https://django-leaflet.readthedocs.io/en/latest/index.html#" rel="nofollow noreferrer">django-leaflet</a>.</p>
  
  <p>The <a href="https://django-leaflet.readthedocs.io/en/latest/advanced.html#projection" rel="nofollow noreferrer">documentation</a> on projections isn't very detailed, and mentions only briefly:</p>
  
  <blockquote>
    <p>By default, django-leaflet will try to load the spatial reference from
    your static files at “proj4js/{{ srid }}.js”. If it fails, it will
    eventually rely on spatialreference.org.</p>
  </blockquote>
  
  <p>I followed the <code>django-leaflet</code> <a href="https://django-leaflet.readthedocs.io/en/latest/installation.html" rel="nofollow noreferrer">installation guidelines</a>, and added the SRID used in my data in PostGIS as follows:</p>
  
  <pre><code>LEAFLET_CONFIG = {
      'SRID': 2056,  # See http://spatialreference.org
      'DEFAULT_CENTER': (46.800663464, 8.222665776),
      'DEFAULT_ZOOM': 7,
      'MIN_ZOOM': 1, 
      'MAX_ZOOM': 20, 
  }
  </code></pre>
  
  <p>But this raises the following errors in Chrome:</p>
  
  <pre><code>uncaught exception: Leaflet and proj4 must be loaded first
  The script from “http://127.0.0.1:8000/static/proj4js/2056.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.
  Loading failed for the &lt;script&gt; with source “http://127.0.0.1:8000/static/proj4js/2056.js”. 
  uncaught exception: No projection definition for code EPSG:2056
  </code></pre>
  
  <p>I have <code>leaflet</code> in <code>INSTALLED_APPS</code>, and also load <code>proj4.js</code> and <code>proj4leaflet.js</code> in my page's head.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  {% load static %} 
  {% load leaflet_tags %}
  
  &lt;html lang="en"&gt;
      &lt;head&gt;
          {% leaflet_js %}
          {% leaflet_css %}
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/proj4leaflet/1.0.2/proj4leaflet.min.js"&gt;&lt;/script&gt;
  
          &lt;meta charset="utf-8"&gt;
          &lt;style&gt;
              .leaflet-container { 
                  width:  600px;
                  height: 400px;
              }       
              #specialbigmap {
                  height: 800px;
              }   
              .django-leaflet-raw-textarea {
                  width: 100%;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;          
          &lt;script type="text/javascript"&gt;
              function map_init_basic (map, options) {                
  
                  $.getJSON( "http://127.0.0.1:8000/en/api/mydata/?name=my_data1", function( data ) {
                      mygeojson = data.results
                      L.geoJSON(mygeojson).addTo(map);
                      });        
              }
          &lt;/script&gt;
  
          {% leaflet_map "my_django_leaflet_map" callback="window.map_init_basic" %}          
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I tried running <code>collectstatic</code> as suggested <a href="https://stackoverflow.com/a/51803138/3976696">here</a>, but the errors persist (and I doubt whether <code>collectstatic</code> should even be used in development). Any suggestions to make this work?</p>