Link to home
Start Free TrialLog in
Avatar of Leo01010101
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:
<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>

Open in new window

Avatar of leakim971
leakim971
Flag of Guadeloupe image

Please confirm the domain of your file (line 65) same as the domain of your server
Check the note about cross-domain Ajax here : http://docs.openlayers.org/library/request.html
Avatar of Leo01010101
Leo01010101

ASKER

I placed *.gpx file on a server in the same domain where HTML file with code. I tried to place in "url" (line 65) the file name string only:



But no result.

I tried also to add domain name to this file name:



 but also without result.  

I'm not an expert on this field. I need advice.
could you provide a link to your page?
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
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
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I added MIME type for .gpx file as "text/xml" type. Now it's working.

Thank you very much for support.
you're welcome, have a nice week-end!