Skip to content
A very (very) simple map backend to OwnTracks
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
.gitignore
README.md
config.ini
index.html
markers.php

README.md

Simple Map: a very (very) simple map backend to OwnTracks

Collection of files based on Javascript and PHP: this is an example of how data produced by the nice and useful OwnTracks applications (iOS and Android) can be used to show markers on a map, on your own webserver.

The map uses tiles (pieces of GIS data) from the amazing OpenStreetMap project and servers. Rendering is based on OpenLayers library.

Please see References below.

DISCLAIMER

This is a simple example, work in progress and done by a developer with limited experience of Javascript: meaning that can be done much better (pls fork & contribute), with more features (again pls fork & contribute) and most important: it's far from really secure if exposed to the Wild Internet. Take care of this.

The generated map uses tiles from OpenStreetMap servers, with limited capability and not assured 24/7 service. While this should not be a problem for normal personal use, you can consider installing your own maps server following one of the several guides on this. The MapServer is a very professional starting point.

Assumptions

In order for this example to work you already have:

  • Full control to your own Linux based server with MySQL, Apache, Python, PHP installed
  • Apache configured so that it will serve personal pages from a folder like ~/public_html
  • OwnTracks installed on some device (smartphone) publishing to a MQTT broker
  • OwnTracks backend m2s installed and configured so that it populates MySQL database rows with positions from OwnTracks
  • OwnTracks backend m2s running as a service

Install and configure

  • temporary development folder:
yourname@host:~$ cd
yourname@host:~$ mkdir code
yourname@host:~$ cd code
  • get and build OpenLayers scripting library (latest stable from Github):
yourname@host:~/code$ git clone https://github.com/openlayers/openlayers
yourname@host:~/code$ cd openlayers/build/
yourname@host:~/code/openlayers/build$ python buildUncompressed.py
  • copy OpenLayers components to your personal web pages folder:
yourname@host:~$ cd ~/code/openlayers
yourname@host:~/code/openlayers$ rsync -av img/ ~/public_html/simple-map/img/
yourname@host:~/code/openlayers$ rsync -av img/ ~/public_html/simple-map/img/
yourname@host:~/code/openlayers$ rsync -av theme/ ~/public_html/simple-map/theme/
yourname@host:~/code/openlayers$ rsync -av build/OpenLayers.js  ~/public_html/simple-map/
  • get and configure simple-map (latest stable from Github):
yourname@host:~/code$ git clone https://github.com/bluewindthings/simple-map
yourname@host:~/code$ cd simple-map/
yourname@host:~/code$ vi config.ini

(you will find configuration items for your MySQL database structure and access)

  • copy simple-map components to your web pages folder:
yourname@host:~/code/simple-map$ rsync -av *.html ~/public_html/simple-map/
yourname@host:~/code/simple-map$ rsync -av *.php ~/public_html/simple-map/
  • point your browser to a brand new map with markers from Owntracks

http://localhost/~yourname/site-map/index.html map

TODO

  1. Better handling of server side scripting for markers (see reference to markers.php inside index.html)
  2. Icons for markers
  3. Loading new markers on the fly

References

Contact

You can’t perform that action at this time.