Finding your next read
Practical craft for people building for the web.
Explore DevelopmentFinding your next read
THE FINDERPRESS TOOL DIRECTORY
Explore this tool and check the official listing for its latest features and requirements.
01 / SOURCE DETAILS
NOTE: Trackserver v5.0 contains backwards-incompatible changes and changes to client configurations are needed. Please read the release notes for more information. Getting your GPS tracks into WordPress and publishing them has never been easier! Trackserver is a plugin for storing and publishing GPS routes. It is a server companion to several mobile apps for location tracking, and it can display maps with your tracks on them by using a shortcode. It can also be used for live tracking, where your visitors can follow you or your users on a map. Unlike other plugins that are about maps and tracks, Trackserver’s main focus is not the publishing, but rather the collection and storing of tracks and locations. It’s all about keeping your data to yourself. Several mobile apps and protocols are supported for getting tracks into trackserver: TrackMe MapMyTracks protocol , for example using OruxMaps , including upload functionality OsmAnd’s live tracking protocol µLogger GPSLogger PhoneTrack-Android also works with OsmAnd’s protocol (Trackserver >= 4.3) SendLocation Traccar client OwnTracks (experimental support) HTTP POST, for example using AutoShare A shortcode [tsmap] is provided for displaying your tracks on a map. Maps are displayed using the fantastic Leaflet library and some useful Leaflet plugins are included. Maps can be viewed in full-screen on modern browsers. To publish a map with a track in a post or a page, just include the shortcode: [tsmap track=<id>] See the FAQ section for more information on the shortcode’s supported attributes. Requirements Trackserver requires PHP 7.3 or newer and it needs both DOMDocument and SimpleXML extensions installed. Credits This plugin was written by Martijn Grendelman. Development is tracked on Github . It includes some code and libraries written by other people: Leaflet.js by Vladimir Agafonkin and others Polyline encoder by Eric McConville Leaflet-omnivore by Mapbox Leaflet.fullscreen by John Firebaugh and others Promise-polyfill by Taylor Hakes
02 / SOURCE DETAILS
Use WordPress’ built-in plugin installer, or copy the folder from the plugin archive to the /wp-content/plugins/ directory. Activate the plugin through the ‘Plugins’ menu in WordPress. Configure the slugs that the plugin will listen on for location updates. Configure your mobile apps and start tracking! Use the shortcode [tsmap] to include maps and tracks in your posts and pages.
03 / SOURCE DETAILS
What are the available shortcode attributes? For the [tsmap] shortcode: track: one or more track IDs, separated by commas, or ‘live’ (deprecated, ‘user=@’ is preferred). id: an alias for ‘track’ user: one or more user IDs, separated by commas, who’s latest track to follow ‘live’. A literal ‘@’ means the author of the post (you). When viewing the map, the liveupdate feature will follow the track of the first user specified. When the end-marker is enabled for a live track (and why shouldn’t it?), clicking it will change the focus of the liveupdate to that track. The map view will follow the latest location and the infobar (if present) will display its information. live: true (or ‘t’, ‘yes’ or ‘y’), or false (default), to force live tracking for this map. This can be used for example with an externally updated GPX or KML file. maxage: the maximum age of a live track for it to be included on the map. If this parameter is given, all user tracks that have not been updated in the last X amount of time, will not be displayed. The value is a time expression in the form of a number and a unit, for example: ‘120s’, ’30m’, ‘2h’, ‘3d’. width: map width, default: 100%. height: map height, default: 480px. align: ‘left’, ‘center’ or ‘right’, default: not set. class: a CSS class to add to the map div for customization, default: not set. continuous: true (default) or false (or ‘f’, ‘no’ or ‘n’), for lack of a better word, to indicate whether multiple tracks should be considered as one continuous track. The only effect this has, at the moment, is that intermediate start markers are yellow instead of green. gpx: one or more URLs to GPX files to be plotted on the map. Multiple URLs should be separated by spaces, and the value as a whole enclosed by double quotes (gpx=”http://….gpx http://….gpx”). If enabled in the settings, when a url is prefixed with the string ‘proxy:’, the request is proxied through Trackserver. kml: one or more URLs to KML files to be plotted on the map. Multiple URLs should be separated by spaces, and the value as a whole enclosed by double quotes (kml=”http://….kml http://….kml”). If enabled in the settings, when a url is prefixed with the string ‘proxy:’, the request is proxied through Trackserver. infobar: true (or ‘t’, ‘yes’ or ‘y’), false (default), or a template string, to specify whether an information bar should be shown on the map, when live tracking is active. This only works with ‘track=live’ or the ‘user’ parameter, and has no effect in other cases. When multiple live tracks are requested, the infobar will display the data of the first track only. Instead of ‘true’ or ‘yes’, a template string containing one or more placeholders (like {lat}, {lon}, {speedkmh}, etc.) can be given to the attribute, in which case it overrides the value specified in the user profile. Please check the Trackserver user profile page in the WordPress backend for which placeholders are supported. zoom: the zoom factor to use for the map, a number between 0 and 18. For a map with live tracks, this number is absolute. For a map with only static tracks, this number represents the maximum zoom level, so the map will always fit all the tracks. The following attributes apply to tracks that are drawn on the map. Each of them can contain multiple values, separated by commas (or colons, in the case of ‘dash’), to be applied to different tracks in order. If there a are less values than tracks, the last value will be applied to the remaining tracks. markers: one or more of the following values: true (default) or false (or ‘f’, ‘no’ or ‘n’) to disable start/end markers on the track. The value can also be ‘start’, ‘s’, ‘end’ or ‘e’, to draw markers only for the start or the end of a track respectively. markersize: one or more integer values, separated by commas, to use as the size / radius of the start/end markers of the track. Default is 5. color: one or more colors, separated by commas, to use for the tracks on the map. Default comes from Leaflet. weight: one or more weights, separated by commas, to use for the tracks on the map. Default comes from Leaflet. opacity: one or more opacities, separated by commas, to use for the tracks on the map. Default comes from Leaflet. dash: one or more dashArrays , seperated by colons (:), to use for the tracks on the map. Default is no dashes. points: true (or ‘t’, ‘yes’ or ‘y’), or false (default), to specify whether the track should be displayed as a line or a collection of points. Example: [tsmap track=39,84 user=@ align=center class=mymap markers=n color=#ff0000] When you specify multiple values, please be aware of the following. While track order will be preserved within each track type, different track types are evaluated in a specific order, and styling values are applied in that order too. The order is: Static tracks (track=a,b,c) Live user tracks (user=x,y,z) GPX tracks (gpx=…) KML tracks (kml=…) To prevent confusion, I suggest you specify tracks in this order in your shortcode too. Example: [tsmap gpx=/url/for/file.gpx user=jim track=10,99 color=red,blue,green,yellow] In this case, the GPX track will be yellow, Jim’s live track will be green and tracks 10 and 99 will be red and blue respectively. In a feature request I was asked to make it possible to draw just a marker on the last known location, and not draw a track at all. Use ‘markers’ and ‘opacity’ to accomplish this: Example: [tsmap user=@ markers=e opacity=0.0] Attributes for the [tslink] shortcode: track: same as for [tsmap] id: same as for [tsmap] user: same as for [tsmap] text: the text to render insde the <a>…</a> tags class: a CSS class to apply to the ‘a’ element format: the format in which to download the tracks. Only ‘gpx’ (the default) is supported at this time. Other formats like KML may follow. Send a feature request if you need a specific format. Example: [tslink track=1,2,3,4 text=”Download the tracks of our 4-day hike in GPX format”] Instead of using the ‘text’ attribute, you can also use shortcode to enclose the text: Example: [tslink track=1,2,3,4]Download the tracks of our 4-day hike in GPX format[/tslink] I used the shortcode but the map doesn’t show Trackserver tries to detect the usage of the [tsmap] shortcode to prevent unnecessary loading of the plugin’s JavaScript. In some circumstances, for example, if your page setup is complex and uses multiple loops, the detection could fail. In such a case, use this shortcode in the main post or page to force loading the JavaScript: [tsscripts] There is one caveat. Trackserver only works on ‘real’ posts and pages, in WordPress terms. For example, some WordPress themes (I have seen one) offer the possibility to specify a static homepage right in the theme settings, completely overriding WordPress’ internal post logic. In this case, the page lacks an author as well as other properties that a regular WordPress post or page has. Trackserver’s [tsmap] shortcode does not work on pages like that. All that said, Trackserver’s shortcode detection should be reasonably fool-proof these days, because if the early detection mechanism fails, the shortcode itself is used to trigger the inclusion of Trackserver’s JavaScript and CSS. The only adverse side effect this may have, is that the CSS is loaded in the footer of the page, rather than in the head section. It’s hard to say whether this will actually be a problem, but just in case it is, the [tsscripts] shortcode is there. Beware though: the [tsscripts] shortcode doesn’t actually do anything. At all. It is merely an extra shortcode that Trackserver tries to detect. Therefore, it is absolutely useless to include [tsscripts] in the same context as your [tsmap]. I appreciate that this can be hard to understand, so let me illustrate with an example. Take the ‘Posts in page’ plugin, that allows you to use a shortcode in a post (let’s call it A) to include other posts an pages inline (let’s call them B and C). If [tsmap] is used in B or C, but the page requested by the user is A, which does not have a [tsmap], Trackserver’s shortcode detection used to fail in earlier versions, and the Javascript and CSS would not be loaded. By using the [tsscripts] shortcode in page A, the loading of JS and CSS can be forced. The CSS will then be loaded in the head of the page, instead of in the footer. Trying to show a GPX or KML file shows an error popup: “Track could not be loaded: undefined undefined” This will happen when you try to load a file from a different domain than your site is running on, and the remote server doesn’t serve a ‘Access-Control-Allow-Origin’ header that allows acces to the file. Your webbrowser refuses to process the file. Check the console in your developer tools for an error message. Please read up on Cross-Origin Resource Sharing (CORS) for more information. This is not something that Trackserver can fix. What is live tracking? By using the shortcode with the ‘user=…’ or ‘track=live’ parameter, the most recently updated track belonging to the specified user(s) or the author of the current post/page is published on the map. The track is updated with the latest trackpoints every 10 seconds and the map view is always centered to the most recent trackpoint. A marker is shown in that location. Live tracking can be stopped and restarted with a simple control button that is shown on the map. To publish other users’ tracks, the author of the page needs the ‘trackserver_publish’ capability, which is by default only granted to administrators and editors. What is a Trackserver user profile? (since v1.9) Before v1.9, all of Trackserver’s settings were stored in a single, global place in WordPress, meaning they were shared among all users in the same WordPress install. This was also the case for the OsmAnd access key that allows OsmAnd users to use Trackserver for live tracking. Since Trackserver tries to be multi-user, things like access keys do not belong in the global configuration. In version 1.9, user profile settings were introduce
KEEP EXPLORING