LGeoTracker

index.html

<div id="map"></div>
<span id="dashboard"></span>

LGeoTracker.markdown

LGeoTracker ('-' * 11) gps tracking

A Pen by Max Dolgov on CodePen.

License.

script.js

var 
	map, 
	marker,
	line,
	dash,
	tiles = 'http://tiles.maps.sputnik.ru/tiles/kmt2/{z}/{x}/{y}.png';
function markerIcon() {
	var myIcon = L.icon({	iconUrl:'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMGg0OHY0OGgtNDh6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTI0IDRsLTE1IDM2LjU5IDEuNDEgMS40MSAxMy41OS02IDEzLjU5IDYgMS40MS0xLjQxeiIvPjwvc3ZnPg==',
    className: 'nav-arrow',
	iconSize: [24, 24],
    iconAnchor: [12, 12],
    popupAnchor: [-3, 12]
});
    return myIcon;
}

function rotateElement(selector, amount) {
	var el = document.querySelector(selector);
	if (! (el && el.style && el.style.transform) ) {
		return;
	}

	el.style.transform = ('' + el.style.transform).replace(/\s*?rotate\(\d+deg\)/g, '') + ' rotate(' + amount + 'deg)'	
}

function init() {	
	map = L.map('map', {
		center: [55.75, 37.62], 
		zoom: 15
	});
	
	dash = L.DomUtil.get('dashboard');
	
	L.tileLayer(tiles, {
			minZoom: 3,
    		maxZoom: 18
		})
		.addTo(map);
	
	map.on('locationfound', function(e){
		// console.log('prefZoom', map._prefZoom);
		if (map.getZoom() !== map._prefZoom) {
			//map.setZoom(map._prefZoom);
		}
		
		if (! line) {
			line = L.polyline([], {color: 'green',weight:3}).addTo(map);
		}
		
		line.addLatLng(e.latlng);
		if (! marker) {
			marker = L.marker(e.latlng, {icon: markerIcon()});
			map.addLayer(marker);
		} 
		else {
			marker.setLatLng(e.latlng);
		}
		
		var info = ['' + e.latlng.lat.toFixed(3) + ', ' + e.latlng.lng.toFixed(3),
			'speed: ' + (e.speed && Math.floor(e.speed*36/10) || 0) + ' km/h', 
			'altitude: ' + (e.altitude || 0),
				   ];
		if (e.heading) {
			// info.push('heading:' + e.heading);			
			rotateElement('.nav-arrow', e.heading);
		}

		dash.innerHTML = info.join('<br>');
	});
		
	map.locate({
		watch: true,
		setView: true,
		maxZoom: 16,
		enableHighAccuracy: true
		// maximumAge: 1000
	});

}	
init();

L.Map.include({
	zoomIn: function (delta, options) {
		this._prefZoom = this._zoom + (delta || 1);
		return this.setZoom(this._prefZoom, options);
	},

	zoomOut: function (delta, options) {
		this._prefZoom = this._zoom - (delta || 1);
		return this.setZoom(this._prefZoom, options);
	}
});

style.css

html, body{
  height:100%;
  margin: 0;
  padding: 0;
}

#map {
	height: 100%;
	background-color: #ddd;
}

#dashboard {
	position: absolute;
	
	text-align: center;
	top: 10px;
	right: 10px;
	height: 50px;
	background: transparent;
	color: #333;
	font-family: Menlo;
	font-size: 1.2rem;
	
}