carchrae/index.html

## index.html
<!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>
	<!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(10601000); /* 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>