Welcome to It-Slav.Net blog
Peter Andersson

I've already got a female to worry about. Her name is the Enterprise.
-- Kirk, "The Corbomite Maneuver", stardate 1514.0

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

while true
        GPSDATA=`$GPSPIPE -w -n 10 $GPSDIP |grep O=`
        if [ "$?" ]
                LON=`echo $GPSDATA| awk '{ print $5 }'`
                LAT=`echo $GPSDATA| awk '{ print $4 }'`
        	echo "LON=$LON LAT=$LAT"
		cat > $OUTFILE <<EOF
        <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)
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", {
                                        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");
                        layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
                        layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
                        layerMarkers = new OpenLayers.Layer.Markers("Markers");

                        // 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")
                        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));

<!-- 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>
		echo "No GPS data"
	sleep 10



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:





7 Responses to “Using OpenStreetMap to point out your location on a webpage”

  1. Jim Says:

    This is a really cool use for gpsd!

  2. peter Says:

    If I could get my hands on an Android I would really like to if this works on that!

  3. Chris Says:

    Is there a way i could add 2 or more devices to this script ?

  4. peter Says:

    Well, the easiest way to find out is to test.

  5. Chris Says:

    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

  6. Chris Says:

    i have tried but fails… a little help would be greatly appreciated

  7. peter Says:

    After some fiddling I did not manage to get it working either.

Leave a Reply

Filled Under: Cool things, english, Geek stuff

Book reviews
FreePBX 2.5
Powerful Telephony Solutions

Asterisk 1.6
Build a feature rich telephony system with Asterisk

Learning NAGIOS 3.0

Cacti 0.8 Network Monitoring,
Monitor your network with ease!