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/bing.html
+++ b/lib/assets/javascripts/cdb/examples/bing.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+   <head>
+      <title>Bing Maps + CartoDB.js</title>
+      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+      <style>
+        html, body, #myMap{
+          height: 100%;
+          padding: 0;
+          margin: 0;
+        }
+      </style>
+      <script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.core.js"></script>
+      <script type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
+      <script type="text/javascript">
+      var map = null;
+
+      function getMap()
+      {
+          map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'Your Bing Maps Key'});
+          cartodb.Tiles.getTiles({
+            type: 'cartodb',
+            user_name: 'examples',
+            sublayers: [{
+             sql: 'select * from ne_10m_populated_p_2',
+             cartocss: '#ne_10m_populated_p_2{ marker-fill: #F11810; marker-opacity: 0.9; marker-allow-overlap: true; marker-placement: point; marker-type: ellipse; marker-width: 7.5; marker-line-width: 2; marker-line-color: #000; marker-line-opacity: 0.2; }'
+            }]
+          }, function(tileTemplate) {
+            var options = {
+              uriConstructor: function(tile, zoom) {
+              var i = tile.x + tile.y;
+              return tileTemplate.tiles[0]
+                .replace('{s}', 'abcd'[i%3])
+                .replace('{z}', tile.levelOfDetail)
+                .replace('{x}', tile.x)
+                .replace('{y}', tile.y)
+              },
+              width: 256,
+              height: 256
+            };
+            var tileSource = new Microsoft.Maps.TileSource(options);
+            var tilelayer= new Microsoft.Maps.TileLayer({ mercator: tileSource});
+            map.entities.push(tilelayer);
+          });
+      }
+      </script>
+   </head>
+   <body onload="getMap();">
+      <div id='myMap' style="position:relative; width:100%; height:100%;"></div>
+   </body>
+</html>
+