Last active
May 23, 2017 22:39
-
-
Save carchrae/171aa265fdb412c7ed53bee2e9c964a5 to your computer and use it in GitHub Desktop.
map locator
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> | |
<title>Carto Map</title> | |
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css"/> | |
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script> | |
<style> | |
html, body, #map { | |
height: 100%; | |
width: 100%; | |
padding: 0px; | |
margin: 0px; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="map"></div> | |
<script> | |
var options = {}, args; | |
if (location.search && location.search.length > 1) { | |
var search = location.search.substring(1); | |
args = JSON.parse('{"' + decodeURI(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}') | |
function checkAndAddOption(key) { | |
if (args[key]) { | |
options[key] = args[key]; | |
} | |
} | |
//https://carto.com/docs/carto-engine/carto-js/api-methods#arguments | |
checkAndAddOption('zoom'); | |
checkAndAddOption('center_lat'); | |
checkAndAddOption('center_lon'); | |
} | |
cartodb | |
.createVis('map', | |
'https://jdowler.carto.com/api/v2/viz/c8196628-8f37-11e5-9d96-0e3a376473ab/viz.json', | |
options | |
) | |
.done(function (vis, layers) { | |
var map = vis.getNativeMap(), | |
hideErrors = false; | |
if (navigator.geolocation) { | |
function silenceErrors(duration){ | |
hideErrors=true; | |
if (duration && hideErrors){ | |
setTimeout(duration,function(){ | |
hideErrors=false; | |
}); | |
} | |
} | |
function onLocationError(e) { | |
if (!hideErrors){ | |
alert(e.message); | |
silenceErrors(10*60*1000); /* no more errors for 10 minutes */ | |
//silenceErrors(); /* would silence all further errors */ | |
} | |
$('#location-error').show().text('cannot find you: ' + e.message); | |
} | |
var marker, circle; | |
function onLocationFound(e) { | |
$('#location-error').hide(); | |
if (!marker) { | |
//create a marker to show the user | |
var icon = L.icon({ | |
iconUrl: 'https://cloud.githubusercontent.com/assets/959825/24314000/9c89f486-109c-11e7-8ebc-e40c19dd2cd1.png', | |
//shadowUrl: '', | |
iconSize: [38, 76], // size of the icon | |
// shadowSize: [50, 64], // size of the shadow | |
iconAnchor: [19, 76], // point of the icon which will correspond to marker's location | |
// shadowAnchor: [4, 62], // the same for the shadow | |
popupAnchor: [0, -76] // point from which the popup should open relative to the iconAnchor | |
}); | |
marker = L.marker(e.latlng, { | |
icon: icon, | |
//draggable: true | |
}); | |
marker.addTo(map) | |
.bindPopup("you are here", { autoPan: false }) | |
.openPopup(); | |
} else { | |
marker.setLatLng(e.latlng) | |
} | |
var radius = e.accuracy / 2; | |
if (!circle) { | |
//http://leafletjs.com/reference.html#path-options | |
var circleOptions = { | |
color : '#d3d3d3', | |
weight: 2, | |
}; | |
circle = L.circle(e.latlng, radius, circleOptions); | |
circle.addTo(map); | |
} else { | |
circle.setRadius(radius); | |
circle.setLatLng(e.latlng); | |
} | |
} | |
if (args && args.showme!=='false'){ | |
map.on('locationfound', onLocationFound); | |
map.on('locationerror', onLocationError); | |
map.locate({ | |
watch: true, | |
setView: false, | |
enableHighAccuracy: true | |
}); | |
} | |
} | |
}); | |
</script> | |
</body> | |
</html> |
Author
carchrae
commented
Mar 24, 2017
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment