107 lines
2.7 KiB
HTML
107 lines
2.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Legends | CartoDB.js</title>
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||
|
|
|
||
|
|
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
window.onload = function() {
|
||
|
|
|
||
|
|
var map_viz_url = 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json';
|
||
|
|
|
||
|
|
var onVisDone = function(vis, layers) {
|
||
|
|
|
||
|
|
layers[1].setInteraction(true);
|
||
|
|
|
||
|
|
layers[1].on('featureOver', function(e, latlng, pos, data, layerNumber) {
|
||
|
|
cartodb.log.log(e, latlng, pos, data, layerNumber);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Adds our custom legend
|
||
|
|
var customLegend = new cdb.geo.ui.Legend.Custom({
|
||
|
|
title: "Custom Legend",
|
||
|
|
data: [
|
||
|
|
{ name: "Natural Parks", value: "#58A062" },
|
||
|
|
{ name: "Villages", value: "#F07971" },
|
||
|
|
{ name: "Rivers", value: "#54BFDE" },
|
||
|
|
{ name: "Fields", value: "#9BC562" },
|
||
|
|
{ name: "Caves", value: "#FABB5C" }
|
||
|
|
]
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".legends").append(customLegend.render().$el);
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
cartodb.createVis('map', map_viz_url, {
|
||
|
|
legends: false,
|
||
|
|
zoom: 3,
|
||
|
|
no_cdn: true
|
||
|
|
}).done(onVisDone);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
html, body {
|
||
|
|
position:relative;
|
||
|
|
}
|
||
|
|
html, body, #map {
|
||
|
|
height: 100%;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.legend-selector {
|
||
|
|
position:absolute;
|
||
|
|
top: 20px; right: 20px;
|
||
|
|
margin: 0; padding: 0;
|
||
|
|
z-index: 100;
|
||
|
|
}
|
||
|
|
|
||
|
|
.legend-selector li {
|
||
|
|
display:inline-block;
|
||
|
|
margin: 0 0 0 10px; padding: 0;
|
||
|
|
list-style:none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.legend-selector li a {
|
||
|
|
display:block;
|
||
|
|
text-decoration:none;
|
||
|
|
text-align:center;
|
||
|
|
font: normal 13px "Helvetica",Arial;
|
||
|
|
color: #858585;
|
||
|
|
webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 0 4px 2px;
|
||
|
|
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 0 4px 2px;
|
||
|
|
box-shadow: rgba(0, 0, 0, 0.2) 0 0 4px 2px;
|
||
|
|
-webkit-border-radius: 4px;
|
||
|
|
-moz-border-radius: 4px;
|
||
|
|
-ms-border-radius: 4px;
|
||
|
|
-o-border-radius: 4px;
|
||
|
|
border-radius: 4px;
|
||
|
|
border: 1px solid #999;
|
||
|
|
background: #FFF;
|
||
|
|
z-index: 5;
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.legend-selector li a.selected {
|
||
|
|
background:#f1f1f1;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<ul class="legend-selector"> </ul>
|
||
|
|
<div id="map">
|
||
|
|
<div class="legends"></div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|