andy-esch · August 29, 2015 14:19
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
    <head>
        <title>
            customhoverwindows | 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/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;
            }
            #hover {
                background: #333;
                width: 150px;
                position: absolute;
                padding: 5px;
                color: #aaa;
            }
            .arrow-down {
                height: 0; 
                width: 0; 
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-top: 10px solid #333;
                position: relative;
                bottom: -15px;
                right: -60px;
            }
            </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="hover">
            <p>testing testing 123</p>
            <div class="arrow-down"></div>
        </div>
 
 
        <!-- include cartodb.js library -->
        <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js" type="text/javascript"></script>
        <!-- Place your code in the script tags below -->
        <script type="text/javascript">
        window.onload = function() {

            // var tableName = "all_day_cdb_gu_l3";
            var tableName = "earthquakes_cdbjs_lesson3";

            var layerSource = {
                    user_name: 'documentation',
                    type: 'cartodb',
                    sublayers: [{
                        sql: "SELECT * FROM " + tableName, // Earthquake data
                        cartocss: $("#simple").html() // Simple visualization
                    }]
            }
            
            // Instantiate new map object, place it in 'map' element
            var map_object = new L.Map('map', {
                center: [37.7741154,-122.4437914], // San Francisco
                zoom: 2,
                scrollWheelZoom: false
            });

            // 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);

            // for storing sublayer outside of createlayer
            var sublayers;

            // Add data layer to your map
            cartodb.createLayer(map_object,layerSource)
                .addTo(map_object)
                .done(function(layer) {
                    sublayer = layer.getSubLayer(0);
                    sublayer.setInteraction(true);
                    sublayer.setInteractivity('mag,place');
                    console.log("num layers", layer.getSubLayerCount());

                    sublayer.on('featureOver', function(e, latlng, pos, data, layerNumber) {
                        cartodb.log.log(e, latlng, pos, data, layerNumber);
                        $("#hover").css({'display':'block','left':pos.x-75,'bottom':($(window).height()-pos.y+20), 'cursor': 'pointer'});
                        $("#hover").find('p').text(data.place);
                    });
                    sublayer.on('featureOut', function(e,latlng, pos, data, layerNumber) {
                        $("#hover").css({'display':'none'});
                    });
                })
                .error(function(err) {
                    console.log("error: " + err);
                });
            }
        </script>
    </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>
	customhoverwindows \| 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/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;
	}
	#hover {
	background: #333;
	width: 150px;
	position: absolute;
	padding: 5px;
	color: #aaa;
	}
	.arrow-down {
	height: 0;
	width: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #333;
	position: relative;
	bottom: -15px;
	right: -60px;
	}
	</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="hover">
	<p>testing testing 123</p>
	<div class="arrow-down"></div>
	</div>


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

	// var tableName = "all_day_cdb_gu_l3";
	var tableName = "earthquakes_cdbjs_lesson3";

	var layerSource = {
	user_name: 'documentation',
	type: 'cartodb',
	sublayers: [{
	sql: "SELECT * FROM " + tableName, // Earthquake data
	cartocss: $("#simple").html() // Simple visualization
	}]
	}

	// Instantiate new map object, place it in 'map' element
	var map_object = new L.Map('map', {
	center: [37.7741154,-122.4437914], // San Francisco
	zoom: 2,
	scrollWheelZoom: false
	});

	// 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);

	// for storing sublayer outside of createlayer
	var sublayers;

	// Add data layer to your map
	cartodb.createLayer(map_object,layerSource)
	.addTo(map_object)
	.done(function(layer) {
	sublayer = layer.getSubLayer(0);
	sublayer.setInteraction(true);
	sublayer.setInteractivity('mag,place');
	console.log("num layers", layer.getSubLayerCount());

	sublayer.on('featureOver', function(e, latlng, pos, data, layerNumber) {
	cartodb.log.log(e, latlng, pos, data, layerNumber);
	$("#hover").css({'display':'block','left':pos.x-75,'bottom':($(window).height()-pos.y+20), 'cursor': 'pointer'});
	$("#hover").find('p').text(data.place);
	});
	sublayer.on('featureOut', function(e,latlng, pos, data, layerNumber) {
	$("#hover").css({'display':'none'});
	});
	})
	.error(function(err) {
	console.log("error: " + err);
	});
	}
	</script>
	</body>
	</html>