thusoy/index.html

## index.html
<!doctype html>
<html>
<head>
  <title>Hike map</title>
  <style>
    html, body, #map {
      height: 100%;
    }
  </style>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
    var map,vectorLayer,selectedFeature;
    var lat = 63.22834606600802;
    var lon = 12.346664959716744;
    var zoom = 14;
    var curpos = new Array();
    var position;

    var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
    var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
    var cntrposition = new OpenLayers.LonLat(lon, lat).transform(fromProjection, toProjection);

    OpenLayers.Layer.OSM.HikeMap = OpenLayers.Class(OpenLayers.Layer.OSM, {
      initialize: function(name, options) {
        var url = [
          "http://a.tile.thunderforest.com/outdoors/${z}/${x}/${y}.png",
          "http://b.tile.thunderforest.com/outdoors/${z}/${x}/${y}.png",
          "http://c.tile.thunderforest.com/outdoors/${z}/${x}/${y}.png",
        ];
        var newArguments = [name, url, options];
        OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
      },
    });

    function init() {
      map = new OpenLayers.Map("map");
      var cycleLayer = new OpenLayers.Layer.OSM.HikeMap("Hiking Map");

      map.addLayer(cycleLayer);
      map.setCenter(cntrposition, zoom);

      var click = new OpenLayers.Control.Click();
      map.addControl(click);

      click.activate();
    };

    OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
      defaultHandlerOptions: {
        'single': true,
        'double': false,
        'pixelTolerance': 0,
        'stopSingle': false,
        'stopDouble': false
      },

      initialize: function(options) {
        this.handlerOptions = OpenLayers.Util.extend({}, this.defaultHandlerOptions);
        OpenLayers.Control.prototype.initialize.apply(this, arguments);
        this.handler = new OpenLayers.Handler.Click(this, {
          'click': this.trigger
        }, this.handlerOptions);
      },

      trigger: function(e) {
        var lonlat = map.getLonLatFromPixel(e.xy);
        lonlat1= new OpenLayers.LonLat(lonlat.lon,lonlat.lat).transform(toProjection,fromProjection);
        alert(lonlat1.lat + ", " + lonlat1.lon);
      },
    });
  </script>
</head>

<body onload='init();'>
    <div id="map"></div>
</body>

</html>
	<!doctype html>
	<html>
	<head>
	<title>Hike map</title>
	<style>
	html, body, #map {
	height: 100%;
	}
	</style>
	<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
	<script>
	var map,vectorLayer,selectedFeature;
	var lat = 63.22834606600802;
	var lon = 12.346664959716744;
	var zoom = 14;
	var curpos = new Array();
	var position;

	var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984
	var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
	var cntrposition = new OpenLayers.LonLat(lon, lat).transform(fromProjection, toProjection);

	OpenLayers.Layer.OSM.HikeMap = OpenLayers.Class(OpenLayers.Layer.OSM, {
	initialize: function(name, options) {
	var url = [
	"http://a.tile.thunderforest.com/outdoors/${z}/${x}/${y}.png",
	"http://b.tile.thunderforest.com/outdoors/${z}/${x}/${y}.png",
	"http://c.tile.thunderforest.com/outdoors/${z}/${x}/${y}.png",
	];
	var newArguments = [name, url, options];
	OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
	},
	});

	function init() {
	map = new OpenLayers.Map("map");
	var cycleLayer = new OpenLayers.Layer.OSM.HikeMap("Hiking Map");

	map.addLayer(cycleLayer);
	map.setCenter(cntrposition, zoom);

	var click = new OpenLayers.Control.Click();
	map.addControl(click);

	click.activate();
	};

	OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
	defaultHandlerOptions: {
	'single': true,
	'double': false,
	'pixelTolerance': 0,
	'stopSingle': false,
	'stopDouble': false
	},

	initialize: function(options) {
	this.handlerOptions = OpenLayers.Util.extend({}, this.defaultHandlerOptions);
	OpenLayers.Control.prototype.initialize.apply(this, arguments);
	this.handler = new OpenLayers.Handler.Click(this, {
	'click': this.trigger
	}, this.handlerOptions);
	},

	trigger: function(e) {
	var lonlat = map.getLonLatFromPixel(e.xy);
	lonlat1= new OpenLayers.LonLat(lonlat.lon,lonlat.lat).transform(toProjection,fromProjection);
	alert(lonlat1.lat + ", " + lonlat1.lon);
	},
	});
	</script>
	</head>

	<body onload='init();'>
	<div id="map"></div>
	</body>

	</html>