After fiddeling with my Bluetooth GPS reciever I wanted my friends and my wife to keep track of me. I wanted to use OpenStreetMap because I really like the idea of free and open maps instead of the unintelligible Google Maps licenses. The result can be seen here where I show the op5 office location outside Stockholm, Sweden.
Pre req
- a GPS reciever
- gpsd
- gpsd-client
In my setup I have the GPS reciever attached to my laptop which I travel around with. On my webserver I have gpsd-client and a script that generates the webpage. I use a VPN connection to allow my webserver to communicate with the laptop gpsdaemon. On the roads I use 3G attached cellphone and when I have an internet connection via cable or wifi I use that.
The script
#!/bin/sh
GPSPIPE=/usr/bin/gpspipe
OUTFILE=/home/peter/public_html/my_position.html
#GPSDIP=10.8.0.10
GPSDIP=192.168.0.153
while true
do
GPSDATA=`$GPSPIPE -w -n 10 $GPSDIP |grep O=`
if [ "$?" ]
then
LON=`echo $GPSDATA| awk '{ print $5 }'`
LAT=`echo $GPSDATA| awk '{ print $4 }'`
echo "LON=$LON LAT=$LAT"
cat > $OUTFILE <<EOF
<html>
<head>
<title>Last know It-slav location</title>
<!-- bring in the OpenLayers javascript library
(here we bring it from the remote site, but you could
easily serve up this javascript yourself) -->
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<!-- bring in the OpenStreetMap OpenLayers layers.
Using this hosted file will make sure we are kept up
to date with any necessary changes -->
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript">
// Start position for the map (hardcoded here for simplicity,
// but maybe you want to get from URL params)
EOF
echo "var lat=$LAT" >>$OUTFILE
echo "var lon=$LON" >>$OUTFILE
cat >> $OUTFILE <<EOF
var zoom=13
var map; //complex object of type OpenLayers.Map
function init() {
map = new OpenLayers.Map ("map", {
controls:[
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Attribution()],
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
maxResolution: 156543.0399,
numZoomLevels: 19,
units: 'm',
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
} );
// Define the map layer
// Note that we use a predefined layer that will be
// kept up to date with URL changes
// Here we define just one layer, but providing a choice
// of several layers is also quite simple
// Other defined layers are OpenLayers.Layer.OSM.Mapnik, OpenLayers.Layer.OSM.Maplint and OpenLayers.Layer.OSM.CycleMap
layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
map.addLayer(layerMapnik);
layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
map.addLayer(layerTilesAtHome);
layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
map.addLayer(layerCycleMap);
layerMarkers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(layerMarkers);
// Add the Layer with GPX Track
//var lgpx = new OpenLayers.Layer.GML("MB Bruderholz", "mb_bruderholz.GPX", {
// format: OpenLayers.Format.GPX,
// style: {strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5},
// projection: new OpenLayers.Projection("EPSG:4326")
//});
//map.addLayer(lgpx);
var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
map.setCenter (lonLat, zoom);
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
layerMarkers.addMarker(new OpenLayers.Marker(lonLat,icon));
}
</script>
</head>
<!-- body.onload is called once the page is loaded (call the 'init' function) -->
<body onload="init();">
<!-- define a DIV into which the map will appear. Make it take up the whole window -->
<div style="width:90%; height:90%" id="map"></div>
</body>
</html>
EOF
else
echo "No GPS data"
fi
sleep 10
done
Gpsdaemon
To enable the gpsdameon to allow another host to attach to it start it with -g i.e.
sudo gpsd -N -n -D 3 -G /dev/rfcomm1
The result
The result can be found here or a screenshot below:
Links
- gpsd
- how to attach the bluetooth GPS reciever
- OpenStreetMaps
7 Responses to “Using OpenStreetMap to point out your location on a webpage”
Leave a Reply
You must be logged in to post a comment.
February 2nd, 2010 at 5:58 am
This is a really cool use for gpsd!
February 12th, 2010 at 8:24 pm
If I could get my hands on an Android I would really like to if this works on that!
December 21st, 2010 at 12:10 pm
Is there a way i could add 2 or more devices to this script ?
December 21st, 2010 at 1:41 pm
Well, the easiest way to find out is to test.
December 21st, 2010 at 2:38 pm
i have tried but i just errors.. my problem is i dont really understand the variables ….
im not asking to be spoon fed just a hand in the right direction
December 21st, 2010 at 2:39 pm
i have tried but fails… a little help would be greatly appreciated
December 21st, 2010 at 2:55 pm
After some fiddling I did not manage to get it working either.