OpenLayers.js:679 Uncaught TypeError: Cannot read property 'w' of null(…)

[psychok7]

Hi, i am getting this error when i try to render a Geodjango map in my admin. This works well in a "normal" django admin installation.

To be more specific:

from django.contrib.gis import admin as gis_admin


class SecureOSMGeoAdmin(gis_admin.OSMGeoAdmin):
    openlayers_url = (
        'https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js'
    )

And

class AccommodationAdmin(SecureOSMGeoAdmin):
   pass

admin.site.register(Accommodation, AccommodationAdmin) 

The model:

class Accommodation(models.Model):    
    location = models.PointField(srid=4326, db_index=True, blank=True, null=True)

Any ideas? I am using Django==1.10

[gonzalomcruz]

Any update on this? Same problem here using django 1.10.5 and django-jet 1.0.4, though I am using the admin.ModelAdmin class instead of OSMGeoAdmin.

[davidmgvaz]

This only happens when the gis field / fields are not in the first tab. Since Jet renders tabs on demand the gis initializations can only occur when the given tab is open and rendered.

I came up with the a fix for openlayers, extend the template "gis/admin/openlayers.html" with the following code (NOTE: this fix uses code from jet, to check modules hash, and that can change in the future, ideally this should be included in the source code of jet to avoid this issues)

{% extends "gis/admin/openlayers.html" %}

{% block init_function %}jQuery(document).ready(function ($) {
    var $modules = $('.change-form').find('#content-main > form > div').find('> .module'),
        gis_module_classes = $('#{{ id }}_map').parents('.module')[0].classList,
        tab_changed_function = function (hash, module, event) {
            var result = hash.match(/^(#(\/tab\/(.+)\/)?)?$/i);

            if (result == null) {
                return;
            }

            result = result[3] != undefined ? result[3] : '';

            if (result == module) {
                {{ module }}.init();
                if (event) {
                    $(this).off(event);
                } else {
                    return true;
                }
            }
            return false;
        };

    $modules.each(function (i) {
        var module = 'module_' + i;
        if ($.inArray(module, gis_module_classes) != -1) {
            // immediate call, if already in tab
            if (! tab_changed_function(location.hash, module)) {
                $(window).on('hashchange', function (event) {
                   tab_changed_function(location.hash, module, event);
                });
            }
        }
    });
});{% endblock %}

[Ismael-VC]

Please come to the django-jet Discord server so we can organize if you like:

• https://discord.gg/3yr5yeH

Welcome! 😄

[lzambrano18]

Hello, I have the same error using django's MultiPolygonField. Any solution?

poly_map = models.MultiPolygonField(null=True, blank=False)

[SalahAdDin]

Which is the traceback from this bug?

[gslaboch]

I had the same Issue on Django 1.11. I fixed it by modifying template "templates\gis\admin\openlayers.html":

Changed:

<script type="text/javascript">{% block init_function %}{{ module }}.init();{% endblock %}</script>

With:

<script type="text/javascript">{% block init_function %}
jQuery(document).ready(function ($) {    {{ module }}.init();  });
{% endblock %}</script>
 

[SalahAdDin]

@gslaboch It is a problem with this package or with django?

[gslaboch]

I think its a problem django.contrib.gis, but it only appears when working together with django-jet. The original code just makes {{ module }}.init(); assuming document is fully loaded

[SalahAdDin]

@gslaboch can you make a pull request here?

[tomoki16]

Any news/fix about this? Django==2.1.3 django-jet==1.0.8 Map still don't work.

[avdata99]

I proposed at Django the change you suggested @gslaboch: https://github.com/django/django/pull/11819

[SalahAdDin]

@avdata99 as far as i understand, the normally don't make changes related to third party packages, less when it is not a popular package.

[hanztura]

I've tried @gslaboch 's solution but for some unknown reason it is not working.

So kind of used his solution and do a bit of a hack and only then it worked on my end. Here is the code:

<script type="text/javascript">{% block init_function %}
let geoDelay = 5000;

let geoTimerId = setTimeout(function initGeoMap() {
  if ($('#id_geo_location_admin_map').length) {
    {{ module }}.init();
  console.log('asdf');
  } else {
    geoTimerId = setTimeout(initGeoMap, geoDelay);
  }

}, geoDelay);
{% endblock %}</script>