Openlayers Track example

Available languages

• Deutsch • English • italiano • 日本語

Other languages — Help us translating this wiki

• Afrikaans • አማርኛ • العربية • অসমীয়া • asturianu • azərbaycanca • български • বাংলা • brezhoneg • bosanski • català • corsu • česky • dansk • Zazaki • ދިވެހިބަސް • Ελληνικά • Esperanto • español • eesti • euskara • فارسی • suomi • français • Frysk • Gaeilge • Kréyòl gwadloupéyen • Gàidhlig • galego • Alemannisch • ગુજરાતી • هَوُسَ • עברית • हिन्दी • hrvatski • Kreyòl ayisyen • magyar • Հայերեն • interlingua • Bahasa Indonesia • Igbo • íslenska • Basa Jawa • ქართული • қазақша • ភាសាខ្មែរ • ಕನ್ನಡ • 한국어 • Kurdî • Lëtzebuergesch • ລາວ • lietuvių • latviešu • Malagasy • македонски • മലയാളം • मराठी • Bahasa Melayu • Malti • မြန်မာဘာသာ • नेपाली • Nederlands • ‪norsk (nynorsk)‬ • ‪norsk (bokmål)‬ • occitan • Oromoo • ଓଡ଼ିଆ • ਪੰਜਾਬੀ • polski • پښتو • português • português do Brasil • română • română (Moldova) • русский • سنڌي • සිංහල • slovenčina • slovenščina • Soomaaliga • shqip • српски / srpski • svenska • தமிழ் • తెలుగు • тоҷикӣ • ไทย • Türkçe • українська • اردو • oʻzbekcha • Tiếng Việt • Wolof • isiXhosa • Yorùbá • ‪中文（简体）‬ • ‪中文（繁體）‬ • isiZulu

Screenshot of the result

Introduction

This example show you how to display one or multiple GPX Tracks in an OpenLayers map.

This example is based on the OpenLayers Simple Example.

Instructions

Requirements

Track as a .gpx file
Text editor (such as Notepad, or any other text editor)
Webbrowser (Firefox, Internet Explorer, ..)
3 minutes of your time :-)

Steps

Place the gpx file(s) into a folder on the webserver
Create the following HTML file (also on the webserver):

<html>
<head>
	<!-- Source: http://wiki.openstreetmap.org/wiki/Openlayers_Track_example -->
	<title>Simple OSM GPX Track</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 this from the URL params)
		var lat=47.496792
		var lon=7.571726
		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
			// Here we use a predefined layer that will be kept up to date with URL changes
			layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
			map.addLayer(layerMapnik);
			layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
			map.addLayer(layerCycleMap);
			layerMarkers = new OpenLayers.Layer.Markers("Markers");
			map.addLayer(layerMarkers);
 
			// Add the Layer with the GPX Track
			var lgpx = new OpenLayers.Layer.Vector("Lakeside cycle ride", {
				strategies: [new OpenLayers.Strategy.Fixed()],
				protocol: new OpenLayers.Protocol.HTTP({
					url: "around_lake.gpx",
					format: new 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>

Open the html file in a browser

Customization

If the basic example works in your web browser, you can go on to adapt the web page to your needs.

Change the starting point and the map zoom

open the html file in the text editor and change the following lines:

// Start position for the map (hardcoded here for simplicity
// but maybe you want to get this from the URL params)
var lat=47.496792
var lon=7.571726
var zoom=13

Change the track

open the html file in the text editor and change the following lines:

// Add the Layer with GPX Track
var lgpx = new OpenLayers.Layer.Vector("Lakeside cycle ride", {
	strategies: [new OpenLayers.Strategy.Fixed()],
	protocol: new OpenLayers.Protocol.HTTP({
		url: "around_lake.gpx",
		format: new OpenLayers.Format.GPX()
	}),
	style: {strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5},
	projection: new OpenLayers.Projection("EPSG:4326")
});

- Lakeside cycle ride is the name of the track, this is displayed in the Layer switcher.
- around_lake.gpx is the path to your GPX file on the server. NB you cannot call for a file from another domain.
- style: {strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5} these control how the track looks on the map. See the OpenLayers documentation for details of what can be configured here.

If you would like to display more than one track, just copy these 2 lines and change the values again.

Openlayers Track example

Contents

Introduction

Instructions

Requirements

Steps

Customization

Other solutions for the same problem

Personal tools

Namespaces

Variants

Views

Actions

Search

site

Toolbox