cdb

2020-06-15 12:07:54 +08:00
parent 610ed21a90
commit a96ef233c9
444 changed files with 0 additions and 0 deletions
--- a/lib/assets/javascripts/cdb/examples/custom.html
+++ b/lib/assets/javascripts/cdb/examples/custom.html
@@ -0,0 +1,106 @@
+<!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>