Model Layer

You need to add three model fields to your model:

  1. OSMField

  2. LatitudeField

  3. LongitudeField

django-osm-field expects them to have a certain name schema: The OSMField defines the base name, the LatitudeField and LongitudeField have the same name appended with _lat and _lon respectively. See the following example to get an idea:

from django.db import models

from osm_field.fields import LatitudeField, LongitudeField, OSMField

class MyModel(models.Model):
    location = OSMField()
    location_lat = LatitudeField()
    location_lon = LongitudeField()

It is possible, though, to overwrite the default naming for latitude and longitude fields by giving their names as arguments to the OSMField:

class MyModel(models.Model):
    location = OSMField(lat_field='latitude', lon_field='longitude')
    latitude = LatitudeField()
    longitude = LongitudeField()

Form Layer

from django import forms

from .models import MyModel

class MyModelForm(forms.ModelForm):

    class Meta:
        fields = ('location', 'location_lat', 'location_lon', )
        model = MyModel

View Layer

from django.views.generic import CreateView

from .forms import MyModelForm
from .models import MyModel

class MyCreateView(CreateView):
    form_class = MyModelForm
    model = MyModel

Template Layer

django-osm-field shipps with a minimized jQuery version. To access it in a template use the static templatetag:

<script type="text/javascript" src="{% static "js/vendor/jquery-2.1.0.min.js" %}"></script>

You can of course load jQuery from a CDN as well:

<script type="text/javascript" src="//"></script>

To get the front-end to work, you also need to include some CSS and JavaScript files. You can do this by simply using {{ }} or by adding those lines explicitly:

<link href="{% static "css/vendor/leaflet.css" %}" type="text/css" media="screen" rel="stylesheet" />
<link href="{% static "css/osm_field.css" %}" type="text/css" media="screen" rel="stylesheet" />
<script type="text/javascript" src="{% static "js/vendor/leaflet.js" %}"></script>
<script type="text/javascript" src="{% static "js/osm_field.js" %}"></script>

In the end your template should look similar to this:

{% load static %}<!DOCTYPE HTML>
    <link rel="stylesheet" href="{% static "css/example.css" %}">
    <!-- Either serve jQuery yourself -->
    <script type="text/javascript" src="{% static "js/vendor/jquery-2.1.0.min.js" %}"></script>
    <!-- or from a CDN -->
    <script type="text/javascript" src="//"></script>
    {{ }}
    <form action="" method="post">
      {% csrf_token %}
      {{ form.as_p }}
      <input type="submit" value="Save" />