form widget does not display "add" button

[frague59]

Hi,

I'm currently using django-leaflet to get points in maps. Using django==1.8.4 / django-leaflet==0.16 / django-geojson==2.8.1

Actualy, I can't see the Add point button on the widget. I can display the map with the points already geocoded selected because I did geocode some of my addresses, but I can't manualy set a new point.

I put the leaflet stuff in my base_forms.html page, and use the form widget :

{% load leaflet_tags %}
<!-- leaflet forms stuff -->
{% leaflet_js %}
{% leaflet_css %}
... 
{% for field in form %}
    {{ field.as_p }}
{% endfor %}
<!--  My template is quite more complicated, but that's for the example... --> 

My form code :

from leaflet.forms import widgets as ll_widgets
# The model `Location` has a `geom` field 
class LocationForm(ModelForm):
    class Meta:
        widgets = {'geom': ll_widgets.LeafletWidget()}

In a settings.py :

LEAFLET_CONFIG = {'DEFAULT_CENTER': (50.726, 3.1613),
                  'DEFAULT_ZOOM': 13,
                  'MIN_ZOOM': 4,
                  'MAX_ZOOM': 18,
                  'SCALE': 'metric'}

Did I miss something ?

[leplatrem]

From these few lines, I would say that you're good. Any hint from the HTML output or JavaScript console?

[frague59]

I've a message in my js console :

TypeError: L.GeometryField is not a constructor

What can I do ?

[frague59]

js output :

<script type="text/javascript">
    var geodjango_geom = {};
    geodjango_geom.fieldid = 'id_geom';
    geodjango_geom.modifiable = true;
    geodjango_geom.geom_type = 'Geometry';
    geodjango_geom.srid = 4326;


    function id_geom_map_callback(map, options) {
        geodjango_geom.store_class = L.FieldStore;
        (new L.GeometryField(geodjango_geom)).addTo(map);

    }; 
</script>
<div id="id_geom_map" class="leaflet-container-default"></div>
<script type="text/javascript">
(function () {

    function loadmap() {
        var djoptions = {"layers": [["OSM", "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", "\u00a9 <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors"]], "minimap": false, "scale": "metric", "center": [50.726, 3.1613], "tilesextent": [], "attributionprefix": null, "zoom": 13, "maxzoom": 18, "minzoom": 4, "extent": [[-90, -180], [90, 180]], "resetview": true, "srid": null, "overlays": [], "fitextent": true},
            options = {djoptions: djoptions, initfunc: loadmap,
                       globals: false, callback: id_geom_map_callback};
        L.Map.djangoMap('id_geom_map', options);
    }
    var loadevents = ["load"];
    if (loadevents.length === 0) loadmap();
    else if (window.addEventListener) for (var i=0; i<loadevents.length; i++) window.addEventListener(loadevents[i], loadmap, false);
    else if (window.jQuery) jQuery(window).on(loadevents.join(' '), loadmap);

})();
</script>
<textarea id="id_geom" class="required" cols="150" rows="10" name="geom">{ &quot;type&quot;: &quot;Point&quot;, &quot;coordinates&quot;: [ 3.16074763647209, 50.7234132 ] }</textarea>

[frague59]

I've add leaflet.forms.js into form loading, which contains the L.GeometryField definition, but I've the same issue.

class LocationForm(ModelForm):
    class Media:
        js = (static('leaflet/leaflet.forms.js'), )
        # pass

[frague59]

^^ ... does not work ...

[leplatrem]

When adding leaflet.forms.js you have the exact same issue? Are the scripts loaded in the proper order?

[leplatrem]

Any news to share ?

[frague59]

I think scripts are loaded in a proper order, but I"ll check that tomorow. I've another weird think inf fox the map is displayed partialy, but when I launch the ffox std devbar, it loads normaly. I though it was a "dev machine" comportement, but I saw it on other machines too. It works in chrom[e|ium] Thanks !:

2015-09-07 0:17 GMT+02:00 Mathieu Leplatre [email protected]:

Any news to share ?

— Reply to this email directly or view it on GitHub https://github.com/makinacorpus/django-leaflet/issues/112#issuecomment-138132310 .

[frague59]

^^ same on chrome / chromium : the map is displayed on "Inspect" mode

https://agenda.tourcoing.fr/calendrier/manifestation/1152/

click on "location" at page bottom

Thanks !

2015-09-09 21:02 GMT+02:00 François GUÉRIN [email protected]:

I think scripts are loaded in a proper order, but I"ll check that tomorow. I've another weird think inf fox the map is displayed partialy, but when I launch the ffox std devbar, it loads normaly. I though it was a "dev machine" comportement, but I saw it on other machines too. It works in chrom[e|ium] Thanks !:

2015-09-07 0:17 GMT+02:00 Mathieu Leplatre [email protected]:

Any news to share ?

— Reply to this email directly or view it on GitHub https://github.com/makinacorpus/django-leaflet/issues/112#issuecomment-138132310 .

[frague59]

Loading order in my custom admin page:

• jquery (version 1.11.2)
• bootstrap.min.js (version 3.3.2)
• leaflet.js
• leaflet.extras.js
• leaflet.forms.js
• leaflet.css

... which looks like pretty good.

[leplatrem]

The «partial map» problem is not releated to django-leaflet. It is because it is shown in a popup. Have a look at leaflet documentation about calling map.ìnvalidateSize() when the container (the popup) is shown.

As for your form problem, I suggest to go back to a very simple example (taking the README example), and see when does the error appears. Otherwise for us, it is blind remote debugging, and to be honest I have absolutely no time for that :(

[andrew-computerscience]

If someone else comes across this same issue as I did, the solution for me was that I had not paid attention to the location of the following lines: "{% load leaflet_tags %} {% leaflet_js plugins="forms" %} {% leaflet_css plugins="forms" %}"

Make sure "{% load leaflet_tags %}" is before the opening tag.

Also make sure "{% leaflet_js plugins="forms" %} {% leaflet_css plugins="forms" %}" is located in the

section of your head.

This solved the problem for myself.

Good luck!