{% extends "base.html" %}
{% load i18n %}
{% load crispy_forms_tags %}

{% block title %}{% trans "Edit profile" %} | {{ block.super }}{% endblock %}

{% block extra-style %}
    {{ form.media.css }}
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-sm-9">
            <h1><span class="glyphicon glyphicon-cog"></span> {% trans "Edit profile" %}</h1>
            <ul class="list-inline">
                <li>
                    <span class="glyphicon glyphicon-lock"></span>
                    <a href="{% url 'account_change_password' %}">{% trans "Change password" %}</a>
                </li>
            </ul>
        </div>
        <div class="col-sm-3">
        </div>
    </div>
    <form class="edit-profile" action="{% url 'observers:observer_edit' %}" method="post">
        {% csrf_token %}
        {{ form|crispy }}
        <div>
            <button class="btn btn-lg btn-primary btn-block" type="submit">{% trans "Save" %}</button>
        </div>
    </form>
{% endblock %}

{% block extra-script-uncompressed %}
{{ block.super }}
{{ form.media.js }}
{% endblock %}

{% extends "base.html" %}
{% load i18n %}
{% load crispy_forms_tags %}

{% block title %}{% trans "Edit profile" %} | {{ block.super }}{% endblock %}

{% block extra-style %}
    {{ form.media.css }}
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-sm-9">
            <h1><span class="glyphicon glyphicon-cog"></span> {% trans "Edit profile" %}</h1>
            <ul class="list-inline">
                <li>
                    <span class="glyphicon glyphicon-lock"></span>
                    <a href="{% url 'account_change_password' %}">{% trans "Change password" %}</a>
                </li>
            </ul>
        </div>
        <div class="col-sm-3">
        </div>
    </div>
    <form class="edit-profile" action="{% url 'observers:observer_edit' %}" method="post">
        {% csrf_token %}
        {{ form|crispy }}
        <div>
            <button class="btn btn-lg btn-primary btn-block" type="submit">{% trans "Save" %}</button>
        </div>
    </form>
{% endblock %}

{% block extra-script-uncompressed %}
{{ block.super }}
{{ form.media.js }}
<script>
$(function () {
    $('.geoposition-widget').on('geoposition.geocoder.finished', function (event, results, status) {
        var components = results[0].address_components;
        var city = "";
        for (var i = 0; i < components.length; ++i) {
            if (components[i].types[0] == "locality") {
                city = components[i].long_name;
                break;
            }
        }
        console.log(city);
    });
});
</script>
{% endblock %}

Use geoposition event to find just the city.
Use geoposition event to find just the city.
