<!DOCTYPE html>
<html>
	<title>Snowmobile East</title>
<head>
	<title>Snowmobile East</title>
	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<script src="https://backwoodsgpstrails.com/SledMap/leaflet-0.7.3/leaflet.js"></script> 
	<script src="https://backwoodsgpstrails.com/SledMap/leaflet-0.7.2/leaflet.ajax.min.js"></script>
	<script src='https://backwoodsgpstrails.com/SledMap/jquery-1.11.0.min.js'></script>
	<link rel="stylesheet" href="leaflet-0.7.3/leaflet.css" />

	<!-- Locate related files -->	
	<script src="leaflet-locatecontrol-gh-pages/src/L.Control.Locate.js"></script>
	<link rel="stylesheet" href="leaflet-locatecontrol-gh-pages/src/L.Control.Locate.css" />
			
	<!-- Geosearch related files -->
	<script src="l.control.geosearch.js"></script>
	<script src="l.geosearch.provider.openstreetmap.js"></script>
<!--	<link rel="stylesheet" href="http://l.geosearch.css" /> -->
	
	<!-- Permalink related files -->
	<script src="leaflet-plugins-master/control/Permalink.js"></script>
	<script src="leaflet-plugins-master/control/Permalink.Marker.js"></script>
	<script src="leaflet-plugins-master/control/Permalink.Layer.js"></script>
	<script src="leaflet-plugins-master/control/Permalink.Overlay.js"></script>		
		
	<script src="leaflet-plugins-master/layer/vector/KML.js"></script>	
	
	<script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js'></script>


	<!-- Fit to full screen style -->
	<style>
		body {
			padding: 0;
			margin: 0;
		}
		html, body, #map {
			height: 100%;
		}

	</style>
</head>
<body>
	<div id="map"></div>
	<div id='logo' style='position: absolute; top: 5px; left: 5px; width:38%; height:auto; z-index:5000' >
	  <a href='https://backwoodsGPStrails.com' target='_blank'>
	  <img src='https://BackWoodsGPSTrails.com/wp3/wp-content/uploads/image/BackwoodsGPStrails_Logo_1x1.gif'  title='Visit the Sponsor Website' width='40%'  /></a>
 	</div>	

	<script>
	// Translate goofy microsoft tile format
	var BingLayer = L.TileLayer.extend({
	    getTileUrl: function (tilePoint) {
	        this._adjustTilePoint(tilePoint);
	        return L.Util.template(this._url, {
	            s: this._getSubdomain(tilePoint),
	            q: this._quadKey(tilePoint.x, tilePoint.y, this._getZoomForUrl())
	        });
	    },
	    _quadKey: function (x, y, z) {
	        var quadKey = [];
	        for (var i = z; i > 0; i--) {
	            var digit = '0';
	            var mask = 1 << (i - 1);
	            if ((x & mask) != 0) {
	                digit++;
	            }
	            if ((y & mask) != 0) {
	                digit++;
	                digit++;
	            }
	            quadKey.push(digit);
	        }
	        return quadKey.join('');
	    }
	});

		// BASE layers
		var ERSI_Url = 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
            ERSI_attrib = 'ERSI Topo &copy; <a href="http://www.esri.com/" target="_blank">ERSI</a>';
			
		var Google_Terrain_Url = 'http://mt1.googleapis.com/vt?lyrs=t@129,r@186185151&src=apiv3&hl=en-US&x={x}&y={y}&z={z}&s=G&style=api%7Csmartmaps',
            Google_Terrain_attrib = 'Google_Terrain &copy; <a href="http://google.com">Google</a>';   
						
		var OpenTopo_Url = 'https://a.tile.opentopomap.org/{z}/{x}/{y}.png',
            OpenTopo_attrib = 'OpenTopo &copy; <a href="http://opentopomap.org/" target="_blank">OpenTopo</a>';  						                      
			       
 	  	var Bing_Sat = new BingLayer('http://t{s}.tiles.virtualearth.net/tiles/a{q}.jpeg?g=1398', {
    		subdomains: ['0', '1', '2', '3', '4'],
    		attribution: 'Bing_Sat   <a href="http://www.microsoft.com" target="_blank">&copy; </a>'
			});

		var ERSI_Topo      = L.tileLayer(ERSI_Url, {styleId: 22677, attribution: ERSI_attrib}),
		    Google_Terrain = L.tileLayer(Google_Terrain_Url, {styleId: 22677, attribution: Google_Terrain_attrib}),    
		    OpenTopo       = L.tileLayer(OpenTopo_Url, {styleId: 22677, attribution: OpenTopo_attrib});						

		// OVERLAYS
 	
		var SNO_NH = new L.KML("kml/NH.ruby.osm.exe", {async: true}); 
		var SNO_ME = new L.KML("kml/ME.ruby.osm.exe", {async: true});
		var SNO_VT = new L.KML("kml/VT.ruby.osm.exe", {async: true});
		var SNO_NY = new L.KML("kml/NY.ruby.osm.exe", {async: true}); 		
		var SNO_QC = new L.KML("kml/QC.ruby.osm.exe", {async: true});	
//		var SNO_MI = new L.KML("kml/MI.ruby.osm.exe", {async: true});
//		var SNO_MN = new L.KML("kml/MN.ruby.osm.exe", {async: true}); 
//		var SNO_MB = new L.KML("kml/MB.ruby.osm.exe", {async: true});
					

		var map = L.map('map',  
			{
			attributionControl:false,
			boxZoom:true,
			center: new L.LatLng(44.79, -70.08), 		// Snowmobile center
		    zoom: 7,
			layers: [OpenTopo]
			});
					

		var baseMaps = {
		    "ERSI_Topo"      : ERSI_Topo,
			"Google_Terrain" : Google_Terrain,	
			"Open Topo" 	 : OpenTopo,
			"Bing_Sat"       : Bing_Sat,					    
		};
		
		var overlayMaps = {
//		    "Coos_ATV" : Coos_ATV,
//		    "COOS_Poi" : COOS_Poi,
			"SNO_NH"   : SNO_NH, 
			"SNO_ME"   : SNO_ME, 			
			"SNO_VT"   : SNO_VT,
			"SNO_NY"   : SNO_NY,			
			"SNO_QC"   : SNO_QC,
//			"SNO_MI"   : SNO_MI,
//			"SNO_MB"   : SNO_MB,
//			"SNO_MN"   : SNO_MN		
		};		

		var layers = L.control.layers(baseMaps, overlayMaps).addTo(map);
		//
		// Add Controls
		//
		L.control.attribution({prefix:false}).addTo(map);	
		L.control.scale({imperial:true,metric:false,position:'bottomright'}).addTo(map);
		map.addControl(new L.Control.Permalink({text: 'Permalink', layers: layers}));

		L.control.locate({position: 'bottomright',follow:true}).addTo(map);	
		
        new L.Control.GeoSearch({provider: new L.GeoSearch.Provider.OpenStreetMap()}).addTo(map);

	//
	// Position Tracking
	//
	map.on('locationfound',function(l) {
	 //alert('Tracking...');
		jQuery.ajax({
			type: 'GET', //you can also use GET
			data: ({latitude:l.latlng.lat,longitude:l.latlng.lng, accuracy:l.accuracy, map_type:'ATV' }), 
			url:'SledMap_track.php', 			//pass the values to this server script
			//success: function(msg) {alert('data has been successfully saved!');}
		});	
	 });

	//
	// Event Handlers
	//
	map.on('contextmenu', function(e) {
	    alert(e.latlng);
	});


	
	</script>
</body>
</html>
