andy-esch/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <title>
            CartoDB
        </title>

        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

        <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />

        <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" type="text/css" />
        <link rel="stylesheet" href="http://academy.cartodb.com/css/cdbui.css" type="text/css" />

        <style type="text/css">
            html, body, #map {
                height: 100%;
                padding: 0;
                margin: 0;
            }
            #sql {
                position: absolute;
                top: 20px;
                right: 20px;
            }
            .layer_selector {
                background: rgba(255,255,255,0.9);
                border-radius: 5px;
                padding: 0;
                border: 1px solid #999;
                width: 250px;
            }

            .layer_selector > p {
                padding: 15px 30px;
                border-bottom: 1px solid #999;
            }

            .layer_selector ul {
                padding: 0; margin: 0;
                list-style-type: none;
            }
            .layer_selector li {
                padding: 15px 30px;
                font-family: Helvetica, Arial;
                font-size: 13px;
                color: #444;
                cursor: pointer;
            }
            .layer_selector li:not(:last-child) {
                border-bottom: 1px solid #999;
            }
            .layer_selector li:hover {
                background-color: #F0F0F0;
                cursor: pointer;
            }
            .layer_selector li.sql_selected,
            .layer_selector li.cartocss_selected {
                background-color: #A6CEE3;
            }
            </style>

            <style type="cartocss/html" id="simple">
                /** simple visualization */

                #all_day_cdb_gu_l3 {
                    marker-fill-opacity: 0.9;
                    marker-line-color: #FFF;
                    marker-line-width: 1.5;
                    marker-line-opacity: 1;
                    marker-placement: point;
                    marker-type: ellipse;
                    marker-width: 10;
                    marker-fill: #FF6600;
                    marker-allow-overlap: true;
                }
        </style>
    </head>
    <body>
        <div id="map"></div>

        <div id="sql" class="layer_selector">
            <p>SQL Selectors</p>
            <ul>
                <li data="istanbul">Go to Istanbul
                </li>
                <li data="new_york">Go to New York
                </li>
                <li data="">Reset</li>
            </ul>
        </div>

        <!-- include cartodb.js library -->
        <script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js" type="text/javascript"></script>
        <!-- Place your code in the script tags below -->
        <script type="text/javascript">
        window.onload = function() {

            // Instantiate new map object, place it in 'map' element
            var map_object = new L.Map('map', {
                center: [30,0], // San Francisco
                zoom: 3
            });

            // Create layer selector
            function createSelector(layer) {
                var condition = "";
                var $options = $(".layer_selector").find("li");
                $options.click(function(e) {
                    var $li = $(e.target);
                    var selected = $li.attr('data');

                    $options.removeClass('sql_selected');
                    if (selected !== "") {
                        $li.addClass('sql_selected');
                    }

                    if (selected === 'istanbul') {
                        map_object.setView(L.latLng([41.011155,28.921638]),13);
                        console.log(selected);
                    } else if (selected === 'new_york') {
                        map_object.setView(L.latLng([40.751418,-73.948288]),12);
                        console.log(selected);
                    } else {
                        map_object.setView(L.latLng([30,0]),3);
                        console.log(selected);
                        layer.show();
                    }
                });
            }

            // Pull tiles from CartoDB's basemaps
            L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map_object);

            // Add data layer to your map
            cartodb.createLayer(map_object,'https://team.cartodb.com/u/eschbacher/api/v2/viz/cb83181c-4dbb-11e5-b455-0e0c41326911/viz.json')
                .addTo(map_object)
                .done(function(layer) {
                    var cities = layer.getSubLayer(2);
                    cities.setInteraction(true);
                    cities.setInteractivity('cartodb_id, description');
                    createSelector(cities);

                    cities.on('featureClick',function(e, latlng, pos, data, i) {
                        cities.hide();
                        console.log(data,data.description);

                        if (data.description === 'Istanbul') {
                            map_object.setView(L.latLng([41.011155,28.921638]),13);
                            console.log(data.description);
                        } else if (data.description === 'New York') {
                            map_object.setView(L.latLng([40.751418,-73.948288]),12);
                            console.log(data.description);
                        } else {
                            map_object.setView(L.latLng([30,0]),4);
                            console.log(data.description);
                        }
                    });
                })
                .error(function(err) {
                    console.log("error: " + err);
                });
            }
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>
	CartoDB
	</title>

	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

	<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />

	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" type="text/css" />
	<link rel="stylesheet" href="http://academy.cartodb.com/css/cdbui.css" type="text/css" />

	<style type="text/css">
	html, body, #map {
	height: 100%;
	padding: 0;
	margin: 0;
	}
	#sql {
	position: absolute;
	top: 20px;
	right: 20px;
	}
	.layer_selector {
	background: rgba(255,255,255,0.9);
	border-radius: 5px;
	padding: 0;
	border: 1px solid #999;
	width: 250px;
	}

	.layer_selector > p {
	padding: 15px 30px;
	border-bottom: 1px solid #999;
	}

	.layer_selector ul {
	padding: 0; margin: 0;
	list-style-type: none;
	}
	.layer_selector li {
	padding: 15px 30px;
	font-family: Helvetica, Arial;
	font-size: 13px;
	color: #444;
	cursor: pointer;
	}
	.layer_selector li:not(:last-child) {
	border-bottom: 1px solid #999;
	}
	.layer_selector li:hover {
	background-color: #F0F0F0;
	cursor: pointer;
	}
	.layer_selector li.sql_selected,
	.layer_selector li.cartocss_selected {
	background-color: #A6CEE3;
	}
	</style>

	<style type="cartocss/html" id="simple">
	/** simple visualization */

	#all_day_cdb_gu_l3 {
	marker-fill-opacity: 0.9;
	marker-line-color: #FFF;
	marker-line-width: 1.5;
	marker-line-opacity: 1;
	marker-placement: point;
	marker-type: ellipse;
	marker-width: 10;
	marker-fill: #FF6600;
	marker-allow-overlap: true;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>

	<div id="sql" class="layer_selector">
	<p>SQL Selectors</p>
	<ul>
	<li data="istanbul">Go to Istanbul
	</li>
	<li data="new_york">Go to New York
	</li>
	<li data="">Reset</li>
	</ul>
	</div>

	<!-- include cartodb.js library -->
	<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js" type="text/javascript"></script>
	<!-- Place your code in the script tags below -->
	<script type="text/javascript">
	window.onload = function() {

	// Instantiate new map object, place it in 'map' element
	var map_object = new L.Map('map', {
	center: [30,0], // San Francisco
	zoom: 3
	});

	// Create layer selector
	function createSelector(layer) {
	var condition = "";
	var $options = $(".layer_selector").find("li");
	$options.click(function(e) {
	var $li = $(e.target);
	var selected = $li.attr('data');

	$options.removeClass('sql_selected');
	if (selected !== "") {
	$li.addClass('sql_selected');
	}

	if (selected === 'istanbul') {
	map_object.setView(L.latLng([41.011155,28.921638]),13);
	console.log(selected);
	} else if (selected === 'new_york') {
	map_object.setView(L.latLng([40.751418,-73.948288]),12);
	console.log(selected);
	} else {
	map_object.setView(L.latLng([30,0]),3);
	console.log(selected);
	layer.show();
	}
	});
	}

	// Pull tiles from CartoDB's basemaps
	L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png', {
	attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
	}).addTo(map_object);

	// Add data layer to your map
	cartodb.createLayer(map_object,'https://team.cartodb.com/u/eschbacher/api/v2/viz/cb83181c-4dbb-11e5-b455-0e0c41326911/viz.json')
	.addTo(map_object)
	.done(function(layer) {
	var cities = layer.getSubLayer(2);
	cities.setInteraction(true);
	cities.setInteractivity('cartodb_id, description');
	createSelector(cities);

	cities.on('featureClick',function(e, latlng, pos, data, i) {
	cities.hide();
	console.log(data,data.description);

	if (data.description === 'Istanbul') {
	map_object.setView(L.latLng([41.011155,28.921638]),13);
	console.log(data.description);
	} else if (data.description === 'New York') {
	map_object.setView(L.latLng([40.751418,-73.948288]),12);
	console.log(data.description);
	} else {
	map_object.setView(L.latLng([30,0]),4);
	console.log(data.description);
	}
	});
	})
	.error(function(err) {
	console.log("error: " + err);
	});
	}
	</script>
	</body>
	</html>