none
Create embedded map based on GPX data? RRS feed

  • Question

  • I have a website that serves up a series of GPS tracks (held as GPX files), each GPS file associated with a different dynamic web page.

    At the moment I manually create a map with the GPS track shown on it - this is quite time consuming and not particularly useful for readers. You can see an example of what I do at the moment here: http://www.lonewalker.walkingplaces.co.uk/walkinfo.php?walk=402

    Instead of having the static map in the corner of the page I would like to replace it with a Bing map, showing the route on the appropriate Ordnance Survey area map (I am UK based, and Bing are the only web map service that provide OS maps at the scale I need - 1:25K).

    The page is built dynamically, loading route data from a mySQL db and the map and GPX file from a simple query. The Bing map would need to work in the same way, drawing the appropriate GPS file on the appropriate map area, based on information generated as part of the page build (I use PHP/mySQL and I can handle that bit), but I can't see how to get Bing maps to use the dynamic data.

    Hope that all makes sense - happy to provide more information if I've not been clear.

    Thanks

    Stuart

    Thursday, August 23, 2012 6:20 PM

Answers

  • You can easily do this using the Bing Maps V7 AJAX control and the GPX module available here: http://bingmapsv7modules.codeplex.com/wikipage?title=GPX%20Parser

    http://rbrundritt.wordpress.com

    Thursday, August 23, 2012 11:07 PM
  • Richard, thanks for plugging on with this one, despite your dumb student ;)

    Couple of things - I'm not running IIS, my ISP is running Apache I think, definitely not IIS though - but I don't suppose that in itself should cause any problems with the plug-in? I have the following line in my .htaccess file

    AddType application/octet-stream .gpx

    This enable links I make to the raw GPX files to be downloaded rather than opened in the browser - which sees it as XML and opens it directly - is that likely to be causing the plug-in any problems?

    Secondly I'm struggling to understand how I call the GPX file. You say not to hard code it, which makes sense, but as I'm not familiar with javascript how would one normally get the gpx filename into the plug-in? Appreciate you don't have time to teach me java programming and not looking for that, but a pointer would be useful - do I need to create a variable called URL and pass that into the plug-in code?

    As you may have seen from the example URL i included at the start - I pass a unique identifier into the page through the URL:

    xxx.php?walk=401

    I then use this in my PHP code to link to the GPX file for download purposes and to call the appropriate hand-crafted maps. I could use this to identify the appropriate GPX file, if I only knew how to get it into your plug-in code.

    Appreciate all the help and forgive the dumb questions.

    Cheers

    Stuart

    Monday, August 27, 2012 2:10 PM
  • What you can do is parse the query string parameter using javascript and then pass that into the LoadGPX function. For example:

    var walkID = "401" + ".gpx";

    LoadGPX(walkID);

    There are lots of examples online on how to parse query string values in JavaScript.

    As for the issue with the GPX file not being accessible by your application, I'm not sure what the issue is. Do you have a URL for where your application is that I can use for testing?


    http://rbrundritt.wordpress.com

    Monday, August 27, 2012 4:48 PM

