cdb

2020-06-15 12:07:54 +08:00
parent 610ed21a90
commit a96ef233c9
444 changed files with 0 additions and 0 deletions
@@ -0,0 +1,171 @@
+<!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 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>