I'm trying to create a form usefull to add only one single point on a map, I'm doing this for the first time. I use GeoDjango from Django 2.2 and OpenLayers 5.

I've created a simple model with only two field: name and point.

from django.contrib.gis.db import models as geomodels
from django.db import models

class AddPoint(models.Model):
    name = models.CharField(max_length=100)
    point = geomodels.PointField()

    def __str__(self):
        return self.name

The model is used from this form:

from django import forms
from django.contrib.gis import forms

class AddPointForm(forms.ModelForm):
    name = forms.CharField(
                "type": "text",
                "class": "form-control form-control-lg",
    point = forms.PointField(
                'map_width': 800,
                'map_height': 500,

    class Meta:
        model = AddPoint
        fields = []

I use this view to add a point on a map:

def addPointOnMap(request):
    if request.method == "POST":
        geoform = AddPointForm(request.POST or None)
        if geoform.is_valid():
            new_point = geoform.save()
            return redirect('add_points_map')
        geoform = AddPointForm()
    context = {
        'geoform': geoform,
    template = 'maps/editing/add_point.html'
    return render(request, template, context)

With the help of the standard form template I will add the informations on my map:

  <form method="POST" enctype="multipart/form-data" novalidate>{% csrf_token %}
    {{ geoform.as_p }}
    <div class="row justify-content-md-center">
      <div class="col-md-auto">
        <input type="submit" class="btn btn-info shadow" value="Pubblica">

The problem is that I see this error when I go at the form's url:

Uncaught ReferenceError: MapWidget is not defined

Where I must define this widget? I'm a beginner, this thing for me is not clear.

In the page source I see that is automatically created this:

  <form method="POST" enctype="multipart/form-data" novalidate><input type="hidden" name="csrfmiddlewaretoken" value="nxbLkfPnrPsXeJAO3MvKSDrNhGJMdcry62d1fzYtDBXtwe1iabFc0vZrlupbJGr2">
    <p><label for="id_name">Name:</label> <input type="text" name="name" class="form-control form-control-lg" maxlength="100" required id="id_name"></p>
<p><label for="id_point">Point:</label> <style type="text/css">
    #id_point_map { width: 800px; height: 500px; }
    #id_point_map .aligned label { float: inherit; }
    #id_point_div_map { position: relative; vertical-align: top; float: left; }
    #id_point { display: none; }


<div id="id_point_div_map">
    <div id="id_point_map"></div>
    <span class="clear_features"><a href="javascript:geodjango_point.clearFeatures()">Cancella tutti gli oggetti</a></span>

    <textarea id="id_point" class="vSerializedField required" cols="150" rows="10" name="point"></textarea>
    <script type="text/javascript">
        var map_options = {};

var base_layer = new ol.layer.Tile({source: new ol.source.OSM()});

        var options = {
            base_layer: base_layer,
            geom_name: 'Point',
            id: 'id_point',
            map_id: 'id_point_map',
            map_options: map_options,
            map_srid: 3857,
            name: 'point'

options['default_lon'] = 5;
options['default_lat'] = 47;
options['default_zoom'] = 12;

        var geodjango_point = new MapWidget(options);
    <div class="row justify-content-md-center">
      <div class="col-md-auto">
        <input type="submit" class="btn btn-info shadow" value="Pubblica">

An user on Facebook give me a solution: I've miss {{ geoform.media }} in the head of the form's page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.