GPS tracks information mapping with WISroGIS

GPS tracks in GPX format can be loaded to display the information stored within the GPS file:

• routes
• tracks
• waypoints

The example show a GPX file (~600KB) mapped on top of 3 base layers (OpenStreetMap Cycle Map, Yahoo Map and Google Physical map).

Each vector element (line and point) displays the original GPX information in a bubble window when mouse over on the element (see bubble_action parameter set to 1 for on hover behaviour).

GPX sample data from aardbodem.nl

The available parameters for styling the GPX details are:

style: {

strokeColor: "#C71585", route/track line color

strokeWidth: 4, route/track line width

strokeOpacity: 0.80, route/track line transparency

externalGraphic:"/cache/waypoint.png",  external graphic used to display the waypoints - icon's path

graphicWidth:16,  icon's width

graphicHeight:16,  icon's height

graphicOpacity:1.0,  icon's opacity

pointRadius:5 point size, if no external graphic is defined

}

 The full code for the above example is listed below - please remembed to remov e all formating and new-lines before inserting in to the article's content:

{WISroGIS

layerswitcher=1|

IPpositioning='0'|

center_lon='6.5' | center_lat='52.0' |reprojectCenter='true'|

mapoptions='maxExtent: new OpenLayers.Bounds(-20037508,-20037508, 20037508,20037508), maxResolution: 156543, units: "m", projection: "EPSG:900913", displayProjection:  new OpenLayers.Projection("EPSG:4326")'|

zoom_level=6| weather='0'|

bubble_action='1' |

baseLayer='TMS("OSM Cycle Map", ["http://a.andy.sandbox. cloudmade.com/tiles/cycle/","http://b.andy.sandbox.cloudmade.com/tiles/cycle/", "http://c.andy.sandbox. cloudmade.com/tiles/cycle/"], { type: "png", getURL: getTileURL, displayOutsideMaxExtent: true, attribution: cycleattrib, transitionEffect: "resize"})'|

TMSscript='var cycleattrib = "",cmstandardattrib=""; function getTileURL(bounds) { var res = this.map.getResolution();  var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w)); var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h)); var z = this.map.getZoom(); var limit = Math.pow(2, z); if (y < 0 @@ y >= limit) { return null; } else { x = ((x % limit) + limit) % limit; var url = this.url; var path = z + "/" + x + "/" + y + ".png"; if (url instanceof Array) { url = this.selectUrl(path, url);} return url + path;}}' |

baseLayer='Google("Google Physical", {type: G_PHYSICAL_MAP, "sphericalMercator": true})'|

baseLayer='Yahoo("Yahoo Hybrid",{type: YAHOO_MAP_HYB, "sphericalMercator": true})' | 

gpx='GML("GPX route", "/cache/pieterpad.gpx",

{ style: { externalGraphic:"/cache/waypoint.png",graphicWidth:16,graphicHeight:16,graphicOpacity:1, strokeColor: "#C71585", pointRadius:5, strokeWidth: 4, strokeOpacity: 0.80}, format: OpenLayers.Format.GPX,

formatOptions: {extractTracks: true, extractRoutes: true, extractWaypoints: true, extractAttributes: true}, 

projection: new OpenLayers.Projection("EPSG:4326") })'

~}

---