4 ms·
People, I've just made this little hack to show the location in a map: Go to http://www.redbullstratos.com/live/ http://www.redbullstratos.com/live/ and op
by molmalo 14y ago
People, I've just made this little hack to show the location in a map:
Go to http://www.redbullstratos.com/live/ http://www.redbullstratos.com/live/
and open the console to run:
$("body").append('<script src="http://www.openlayers.org/api/OpenLayers.js"></script>')
$("body").append("<div id='Map' style='width: 500px; height: 500px; position: absolute; left: 100px; top: 800px;'></div>")
then (once openlayers.js is loaded), run this:
CreateMap = function ()
{
var lat = 33.3405;
var lon = -103.7601;
var zoom = 14;
var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984
var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
var position = new OpenLayers.LonLat(lon, lat).transform( fromProjection, toProjection);
map = new OpenLayers.Map({
div: "Map",
projection: "EPSG:900913",
layers: [
new OpenLayers.Layer.XYZ(
"OpenStreetMap",
[
"http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
"http://otile2.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
"http://otile3.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
"http://otile4.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png"
],
{
attribution: "Data, imagery and map information provided by <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a>, <a href='http://www.openstreetmap.org/' target='_blank'>Open Street Map</a> and contributors, <a href='http://creativecommons.org/licenses/by-sa/2.0/' target='_blank'>CC-BY-SA</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png' border='0'>",
transitionEffect: "resize"
}
),
new OpenLayers.Layer.XYZ(
"Imagery",
[
"http://oatile1.mqcdn.com/naip/${z}/${x}/${y}.png",
"http://oatile2.mqcdn.com/naip/${z}/${x}/${y}.png",
"http://oatile3.mqcdn.com/naip/${z}/${x}/${y}.png",
"http://oatile4.mqcdn.com/naip/${z}/${x}/${y}.png"
],
{
attribution: "Tiles Courtesy of <a href='http://open.mapquest.co.uk/' target='_blank'>MapQuest</a>. Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency. <img src='http://developer.mapquest.com/content/osm/mq_logo.png' border='0'>",
transitionEffect: "resize"
}
)
],
center: [0, 0],
zoom: 1
});
map.addControl(new OpenLayers.Control.LayerSwitcher());
// map = new OpenLayers.Map("Map");
// var mapnik = new OpenLayers.Layer.OSM();
// map.addLayer(mapnik);
markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
marker = new OpenLayers.Marker(position);
markers.addMarker(marker);
map.setCenter(position, zoom);
};
CreateMap();
setInterval(function()
{
markers.removeMarker(marker);
var lat = parseFloat( $("#latitude").html());
var lon = parseFloat( $("#longitude").html());
var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984
var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
var position = new OpenLayers.LonLat(lon, lat).transform( fromProjection, toProjection);
marker = new OpenLayers.Marker(position);
markers.addMarker(marker);
map.setCenter(position, map.zoom);
},2000)
Now, at the bottom of the page, you have a map with a marker showing the current location.
Update: [Added] Go first to http://www.redbullstratos.com/live/ http://www.redbullstratos.com/live/
Update 2: Replaced tiles, with the ones from MapQuest, code for mapquest extracted from: http://openlayers.org/dev/examples/mapquest.html http://openlayers.org/dev/examples/mapquest.html
Update 3: fixed little bug introduced ;) Sorry! And placed the map below the video now, so it's easier to view.