2024-04-06 13:25:13 +08:00
|
|
|
<!DOCTYPE html>
|
2024-04-09 12:00:11 +08:00
|
|
|
<html lang="zh">
|
2024-04-06 13:25:13 +08:00
|
|
|
<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 customLegendData = {
|
|
|
|
|
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" }
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var densityLegendData = {
|
|
|
|
|
type: "density",
|
|
|
|
|
title: "Density Legend",
|
|
|
|
|
left: "0", right: "10", colors: [ "#58A062", "#F07971", "#54BFDE", "#9BC562", "#FABB5C" ]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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" }
|
|
|
|
|
]
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var densityLegend = new cdb.geo.ui.Legend.Density({
|
|
|
|
|
title: "Density Legend",
|
|
|
|
|
left: "0", right: "10", colors: [ "#58A062", "#F07971", "#54BFDE", "#9BC562", "#FABB5C" ]
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var bubbleLegend = new cdb.geo.ui.Legend.Bubble({
|
|
|
|
|
title: "Bubble Legend",
|
|
|
|
|
min: 21, max: 20, color: "red"
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var intensityLegend = new cdb.geo.ui.Legend.Intensity({
|
|
|
|
|
title: "Intensity Legend",
|
|
|
|
|
left: "10", right: "20", color: "#f1f1f1"
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var choroplethLegend = new cdb.geo.ui.Legend.Choropleth({
|
|
|
|
|
title: "Choropleth Legend",
|
|
|
|
|
left: "10", right: "20", colors: [ "#58A062", "#F07971", "#54BFDE", "#9BC562", "#FABB5C" ]
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
//var legendsDataArray = [ customLegendData, densityLegendData ];
|
|
|
|
|
var legendsArray = [ choroplethLegend, intensityLegend, customLegend, densityLegend, bubbleLegend ];
|
|
|
|
|
|
|
|
|
|
var legendsDataArray = [
|
|
|
|
|
{
|
|
|
|
|
type: "choropleth",
|
|
|
|
|
title: "Choropleth Legend",
|
|
|
|
|
left: "10",
|
|
|
|
|
right: "20",
|
|
|
|
|
colors: [ "#58A062", "#F07971", "#54BFDE", "#9BC562", "#FABB5C" ]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: "choropleth",
|
|
|
|
|
title: "Choropleth Legend",
|
|
|
|
|
left: "10",
|
|
|
|
|
right: "20",
|
|
|
|
|
colors: [ "#58A062", "#F07971", "#54BFDE", "#9BC562", "#FABB5C" ]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
var stackedLegend = new cdb.geo.ui.Legend.Stacked({
|
|
|
|
|
// data: legendsDataArray,
|
|
|
|
|
legends: legendsArray
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
window.stackedLegend = stackedLegend;
|
|
|
|
|
|
|
|
|
|
$(".legends").append(stackedLegend.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>
|
