geolocation is slower when a map is loaded on sceen
0
I am wondering why geolocation slows down greatly when I add a map. If I simply have a page with click to locate it works pretty much instantly. If I add a map to the page and do nothing with it, it takes a while to get the first location, so surely it must slow down the watch.position feature? Maybe I have made an error with the code but getting no errors
The code for when I do not have a map showing on the page is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Track all on map</title>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
<style>
#map {
position: absolute;
top: 100px;
left: 0;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<button type="button" id="toggleWatchBtn">Go online</button><BR><BR>
<input name="lat" type="text" id="lat" value=""><BR>
<input name="lng" type="text" id="lng" value=""><BR><BR>
<div id="result">
<!--Position information will be inserted here-->
</div>
</body>
<script src="/socket.io/socket.io.js"></script>
<script> var username = prompt('What's your username?'); </script>
<script>
//socket = io.connect('/');
//socket.emit('add user', username);
</script>
<script type="text/javascript">
// Set global variable
var watchID;
function showPosition(){
if(navigator.geolocation){
watchID = navigator.geolocation.watchPosition(successCallback);
} else{
alert("Sorry, your browser does not support HTML5 geolocation.");
}
}
function successCallback(position){
toggleWatchBtn.innerHTML = "Stop Watching";
// Check position has been changed or not before doing anything
if(prevLat != position.coords.latitude || prevLong != position.coords.longitude){
//alert("MOVED");
document.getElementById('lat').value = position.coords.latitude;
document.getElementById('lng').value = position.coords.longitude;
var new_lat = document.getElementById("lat").value;
var new_lng = document.getElementById("lng").value;
var new_message = "Moving icon";
var Details={
username : username,
active : true,
new_lat : new_lat,
new_lng : new_lng,
update : true
};
socket.emit('new_coords', Details);
}
// Set previous location
var prevLat = position.coords.latitude;
var prevLong = position.coords.longitude;
// Get current position
var positionInfo = "Your current position is (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " + position.coords.longitude + ")";
document.getElementById("result").innerHTML = positionInfo;
}
function startWatch(){
var result = document.getElementById("result");
var toggleWatchBtn = document.getElementById("toggleWatchBtn");
toggleWatchBtn.onclick = function(){
if(watchID){
toggleWatchBtn.innerHTML = "Start Watching";
navigator.geolocation.clearWatch(watchID);
watchID = false;
}
else{
toggleWatchBtn.innerHTML = "Aquiring Geo Location...";
showPosition();
}
}
}
// Initialise the whole system (above)
window.onload = startWatch;
</script>
</html>
and If i add the map to it with the following, it gets very slow to geolocate.
map = L.map('map');
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 20,
maxNativeZoom: 20,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(map);
map.locate({setView: true,
maxZoom:20,
watch:true
});
Why is it slowing everything down?
geolocation
asked Nov 24 '18 at 23:39
larry chamberslarry chambers
929
add a comment |
0
I am wondering why geolocation slows down greatly when I add a map. If I simply have a page with click to locate it works pretty much instantly. If I add a map to the page and do nothing with it, it takes a while to get the first location, so surely it must slow down the watch.position feature? Maybe I have made an error with the code but getting no errors
The code for when I do not have a map showing on the page is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Track all on map</title>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
<style>
#map {
position: absolute;
top: 100px;
left: 0;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<button type="button" id="toggleWatchBtn">Go online</button><BR><BR>
<input name="lat" type="text" id="lat" value=""><BR>
<input name="lng" type="text" id="lng" value=""><BR><BR>
<div id="result">
<!--Position information will be inserted here-->
</div>
</body>
<script src="/socket.io/socket.io.js"></script>
<script> var username = prompt('What's your username?'); </script>
<script>
//socket = io.connect('/');
//socket.emit('add user', username);
</script>
<script type="text/javascript">
// Set global variable
var watchID;
function showPosition(){
if(navigator.geolocation){
watchID = navigator.geolocation.watchPosition(successCallback);
} else{
alert("Sorry, your browser does not support HTML5 geolocation.");
}
}
function successCallback(position){
toggleWatchBtn.innerHTML = "Stop Watching";
// Check position has been changed or not before doing anything
if(prevLat != position.coords.latitude || prevLong != position.coords.longitude){
//alert("MOVED");
document.getElementById('lat').value = position.coords.latitude;
document.getElementById('lng').value = position.coords.longitude;
var new_lat = document.getElementById("lat").value;
var new_lng = document.getElementById("lng").value;
var new_message = "Moving icon";
var Details={
username : username,
active : true,
new_lat : new_lat,
new_lng : new_lng,
update : true
};
socket.emit('new_coords', Details);
}
// Set previous location
var prevLat = position.coords.latitude;
var prevLong = position.coords.longitude;
// Get current position
var positionInfo = "Your current position is (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " + position.coords.longitude + ")";
document.getElementById("result").innerHTML = positionInfo;
}
function startWatch(){
var result = document.getElementById("result");
var toggleWatchBtn = document.getElementById("toggleWatchBtn");
toggleWatchBtn.onclick = function(){
if(watchID){
toggleWatchBtn.innerHTML = "Start Watching";
navigator.geolocation.clearWatch(watchID);
watchID = false;
}
else{
toggleWatchBtn.innerHTML = "Aquiring Geo Location...";
showPosition();
}
}
}
// Initialise the whole system (above)
window.onload = startWatch;
</script>
</html>
and If i add the map to it with the following, it gets very slow to geolocate.
map = L.map('map');
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 20,
maxNativeZoom: 20,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(map);
map.locate({setView: true,
maxZoom:20,
watch:true
});
Why is it slowing everything down?
geolocation
asked Nov 24 '18 at 23:39
larry chamberslarry chambers
929
add a comment |
0
0
0
I am wondering why geolocation slows down greatly when I add a map. If I simply have a page with click to locate it works pretty much instantly. If I add a map to the page and do nothing with it, it takes a while to get the first location, so surely it must slow down the watch.position feature? Maybe I have made an error with the code but getting no errors
The code for when I do not have a map showing on the page is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Track all on map</title>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
<style>
#map {
position: absolute;
top: 100px;
left: 0;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<button type="button" id="toggleWatchBtn">Go online</button><BR><BR>
<input name="lat" type="text" id="lat" value=""><BR>
<input name="lng" type="text" id="lng" value=""><BR><BR>
<div id="result">
<!--Position information will be inserted here-->
</div>
</body>
<script src="/socket.io/socket.io.js"></script>
<script> var username = prompt('What's your username?'); </script>
<script>
//socket = io.connect('/');
//socket.emit('add user', username);
</script>
<script type="text/javascript">
// Set global variable
var watchID;
function showPosition(){
if(navigator.geolocation){
watchID = navigator.geolocation.watchPosition(successCallback);
} else{
alert("Sorry, your browser does not support HTML5 geolocation.");
}
}
function successCallback(position){
toggleWatchBtn.innerHTML = "Stop Watching";
// Check position has been changed or not before doing anything
if(prevLat != position.coords.latitude || prevLong != position.coords.longitude){
//alert("MOVED");
document.getElementById('lat').value = position.coords.latitude;
document.getElementById('lng').value = position.coords.longitude;
var new_lat = document.getElementById("lat").value;
var new_lng = document.getElementById("lng").value;
var new_message = "Moving icon";
var Details={
username : username,
active : true,
new_lat : new_lat,
new_lng : new_lng,
update : true
};
socket.emit('new_coords', Details);
}
// Set previous location
var prevLat = position.coords.latitude;
var prevLong = position.coords.longitude;
// Get current position
var positionInfo = "Your current position is (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " + position.coords.longitude + ")";
document.getElementById("result").innerHTML = positionInfo;
}
function startWatch(){
var result = document.getElementById("result");
var toggleWatchBtn = document.getElementById("toggleWatchBtn");
toggleWatchBtn.onclick = function(){
if(watchID){
toggleWatchBtn.innerHTML = "Start Watching";
navigator.geolocation.clearWatch(watchID);
watchID = false;
}
else{
toggleWatchBtn.innerHTML = "Aquiring Geo Location...";
showPosition();
}
}
}
// Initialise the whole system (above)
window.onload = startWatch;
</script>
</html>
and If i add the map to it with the following, it gets very slow to geolocate.
map = L.map('map');
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 20,
maxNativeZoom: 20,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(map);
map.locate({setView: true,
maxZoom:20,
watch:true
});
Why is it slowing everything down?
geolocation
asked Nov 24 '18 at 23:39
larry chamberslarry chambers
929
I am wondering why geolocation slows down greatly when I add a map. If I simply have a page with click to locate it works pretty much instantly. If I add a map to the page and do nothing with it, it takes a while to get the first location, so surely it must slow down the watch.position feature? Maybe I have made an error with the code but getting no errors
The code for when I do not have a map showing on the page is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Track all on map</title>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
<style>
#map {
position: absolute;
top: 100px;
left: 0;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<button type="button" id="toggleWatchBtn">Go online</button><BR><BR>
<input name="lat" type="text" id="lat" value=""><BR>
<input name="lng" type="text" id="lng" value=""><BR><BR>
<div id="result">
<!--Position information will be inserted here-->
</div>
</body>
<script src="/socket.io/socket.io.js"></script>
<script> var username = prompt('What's your username?'); </script>
<script>
//socket = io.connect('/');
//socket.emit('add user', username);
</script>
<script type="text/javascript">
// Set global variable
var watchID;
function showPosition(){
if(navigator.geolocation){
watchID = navigator.geolocation.watchPosition(successCallback);
} else{
alert("Sorry, your browser does not support HTML5 geolocation.");
}
}
function successCallback(position){
toggleWatchBtn.innerHTML = "Stop Watching";
// Check position has been changed or not before doing anything
if(prevLat != position.coords.latitude || prevLong != position.coords.longitude){
//alert("MOVED");
document.getElementById('lat').value = position.coords.latitude;
document.getElementById('lng').value = position.coords.longitude;
var new_lat = document.getElementById("lat").value;
var new_lng = document.getElementById("lng").value;
var new_message = "Moving icon";
var Details={
username : username,
active : true,
new_lat : new_lat,
new_lng : new_lng,
update : true
};
socket.emit('new_coords', Details);
}
// Set previous location
var prevLat = position.coords.latitude;
var prevLong = position.coords.longitude;
// Get current position
var positionInfo = "Your current position is (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " + position.coords.longitude + ")";
document.getElementById("result").innerHTML = positionInfo;
}
function startWatch(){
var result = document.getElementById("result");
var toggleWatchBtn = document.getElementById("toggleWatchBtn");
toggleWatchBtn.onclick = function(){
if(watchID){
toggleWatchBtn.innerHTML = "Start Watching";
navigator.geolocation.clearWatch(watchID);
watchID = false;
}
else{
toggleWatchBtn.innerHTML = "Aquiring Geo Location...";
showPosition();
}
}
}
// Initialise the whole system (above)
window.onload = startWatch;
</script>
</html>
and If i add the map to it with the following, it gets very slow to geolocate.
map = L.map('map');
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 20,
maxNativeZoom: 20,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(map);
map.locate({setView: true,
maxZoom:20,
watch:true
});
Why is it slowing everything down?
geolocation
geolocation
asked Nov 24 '18 at 23:39
larry chamberslarry chambers
929
asked Nov 24 '18 at 23:39
larry chamberslarry chambers
929
asked Nov 24 '18 at 23:39
larry chamberslarry chambers
929
asked Nov 24 '18 at 23:39
larry chamberslarry chambers
929
asked Nov 24 '18 at 23:39
larry chamberslarry chambers
929
929
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
Sorted, its because I had navigator watch on and leaflet watch on.
answered Nov 25 '18 at 0:13
larry chamberslarry chambers
929
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53463368%2fgeolocation-is-slower-when-a-map-is-loaded-on-sceen%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Sorted, its because I had navigator watch on and leaflet watch on.
answered Nov 25 '18 at 0:13
larry chamberslarry chambers
929
add a comment |
0
Sorted, its because I had navigator watch on and leaflet watch on.
answered Nov 25 '18 at 0:13
larry chamberslarry chambers
929
add a comment |
0
0
0
Sorted, its because I had navigator watch on and leaflet watch on.
answered Nov 25 '18 at 0:13
larry chamberslarry chambers
929
Sorted, its because I had navigator watch on and leaflet watch on.
answered Nov 25 '18 at 0:13
larry chamberslarry chambers
929
answered Nov 25 '18 at 0:13
larry chamberslarry chambers
929
answered Nov 25 '18 at 0:13
larry chamberslarry chambers
929
answered Nov 25 '18 at 0:13
larry chamberslarry chambers
929
929
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53463368%2fgeolocation-is-slower-when-a-map-is-loaded-on-sceen%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
