mock-geolocation
Version:
Mock for navigator.geolocation API
173 lines (145 loc) • 5.14 kB
HTML
<html>
<head>
<meta charset='utf-8'>
<title>2Gis Geolocation Demo</title>
<script src="http://maps.api.2gis.ru/2.0/loader.js" data-id="dgLoader"></script>
<script src="./src/geolocate.js"></script>
<style>
html {margin: 0; width: 100%; height: 100%;}
body {margin: 0 auto; width: 50%; height: 100%;}
#map {width: 100%; height: 50%;}
#geolocateUse {color: #1000d4; font-weight: bold;}
#log {display: block; height: 220px;}
</style>
</head>
<body>
<div id="map"></div>
<ul>
<li>Geolocate use: <span id="geolocateUse">true</span></li>
<br />
<li>
<input id='use' type="button" value="Use"/>
<code>
geolocate.use();
</code>
</li>
<li>
<input id='restore' type="button" value="Restore"/>
<code>
geolocate.restore();
</code>
</li>
<br />
<li>
<input id='search' type="button" value="Start searching location"/>
<input id='watch' type="button" value="Start watching location"/>
<input id='watchStop' type="button" value="Stop watching location"/>
</li>
<br />
<li>
<input id='send' type="button" value="Send"/>
<code>
geolocate.send({lat: 54.9805, lng: 82.8985});
</code>
</li>
<li>
<input id='change1' type="button" value="Change"/>
<code>
geolocate.change({lat: 54.9810, lng: 82.8990});
</code>
</li>
<li>
<input id='change2' type="button" value="Change"/>
<code>
geolocate.change({lat: 54.9810, lng: 82.8995});
</code>
</li>
<li>
<input id='change3' type="button" value="Change"/>
<code>
geolocate.change({lat: 54.9815, lng: 82.9005});
</code>
</li>
</ul>
<code id="log"></code>
<script>
var logContainer = document.getElementById('log'),
geolocateUseContainer = document.getElementById('geolocateUse'),
map,
watchId;
function log(obj) {
console.log(obj);
logContainer.innerHTML = JSON.stringify(obj)
.replace(/,/g, ',<br />')
.replace(/"/g, '')
.replace(/{/g, '{<br/>')
.replace(/:/g, ': ')
.replace(/}/g, '<br />}');
}
function clearLog() {
logContainer.innerHTML = '';
}
function geolocation2GisStop() {
if (map.locationControl._active) {
map.locationControl.fire('click');
}
}
DG.then(function() {
geolocate.use();
map = new DG.Map('map', {
center: [54.9800, 82.8980],
zoom: 18,
locationControl: true,
zoomControl: false,
fullscreenControl: false
});
document.getElementById('search').onclick = function() {
map.locationControl.fire('click');
navigator.geolocation.getCurrentPosition(function(data) {
log(data);
setTimeout(function() {
geolocation2GisStop();
}, 0);
});
};
document.getElementById('watch').onclick = function() {
map.locationControl.fire('click');
watchId = navigator.geolocation.watchPosition(function(data) {
log(data);
});
};
document.getElementById('watchStop').onclick = function() {
geolocation2GisStop();
navigator.geolocation.clearWatch(watchId);
};
document.getElementById('use').onclick = function() {
geolocation2GisStop();
geolocateUseContainer.innerHTML = 'true';
geolocate.use();
};
document.getElementById('restore').onclick = function() {
geolocation2GisStop();
geolocateUseContainer.innerHTML = 'false';
geolocate.restore();
};
document.getElementById('send').onclick = function() {
clearLog();
geolocate.send({lat: 54.9805, lng: 82.8985});
};
document.getElementById('change1').onclick = function() {
clearLog();
geolocate.change({lat: 54.9810, lng: 82.8990});
};
document.getElementById('change2').onclick = function() {
clearLog();
geolocate.change({lat: 54.9810, lng: 82.8995});
};
document.getElementById('change3').onclick = function() {
clearLog();
geolocate.change({lat: 54.9815, lng: 82.9005});
};
});
</script>
</body>
</html>