Skip to content

Instantly share code, notes, and snippets.

@jsanz
Last active December 28, 2017 11:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jsanz/5cf2c01d0ee57d46ed52 to your computer and use it in GitHub Desktop.
Save jsanz/5cf2c01d0ee57d46ed52 to your computer and use it in GitHub Desktop.
CartoDB.js and geolocation
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Geolocation example</title>
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
#textbox{
position: absolute;
top: 140px;
left: 20px;
}
</style>
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<link rel="stylesheet" type="text/css" href="https://cartodb.github.io/labs-carbontool2/styles/styleguide.min.css">
</head>
<body>
<div id="map"></div>
<div id="textbox" class="FloatingBox u-padding-m">
<p class="button button--green">
<a href="#">Locate me</a>
</p>
<div id="location" class="u-padding-m"></div>
</div>
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
var map;
$( document ).ready(function() {
var viz = 'https://jsanz.cartodb.com/api/v2/viz/3bf878d6-6aa3-11e5-ad84-0ecd1babdde5/viz.json';
cartodb.createVis('map',viz)
.done(function(vis,layers){
map = vis.getNativeMap();
$('#textbox .button').click(function(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
$('#location').html("<p>Geolocation is not supported by this browser.</p>");
}
})
});
});
function showPosition(position) {
$('#location').html("<p>Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude + "</p>");
map.setView([position.coords.latitude,position.coords.longitude],5);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment