Django GeoTracker

About me
• My name is Jani Tiainen
• I work for company called Keypro
• Django and GeoDjango user since 2008
• Individual member of DSF
• jtiai on #django IRC channel

What we will build?
• A web site that takes advantage of geolocation service.
• A responsive layout with map and few buttons to record GPS location
from mobile device.
• A tool to convert individual tracked points to a linestring.
• A tool that can show linestring on a map.

App skeleton
• Can be cloned with git from https://github.com/jtiai/dceu-geotracker
• Contains base layout.
• Index page with locate-button.
• Used to verify that all essential parts do work.

Geolocation service
• Can query geolocation from browser. Most usable with mobile
devices with GPS.
• Works pretty well.
• Lately browsers have been requiring SSL (HTTPS) when using
geolocation.
• Serveo or ngrok can solve problem in small scale testing and development

First step
• Let’s make sure that everyone has skeleton app up and running and
can locate themselves on a map using locate-button.
• Make sure that migrations are done.
• Make sure that superuser is created to access admin ui.
• There are bugs in instructions. 
• docker-compose run –rm web pipenv run python manage.py migrate
• docker-compose run –rm web pipenv run python manage.py
createsuperuser
• And a bug in the code…. 
• start.sh script had CRLF-line-endings. Not good for *nix. 

Record location
• Let’s add a new button to store location to database.
• Each ”track” has it’s own (unique) name.
Index.html
<div class="form-group">
<label for="tracking_name">Tracking name</label>
<input type="text" maxlength="200" id="tracking_name" class="form-control" name="name" placeholder="Name of the tracking" required>
</div>
<button type="button" class="btn btn-primary" onclick="single_locate()">Locate</button>
<button type="button" class="btn btn-primary" onclick="start_tracking()">Start tracking</button>

Record location JS
let watchId = null;
let currentLocationMarker = null;
let trackingMarkers = new Array(5);
let trackingMarkerIndex = 0; // current counter

Record location view code
@method_decorator(csrf_exempt, name="dispatch")
class TrackingPointAPIView(View):
def post(self, request):
form = TrackingPointForm(request.POST)
if form.is_valid():
tp = TrackedPoint()
# Timestamp is in milliseconds
tp.name = form.cleaned_data["name"]
tp.timestamp = datetime.datetime.fromtimestamp(
form.cleaned_data["timestamp"] / 1000
)
tp.location = Point(
form.cleaned_data["longitude"], form.cleaned_data["latitude"]
)
tp.save()
return JsonResponse({"successful": True})
return JsonResponse({"succesful": False, "errors": form.errors})
Don’t forget to add required imports…

Record location url config
And let’s test we everything works as expected…
urlpatterns = [
path('admin/', admin.site.urls),
path('tracking-point/', views.TrackingPointAPIView.as_view(), name='tracking-point-api’),
path('', views.IndexView.as_view(), name='tracking-index'),
]

Testing and verifying
• Run devserver
• docker-compose up
• Route https to local machine (serveo or ngrok)
• Note with serveo – it doesn’t redirect http to https.
• Open index page and store point(s) to database.

Make tracking to stop
• Add stop-tracking button
<button type="button" class="btn btn-primary" onclick="stop_tracking()">Stop tracking</button>
function stop_tracking() {
if (!watchId) {
alert("You're not tracking yet. Start tracking first.");
} else {
navigator.geolocation.clearWatch(watchId);
watchId = null;
let tracking_name = document.getElementsByName('name')[0];
tracking_name.disabled = false;
}
}

List tracked points
• Simple list with name of tracking and number of points in it.
• A button to convert points to a linestring.
{% extends "geotracker/base.html" %}
{% block contents %}
<form action="{% url "route-create" %}" method="post">
{% csrf_token %}
<table class="table">
<thead>
<tr>
<th scope="col">Tracking name</th>
<th scope="col">Number points</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
{% for r in track_names %}
<tr>
<td>{{ r.name }}</td>
<td>{{ r.num_points }}</td>
<td><button class="btn btn-primary btn-sm" name="name" value="{{ r.name }}">Create Track</button></td>
</tr>
{% endfor %}
</tbody>
</table>
</form>
{% endblock %}

List tracked points, the view
class TrackingPointsListView(View):
def get(self, request):
track_names = (
TrackedPoint.objects.values("name")
.distinct()
.annotate(num_points=Count("name"))
.values("name", "num_points")
)
return render(
request,
"geotracker/tracked_points_list.html",
{"track_names": track_names, "tracked_page": " active"},
)
path('tracking-points-list/', views.TrackingPointsListView.as_view(), name='tracking-points-list'),

A view to create a linestring
class RouteCreateView(View):
def post(self, request):
name = request.POST["name"]
qs = TrackedPoint.objects.filter(name=name)
# Create line
points = [tp.location for tp in qs]
linestring = LineString(points)
RouteLine.objects.create(name=name, location=linestring)
return redirect(reverse("routes-list"))
path('route-create/', views.RouteCreateView.as_view(), name='route-create'),

Add page to list lines
• Add a list and show on map button
{% extends "geotracker/base.html" %}
{% load staticfiles %}
{% block extra_head %}
<script src="{% static "js/geotracker.js" %}"></script>
<style>
#map {
height: 350px;
margin-top: 16px;
margin-bottom: 16px;
}
</style>
{% endblock %}

{% block onloadcall %}line_startup();{% endblock %}
{% block contents %}
<div id="map"></div>
<table class="table">
<thead>
<tr>
<th scope="col">Tracking name</th>
<th scope="col">Length (m)</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
{% for r in lines %}
<tr>
<td>{{ r.name }}</td>
<td>{{ r.route_length|floatformat:2 }}</td>
<td><button class="btn btn-primary btn-sm" onclick="show_line_on_map({{ r.get_geojson_feature }})">Show on map</button></td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
…template continued…

Add a view to provide list of linestrings
class RoutesListView(View):
def get(self, request):
lines = RouteLine.objects.all()
return render(
request,
"geotracker/tracked_routes.html",
{"lines": lines, "tracked_lines_page": " active"},
)
path('routes/', views.RoutesListView.as_view(), name="routes-list"),

Aaaand… Does it work?
• If it does, good.
• If not, let’s try to figure out what’s wrong.

Working with geometries
• Distance calculations
• Length calculations
• Proximity queries

Smoothing GPS data
• We’re not going to do that… 
• GPS data jumps around due inaccuracies.
• Smoothing algorithms do exist.
• Based on predictions of next point and statistics of previous points.
• Quite common solution is to use is Kalman filter (or some derivation
from that).

Django GeoTracker

More Related Content

What's hot (15)

Similar to Django GeoTracker (20)

Recently uploaded (20)

Django GeoTracker