Openlayers Track example: Difference between revisions
Jump to navigation
Jump to search
Bigfatfrog67 (talk | contribs) (Removed dead links) |
(common issues) |
||
| (One intermediate revision by the same user not shown) | |||
| Line 132: | Line 132: | ||
* If you would like to display more than one track, just copy these 2 lines and change the values again. |
* If you would like to display more than one track, just copy these 2 lines and change the values again. |
||
=== Common issues === |
|||
Some web browsers (notably Internet Explorer and Google Chrome) may refuse to process JavaScript and/or load GPX files from disk in file://-type URLs, that is when your HTML file is accessed directly from your hard drive. |
|||
This may be circumvented by using a tiny, local HTTP server to access the files. |
|||
The Python programming language has a builtin web server which can be started by changing to the directory with the HTML files and then using the command |
|||
<source lang="bash"> |
|||
$ python -m http.server 8000 # for Python 3 |
|||
$ python -m SimpleHTTPServer 8000 # for Python 2 |
|||
</source> |
|||
There are also small web server implementations available for Microsoft Windows, for example tinyserver [http://tinyserver.sourceforge.net/], which can be used for the task. |
|||
[[Category:OpenLayers Examples]] |
[[Category:OpenLayers Examples]] |
||
Revision as of 12:05, 7 April 2015
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.
Common issues
Some web browsers (notably Internet Explorer and Google Chrome) may refuse to process JavaScript and/or load GPX files from disk in file://-type URLs, that is when your HTML file is accessed directly from your hard drive.
This may be circumvented by using a tiny, local HTTP server to access the files.
The Python programming language has a builtin web server which can be started by changing to the directory with the HTML files and then using the command
$ python -m http.server 8000 # for Python 3
$ python -m SimpleHTTPServer 8000 # for Python 2
There are also small web server implementations available for Microsoft Windows, for example tinyserver [1], which can be used for the task.