Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use GeoDjango Pointfield in Form?

I wanted to know to to use the PointField widget that is automatically generated from a Django form.

I am using the generic views for this (CreateView)

This is what my model looks like.

from django.contrib.gis.db import models

class Post(models.Model):
    title = models.CharField(max_length=60)
    text = models.CharField(max_length=255)
    location = models.PointField(geography=True, null=True, blank=True)
    objects = models.GeoManager()

The form is then automatically generated for me and I just call it in my view. As such:

{{ form.as_p }}

This is the output of that piece of code.

<form method="post">
  <input type='hidden' name='csrfmiddlewaretoken' value='wVZJIf7098cyREWe3n3jiZinPdbl8nEe' />
  <p><label for="id_title">Title:</label> <input id="id_title" maxlength="60" name="title" type="text" /></p>
<p><label for="id_text">Text:</label> <input id="id_text" maxlength="255" name="text" type="text" /></p>
<p><label for="id_location">Location:</label> <style type="text/css">
    #id_location_map { width: 600px; height: 400px; }
    #id_location_map .aligned label { float: inherit; }
    #id_location_div_map { position: relative; vertical-align: top; float: left; }
    #id_location { display: none; }
    .olControlEditingToolbar .olControlModifyFeatureItemActive {
        background-image: url("/static/admin/img/gis/move_vertex_on.png");
        background-repeat: no-repeat;
    }
    .olControlEditingToolbar .olControlModifyFeatureItemInactive {
        background-image: url("/static/admin/img/gis/move_vertex_off.png");
        background-repeat: no-repeat;
    }
</style>

<div id="id_location_div_map">
    <div id="id_location_map"></div>
    <span class="clear_features"><a href="javascript:geodjango_location.clearFeatures()">Delete all Features</a></span>

    <textarea id="id_location" class="vSerializedField required" cols="150" rows="10" name="location"></textarea>
    <script type="text/javascript">
        var map_options = {};
        var options = {
            geom_name: 'Point',
            id: 'id_location',
            map_id: 'id_location_map',
            map_options: map_options,
            map_srid: 4326,
            name: 'location'
        };

        var geodjango_location = new MapWidget(options);
    </script>
</div>
</p>
  <input type="submit" value="Create" />
</form>

In the head tags I import an OpenLayers script from http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js

However, the page will not show anything for the pointfield. (The other fields work just fine).

In chromedevtools it shows this error

Uncaught ReferenceError: MapWidget is not defined 

For this line of code

var geodjango_location = new MapWidget(options)

Basically I want to know if there is someother javascript library I should be linking to or am I missing something else?

I've looked through the documentation on GeoDjango forms, but don't know what else to try https://docs.djangoproject.com/en/dev/ref/contrib/gis/forms-api/

like image 228
user1631075 Avatar asked Dec 04 '14 23:12

user1631075


People also ask

What is Srid in GeoDjango?

The SRID is an integer specifier that corresponds to the projection system that will be used to interpret the data in the spatial database. [3] Projection systems give the context to the coordinates that specify a location.

What is GeoDjango?

GeoDjango is an included contrib module for Django that turns it into a world-class geographic web framework. GeoDjango strives to make it as simple as possible to create geographic web applications, like location-based services. Its features include: Django model fields for OGC geometries and raster data.


1 Answers

Add this to the head section:

<head>
  {{ form.media }}
</head>
like image 132
Alan Pritt Avatar answered Sep 22 '22 10:09

Alan Pritt