'Custom SRID in Django-Leaflet

I'm having trouble specifying a custom SRID with django-leaflet.

The documentation on projections isn't very detailed, and mentions only briefly:

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.

I followed the django-leaflet installation guidelines, and added the SRID used in my data in PostGIS as follows:

LEAFLET_CONFIG = {
    'SRID': 2056,  # See http://spatialreference.org
    'DEFAULT_CENTER': (46.800663464, 8.222665776),
    'DEFAULT_ZOOM': 7,
    'MIN_ZOOM': 1, 
    'MAX_ZOOM': 20, 
}

But this raises the following errors in Chrome:

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 <script> with source “http://127.0.0.1:8000/static/proj4js/2056.js”. 
uncaught exception: No projection definition for code EPSG:2056

I have leaflet in INSTALLED_APPS, and also load proj4.js and proj4leaflet.js in my page's head.

<!DOCTYPE html>
{% load static %} 
{% load leaflet_tags %}

<html lang="en">
    <head>
        {% leaflet_js %}
        {% leaflet_css %}
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/proj4leaflet/1.0.2/proj4leaflet.min.js"></script>

        <meta charset="utf-8">
        <style>
            .leaflet-container { 
                width:  600px;
                height: 400px;
            }       
            #specialbigmap {
                height: 800px;
            }   
            .django-leaflet-raw-textarea {
                width: 100%;
            }
        </style>
    </head>
    <body>          
        <script type="text/javascript">
            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);
                    });        
            }
        </script>

        {% leaflet_map "my_django_leaflet_map" callback="window.map_init_basic" %}          
    </body>
</html>

I tried running collectstatic as suggested here, but the errors persist (and I doubt whether collectstatic should even be used in development). Any suggestions to make this work?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Custom SRID in Django-Leaflet

Sources

Related Questions