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,81 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Image 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 {
+        height: 100%;
+        padding: 0;
+        margin: 0;
+      }
+
+      #content {
+        padding: 20px;
+        text-align: center;
+      }
+
+      .map {
+        float:left;
+        margin: 10px;
+        width: 500px;
+        height: 500px;
+        border: 1px solid #ccc;
+        background-color: #f8f8f8;
+      }
+      .map img { display: none; }
+    </style>
+
+    <script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
+    <script>
+
+      /* 1: We can create an image using a custom build layer definition: */
+      var layer_definition = {
+        user_name: "documentation",
+        tiler_domain: "cartodb.com",
+        tiler_port: "80",
+        tiler_protocol: "http",
+        layers: [{
+          type: "http",
+          options: {
+            urlTemplate: "https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png",
+            subdomains: [ "a", "b", "c" ]
+          }
+        }, {
+          type: "cartodb",
+          options: {
+            sql: "SELECT * FROM nyc_wifi",
+            cartocss: "/** simple visualization */ #nyc_wifi{ marker-fill-opacity: 0.8; marker-line-color: #FFFFFF; marker-line-width: 1; marker-line-opacity: .8; marker-placement: point; marker-type: ellipse; marker-width: 6; marker-fill: #6ac41c; marker-allow-overlap: true; }",
+            cartocss_version: "2.1.1"
+          }
+        }]
+      };
+
+      // and now we just ask for the URL and append it to the page
+      cartodb.Image(layer_definition).size(500, 500).zoom(13).center([40.708517, -73.993414]).getUrl(function(error, url) {
+
+        var img = new Image();
+
+        img.onerror = function() {
+          console.log(error);
+        };
+
+        img.onload  = function() {
+          var $map = $('<div class="map"></div>');
+          var $img = $('<img src="' + url + '" />');
+          $map.append($img);
+          $("#content").append($map);
+          $img.fadeIn(250);
+        };
+
+        img.src = url;
+
+      });
+    </script>
+  </head>
+  <body>
+    <div id="content"></div>
+  </body>
+</html>