The route player is updated to allow full screen maps (with auto resize). In addition, it now has both the elevation/distance & elevation/time charts. To calculate the distance I used the following ActionScript method to find the distance between two geo points (see Hacking Google Maps for details):
private function distance(point1: Object,
point2 : Object) : Number {
var lat1 : Number;
var lat2 : Number;
var lon1 : Number;
var lon2 : Number;
if (point1 == null) return 0;
// convert degrees to radians
lat1 = point1.lat * Math.PI / 180.0;
lat2 = point2.lat * Math.PI / 180.0;
lon1 = point1.lon * Math.PI / 180.0;
lon2 = point2.lon * Math.PI / 180.0;
// radius of earth in Kilometers converted to miles
var radius : Number = 6378.1 * 0.621371192;
var latDist : Number = lat2 - lat1;
var lonDist : Number = lon2 - lon1;
var sinLatDist : Number = Math.sin(latDist/2.0);
var sinLonDist : Number = Math.sin(lonDist / 2.0);
var a : Number = sinLatDist * sinLatDist +
Math.cos(lat1) * Math.cos(lat2) *
sinLonDist * sinLonDist;
var c : Number = 2.0 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var distance : Number = radius * c;
return distance;
}
Kenndey / Shannon / Hicks Roads Trail, Los Gatos, Sheldon Road Trail, Pebble Beach, 17 Miles Drive Trail, Los Gatos, San Jose Trail, Stevens Creek Reservoir Trail, Kennedy / Hicks Trail, St. Joseph Hills, Los Gatos Trail, Lake Lexington Trail
Advertisement
December 25, 2007 at 7:48 am |
Nice work! Will you release the source?
December 26, 2007 at 5:40 pm |
Thank you. The source is available in note19 Google project.
May 8, 2008 at 12:05 am |
Hi, SJ,
First of all I must say your player is terrific!
From what I could understand it should be possible to either use it from your website or download your source and use it from my computer.
I know you must receive thousands of requests for hosting such a great tool, and thus might not have time and/or patience for those replies anymore.
I’ve tried to use it from your website (I’ve copied your .gpx file to my page at google, and tried to make your website read it), but couldn’t make it work.
Then I’ve copied your webpage to my computer and tried to run it locally, but that didn’t work either.
I have already a python script that would convert the format I get from my gps application to the .gpx format.
If you could point me to what should I read/understand to make your map player work with a generic http path to a .gpx file, that would be awesome.
Many thanks,
Lalo.
May 8, 2008 at 6:29 am |
Hello Lalo.
Thank you for your kind words. You are welcome to try to use it from my site, but it may be easier for you to just get the source code and modify it as needed to fit your own needs. The sources are not that well documented (sorry), but if you’re willing to learn a bit of Flex and the protocol that it uses to call the JavaScript on the page that it was hosted (plus the reverse — JavaScript calling to Flex), then there is not much to it. well you do need to download the Adobe Flex Builder and use it Charting component. Now that I’m writing this note I do realize that even though the code is a few hundred lines only, it does require various technologies to be integrated. But it is not hard to follow (I hope). Read the code (JavaScript code is in the sample pages that you have seen already and the Flex code is here. Feel free to ping me if you need some help making sense of it.
The reason that you may’ve not been able to pass a GPX file may be due to this. I’ve not had a chance to fix the problem that is discussed in that post. Trying removing the namespace entry and see the player can read your GPX file then.
May 8, 2008 at 10:06 am |
Hi, SJ,
Thanks for the message!
About using your source code, that’s really generous from you. I will try to follow the path you’ve suggested on my free time. I am sure it must be less hard than I am afraid it might be!
On the other hand apart from modifing it so it works for me, I can’t think on big changes to do, it does pretty much all I could imagine already. And also I might not be able to know what makes it not work for me.
About using it from your website, the funny thing is that I’ve tried to use it with your GPX file, as I wrote above.
I’ve copied your own file to another location on the internet, for example:
http://myemail.googlepages.com/15-dec-2007.gpx
and tried to point your player to that file:
http://javey.net/bike/map/player6/map.html?gpx=http://myemail.googlepages.com/15-dec-2007.gpx&title=Kennedy.Shannon.Road.Trail&resize=1
I can then see everything on the page (map, controls, etc), but not the path. Should this work?
Cheers,
Lalo.
May 8, 2008 at 2:01 pm |
Can you give me access to your GPX file, perhaps the player cannot deal with it. The GPX can be hosted anywhere (I’ve not really tested this feature, please be warned). If you could host your own GPX file and send me the URL, I’ll take a look. But it may take a few days
Cheers…
May 8, 2008 at 3:21 pm |
Sorry I wasn’t clear enough.
Just replace myemail on the address I gave you above by my e-mail’s username.
Your file should already be copied/hosted there.
Cheers!
May 17, 2008 at 6:47 pm |
I looked at this problem today and looks like there must be a bug in the Action Script code that is reading the .gpx file. I don’t have Flex Builder on this machine so I cant look at it today. But the problem is with the Content-Type that is returned from the googlepages.com server. For .gpx file the Content-Type is set to application/octet-stream, this doesn’t seem to work with the way I’m reading the file from Flex, try changing the extension from .gpx to .xml to .txt, and it should work. Let me know if this works.
May 24, 2008 at 5:48 pm |
Hi, SJ,
Sorry, I’ve only found your e-mail now, it went to the junk e-mail box by mistake.
I’ve tried changing the extensions, but that didn’t work either…
The files with the extensions you recommended should still be at my googlepages.
Thanks for trying!
Cheers!
May 25, 2008 at 3:21 am |
Hi, Lalo,
I was wrong. The problem has nothing to do with file extensions. I forgot that Flash player does not allow a Flash movie (read a flex application) to load XML data from another domain. There appears to be a couple of workarounds. Basically, I would have to write a script to proxy requests to get the data from other domain. For example, in order to get the XML data from googlepages.com, the Flash player will call this script to get the data from the same domain — javey.net. The script on javey.net, then gets the XML data from googlepages.com and passes it to the Flash Player.
I’ll try to write this script as soon as I get a break from other projects. Thanks!
May 25, 2008 at 8:35 pm |
I added this script (called http://javey.net/cgi-bin/gd.sh) to proxy requests from javey.net domain to an arbitrary domain.
#!/bin/sh
echo "Content-Type: text/xml"
echo ""
curl $1
In the HTML wrapper for the Google maps page, I updated the URL to the GPX data to go thru this script. Specifically, I updated the “load” function and updated the URL:
function load() {
var gpx = gup("gpx")
gpxUrl = (gpx == "") ? gpxUrl : gpx;
gpxUrl = "http://javey.net/cgi-bin/gd.sh?"+gpxUrl;
...
Now it should be possible to use the player6 to display your very own GPX data, as in:
http://javey.net/bike/map/player6/map.html?gpx=URL-to-your-gpx-data&title=title-of-ride-without-spaces&resize=1
May 27, 2008 at 8:29 am |
Brilliant!
You’re a genius
It’s working now, thanks a lot!
March 2, 2009 at 10:24 am |
Genius!
We have been trying to solve the problem of html rendering in flex – and flex sorely lacks in this capability.. we simply used the iframe like you have – with flex context-menu on top of it – and got and things working.
Great Job!!!!!!!!!!!!!
November 23, 2009 at 7:42 pm |
Shahram
I wanted to say thanks for the flex maps code, I’ve been trying figure out how to do flex map elevations and yours was the only site that had quality information. If you don’t mind, I’m putting it into a little Rails application and will make it available when it gets close.
It also looks like we ride the same routes, I do kennedy, st. josephs, etc all the time. Let me know if you want to catch up for a ride sometime.
Cheers,
Doug
November 23, 2009 at 9:53 pm |
Hello Doug,
Thank you. Sure lets do a ride together.
Shahram
April 18, 2010 at 7:50 am |
“var c : Number = 2.0 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));” can be simplified to “var c : Number = 2.0 * Math.asin(Math.sqrt(a));”
March 12, 2011 at 12:45 am |
Dear,
all examples are based on the book adobe flex?
Best Regards,