Django floppyforms OSMPointWidget not displaying map

Question

Django floppyforms OSMPointWidget not displaying map

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

I decided to use floppyforms, set everything up as in the documentation , and it seems to be recognized, but oddly enough, the map doesn't show up. Firebug shows that there is only a blank instead of a map <div id="id_coord_map"></div>

, but it has all the correct dimensions. Debug-textbox and "Remove all features" -link are as they should be. But when I open the site, Firebug doesn't show any javascript requests in the "network" tab, so maybe this is a hint.

Probably, I missed something or turned on something wrong, but I tried for hours and I don't know anymore. Among other things, I set all paths for static files and ran manage.py collectstatic

, I also tried not to use common views, but it came out the same.

Here are the relevant parts of 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>

+3

python django openstreetmap geodjango django-floppyforms

Ucuri 07 oct. 14 at 14:56

source to share

1 answer

Philip southwell · Answer 1 · 2014-12-09T06:30:57+0000

I had a similar problem and realized that I needed to include the {{form.media}} tag in the header and then django-floppyforms supplies the appropriate javascript files to magically make the map.

Added a block for additional javascript somewhere in the head of the base.html file

{% block extra_js %}{% endblock %}

Then fill in the block in location_form.html file

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

Django floppyforms OSMPointWidget not displaying map

More articles: