Last active
December 26, 2015 19:49
-
-
Save andrewxhill/7204352 to your computer and use it in GitHub Desktop.
hover demo
This file contains 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> | |
<title>Leaflet example | CartoDB.js</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" /> | |
<style> | |
html, body, #map { | |
height: 100%; | |
padding: 0; | |
margin: 0; | |
} | |
</style> | |
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" /> | |
<!--[if lte IE 8]> | |
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" /> | |
<![endif]--> | |
</head> | |
<body> | |
<div id="map"></div> | |
<!-- include cartodb.js library --> | |
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script> | |
<script> | |
function main() { | |
var map = L.map('map', { | |
zoomControl: false, | |
center: [43,-90], | |
zoom: 5 | |
}) | |
L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', { | |
attribution: 'Stamen' | |
}).addTo(map); | |
cartodb.createLayer(map, 'http://andrew.cartodb.com/api/v2/viz/93cd9a14-4011-11e3-932f-3085a9a9563c/viz.json') | |
.on('done', function(layer) { | |
map.addLayer(layer); | |
layer.getSubLayer(1).setInteraction(true); | |
layer.getSubLayer(1).setInteractivity('cartodb_id, area_sqkm'); | |
var infobox = new cdb.geo.ui.InfoBox({ | |
width: 300, | |
layer: layer.getSubLayer(1), | |
template: '<p>square km: {{area_sqkm}}</p>' | |
}); | |
$("body").append(infobox.render().el); | |
}).on('error', function() { | |
cartodb.log.log("some error occurred"); | |
}); | |
//begin vector hover integration | |
var sql = new cartodb.SQL({ user: 'andrew', format: 'geojson' }); | |
var marketsLayer = L.geoJson(null, { | |
style: { | |
color: "transparent", | |
fillColor: "transparent", | |
weight: 1, | |
opacity: 0.65 | |
} | |
}).addTo(map); | |
sql.execute("select cartodb_id, ST_Simplify(the_geom, 0.1) as the_geom from ne_50m_urban_areas").done(function(geojson) { | |
marketsLayer.addData(geojson); | |
marketsLayer.on('mouseover', function(e) { | |
e.layer.setStyle({ | |
color: "red", | |
weight: 3, | |
opacity: 1 | |
}); | |
}) | |
marketsLayer.on('mouseout', function(e) { | |
marketsLayer.resetStyle(e.layer); | |
}); | |
}); | |
//end vector hover integration | |
} | |
// you could use $(window).load(main); | |
window.onload = main; | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment