Leo01010101
asked on
Problem with showing GPS track on OSM
Hi,
I want to display GPS track on OSM. I used sample code from http://wiki.openstreetmap.org/wiki/Openlayers_Track_example. On localhost it was working, but when placed it on a server track was not displayed.
I used following code:
I want to display GPS track on OSM. I used sample code from http://wiki.openstreetmap.org/wiki/Openlayers_Track_example. On localhost it was working, but when placed it on a server track was not displayed.
I used following code:
<html>
<head runat="server">
<!-- Source: http://wiki.openstreetmap.org/wiki/Openlayers_Track_example -->
<title>AutoDataControl OSM 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">
function getUrlParams() {
var params = {};
window.location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi,
function(str, key, value) {
params[key] = value;
});
return params;
}
var params = getUrlParams();
// Start position for the map (hardcoded here for simplicity,
// but maybe you want to get this from the URL params) 51.807269983347" lon="10.330861126211
var lat = params.lat; //46.576083
var lon = params.lon //8.892416
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("Vehicle track", {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: params.file, //"Files/cycleroute_2.gpx",
format: new OpenLayers.Format.GPX()
}),
style: { strokeColor: "red", 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 runat="server" onload="init();">
<!-- define a DIV into which the map will appear. Make it take up the whole window -->
<div style="width:100%; height:100%" id="map"></div>
</body>
</html>
ASKER
could you provide a link to your page?
ASKER
Sorry it disappeared from my comment, here they are :
http://www.fahrtenbuch-digital.de/Trace.html?lat=46.576083&lon=8.892416&file=cycleroute_2.gpx
http://www.fahrtenbuch-digital.de/Trace.html?lat=46.576083&lon=8.892416&file=http://www.fahrtenbuch-digital.de/cycleroute_2.gpx
http://www.fahrtenbuch-digital.de/Trace.html?lat=46.576083&lon=8.892416&file=cycleroute_2.gpx
http://www.fahrtenbuch-digital.de/Trace.html?lat=46.576083&lon=8.892416&file=http://www.fahrtenbuch-digital.de/cycleroute_2.gpx
Failed to load resource: the server responded with a status of 404 (Not Found)You currently ahve a 404 error for the ajax call to cycleroute_2.gpx
The path used is this one :
http://www.fahrtenbuch-digital.de/cycleroute_2.gpx
Could you confirm the script is on the root folder?
Put the URL in the browser address bar, you will see it
ASKER
Yes, cycleroute_2.gpx file is in root folder of www.fahrtenbuch-digital.de domain.
I put it in a browser. I have error (see bellow). The phisical file path is indicated properly.
Error Summary
HTTP Error 404.3 - Not Found
The page you are requesting cannot be served because of the extension configuration. If the page is a script, add a handler. If the file should be downloaded, add a MIME map. Detailed Error InformationModule StaticFileModule
Notification ExecuteRequestHandler
Handler StaticFile
Error Code 0x80070032
Requested URL http://www.fahrtenbuch-digital.de:80/cycleroute_2.gpx
Physical Path C:\Web Sites\Fahrtenbuch-digital\ cycleroute _2.gpx
Logon Method Anonymous
Logon User Anonymous
I put it in a browser. I have error (see bellow). The phisical file path is indicated properly.
Error Summary
HTTP Error 404.3 - Not Found
The page you are requesting cannot be served because of the extension configuration. If the page is a script, add a handler. If the file should be downloaded, add a MIME map. Detailed Error InformationModule StaticFileModule
Notification ExecuteRequestHandler
Handler StaticFile
Error Code 0x80070032
Requested URL http://www.fahrtenbuch-digital.de:80/cycleroute_2.gpx
Physical Path C:\Web Sites\Fahrtenbuch-digital\
Logon Method Anonymous
Logon User Anonymous
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I added MIME type for .gpx file as "text/xml" type. Now it's working.
Thank you very much for support.
Thank you very much for support.
you're welcome, have a nice week-end!
Check the note about cross-domain Ajax here : http://docs.openlayers.org/library/request.html