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,115 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CartoDB map demo</title>
+
+    <style>
+      html, body, #map {
+        height: 100%;
+        padding: 0;
+        margin: 0;
+      }
+      #zoom_controls {
+        position: absolute;
+        top: 100px;
+        left: 100px;
+        z-index: 10;
+      }
+      #zoom_controls a {
+        padding: 20px;
+        background-color: #FFF;
+      }
+    </style>
+    <link rel="stylesheet" href="http://leaflet.cloudmade.com/dist/leaflet.css" />
+  </head>
+  <script id="zoom_tmpl" type="tmpl">
+    <div id="zoom_controls">
+      <a class="zoom_in">+</a>
+      <a class="zoom_out">-</a>
+    </div>
+  </script>
+
+  <body>
+    <div id="zoom"></div>
+    <div id="map"></div>
+  </body>
+
+  <script src="../../src/cartodb.js"></script>
+  <script>
+    window.onload = function() {
+      cdb.load('../../src/', function() {
+        $.get('infowindow.tmpl', function(data) {
+          cdb.templates.add({
+            name: 'geo/zoom',
+            template: $('#zoom_tmpl').html()
+          })
+          cdb.templates.add({
+            name: 'geo/infowindow',
+            template: data
+          })
+          // create a map
+          var map = new cdb.geo.Map();
+          var mapView = new cdb.geo.LeafletMapView({
+            el: $('#map'),
+            map: map
+          });
+
+          var zoom = new cdb.geo.ui.Zoom({
+            model: map,
+            el: $('#zoom')
+          })
+          zoom.render();
+
+          map.setCenter([34.95799531086792, -0.6591796875])
+          map.setZoom(3);
+
+          map.bind('change:center', function(model, center) {
+            //console.log(center[0], center[1]);
+          });
+
+          var infowindowModel = new cdb.geo.ui.InfowindowModel({
+             latlng: [72, -45],
+             offset: [216/2, 10],
+             content: "testing"
+          });
+
+          var infowindow = new cdb.geo.ui.Infowindow({
+             model: infowindowModel,
+             mapView: mapView
+          });
+          infowindow.el.setAttribute('style', "position: absolute; width: 216px;padding:0;");
+
+          mapView.addInfowindow(infowindow);
+
+
+          // Adds a TileLayer
+          var URL = 'http://a.tiles.mapbox.com/v3/mapbox.mapbox-streets/{z}/{x}/{y}.png';
+          var URL = 'http://a.tiles.mapbox.com/v3/mapbox.mapbox-streets/2/0/2.png';
+
+          //map.addLayer(new cdb.geo.TileLayer({urlTemplate: URL}));
+          map.addLayer(new cdb.geo.PlainLayer({ color: '#8AC'}));
+
+          // Adds a CartoDBLayer
+          var options = {
+            user_name: 'staging20',
+            table_name: 'tm_world_borders_s_11',
+            extra_params: {
+              cache_policy: 'persist'
+            },
+            subdomains: [null]
+          };
+
+
+          var layer = new cdb.geo.CartoDBLayer(options);
+          map.addLayer(layer);
+          var dataLayer = mapView.getLayerByCid(layer.cid);
+          dataLayer.bind('featureClick', function(e, latlng) {
+            infowindow.setLatLng(latlng).showInfowindow();
+          });
+
+          window.map = map; // to play in console
+        });
+      });
+    };
+  </script>
+</html>