Django floppyforms OSMPointWidget does not display a map

Question

I am trying to put an OSM-map, similar to the one in the geodjango-admin, into a form on my main site.

I decided to use floppyforms, set everything up like in the documentation and it seems to get recognized, but strangely the map does not appear. Firebug shows that there is just an empty <div id="id_coord_map"></div> instead of the map, but it has all the right dimensions. The debug-textbox and the "Delete all features"-link are there like they should be. But, when I open the site, Firebug does not show any javascript requests in the 'network'-tab, so maybe that is a hint.

I guess I missed something or something isn't correctly included, but I tried for hours and really don't know anymore. Amongst other things I set all the paths for static files and run manage.py collectstatic, I also tried to not use the generic edit views, but it came out the same.

Here are the relevant parts in the code:

#views.py

import floppyforms as forms

...
class OSMPointWidget(forms.gis.PointWidget, forms.gis.BaseOsmWidget):
    pass

class LocationCreateView(CreateView):
    model = Location
    fields = ['name', 'zip', 'coord']
    form_class =  modelform_factory(Location,
        widgets={"coord": forms.gis.PointWidget(attrs = {
            'display_wkt': True,
            'map_srid':  4326,
            'map_width': 700,
            'map_height': 500,})})


#models.py

class Location(models.Model):
    name = models.CharField(max_length=200)
    slug = models.SlugField(max_length=255, blank=True, default='', unique=True)
    coord = models.PointField()
    zip = models.CharField(max_length=5, default='12345')
    objects = models.GeoManager()

    def __unicode__(self):
        return self.name

    def save(self, *args, **kwargs):
        if not self.slug:
            self.slug = slugify(self.name)
        super(Location, self).save(*args, **kwargs)


#urls.py

urlpatterns = patterns('',
    ...
    url(r"location/$", views.LocationCreateView.as_view(),
        name = "locationcreate"),
    ...
)

#location_form.html

{% extends "_layouts/base.html" %}
{% block page_title %}Enter Location | {% endblock %}
{% block page_content %}
    <form action="" method="post">
    {% csrf_token %}
        {{ form.as_p }}
        <input type="submit" value="Submit" />
    </form>
{% endblock %}

#base.html

<!doctype html>
<html>
    <head>
        <title>{% block page_title %}{% endblock %}Calendar</title>
        <link rel="stylesheet" href="{{ STATIC_URL }}css/bootstrap.css">
        <link rel="stylesheet" href="{{ STATIC_URL }}css/bootstrap-theme.css" >
    </head>
    <body>
        <div class="container theme-showcase" role="main">
            <div class="jumbotron">
                <h1>EVENTCALENDAR</h1>
            </div>
            <div class="container">
                {% block page_content %}{% endblock %}
            </div>
        </div>
    </body>
</html>

score 1 · Answer 1 · answered Dec 09 '14 at 06:30

I just had a similar issue and realised that I needed to include a {{ form.media }} tag in the header and then django-floppyforms supplies the relevant javascript files to make the map magically appear.

Somewhere in the head of base.html include a block for extra javascript

{% block extra_js %}{% endblock %}

Then fill in the block in your location_form.html

{% block extra_js %}
{{ form.media }}
{% endblock %}

Django floppyforms OSMPointWidget does not display a map

1 Answers1