CODEWITHSUNDEEP
djangoleafletgispostgissrid
sc28
sc28

Reputation: 1213

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?

Upvotes: 1

Views: 463

Answers (0)

Related Questions