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>
source to share
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 %}
source to share