All replies

  • You can easily do this using the Bing Maps V7 AJAX control and the GPX module available here: http://bingmapsv7modules.codeplex.com/wikipage?title=GPX%20Parser

    http://rbrundritt.wordpress.com

    Thursday, August 23, 2012 11:07 PM
  • OK, I'm making good progress on this.

    I now have a map embedded into the page, stuck on one location hardcoded into the page, but it's a start. The documentation for AJAX helped a lot and with worked examples of code I was able to update my page with what was needed and it now looks like this:

    http://www.lonewalker.walkingplaces.co.uk/walkinfomaps.php?walk=333

    I'm really struggling with the GPX Parser plug-in though. If you can shed any light on how to exploit this I would be very grateful. Even looking at the example pages that are provided I can't see how I can import the GPX file.

    Thanks

    Stuart

    Friday, August 24, 2012 3:49 PM
  • Can't seem to make any progress on the GPX Parser plug-in.

    All I'm doing at the moment is spinning my wheels, I managed to load a GPX file, but only when I click on one of the action buttons at the bottom of the map and that action button is supposed to be loading something else, not my GPX file, but when I click it, my GPX track appears in the correct location on the map.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
       <head>
          <title>GPX Parser</title>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
          <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=en-gb"></script>
    
          <script type="text/javascript">
              var map;
              function GetMap() {
                  // Initialize the map
                  map = new Microsoft.Maps.Map(document.getElementById("myMap"), { credentials: "MYAPIKEY",
                                center: new Microsoft.Maps.Location(54.682, -3.122), mapTypeId: Microsoft.Maps.MapTypeId.ordnanceSurvey, zoom: 12,
    							enableClickableLogo: false,
    							enableSearchLogo: false,
    							showCopyright: false,
    							showDashboard: false,
    							showLogo: false });
    
                  //Register and load the GPX Parser Module
                  Microsoft.Maps.registerModule("GPXParserModule", "scripts/minified/GPXParserModule.min.js");
                  Microsoft.Maps.loadModule("GPXParserModule");
              }
    
              function LoadGPX(url) {
                  //map.entities.clear();
    
                  //Define default shape options
    
                  var myTrackOptions = {
                      strokeColor: new Microsoft.Maps.Color(156, 0, 0, 255)
                  };
    
                  var myRouteOptions = {
                      strokeColor: new Microsoft.Maps.Color(156, 0, 0, 255)
                  };
    
                  var myPushpinOptions = {
                  };
    
                  new GPXParser().Parse("401.gpx", GPXCallback);
              }
    
              function GPXCallback(items) {
                  map.entities.push(items);
    
                  //Advance functionalities can be added here such as adding event handlers.
    
                  //Set the map view
                  if (items.Metadata != null && items.Metadata.LocationRect != null) {
                      map.setView({ bounds: items.Metadata.LocationRect });
                  }              
              }
          </script>
       </head>
       <body onload="GetMap()">
            <div id='myMap' style="position:relative; width:420px; height:420px;"></div>   
            <input type="button" value="Local file (GPX file with Photos)" onclick="LoadGPX('/Data/abridge.xml')"/> 
       </body>
    </html>

    The code above produces the correct map, but with no track loaded.

    Once I click the button the 401.gpx file loads - this works locally, but when I upload it to my server, it doesn't load the trackdata either.

    I'm stumped now- can anyone help?

    Thanks

    Stuart

    Saturday, August 25, 2012 9:08 AM
  • This may be an issue with the URL you are using for the GPX file. If your application isn't sitting at the root of your domain then the current URL you are using is likely not pointing to the location of your GPX file. Try removing the first "/". Also, if your GPX file is hosted on a different domain you will need to use a proxy service to load in the GPX file into your domain. The GPX Parser module has an example for this.

    As for being able to have the map load for a particular area you can either pass the info into the URL as a query string and then parse that on page load or you can take the data from the GPX file and center the map on that.


    http://rbrundritt.wordpress.com

    Saturday, August 25, 2012 4:20 PM
  • Again, thanks for the continued help with this query.

    The GPX file (named 401.gpx) and the web page are in the same folder.

    However, this doesn't address the issue that the 401 gpx track only appears on the map when I click the button.

    The button, as you can see does not relate to 401.gpx, but when I click it, the track appears.

    I'm also slightly confused by the following code lines:

    function LoadGPX(url) {

    Does this one need the text "URL" replacing with the URL I want to parse? I have left it as URL as any other value seems to stop the map loading.

    This next line is where I have loaded my GPX file URL and although that doesn't result in any errors, it doesn't make the track appear on the map, not until I click the button as mentioned earlier.

    new GPXParser().Parse("401.gpx", GPXCallback); 

    All files are on the same domain but the GPX files exist in their own folder off the root in production, but for purposes o testing I've used a single file in the same folder as the web page.


    Saturday, August 25, 2012 5:06 PM
  • You are by passing the URL parameter by hardcoding the URL so you can remove it if you want. Using a parameter in the function makes it reusable. One issue that you might be coming across is that the .gpx extension may not be listed as an allowed file type on IIS in your server. I've ran into this issue before on servers when using .kml files. Try changing the extension to xml to see if that helps. If it does then you can either just leave the extension as xml of add the GPX extension to IIS.

    http://rbrundritt.wordpress.com

    Monday, August 27, 2012 12:13 PM
  • Richard, thanks for plugging on with this one, despite your dumb student ;)

    Couple of things - I'm not running IIS, my ISP is running Apache I think, definitely not IIS though - but I don't suppose that in itself should cause any problems with the plug-in? I have the following line in my .htaccess file

    AddType application/octet-stream .gpx

    This enable links I make to the raw GPX files to be downloaded rather than opened in the browser - which sees it as XML and opens it directly - is that likely to be causing the plug-in any problems?

    Secondly I'm struggling to understand how I call the GPX file. You say not to hard code it, which makes sense, but as I'm not familiar with javascript how would one normally get the gpx filename into the plug-in? Appreciate you don't have time to teach me java programming and not looking for that, but a pointer would be useful - do I need to create a variable called URL and pass that into the plug-in code?

    As you may have seen from the example URL i included at the start - I pass a unique identifier into the page through the URL:

    xxx.php?walk=401

    I then use this in my PHP code to link to the GPX file for download purposes and to call the appropriate hand-crafted maps. I could use this to identify the appropriate GPX file, if I only knew how to get it into your plug-in code.

    Appreciate all the help and forgive the dumb questions.

    Cheers

    Stuart

    Monday, August 27, 2012 2:10 PM
  • What you can do is parse the query string parameter using javascript and then pass that into the LoadGPX function. For example:

    var walkID = "401" + ".gpx";

    LoadGPX(walkID);

    There are lots of examples online on how to parse query string values in JavaScript.

    As for the issue with the GPX file not being accessible by your application, I'm not sure what the issue is. Do you have a URL for where your application is that I can use for testing?


    http://rbrundritt.wordpress.com

    Monday, August 27, 2012 4:48 PM
  • Leaving aside the issue of getting the query result into the function for the time being, I'm still struggling to get the GPX file to load when I hardcode the reference into the page. Here is my code as it stands:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
       <head>
          <title>GPX Parser</title>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
          <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=en-gb"></script>
    
          <script type="text/javascript">
              var map;
              function GetMap() {
                  // Initialize the map
                  map = new Microsoft.Maps.Map(document.getElementById("myMap"), { credentials: "MY_API_KEY",
                                center: new Microsoft.Maps.Location(54.682, -3.122), mapTypeId: Microsoft.Maps.MapTypeId.ordnanceSurvey, zoom: 12,
    							enableClickableLogo: false,
    							enableSearchLogo: false,
    							showCopyright: false,
    							showDashboard: false,
    							showLogo: false });
    
                  //Register and load the GPX Parser Module
                  Microsoft.Maps.registerModule("GPXParserModule", "scripts/minified/GPXParserModule.min.js");
                  Microsoft.Maps.loadModule("GPXParserModule");
              }
    
    			var walkid = "401.gpx";
              function LoadGPX(walkid) {
    
                  new GPXParser().Parse(walkid, GPXCallback);
    				}
    
              function GPXCallback(items) {
                map.entities.push(items);
    
                  //Advance functionalities can be added here such as adding event handlers.
    
                  //Set the map view
                  if (items.Metadata != null && items.Metadata.LocationRect != null) {
                      map.setView({ bounds: items.Metadata.LocationRect });
                  }              
              }
          </script>
       </head>
       <body onload="GetMap()">
            <div id='myMap' style="position:relative; width:420px; height:420px;"></div>   
       </body>
    </html>
    You can see this code in action here:

    http://www.lonewalker.walkingplaces.co.uk/mapstesting/Simple.html

    Although the 401.gpx file is in the same directory as the Simple.html page nothing loads. I'm obviously doing something fundamentally wrong, but for the life of me I don't know what!

    I don't think I've ever spent so many hours on a web project with so little return, I'm completely frustrated by my lack of knowledge in this area. I'm about to throw in the towel to be honest :)

    Tuesday, August 28, 2012 3:21 PM
  • Hi Stuart/Richard,

    I've been playing around wiith the parser today and it's potentially extremely useful, but I'm struggling a bit.

    Like you I'm trying to display a gpx route on a Bing map.

    I haven't been able to get

    var walkID = "sss.xml";
    
    LoadGPX(walkID);
    to work either. I think a jquery function might be needed to ensure all the map data has finished loading, before LoADGPX is called.

    My testpages are on an Apache/PHP server. Leaving aside the issue of passing a querystring to load the gpx, it seems that the parser will only work if the .gpx file is renamed as an .xml file. There are two buttons at the bottom of this test page. The first loads "sss.xml". The second should load sss.gpx, but doesn't. It would be useful if the GPXParserModule.js had an inbuilt bit of code that treated the .gpx extension as xml. The waypoint images are not displayed in both my gpx files and the Route 66 Attractions example because they don't have an extension to identify them as a .gif, .png etc. Any hints on how to do this Richard, please?

    The Metadataexample.html is great. Very clever!!

    Thanks so much for this Richard. I hope to implement it if I can get the querystring and substituting filename extensions sorted out. All advice gratefully received.




    • Edited by Godfrey B Friday, September 7, 2012 4:25 PM
    Sunday, September 2, 2012 6:21 PM
  • Hi Godfrey, I took a look at your site and it is working and loading in data. The issue is that you have numbers for icons when a URL is expected. As a result the pushpins are broken images. In IE you get a broken image symbol but in most other browsers they just hide the image which is why it looks like it isn't working.

    http://rbrundritt.wordpress.com

    Monday, September 3, 2012 9:54 AM
  • Thanks Richard.The bigger problem for me is that the code only seems to work when the gpx file is renamed with the .xml extension.

    Surely if this is a parser designed to display gpx files, then you shouldn't need to rename files to get it to work?

    Do you have a working example of the code which will parse valid .gpx files?

    Tuesday, September 4, 2012 1:50 PM
  • As noted above in one of my responses, there is a good chance that .gpx is not an allowed extension on your server. You will need to add it. I've had this issue before with kml files. As long as your server is able to serve up the code the parser doesn't care about the extension.

    http://rbrundritt.wordpress.com

    Tuesday, September 4, 2012 2:40 PM
  • In case you don't know 

    http://www.bing.com/maps/?mapurl=http://www.lonewalker.walkingplaces.co.uk/gpxfiles/333.gpx

    produces a nice map of your walk so no probs with your server or file types.

    This type of thing is as far as I got with displaying saved routes, it doesn't work with the embedded map code which uses /embed/viewer.aspx   blah blah

    Jim J

    Sunday, January 18, 2015 10:16 PM