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 collectstatic

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

Here are the relevant parts of the code:

import floppyforms as forms

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

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,})})

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):

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

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


{% 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" />
{% endblock %}


<!doctype html>
        <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" >
        <div class="container theme-showcase" role="main">
            <div class="jumbotron">
            <div class="container">
                {% block page_content %}{% endblock %}



source to share

1 answer

I had a similar problem and realized that I needed to include the {{}} 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 %}
{{ }}
{% endblock %}




All Articles