Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Merge branch 'develop' of github.com:CartoDB/cartodb.js into develop

  • Loading branch information...
commit 6aaed51ae011009ec68427527592b9690c351652 2 parents 3c2d127 + ecf511f
Javi A. johnHackworth authored
Showing with 1,949 additions and 816 deletions.
  1. +7 −1 Makefile
  2. +15 −9 README.md
  3. +1,255 −0 dist/cartodb.css
  4. +44 −0 dist/cartodb.ie.css
  5. +6 −6 dist/cartodb.js
  6. +342 −240 doc/API.md
  7. +23 −5 examples/TheHobbitLocations/css/style.css
  8. +2 −3 examples/TheHobbitLocations/index.html
  9. +2 −6 examples/TheHobbitLocations/js/app.js
  10. +0 −159 examples/choropleth.html
  11. +0 −75 examples/choropleth.js
  12. +1 −1  examples/{custom_infowinfow.html → custom_infowindow.html}
  13. +1 −1  examples/easy.html
  14. +1 −1  examples/gmaps.html
  15. +112 −0 examples/layer_selector.html
  16. +1 −1  examples/leaflet.html
  17. +9 −6 examples/tutorials/tutorial-1.html
  18. +1 −1  package.json
  19. +9 −5 scripts/publish.js
  20. +1 −1  src/cartodb.js
  21. +4 −4 src/geo/geocoder.js
  22. +1 −1  src/geo/gmaps/gmaps_cartodb_layer.js
  23. +1 −1  src/geo/leaflet/leaflet_cartodb_layer.js
  24. +1 −1  src/geo/leaflet/leaflet_plainlayer.js
  25. +6 −6 test/spec/geo/geocoder.spec.js
  26. +30 −141 themes/css/cartodb.css
  27. +44 −0 themes/css/cartodb.ie.css
  28. +21 −135 themes/css/custom_scroll.css
  29. +9 −6 themes/css/light.css
8 Makefile
View
@@ -5,7 +5,7 @@ CSS_FILES = $(wildcard themes/css/*.css)
CSS_FILES_IE = $(wildcard themes/css/ie/*.css)
#dist: dist/cartodb.js dist/cartodb.full.js themes
-dist: dist/cartodb.js themes
+dist: dist/cartodb.js dist/cartodb.css dist/cartodb.ie.css
dist_folder:
@@ -18,6 +18,12 @@ dist/cartodb.uncompressed.js: dist_folder
dist/cartodb.js: dist/cartodb.uncompressed.js
$(UGLIFYJS) dist/cartodb.uncompressed.js > dist/cartodb.js
+dist/cartodb.css: css
+ cp themes/css/cartodb.css dist
+
+dist/cartodb.ie.css: css
+ cp themes/css/cartodb.ie.css dist
+
clean:
rm -rf dist/*
24 README.md
View
@@ -1,4 +1,3 @@
-
cartodb.js
==========
@@ -18,24 +17,21 @@ quick start
<![endif]-->
- <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
+ <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="http://libs.cartocdn.com/cartodb.js/v2/cartodb.js"></script>
<!-- use these cartodb.css links if you are using https -->
<!--
- <link rel="stylesheet" href="https://d3voyrscnb0slx.cloudfront.net/cartodb.js/v2/themes/cartodb.css" />
+ <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.css" />
<!--[if lte IE 8]>
- <link rel="stylesheet" href="https://d3voyrscnb0slx.cloudfront.net/cartodb.js/v2/themes/css/cartodb.ie.css" />
+ <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.ie.css" />
<![endif]-->
-
-->
- <!-- use this cartodb.js links if you are using https -->
- <!--
- <script src="https://d3voyrscnb0slx.cloudfront.net/cartodb.js/v2/cartodb.js"></script>
- -->
+ <!-- use this cartodb.js link if you are using https -->
+ <!-- script src="http://d3voyrscnb0slx.cloudfront.net/cartodb.js/v2/cartodb.js"></script -->
```
@@ -84,6 +80,16 @@ quick start
```
+examples
+========
+
+ - [Load a layer with google maps](http://cartodb.github.com/cartodb.js/examples/gmaps.html)
+ - [Load a layer with Leaflet](http://cartodb.github.com/cartodb.js/examples/leaflet.html)
+ - [Show a complete visualization](http://cartodb.github.com/cartodb.js/examples/easy.html)
+ - [A visulization with a layer selector](http://cartodb.github.com/cartodb.js/examples/layer_selector.html)
+ - [How to create a custom infowindow](http://cartodb.github.com/cartodb.js/examples/custom_infowindow.html)
+ - [The Hobbit filming location paths](http://cartodb.github.com/cartodb.js/examples/TheHobbitLocations/) a full example with some widgets
+
next steps
==========
1,255 dist/cartodb.css
View
@@ -0,0 +1,1255 @@
+.leaflet-vml-shape {
+ width: 1px;
+ height: 1px;
+ }
+.lvml {
+ behavior: url(#default#VML);
+ display: inline-block;
+ position: absolute;
+ }
+
+.leaflet-control {
+ display: inline;
+ }
+
+.leaflet-popup-tip {
+ width: 21px;
+ _width: 27px;
+ margin: 0 auto;
+ _margin-top: -3px;
+
+ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
+ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
+ }
+.leaflet-popup-tip-container {
+ margin-top: -1px;
+ }
+.leaflet-popup-content-wrapper, .leaflet-popup-tip {
+ border: 1px solid #bbb;
+ }
+
+.leaflet-control-zoom {
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#3F000000',EndColorStr='#3F000000');
+ }
+.leaflet-control-zoom a {
+ background-color: #eee;
+ }
+.leaflet-control-zoom a:hover {
+ background-color: #fff;
+ }
+.leaflet-control-layers-toggle {
+ }
+.leaflet-control-attribution, .leaflet-control-layers {
+ background: white;
+ }/*
+ * CSS Styles that are needed by jScrollPane for it to operate correctly.
+ */
+div.cartodb-popup .jspContainer {overflow: hidden; position: relative; outline: none;}
+div.cartodb-popup .jspContainer * {outline: none;}
+div.cartodb-popup .jspPane {position: absolute; padding:4px 0 0 0!important; z-index:1;}
+div.cartodb-popup .jspVerticalBar {position: absolute; top: 0; right: 0; width: 6px; height: 100%; background: none; z-index:10;}
+div.cartodb-popup .jspHorizontalBar {position: absolute; bottom: 0; left: 0; width: 100%; height: 6px; background: none;}
+div.cartodb-popup .jspVerticalBar *,
+div.cartodb-popup .jspHorizontalBar * {margin: 0; padding: 0;}
+div.cartodb-popup .jspCap {display: none;}
+div.cartodb-popup .jspHorizontalBar .jspCap {float: left;}
+div.cartodb-popup .jspTrack {position: relative; cursor: pointer; background: none;}
+div.cartodb-popup .jspDrag {position: relative; top: 0; left: 0; cursor: pointer; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; background: #999999; background: rgba(0,0,0,0.16); }
+div.cartodb-popup .jspDrag:hover {background: #666666; background: rgba(0,0,0,0.5); cursor: pointer;}
+div.cartodb-popup .jspHorizontalBar .jspTrack,
+div.cartodb-popup .jspHorizontalBar .jspDrag {float: left; height: 100%;}
+div.cartodb-popup .jspArrow {background: #50506d; text-indent: -20000px; display: block; cursor: pointer;}
+div.cartodb-popup .jspArrow.jspDisabled {cursor: default; background: #80808d;}
+div.cartodb-popup .jspVerticalBar .jspArrow {height: 16px;}
+div.cartodb-popup .jspHorizontalBar .jspArrow {width: 16px; float: left; height: 100%;}
+div.cartodb-popup .jspVerticalBar .jspArrow:focus {outline: none;}
+div.cartodb-popup .jspCorner {background: #eeeef4; float: left; height: 100%;}
+* html div.cartodb-popup .jspCorner {margin: 0 -3px 0 0;}
+/**
+ * CartoDB2.0 theme dark
+ */
+
+/* INFOWINDOW */
+div.cartodb-popup.dark .jspContainer:after {
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,1)));
+ background: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1));
+ background: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1));
+ background: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1));
+ background: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1));
+}
+
+div.cartodb-popup.dark .jspContainer:before {
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0,0,0,1)), color-stop(100%, rgba(0,0,0,0)));
+ background: -webkit-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,0));
+ background: -moz-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,0));
+ background: -o-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,0));
+ background: linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,0));
+}
+
+div.cartodb-popup.dark {
+ background:url('../img/dark.png') no-repeat -226px 0;
+}
+
+div.cartodb-popup.dark div.cartodb-popup-content-wrapper {
+ background:url('../img/dark.png') repeat-y -452px 0;
+}
+
+div.cartodb-popup.dark div.cartodb-popup-tip-container {
+ background:url('../img/dark.png') no-repeat 0 0;
+}
+
+div.cartodb-popup.dark a.cartodb-popup-close-button {
+ background:url('../img/dark.png') no-repeat 0 -23px;
+}
+
+div.cartodb-popup.dark h4 {
+ color:#666666;
+}
+
+div.cartodb-popup.dark p {
+ color:#FFFFFF;
+}
+
+div.cartodb-popup.dark p.empty {
+ font-style:italic;
+ color:#AAA;
+}
+
+div.cartodb-popup.dark .jspDrag
+{
+ background: #AAAAAA;
+ background: rgba(255,255,255,0.5);
+}
+
+div.cartodb-popup.dark .jspDrag:hover
+{
+ background: #DEDEDE;
+ background: rgba(255,255,255,0.8);
+}
+
+div.cartodb-popup.dark div.cartodb-edit-buttons a.button {
+ border-color:#333333;
+ color:white;
+ text-shadow:none;
+ background: #111111; /* FOR IE*/
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(24,24,24,1)), color-stop(100%, rgba(0,0,0,1)));
+ background: -webkit-linear-gradient(top, rgba(24,24,24,1), rgba(0,0,0,1));
+ background: -moz-linear-gradient(top, rgba(24,24,24,1), rgba(0,0,0,1));
+ background: -o-linear-gradient(top, rgba(24,24,24,1), rgba(0,0,0,1));
+ background: linear-gradient(top, rgba(24,24,24,1), rgba(0,0,0,1));
+}
+
+div.cartodb-popup.dark div.cartodb-edit-buttons a.button:active {
+ border-color:#333333;
+ color:white;
+ text-shadow:none;
+ background: #111111; /* FOR IE*/
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(24,24,24,1)), color-stop(100%, rgba(0,0,0,1)));
+ background: -webkit-linear-gradient(top, rgba(24,24,24,1), rgba(0,0,0,1));
+ background: -moz-linear-gradient(top, rgba(24,24,24,1), rgba(0,0,0,1));
+ background: -o-linear-gradient(top, rgba(24,24,24,1), rgba(0,0,0,1));
+ background: linear-gradient(top, rgba(24,24,24,1), rgba(0,0,0,1));
+}
+
+div.cartodb-popup.dark div.cartodb-edit-buttons a.button:hover {
+ background:#010101/9;
+ text-decoration:none;
+ cursor:pointer;
+}
+div.cartodb-popup.dark div.cartodb-edit-buttons a.button:active {
+ box-shadow: rgba(255,255,255,0) 0 0 1px 0,rgba(130,126,111,0.6) 0 1px 3px 0 inset;
+}
+div.cartodb-popup.dark div.cartodb-edit-buttons a.button.disabled {
+ color:#454545;
+}
+div.cartodb-popup.dark div.cartodb-edit-buttons a.button.disabled:hover,
+div.cartodb-popup.dark div.cartodb-edit-buttons a.button.disabled:focus,
+div.cartodb-popup.dark div.cartodb-edit-buttons a.button.disabled:active {
+ color:#454545;
+ background: #111111; /* FOR IE*/
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(24,24,24,1)), color-stop(100%, rgba(0,0,0,1)));
+ background: -webkit-linear-gradient(top, rgba(24,24,24,1), rgba(0,0,0,1));
+ background: -moz-linear-gradient(top, rgba(24,24,24,1), rgba(0,0,0,1));
+ background: -o-linear-gradient(top, rgba(24,24,24,1), rgba(0,0,0,1));
+ background: linear-gradient(top, rgba(24,24,24,1), rgba(0,0,0,1));
+ cursor:default;
+}
+
+/* EMBED MAP */
+div.header.dark {
+ background:#333333;
+}
+
+div.header.dark h1 {
+ color: #F7F7F7;
+}
+
+div.header.dark h1 a {
+ color: #F7F7F7;
+}
+
+div.header.dark h1 a:hover {
+ color: #FFFFFF;
+ text-decoration: underline;
+}
+
+div.header.dark p {
+ margin-top:5px;
+ font-weight: normal;
+ font-size: 13px;
+ color: #ABABAB;
+}
+
+div.dark#zoom {
+ background:#333333;
+}
+
+div.dark#zoom a {
+ color: #ABABAB;
+}
+div.dark#zoom a.zoom_in {
+ border-bottom: 1px solid #BCBCBC;
+}
+div.dark#zoom a:hover {
+ cursor: pointer;
+ color: #F1F1F1;
+}
+div.dark#zoom a.disabled {
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
+ opacity: 0.2;
+}
+
+div.dark#zoom a.disabled:hover {
+ cursor: default;
+ color: #999999;
+}
+/**
+ * CartoDB2.0 Theme with header (blue)
+ */
+
+/* INFOWINDOW */
+div.cartodb-popup.header {
+ padding:0;
+ background:none;
+ box-shadow:none;
+ -webkit-box-shadow:none;
+ -moz-box-shadow:none;
+ -o-box-shadow:none;
+ border-bottom:none;
+ border-radius:0;
+ -webkit-border-radius:0;
+ -moz-border-radius:0;
+ -o-border-radius:0;
+}
+
+div.cartodb-popup.header div.cartodb-popup-header {
+ position:relative;
+ width:188px;
+ height:auto;
+ max-height:62px;
+ overflow:hidden;
+ padding:17px 19px 17px 19px;
+ background:url('../img/headers.png') no-repeat 0 0;
+}
+
+div.cartodb-popup.header div.cartodb-popup-header h4 {
+ color:#1F4C7F;
+}
+
+div.cartodb-popup.header div.cartodb-popup-header h1 {
+ margin:0;
+ font:bold 21px "Helvetica Neue", "Helvetica", Arial;
+ color:#FFFFFF;
+ line-height:normal;
+}
+
+div.cartodb-popup.header div.cartodb-popup-header span.separator {
+ position:absolute;
+ bottom:0;
+ left:4px;
+ right:4px;
+ height:1px;
+ background:#225386;
+}
+
+div.cartodb-popup.header div.cartodb-popup-content {
+ max-height:150px;
+}
+
+div.cartodb-popup.header a.cartodb-popup-close-button {
+ background:url('../img/headers.png') no-repeat -226px 0;
+}
+
+div.cartodb-popup.header a.cartodb-popup-close-button:hover {
+ background-position:-226px -26px;
+}
+
+
+/* EMBED MAP */
+div.header.blue h1 {
+ color: #1F4C7F;
+}
+
+div.header.blue h1 a {
+ color: #1F4C7F;
+}
+
+div.header.blue h1 a:hover {
+ color: #225386;
+ text-decoration: underline;
+}
+/**
+ * CartoDB2.0 Infowindow header theme green
+ */
+
+/* INFOWINDOW */
+div.cartodb-popup.header.green div.cartodb-popup-header {
+ background:url('../img/headers.png') no-repeat -252px 0;
+}
+
+div.cartodb-popup.header.green div.cartodb-popup-header h4 {
+ color:#00916D;
+}
+
+div.cartodb-popup.header.green div.cartodb-popup-header span.separator {
+ background:#008E6A;
+}
+
+div.cartodb-popup.header.green a.cartodb-popup-close-button {
+ background:url('../img/headers.png') no-repeat -478px 0;
+}
+
+div.cartodb-popup.header.green a.cartodb-popup-close-button:hover {
+ background-position:-478px -26px;
+}
+
+/* EMBED MAP */
+div.header.green h1 {
+ color: #00916D;
+}
+
+div.header.green h1 a {
+ color: #00916D;
+}
+
+div.header.green h1 a:hover {
+ color: #008E6A;
+ text-decoration: underline;
+}
+/**
+ * CartoDB2.0 Infowindow header theme orange
+ */
+
+/* INFOWINDOW */
+div.cartodb-popup.header.orange div.cartodb-popup-header {
+ background:url('../img/headers.png') no-repeat -756px 0;
+}
+
+div.cartodb-popup.header.orange div.cartodb-popup-header h4 {
+ color:#CC2929;
+}
+
+div.cartodb-popup.header.orange div.cartodb-popup-header span.separator {
+ background:#CC2929;
+}
+
+div.cartodb-popup.header.orange a.cartodb-popup-close-button {
+ background:url('../img/headers.png') no-repeat -982px 0;
+}
+
+div.cartodb-popup.header.orange a.cartodb-popup-close-button:hover {
+ background-position:-982px -26px;
+}
+
+/* EMBED MAP */
+div.header.orange h1 {
+ color: #CC2929;
+}
+
+div.header.orange h1 a {
+ color: #CC2929;
+}
+
+div.header.orange h1 a:hover {
+ color: #CC2929;
+ text-decoration: underline;
+}
+/**
+ * CartoDB2.0 Infowindow header theme yellow
+ */
+
+/* INFOWINDOW */
+div.cartodb-popup.header.yellow div.cartodb-popup-header {
+ background:url('../img/headers.png') no-repeat -504px 0;
+}
+
+div.cartodb-popup.header.yellow div.cartodb-popup-header h4 {
+ color:#D8832A;
+}
+
+div.cartodb-popup.header.yellow div.cartodb-popup-header span.separator {
+ background:#CC7A29;
+}
+
+div.cartodb-popup.header.yellow a.cartodb-popup-close-button {
+ background:url('../img/headers.png') no-repeat -730px 0;
+}
+
+div.cartodb-popup.header.yellow a.cartodb-popup-close-button:hover {
+ background-position:-730px -26px;
+}
+
+/* EMBED MAP */
+div.header.yellow h1 {
+ color: #D8832A;
+}
+
+div.header.yellow h1 a {
+ color: #D8832A;
+}
+
+div.header.yellow h1 a:hover {
+ color: #CC7A29;
+ text-decoration: underline;
+}/* required styles */
+
+.leaflet-map-pane,
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-tile-pane,
+.leaflet-overlay-pane,
+.leaflet-shadow-pane,
+.leaflet-marker-pane,
+.leaflet-popup-pane,
+.leaflet-overlay-pane svg,
+.leaflet-zoom-box,
+.leaflet-image-layer,
+.leaflet-layer { /* TODO optimize classes */
+ position: absolute;
+ }
+.leaflet-container {
+ overflow: hidden;
+ outline: 0;
+ }
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ user-select: none;
+ }
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+ display: block;
+ }
+.leaflet-clickable {
+ cursor: pointer;
+ }
+.leaflet-dragging, .leaflet-dragging .leaflet-clickable {
+ cursor: move;
+ }
+.leaflet-container img {
+ /* map is broken in FF if you have max-width: 100% on tiles */
+ max-width: none !important;
+ }
+.leaflet-container img.leaflet-image-layer {
+ /* stupid Android 2 doesn't understand "max-width: none" properly */
+ max-width: 15000px !important;
+ }
+
+.leaflet-tile-pane { z-index: 2; }
+.leaflet-objects-pane { z-index: 3; }
+.leaflet-overlay-pane { z-index: 4; }
+.leaflet-shadow-pane { z-index: 5; }
+.leaflet-marker-pane { z-index: 6; }
+.leaflet-popup-pane { z-index: 7; }
+
+.leaflet-tile {
+ filter: inherit;
+ visibility: hidden;
+ }
+.leaflet-tile-loaded {
+ visibility: inherit;
+ }
+
+.leaflet-zoom-box {
+ width: 0;
+ height: 0;
+ }
+
+/* Leaflet controls */
+
+.leaflet-control {
+ position: relative;
+ z-index: 7;
+ pointer-events: auto;
+ }
+.leaflet-top,
+.leaflet-bottom {
+ position: absolute;
+ z-index: 1000;
+ pointer-events: none;
+ }
+.leaflet-top {
+ top: 0;
+ }
+.leaflet-right {
+ right: 0;
+ }
+.leaflet-bottom {
+ bottom: 0;
+ }
+.leaflet-left {
+ left: 0;
+ }
+.leaflet-control {
+ float: left;
+ clear: both;
+ }
+.leaflet-right .leaflet-control {
+ float: right;
+ }
+.leaflet-top .leaflet-control {
+ margin-top: 10px;
+ }
+.leaflet-bottom .leaflet-control {
+ margin-bottom: 10px;
+ }
+.leaflet-left .leaflet-control {
+ margin-left: 10px;
+ }
+.leaflet-right .leaflet-control {
+ margin-right: 10px;
+ }
+
+.leaflet-control-zoom {
+ -moz-border-radius: 7px;
+ -webkit-border-radius: 7px;
+ border-radius: 7px;
+ }
+.leaflet-control-zoom {
+ padding: 5px;
+ background: rgba(0, 0, 0, 0.25);
+ }
+.leaflet-control-zoom a {
+ background-color: rgba(255, 255, 255, 0.75);
+ }
+.leaflet-control-zoom a, .leaflet-control-layers a {
+ background-position: 50% 50%;
+ background-repeat: no-repeat;
+ display: block;
+ }
+.leaflet-control-zoom a {
+ -moz-border-radius: 4px;
+ -webkit-border-radius: 4px;
+ border-radius: 4px;
+ width: 19px;
+ height: 19px;
+ }
+.leaflet-control-zoom a:hover {
+ background-color: #fff;
+ }
+.leaflet-touch .leaflet-control-zoom a {
+ width: 27px;
+ height: 27px;
+ }
+.leaflet-control-zoom-in {
+ background-image: url(images/zoom-in.png);
+ margin-bottom: 5px;
+ }
+.leaflet-control-zoom-out {
+ background-image: url(images/zoom-out.png);
+ }
+
+.leaflet-control-layers {
+ box-shadow: 0 1px 7px #999;
+ background: #f8f8f9;
+ -moz-border-radius: 8px;
+ -webkit-border-radius: 8px;
+ border-radius: 8px;
+ }
+.leaflet-control-layers a {
+ background-image: url(images/layers.png);
+ width: 36px;
+ height: 36px;
+ }
+.leaflet-touch .leaflet-control-layers a {
+ width: 44px;
+ height: 44px;
+ }
+.leaflet-control-layers .leaflet-control-layers-list,
+.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
+ display: none;
+ }
+.leaflet-control-layers-expanded .leaflet-control-layers-list {
+ display: block;
+ position: relative;
+ }
+.leaflet-control-layers-expanded {
+ padding: 6px 10px 6px 6px;
+ font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
+ color: #333;
+ background: #fff;
+ }
+.leaflet-control-layers input {
+ margin-top: 2px;
+ position: relative;
+ top: 1px;
+ }
+.leaflet-control-layers label {
+ display: block;
+ }
+.leaflet-control-layers-separator {
+ height: 0;
+ border-top: 1px solid #ddd;
+ margin: 5px -10px 5px -6px;
+ }
+
+.leaflet-container .leaflet-control-attribution {
+ background-color: rgba(255, 255, 255, 0.7);
+ box-shadow: 0 0 5px #bbb;
+ margin: 0;
+ }
+
+.leaflet-control-attribution,
+.leaflet-control-scale-line {
+ padding: 0 5px;
+ color: #333;
+ }
+
+.leaflet-container .leaflet-control-attribution,
+.leaflet-container .leaflet-control-scale {
+ font: 11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
+ }
+
+.leaflet-left .leaflet-control-scale {
+ margin-left: 5px;
+ }
+.leaflet-bottom .leaflet-control-scale {
+ margin-bottom: 5px;
+ }
+
+.leaflet-control-scale-line {
+ border: 2px solid #777;
+ border-top: none;
+ color: black;
+ line-height: 1;
+ font-size: 10px;
+ padding-bottom: 2px;
+ text-shadow: 1px 1px 1px #fff;
+ background-color: rgba(255, 255, 255, 0.5);
+ }
+.leaflet-control-scale-line:not(:first-child) {
+ border-top: 2px solid #777;
+ padding-top: 1px;
+ border-bottom: none;
+ margin-top: -2px;
+ }
+.leaflet-control-scale-line:not(:first-child):not(:last-child) {
+ border-bottom: 2px solid #777;
+ }
+
+.leaflet-touch .leaflet-control-attribution, .leaflet-touch .leaflet-control-layers {
+ box-shadow: none;
+ }
+.leaflet-touch .leaflet-control-layers {
+ border: 5px solid #bbb;
+ }
+
+
+/* Zoom and fade animations */
+
+.leaflet-fade-anim .leaflet-tile, .leaflet-fade-anim .leaflet-popup {
+ opacity: 0;
+
+ -webkit-transition: opacity 0.2s linear;
+ -moz-transition: opacity 0.2s linear;
+ -o-transition: opacity 0.2s linear;
+ transition: opacity 0.2s linear;
+ }
+.leaflet-fade-anim .leaflet-tile-loaded, .leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
+ opacity: 1;
+ }
+
+.leaflet-zoom-anim .leaflet-zoom-animated {
+ -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.25,0.1,0.25,0.75);
+ -moz-transition: -moz-transform 0.25s cubic-bezier(0.25,0.1,0.25,0.75);
+ -o-transition: -o-transform 0.25s cubic-bezier(0.25,0.1,0.25,0.75);
+ transition: transform 0.25s cubic-bezier(0.25,0.1,0.25,0.75);
+ }
+
+.leaflet-zoom-anim .leaflet-tile,
+.leaflet-pan-anim .leaflet-tile,
+.leaflet-touching .leaflet-zoom-animated {
+ -webkit-transition: none;
+ -moz-transition: none;
+ -o-transition: none;
+ transition: none;
+ }
+
+.leaflet-zoom-anim .leaflet-zoom-hide {
+ visibility: hidden;
+ }
+
+
+/* Popup layout */
+
+.leaflet-popup {
+ position: absolute;
+ text-align: center;
+ }
+.leaflet-popup-content-wrapper {
+ padding: 1px;
+ text-align: left;
+ }
+.leaflet-popup-content {
+ margin: 14px 20px;
+ }
+.leaflet-popup-tip-container {
+ margin: 0 auto;
+ width: 40px;
+ height: 20px;
+ position: relative;
+ overflow: hidden;
+ }
+.leaflet-popup-tip {
+ width: 15px;
+ height: 15px;
+ padding: 1px;
+
+ margin: -8px auto 0;
+
+ -moz-transform: rotate(45deg);
+ -webkit-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ -o-transform: rotate(45deg);
+ transform: rotate(45deg);
+ }
+.leaflet-container a.leaflet-popup-close-button {
+ position: absolute;
+ top: 0;
+ right: 0;
+ padding: 4px 5px 0 0;
+ text-align: center;
+ width: 18px;
+ height: 14px;
+ font: 16px/14px Tahoma, Verdana, sans-serif;
+ color: #c3c3c3;
+ text-decoration: none;
+ font-weight: bold;
+ }
+.leaflet-container a.leaflet-popup-close-button:hover {
+ color: #999;
+ }
+.leaflet-popup-content p {
+ margin: 18px 0;
+ }
+.leaflet-popup-scrolled {
+ overflow: auto;
+ border-bottom: 1px solid #ddd;
+ border-top: 1px solid #ddd;
+ }
+
+
+/* Visual appearance */
+
+.leaflet-container {
+ background: #ddd;
+ }
+.leaflet-container a {
+ color: #0078A8;
+ }
+.leaflet-container a.leaflet-active {
+ outline: 2px solid orange;
+ }
+.leaflet-zoom-box {
+ border: 2px dotted #05f;
+ background: white;
+ opacity: 0.5;
+ }
+.leaflet-div-icon {
+ background: #fff;
+ border: 1px solid #666;
+ }
+.leaflet-editing-icon {
+ border-radius: 2px;
+ }
+.leaflet-popup-content-wrapper, .leaflet-popup-tip {
+ background: white;
+
+ box-shadow: 0 3px 10px #888;
+ -moz-box-shadow: 0 3px 10px #888;
+ -webkit-box-shadow: 0 3px 14px #999;
+ }
+.leaflet-popup-content-wrapper {
+ -moz-border-radius: 20px;
+ -webkit-border-radius: 20px;
+ border-radius: 20px;
+ }
+.leaflet-popup-content {
+ font: 12px/1.4 "Helvetica Neue", Arial, Helvetica, sans-serif;
+ }
+
+/**
+ * CartoDB2.0 theme (DEFAULT)
+ */
+
+ /* INFOWINDOW */
+ div.infowindow {
+ position: absolute;
+ z-index: 2;
+ }
+
+ div.cartodb-popup {
+ position:relative;
+ width:226px;
+ height:auto;
+ padding:7px 0 0 0;
+ margin:0;
+ background:url('../img/light.png') no-repeat -226px 0;
+ }
+
+ div.cartodb-popup div.cartodb-popup-content-wrapper {
+ position:relative;
+ width:190px;
+ max-width: 190px;
+ padding:12px 19px 12px 19px;
+ overflow-x: hidden;
+ background:url('../img/light.png') repeat-y -452px 0;
+ }
+
+ div.cartodb-popup div.cartodb-popup-content {
+ display:block;
+ width:190px;
+ max-width: 190px;
+ min-height:5px;
+ height:auto;
+ max-height:185px;
+ margin: 0;
+ padding: 0;
+ overflow-y: auto;
+ overflow-x: hidden!important;
+ outline: none;
+ }
+
+ /* Custom gradients for scroll content */
+ div.cartodb-popup .jspContainer:after,
+ div.cartodb-popup .jspContainer:before {
+ content:'';
+ position:absolute;
+ left:0;
+ right:12px;
+ display:block;
+ height:10px;
+ width:190px;
+ z-index: 5;
+ }
+
+ div.cartodb-popup .jspContainer:after {
+ bottom:0px;
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,1)));
+ background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1));
+ background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1));
+ background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1));
+ background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1));
+ }
+
+ div.cartodb-popup .jspContainer:before {
+ top:0px;
+ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0)));
+ background: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
+ background: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
+ background: -o-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
+ background: linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
+ }
+
+ div.cartodb-popup div.cartodb-popup-tip-container {
+ width:226px;
+ height:20px;
+ background:url('../img/light.png') no-repeat 0 0;
+ }
+
+ div.cartodb-popup a.cartodb-popup-close-button {
+ position:absolute;
+ top:-9px;
+ right:-9px;
+ width:26px;
+ height:26px;
+ padding:0;
+ background:url('../img/light.png') no-repeat 0 -23px;
+ text-indent:-9999px;
+ font-size:0;
+ line-height:0;
+ opacity:1;
+ filter: alpha(opacity=100);
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=1)
+ text-transform:uppercase;
+ z-index:3;
+ }
+
+ /* When there are no fields in header popup themes */
+ div.cartodb-popup.header.no_fields div.cartodb-popup-content {
+ display:none;
+ }
+ div.cartodb-popup.header.no_fields
+ div.cartodb-popup-content-wrapper
+ div.cartodb-edit-buttons {
+ padding-top:5px;
+ margin-top:0;
+ }
+ div.cartodb-popup.header.no_fields div.cartodb-edit-buttons {
+ border: none;
+ padding-top:0;
+ }
+
+
+ div.cartodb-popup h4 {
+ display:block;
+ width:190px;
+ margin: 0;
+ padding: 0;
+ font:bold 11px "Helvetica Neue","Helvetica",Arial;
+ color:#CCCCCC;
+ text-transform:uppercase;
+ word-wrap: break-word;
+ }
+
+ div.cartodb-popup p {
+ display:block;
+ width:190px;
+ max-width: 190px;
+ margin: 0;
+ padding: 0;
+ font:normal 13px "Helvetica",Arial;
+ color:#333333;
+ padding:0 0 7px;
+ word-wrap: break-word;
+ }
+
+ div.cartodb-popup p.empty {
+ color:#999999;
+ font-style: italic;
+ }
+
+
+ /* EMBED CONTENT */
+ div.header {
+ position: relative;
+ display: block;
+ background: #FFF;
+ border: none;
+ border-bottom: 1px solid #808080; /*IE*/
+ border-bottom: 1px solid rgba(0, 0, 0, 0.5);
+ margin:0;
+ padding:20px;
+ -moz-border-radius-topleft: 1px;
+ -webkit-border-top-left-radius: 1px;
+ border-top-left-radius: 1px;
+ -moz-border-radius-topright: 1px;
+ -webkit-border-top-right-radius: 1px;
+ border-top-right-radius: 1px;
+ -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 0 4px 4px;
+ -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 0 4px 4px;
+ box-shadow: rgba(0, 0, 0, 0.1) 0 0 4px 4px;
+ -webkit-transform: translateZ(10px);
+ -moz-transform: translateZ(10px);
+ -ms-transform: translateZ(10px);
+ -o-transform: translateZ(10px);
+ transform: translateZ(10px);
+ z-index: 3;
+ font-family: 'Helvetica Neue', Helvetica, sans-serif;
+ }
+
+ div.header *, div.cartodb-popup * {
+ -webkit-margin-before:0em;
+ -webkit-margin-after:0em;
+ }
+
+ div.header h1 {
+ padding:0;
+ margin:0;
+ font-weight: bold;
+ font-size: 17px;
+ color: #397DBA;
+ line-height:normal;
+ }
+
+ div.header h1 a {
+ font-weight: bold;
+ font-size: 17px;
+ color: #397DBA;
+ text-decoration: none;
+ }
+
+ div.header h1 a:hover {
+ text-decoration: underline;
+ }
+
+ div.header > p {
+ margin:5px 0 0 0;
+ padding: 0;
+ font-weight: normal;
+ font-size: 13px;
+ color: #999999;
+ }
+
+ div.no_description span.cartodb_map_controls {top: 10px; }
+
+
+ div.header div.social {
+ position:absolute;
+ top:50%;
+ right:20px;
+ margin:-13px 0 0 0;
+ }
+
+ div.header div.social a {
+ display:inline-block;
+ zoom: 1;
+ *display: inline;
+ _height: 26px;
+ height:26px;
+ width:26px;
+ display: -moz-inline-stack;
+ vertical-align: top;
+ text-indent: -9999px;
+ *text-indent:0px;
+ font-size: 0;
+ line-height: 0;
+ text-transform: uppercase;
+ background:url('../img/other.png') no-repeat 0 0;
+ }
+
+ div.header div.social a.twitter {
+ margin-left:3px;
+ background:url('../img/other.png') no-repeat -26px 0;
+ }
+
+
+ div#zoom {
+ position: relative;
+ float:left;
+ display:block;
+ margin: 20px 0 0 20px;
+ width: 28px;
+ -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;
+ z-index: 5;
+ background: white;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ -ms-border-radius: 4px;
+ -o-border-radius: 4px;
+ border-radius: 4px;
+ border: 1px solid #999999;
+ }
+ div#zoom a {
+ position:relative;
+ display: block;
+ width: 28px;
+ height: 28px;
+ padding: 0;
+ font: bold 20px "Arial";
+ color: #999999;
+ text-align: center;
+ line-height: normal;
+ text-decoration: none;
+ text-indent: -9999px;
+ line-height: 0;
+ font-size: 0;
+ background:url('../img/other.png') no-repeat 0 0;
+ }
+ div#zoom a.zoom_in {
+ border-bottom: 1px solid #E6E6E6;
+ background-position:-68px 10px;
+ -webkit-border-top-left-radius: 4px;
+ -webkit-border-top-right-radius: 4px;
+ -moz-border-radius-topleft: 4px;
+ -moz-border-radius-topright: 4px;
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+ }
+
+ div#zoom a.zoom_in:hover {
+ background-position:-68px -14px;
+ cursor: pointer;
+ }
+
+ div#zoom a.zoom_out {
+ background-position:-94px 10px;
+ -webkit-border-bottom-left-radius: 4px;
+ -webkit-border-bottom-right-radius: 4px;
+ -moz-border-radius-bottomleft: 4px;
+ -moz-border-radius-bottomright: 4px;
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+ }
+
+ div#zoom a.zoom_out:hover {
+ background-position:-94px -14px;
+ cursor: pointer;
+ }
+
+ div#zoom a.disabled {
+ filter: alpha(opacity=20);
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
+ opacity: 0.2;
+ }
+
+ div#zoom a.disabled:hover {
+ cursor: default;
+ color: #999999;
+ }
+
+ div#zoom_info {
+ position:absolute;
+ display:block;
+ top:100px;
+ left:20px;
+ margin:20px 0 0 0;
+ width: 28px;
+ height:28px;
+ font:normal 13px "Helvetica",Arial;
+ color:#858585;
+ text-align: center;
+ line-height: 28px;
+ -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;
+ z-index: 5;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ -ms-border-radius: 4px;
+ -o-border-radius: 4px;
+ border-radius: 4px;
+ border: 1px solid #999999;
+ background: white;
+ }
+
+ div#tiles_loader {
+ position:relative;
+ float:left;
+ display:block;
+ left:0;
+ top:0;
+ }
+
+ div#tiles_loader div.loader {
+ position:absolute;
+ display:block;
+ top:70px;
+ left:-30px;
+ margin:20px 0 0 0;
+ width: 28px;
+ height:28px;
+ -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;
+ z-index: 5;
+ background: url('../img/loader.gif') no-repeat center center white;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ -ms-border-radius: 4px;
+ -o-border-radius: 4px;
+ border-radius: 4px;
+ border: 1px solid #999999;
+ }
+
+ div.search_box {
+ position: relative;
+ display:block;
+ float:right;
+ margin: 20px 20px 0 0;
+ width: 142px;
+ height:29px;
+ -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;
+ z-index: 5;
+ background: white;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ -ms-border-radius: 4px;
+ -o-border-radius: 4px;
+ border-radius: 4px;
+ border: 1px solid #999999;
+ z-index:5;
+ }
+
+ div.search_box input.text {
+ position: absolute;
+ top:6px;
+ left:30px;
+ width:103px;
+ padding:0;
+ margin:0;
+ line-height:17px;
+ border:none;
+ background:none;
+ border-bottom:1px dotted #CCCCCC;
+ font:normal 14px Arial;
+ color:#999999;
+ z-index:2;
+ }
+
+ div.search_box input.text:focus {
+ outline:none;
+ border-color:#999999;
+ color:#666666;
+ }
+
+ div.search_box input.submit {
+ position: absolute;
+ left:8px;
+ top:8px;
+ width:12px;
+ height:12px;
+ text-indent: -9999px;
+ font-size: 0;
+ line-height: 0;
+ text-transform: uppercase;
+ border:none;
+ background: url('../img/other.png') no-repeat -56px 0;
+ }
+
+ div.search_box input.submit:hover {
+ cursor:pointer;
+ }
+
+ div.cartodb_infobox {
+ padding: 20px;
+ position: absolute;
+ display: inline-block;
+ -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;
+ z-index: 5;
+ background: white;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ -ms-border-radius: 4px;
+ -o-border-radius: 4px;
+ border-radius: 4px;
+ border: 1px solid #999999;
+ z-index:5;
+ }
+
+ div.cartodb_tooltip {
+ position: absolute;
+ z-index: 5;
+ display: none;
+ }
+
+ div.cartodb_tooltip p {
+ font-family: "robotoregular", Helvetica, Arial, Sans-serif;
+ font-size: 15px;
+ color: #333;
+ text-shadow:
+ -1px -1px 0 #FFF,
+ 1px -1px 0 #FFF,
+ -1px 1px 0 #FFF,
+ 1px 1px 0 #FFF;
+ }
+
44 dist/cartodb.ie.css
View
@@ -0,0 +1,44 @@
+.leaflet-vml-shape {
+ width: 1px;
+ height: 1px;
+ }
+.lvml {
+ behavior: url(#default#VML);
+ display: inline-block;
+ position: absolute;
+ }
+
+.leaflet-control {
+ display: inline;
+ }
+
+.leaflet-popup-tip {
+ width: 21px;
+ _width: 27px;
+ margin: 0 auto;
+ _margin-top: -3px;
+
+ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
+ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
+ }
+.leaflet-popup-tip-container {
+ margin-top: -1px;
+ }
+.leaflet-popup-content-wrapper, .leaflet-popup-tip {
+ border: 1px solid #bbb;
+ }
+
+.leaflet-control-zoom {
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#3F000000',EndColorStr='#3F000000');
+ }
+.leaflet-control-zoom a {
+ background-color: #eee;
+ }
+.leaflet-control-zoom a:hover {
+ background-color: #fff;
+ }
+.leaflet-control-layers-toggle {
+ }
+.leaflet-control-attribution, .leaflet-control-layers {
+ background: white;
+ }
12 dist/cartodb.js
View
6 additions, 6 deletions not shown
582 doc/API.md
View
@@ -2,41 +2,48 @@
## CartoDB.js - API reference
-[CartoDB](http://cartodb.com/ "cartodb") offers a simple unified JavaScript library called CartoDB.js that serves all your mapping and API needs. This library allows you to connect to your stored visualizations, create new visualizations, add custom interaction, or access and query your raw data from a web browser; meaning, your applications just got a whole lot more powerful with a lot less code.
+[CartoDB](http://cartodb.com/ "cartodb") offers a simple unified JavaScript library called CartoDB.js that let you interact with the CartoDB service. This library allows you to connect to your stored visualizations, create new visualizations, add custom interaction, or access and query your raw data from a web browser; meaning, your applications just got a whole lot more powerful with a lot less code.
When you add CartoDB.js to your websites you get some great new tools to make maps or power your content with data. Let’s take a look.
+If you want to check out the source code or contribute, please visit the [project Github page](http://github.com/cartodb/cartodb.js).
+
### Getting started
-The simplest way to use a visualization created in CartoDB is:
+The simplest way to use a visualization created in CartoDB on an external site is:
-``` html
-...
-<body>
- <div id="map"></div>
-</body>
-...
-<script>
- // get the viz.json url from the CartoDB UI
- // - go to the map tab
- // - click on share
- // - go to API tab
- window.onload = function() {
- cartodb.createVis('map', http://examples-beta.cartodb.com/api/v1/viz/219/viz.json);
- }
-</script>
+<div class="margin20"></div>
+``` javascript
+ ...
+ <body>
+ <div id="map"></div>
+ </body>
+ ...
+ <script>
+ // get the viz.json url from the CartoDB UI
+ // - go to the map tab
+ // - click on share
+ // - go to API tab
+ window.onload = function() {
+ cartodb.createVis('map', 'http://examples-beta.cartodb.com/api/v1/viz/219/viz.json');
+ }
+ </script>
```
-get the complete example [here](https://github.com/CartoDB/cartodb.js/blob/develop/examples/easy.html)
+get the complete example [here](https://github.com/CartoDB/cartodb.js/blob/develop/examples/easy.html).
-### Creating maps
-CartoDB.js can be used in case you want to create a map visualization from scratch and when you want to add the visualization to an existing map. If you want to create new visualizations start reading "using CartoDB visualizations in your webpage", if you want to add the visualization to your map, read "Add CartoDB layer to an existing map". If you want to create your own visualizations using javascript just read "create visualizations at runtime", this will allow to more advanced users create visualizations without using the CartoDB UI.
+### Using the library
+
+CartoDB.js can be used when you want to embed and use a visualization you have designed using CartoDB user interface, or to create visualizations from scratch dynamically using your data. If you want to create new maps on your webpage, jump to "using CartoDB visualizations in your webpage". If you already have maps on your webpage and want to add CartoDB visualizations to them, read "Add CartoDB layer to an existing map".
+
+You can also use CartoDB APIs to create visualization without having to define them using the website, you can create them dynamically in your code. This is useful for example when the visualizations change depending on user interactions. To read more about it jump to, [create visualizations at runtime](#runtime).
We’ve also made it easier than ever for you to build maps using the mapping library of your choice. Whether you are using Leaflet or Google Maps your CartoDB.js code remains the same. This makes our API documentation simple and straightforward. It also makes it easy for you to remember and keep consistent if you development or maintain multiple maps online.
-To use CartoDB.js in your web-page, you no longer need to host the library on your servers, instead we have made a fast and lightweight version of it available for you online. You can start interacting with your CartoDB hosted tables by including the CartoDB.js inside the HEAD tag of your page:
+To use CartoDB.js in your web-page, you no longer need to host the library on your servers, instead we have made a fast and lightweight version of it available for you online. This has the extra benefit that whenever we fix bugs they get fixed automatically on your visualizations without having to update anything on your side. To start building maps with your CartoDB hosted tables, just including the CartoDB.js inside the HEAD tag of your page:
+<div class="margin20"></div>
``` html
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.css" />
<!--[if lte IE 8]>
@@ -44,38 +51,56 @@ To use CartoDB.js in your web-page, you no longer need to host the library on yo
<![endif]-->
<script src="http://libs.cartocdn.com/cartodb.js/v2/cartodb.js"></script>
```
+<div class="margin20"></div>
-The library is being mirrored on servers all over the world, so you be sure that no matter where your website viewers are, they will get CartoDB.js loaded the fastest way possible.
+The library is being mirrored on servers all over the world (using a CDN), so you can be sure that no matter where your website viewers are, they will get CartoDB.js loaded in the fastest way possible.
-#### using CartoDB visualizations in your webpage
+##### Using CartoDB visualizations in your webpage
-This kind of visualization allows to create a complete map wihtout having to create the map, insert controls, layers and so on. It just creates for you the map, add the controls you want (zoom, loader, infowindows...) and then left you the control to manage them. See ``cartodb.createLayer`` in the API section or see a [simple example](https://github.com/CartoDB/cartodb.js/blob/develop/examples/easy.html)
+The **cartodb.createVis** method is probably going to be the most important one in your CartoDB toolbox.
+This is the easiest way to quickly get a CartoDB map onto your webpage. It handles all the details of loading a map interface, basemap, and your CartoDB data visualization. You can start by giving cartodb.js the DIV ID from your HTML where you want to place your map and the Viz JSON URL from your CartoDB map.
+
+<div class="margin20"></div>
+``` javascript
+ cartodb.createVis('map', 'http://examples-beta.cartodb.com/api/v1/viz/791/viz.json');
```
- cartodb.createVis('map', 'http://examples-beta.cartodb.com/api/v1/viz/791/viz.json')
- .done(function(vis, layers) {
- // layer 0 is the base layer, layer 1 is cartodb layer
- layers[1].on('featureOver', function(e, pos, latlng, data) {
- cartodb.log.log(e, pos, latlng, data);
- });
+<div class="margin20"></div>
+
+That's it! No need to create the map instance, insert controls, or load layers, it handles it all for you. You just give cartodb.js a set of options (zoom, loader, infowindows...) to modify how your final map looks, see **cartodb.Vis** in the API section for the full list of options.
- // you can get the native map to work with it
- // depending if you use google maps or leaflet
- map = vis.getNativeMap();
- // map.setZoom(3)
- // map.setCenter(new google.maps.Latlng(...))
+You can also use the returned **layer** to build functionality (show/hide, click, hover, custom infowindows) using the new layer:
+
+<div class="margin20"></div>
+``` javascript
+ cartodb.createVis('map', 'http://examples-beta.cartodb.com/api/v1/viz/791/viz.json')
+ .done(function(vis, layers) {
+ // layer 0 is the base layer, layer 1 is cartodb layer
+ layers[1].on('featureOver', function(e, latlng, pos, data) {
+ cartodb.log.log(e, latlng, pos, data);
+ });
+
+ // you can also get the map object created by cartodb.js
+ map = vis.getNativeMap();
+ // Now, perform any operations you need
+ // map.setZoom(3)
+ // map.setCenter(new google.maps.Latlng(...))
+ });
```
+<div class="margin20"></div>
+If you have used Google Maps for you basemap in your CartoDB account, using **createViz** requires that you load the Google Maps V3 JavaScript libarary in the HEAD of your HTML. If you use other basemaps, cartodb.js will load the Leaflet library for you automatically.
##### Add CartoDB layer to an existing map
-cartodb.createLayer is probably going to be the most important instrument in your toolbox.
+With visualizations already created through the CartoDB website, you can simply use the **createLayer** function to add them into your web pages. Unlike the **cartodb.createVis**, you will use this method if you create you **map** instance independantly of cartodb.js. This is useful when you have more things on your map apart from CartoDB layers or you have an existing application.
-With visualizations already created through the CartoDB console, you can simply use the createLayer function to add them into your web pages. This method works the same whether you are using Google Maps or Leaflet. Learn the details and different uses of layers in our API documentation below.
+This method works the same whether you are using Google Maps or Leaflet. Learn the details and different uses of layers in our API documentation below.
-To show you just how simple CartoDB.js, let's put it all together. In the HEAD of your HTML, include the libraries,
+To show you just how simple CartoDB.js can be, let's put it all together. Start by including the necessary libararies in the HEAD of your HTML (remember the Google Maps JS library if you are using a Google Maps basemap):
+<div class="margin20"></div>
``` html
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.css" />
<!--[if lte IE 8]>
@@ -83,10 +108,12 @@ To show you just how simple CartoDB.js, let's put it all together. In the HEAD o
<![endif]-->
<script src="http://libs.cartocdn.com/cartodb.js/v2/cartodb.js"></script>
```
+<div class="margin20"></div>
-Next, in the BODY of your HTML include a DIV for your map and the minimum CartoDB.js script to load some data into it,
+Next, in the BODY of your HTML include a DIV for your map and the minimum CartoDB.js script to load your data.
-``` html
+<div class="margin20"></div>
+``` javascript
<div id="map"></div>
<script>
var map = new L.Map('map', {
@@ -99,30 +126,36 @@ Next, in the BODY of your HTML include a DIV for your map and the minimum CartoD
});
</script>
```
+<div class="margin20"></div>
+
+In the above case, we create a new map, but in your case you probably already have the instance of **map** available in your code.
+
+See **cartodb.createLayer** in the API section or see a [simple example](https://github.com/CartoDB/cartodb.js/blob/develop/examples/easy.html).
-##### creating visualizations at runtime (advanced)
-The library also supports the [previous way](https://github.com/Vizzuality/cartodb-leaflet) to a create layer. This way requires more knoledge about CartoDB infraestructure. In this case you dont need viz.json file so you don't need to create a visualization in CartoDB UI, just import your table and use the data in your map.
+<h5 id="runtime">Creating visualizations at runtime</h5>
+
+All CartoDB services are available via the APIs. That means that you can create a new visualization without having to create them before on the CartoDB website. This is particularly useful when you are modifying the visualization depending on user interactions that change the SQL to get the data or CartoCSS to style it. This method, although more advance, provides all the flexibility you might need to create the most dynamic visualizations.
+
+When you create a visualization using the CartoDB website, you get automatically a viz.json URL defining it. When you want to create the visualization via JS, obviously you dont have it, so you will pass all the required parameters to the library so that it can create the visualization at runtime and display it on your map. It is pretty simple.
+
+<div class="margin20"></div>
``` javascript
- cartodb.loadLayer(map, {
- type: 'cartodb',
- options: {
+ cartodb.loadLayer(map, {
+ type: 'cartodb',
+ options: {
table: 'mytable',
user_name: 'cartodb_username'
query: 'select * from mytable where age > 10'
- }
- }).done(function(layer) {
- map.addLayer(layer);
- });
-
+ }
+ }).done(function(layer) {
+ map.addLayer(layer);
+ });
```
+<div class="margin20"></div>
-see all the available options
-
-
-
-That's it! That is all the code you need to start developing your own maps with CartoDB.js. If you want to start building applications straight away, head over to our tutorials to see start making your own maps.
+That's it! That is all the code you need to start developing your own maps with CartoDB.js. If you want to start building applications straight away, head over to our tutorials to see how to start making your own maps.
### Advanced functionality
@@ -130,19 +163,23 @@ The CartoDB.js has many great features for you to use in your applications. Let
##### Viz JSON support
-The Viz.JSON document tells CartoDB.js all the information about your map, including the style you want to use for your data and the filters you want to apply with SQL. The Viz JSON file is served for each map you create in your CartoDB account. Although the Viz JSON file stores all your maps settings, all the values are easy to override with CartoDB.js if you want to do something completely different than what you design in your console. Loading the Viz JSON is as simple as,
+The Viz.JSON document tells CartoDB.js all the information about your map, including the style you want to use for your data and the filters you want to apply with SQL. The Viz JSON file is served with each map you create in your CartoDB account.
+Although the Viz JSON file stores all your map settings, all the values are also easy to customize with CartoDB.js if you want to do something completely different than what you designed in your console. Loading the Viz JSON is as simple as:
+
+<div class="margin20"></div>
``` javascript
- cartodb.loadLayer(map, 'http://examples.cartodb.com/api/v1/viz/ne_10m_populated_p_1/viz.json')
+ cartodb.createVis('map', 'http://examples.cartodb.com/api/v1/viz/ne_10m_populated_p_1/viz.json')
```
##### Bounds wrapper
-We have added a wrapper method to get the bounding box for any dataset or filtered query using the CartoDB.js library. The **getBounds** function can be useful for guiding users to the right location on a map or for loading only the right data at the right time based on user actions.
+We have added easy method to get the bounding box for any dataset or filtered query using the CartoDB.js library. The **getBounds** function can be useful for guiding users to the right location on a map or for loading only the right data at the right time based on user actions.
-```javascript
- var sql = cartodb.SQL({ user: 'cartodb_user' });
- sql.getBounds('select * form table').done(function(bounds) {
+<div class="margin20"></div>
+``` javascript
+ var sql = new cartodb.SQL({ user: 'cartodb_user' });
+ sql.getBounds('select * from table').done(function(bounds) {
console.log(bounds);
});
```
@@ -153,8 +190,9 @@ The CartoDB.js is highly asynchronous, meaning your application can get on with
###### Loading events
-The loadLayer function returns two important events for you to take advantage of: the first is done, which will let your code know that a layer has loaded and the library has successfully read the information from the Viz JSON you requested. The second is ‘error’, which lets you know something did not go as expected when loading a requested layer:
+The **loadLayer** and **createVis** functions returns two important events for you to take advantage of: the first is **done**, which will let your code know that the library has successfully read the information from the Viz JSON and loaded the layer you requested. The second is ‘error’, which lets you know something did not go as expected when loading a requested layer:
+<div class="margin20"></div>
``` javascript
cartodb.loadLayer(map, 'http://examples.cartodb.com/api/v1/viz/0001/viz.json')
.on('done', function(layer) {
@@ -163,37 +201,45 @@ The loadLayer function returns two important events for you to take advantage of
alert("some error occurred: " + err);
});
```
+<div class="margin20"></div>
###### Active layer events
-The next important set of events for you to use happen on those layers that are already loaded (returned by the done event above). Three events are triggered by layers on your webpage, each requires the layer to include an **interactivity** layer. The first event is **featureClick**, which lets you set up events after the user clicks anything that you have mapped.
+The next important set of events for you to use happen on those layers that are already loaded (returned by the **done** event above). Three events are triggered by layers on your webpage, each requires the layer to include an **interactivity** layer. The first event is **featureClick**, which lets you set up events after the user clicks anything that you have mapped.
+<div class="margin20"></div>
``` javascript
layer.on('featureClick', function(e, latlng, pos, data) {
console.log("mouse clicked polygon with data: " + data);
});
```
+<div class="margin20"></div>
The second event is the **featureOver** event, which lets you listen for when the user’s mouse is over a feature. Be careful, as these functions can get costly if you have a lot of features on a map.
+<div class="margin20"></div>
``` javascript
layer.on('featureOver', function(e, latlng, pos, data) {
console.log("mouse over polygon with data: " + data);
});
```
+<div class="margin20"></div>
Similarly, there is the **featureOut** event. This is best used if you do things like highlighting polygons on mouseover and need a way to know when to remove the highlighting after the mouse has left.
+<div class="margin20"></div>
``` javascript
layer.on('featureOut', function(e, latlng, pos, data) {
console.log("mouse left polygon with data: " + data);
});
```
+<div class="margin20"></div>
##### Leaflet integration
-If you want to use Leaflet it gets even easier, CartoDB.js handles loading all the necessary libraries for you! just include CartoDB.js and CartoDB.css in the HEAD of your web-page and you are ready to go! The CartoDB.css document isn’t mandatory, however if you are making a map and are not familiar with writing your own CSS for the various needed elements, it can vastly help jumpstart the process. Adding it is as simple as adding the main JavaScript library,
+If you want to use [Leaflet](http://leafletjs.com) it gets even easier, CartoDB.js handles loading all the necessary libraries for you! just include CartoDB.js and CartoDB.css in the HEAD of your website and you are ready to go! The CartoDB.css document isn’t mandatory, however if you are making a map and are not familiar with writing your own CSS for the various needed elements, it can greatly help to jumpstart the process. Adding it is as simple as adding the main JavaScript library:
+<div class="margin20"></div>
``` html
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.css" />
<script src="http://libs.cartocdn.com/cartodb.js/v2/cartodb.js"></script>
@@ -201,8 +247,9 @@ If you want to use Leaflet it gets even easier, CartoDB.js handles loading all t
##### IE support
-We have worked hard to support Internet Explorer with CartoDB.js. It currently works for version X.X onward. The biggest change you should note is that for the CSS you will need to include an additional IE CSS document we have made available. Your <head> tag should now house links to three documents, as follows,
+We have worked hard to support Internet Explorer with CartoDB.js. It currently works for IE7 through IE10. The biggest change you should note is that for the CSS you will need to include an additional IE CSS document we have made available. Your <head> tag should now house links to three documents, as follows,
+<div class="margin20"></div>
``` html
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.css" />
<!--[if lte IE 8]>
@@ -215,73 +262,170 @@ We have worked hard to support Internet Explorer with CartoDB.js. It currently w
We are committed to making sure your website works as intended no matter what changes in the future. While we may find more efficient or more useful features to add to the library as time progresses. We never want to break things you have already developed, for this reason, we make versioned CartoDB.js libraries available to you, meaning that the way they function will never unexpectedly change on you.
-We recommend that you always develop against the most recent version of CartoDB.js, always found at,
+We recommend that you always develop against the most recent version of CartoDB.js, always found at:
+<div class="margin20"></div>
``` javascript
http://libs.cartocdn.com/cartodb.js/v2/cartodb.js
```
+<div class="margin20"></div>
-Anytime you wish to push a stable version of your site to the web though, you can find the version of CartoDB.js you are using by looking at the first line of the library, here
+Anytime you wish to push a stable version of your site to the web though, you can find the version of CartoDB.js you are using by looking at the first line of the library, here:
+<div class="margin20"></div>
``` javascript
http://libs.cartocdn.com/cartodb.js/v2/cartodb.js
```
+<div class="margin20"></div>
-Or, by running the following in your code,
+Or, by running the following in your code:
+<div class="margin20"></div>
``` javascript
alert(cartodb.VERSION)
```
+<div class="margin20"></div>
-Now, that you have your CartoDB.js version, you can point your site at that release. If the current version of CartoDB.js is 2.0.11, the URL would be,
+Now, that you have your CartoDB.js version, you can point your site at that release. If the current version of CartoDB.js is 2.0.11, the URL would be:
+<div class="margin20"></div>
``` javascript
http://libs.cartocdn.com/cartodb.js/v2/2.0.11/cartodb.js
```
+<div class="margin20"></div>
-You can do the same for the CSS documents we provide,
+You can do the same for the CSS documents we provide:
+<div class="margin20"></div>
``` javascript
http://libs.cartocdn.com/cartodb.js/v2/2.0.11/themes/css/cartodb.css
```
+<div class="margin20"></div>
+
+### Usage examples
+If you want to start playing with the library, there are several examples to start with:
+
+ <div class="margin20"></div>
+
+ + An easy example using the library ( [live](http://cartodb.github.com/cartodb.js/examples/easy.html) | [code](https://github.com/CartoDB/cartodb.js/blob/develop/examples/easy.html) ).
+ + Leaflet integration ( [live](http://cartodb.github.com/cartodb.js/examples/leaflet.html) | [code](https://github.com/CartoDB/cartodb.js/blob/develop/examples/leaflet.html) ).
+ + Google Maps v3 integration ( [live](http://cartodb.github.com/cartodb.js/examples/gmaps.html) | [code](https://github.com/CartoDB/cartodb.js/blob/develop/examples/gmaps.html) ).
+ + Customizing the infowindow data ( [live](http://cartodb.github.com/cartodb.js/examples/custom_infowindow.html) | [code](https://github.com/CartoDB/cartodb.js/blob/develop/examples/custom_infowinfow.html) ).
+ + An example using a layer selector ( [live](http://cartodb.github.com/cartodb.js/examples/layer_selector.html) | [code](https://github.com/CartoDB/cartodb.js/blob/develop/examples/layer_selector.html) ).
+ + The Hobbit map done with the library ( [live](http://cartodb.github.com/cartodb.js/examples/TheHobbitLocations/) | [code](https://github.com/CartoDB/cartodb.js/tree/develop/examples/TheHobbitLocations) ).
+
+
### API
-The documentation below reflects CartoDB.js for the 2.0.x library versions. For major changes in the library we will update the documentation here. This documentation is meant to help developers find specific methods for using the CartoDB.js library. For any questions regarding the usage of the library or for problems with the documentation please contact us at support@cartodb.com
+The documentation below reflects CartoDB.js for the 2.0.x library versions. For major changes in the library we will update the documentation here. This documentation is meant to help developers find specific methods for using the CartoDB.js library.
-##### cartodb.createLayer(map, layerSource [, options] [, callback])
+For any questions regarding the usage of the library or for problems with the documentation please contact us at [support@cartodb.com](mailto:support@cartodb.com).
+
+
+### Creating maps
+
+##### cartodb.Vis
+
+**cartodb.Vis** is probably going to be the most important instrument in your toolbox. This method allows to do a complete visualization, managing everything for the map and layer creation. In addition, it allows you to add easily modify widgets like zoom, loader, infowindow, tooltips, and overlays.
+
+##### cartodb.createVis(map_id, vizjson_url[, options] [, callback])
+
+Creates a visualization inside the map_id DOM object:
+
+<div class="margin20"></div>
+``` javascript
+ var url = 'http://examples-beta.cartodb.com/api/v1/viz/791/viz.json';
+ cartodb.createVis('map', url)
+ .done(function(vis, layers) {
+ });
+```
+<div class="margin20"></div>
-**cartodb.createLayer** is probably going to be the most important instrument in your toolbox.
+###### ARGUMENTS
+ + **map_id**: a DOM object, for example **$('#map')** or a DOM id.
+ + **vizjson_url**: url of the vizjson object.
+ + **options**:
+ - shareable: add facebook and twitter share buttons.
+ - title: adds a header with the title of the visualization.
+ - description: adds description to the header (as you set in the UI).
+ - searchControl: adds a search control (default: false).
+ - zoomControl: adds zoom control (default: true).
+ - loaderControl: adds loading control (default: true).
+ - center_lat: center coordinates where the map is initializated.
+ - center_lon.
+ - zoom: initial zoom.
+
+##### cartodb.Vis.getLayers()
+Return an array of layers in the map. The first is the base layer.
+
+##### cartodb.Vis.addOverlay(options)
+Add an overlay to the map, these are the overlays you can add: zoom, tooltip, infobox.
+
+###### RETURNS
+An overlay object, depending on the options.type different object will be returned, see cartodb.vis.Overlays.
+
+##### cartodb.Vis.getOverlay(type)
+Return the first overlay with the specified **type**.
+
+<div class="margin20"></div>
+``` javascript
+ var zoom = vis.getOverlay('zoom')
+ zoom.clean() // remove it from the screen
+```
+<div class="margin20"></div>
+
+
+##### cartodb.Vis.getOverlays()
+Returns a list of overlays currently on the screen (see overlays description).
+
+##### cartodb.Vis.getNativeMap ()
+Returns the native map object being used. It can be google.maps.Map or L.Map depending on the provider you setup in the UI.
+
+##### cartodb.vis.Overlays
+An overlay is a control shown on top of the map.
+
+Overlay objects are always created using method **addOverlay** of cartodb.Vis object.
+
+An overlay is internally a **Backbone.View** so if you know how backbone works you can use it. If you want to use plain DOM objects you can access to **overlay.el** (**overlay.$el** for jquery object).
+
+
+
+### Creating layer functions
+
+##### cartodb.createLayer(map, layerSource [, options] [, callback])
-With visualizations already created through the CartoDB console, you can simply use the **createLayer** function to add them into your web pages. This method works the same whether you are using Google Maps or Leaflet.
+With visualizations already created through the CartoDB console, you can simply use the **createLayer** function to add them into your web pages. Unlike **createVis**, this method requires an already activated **map** object and it does not load a basemap for you. The method works the same whether your map object is [Google Maps](https://developers.google.com/maps/documentation/javascript/) or [Leaflet](http://leafletjs.com).
###### ARGUMENTS
- + **map**: leaflet L.Map or google maps google.maps.Map object. The map should be initialized before calling this function
+ + **map**: leaflet L.Map or google maps google.maps.Map object. The map should be initialized before calling this function.
+ **layerSource**: contains information about the layer. It can be specified in 2 ways:
+
- passing the url where the layer data is located:
``` javascript
-
cartodb.createLayer(map, 'http://myserver.com/layerdata.json')
```
+
- passing the data directly:
``` javascript
-
cartodb.createLayer(map, { ... layer metadata ... });
```
- layer metadata is always in the form: { type: 'LAYER_TYPE_NAME', options: {....} }
- - for type ``cartodb`` options should be:
- - user_name: your username in cartodb, username.cartodb.com (mandatory)
- - table_name: the table you want to display (mandatory)
- - query: sql query applied
- - tile_style: cartocss applied
- - interactivity: data available in interactivity (see featureOver and featureClick)
- - featureOver: callback called when pointer is on a feature
- - featureClick: callback called when user cliks on a feature
- - featureOut: called then the pointer gets out of a feature
- - interaction: default true, set it to false when you don't want interactivity layer yo be loaded (recomended if you don't user interaction)
+
+ <div class="margin20"></div>
+ Layer metadata is always in the form: { type: 'LAYER_TYPE_NAME', options: {....} }
+ - for type **cartodb** options should be:
+ - user_name: your username in cartodb, username.cartodb.com (mandatory).
+ - table_name: the table you want to display (mandatory).
+ - query: sql query applied.
+ - tile_style: cartocss applied.
+ - interactivity: data available in interactivity (see featureOver and featureClick).
+ - featureOver: callback called when pointer is on a feature.
+ - featureClick: callback called when user cliks on a feature.
+ - featureOut: called then the pointer gets out of a feature.
+ - interaction: default true, set it to false when you don't want interactivity layer yo be loaded (recomended if you don't user interaction).
+ **options**: each type of layer has different options.
@@ -298,8 +442,8 @@ Promise object. You can listen for the following events:
###### example:
+<div class="margin20"></div>
``` javascript
-
var map;
var mapOptions = {
zoom: 5,
@@ -312,8 +456,8 @@ Promise object. You can listen for the following events:
cartodb.loadLayer(map, 'http://examples.cartodb.com/tables/TODO/cartodb.js')
.on('done', function(layer) {
layer
- .on('featureOver', function(e, pos, latlng, data) {
- console.log(e, pos, latlng, data);
+ .on('featureOver', function(e, latlng, pos, data) {
+ console.log(e, latlng, pos, data);
})
.on('error', function(err) {
console.log('error: ' + err);
@@ -324,19 +468,35 @@ Promise object. You can listen for the following events:
```
-##### **clear()**
+##### **layer.clear()**
Should be called after removing the layer from the map.
-##### **hide()**
+##### **layer.hide()**
Hides the cartodb layer from the map. Disables the interaction if it was enabled.
-##### **show()**
+##### **layer.show()**
Show the cartodb layer in the map if it was previously added. Enables the interaction if it was enabled.
-##### **setInteraction(enable)**
+##### layer.isVisible()
+
+ Get the visibility of the layer. Returns true or false.
+
+###### RETURNS
+
+ true: if layer is visible.
+
+##### layer.setOpacity(opacity)
+
+ Change the opacity of the layer.
+
+###### ARGUMENTS
+
+ + **opacity**: value in range [0, 1].
+
+##### **layer.setInteraction(enable)**
Sets the interaction of your layer to true (enabled) or false (disabled). When is disabled **featureOver**, **featureClick** and **featureOut** are **not** triggered.
@@ -344,7 +504,7 @@ Promise object. You can listen for the following events:
+ **enable**: true if the interaction needs to be enabled.
-##### **setQuery(sql)**
+##### **layer.setQuery(sql)**
Sets the sql query. The layer will show the geometry returned by this query. When the query raises an error, **error** event is triggered. If you set sql to null the query is set to 'select * form {{table_name}}'.
@@ -355,20 +515,18 @@ Promise object. You can listen for the following events:
+ **sql**: postgres valid sql query. {{table_name}} can be used as variable, it will replaced by the table_name used in the visualization.
###### EXAMPLE
-
- ```javascript
-
- // this will show in the map the geometries with area greater than 10
- layer.setQuery("SELECT * FROM {{table_name}} WHERE area > 10");
-
- // error management
- layer.setQuery("wrong syntax query");
- layer.on('error', function(err) {
- console.log("there was some problem: " + err);
- });
+ ``` javascript
+ // this will show in the map the geometries with area greater than 10
+ layer.setQuery("SELECT * FROM {{table_name}} WHERE area > 10");
+
+ // error management
+ layer.setQuery("wrong syntax query");
+ layer.on('error', function(err) {
+ console.log("there was some problem: " + err);
+ });
```
-##### setCartoCSS(cartoCSS, version='2.0.1')
+##### layer.setCartoCSS(cartoCSS, version='2.0.1')
Changes the style of the layer.
An 'error' event is triggered on the layer if something is wrong with the style.
@@ -380,25 +538,16 @@ Promise object. You can listen for the following events:
+ **version**: cartoCSS version. You usually do not need to include this.
###### EXAMPLE
-
+<div class="margin20"></div>
``` javascript
-
layer.setCartoCSS("#{{table_name}}{ marker-fill:blue }");
```
-##### isVisible()
-
- Get the visibility of the layer. Returns true or false.
-
-###### RETURNS
-
- true: if layer is visible.
-
-##### setInteractivity(fieldsArray)
+##### layer.setInteractivity(fieldsArray)
Change the columns you want to get data.
-##### setOptions(options)
+##### layer.setOptions(options)
Change any parameter at the same time refreshing the tiles once.
@@ -409,8 +558,11 @@ Promise object. You can listen for the following events:
+ **opacity**: see setOpacity.
+ **interactivity**: see setInteractivity.
+
###### EXAMPLE
+<div class="margin20"></div>
+
``` javascript
layer.setOptions({
query: "SELECT * FROM {{table_name}} WHERE cartodb_id < 100",
@@ -418,21 +570,14 @@ Promise object. You can listen for the following events:
});
```
-##### setOpacity(opacity)
-
- Change the opacity of the layer.
-
-###### ARGUMENTS
-
- + **opacity**: value in range [0, 1].
-
+### Creating layer events
-#### Events
+You can add custom functions to layer events. This is useful for integrating your website with your maps, adding events for mouseovers and click events.
-##### featureOver -> (event, latlng, pos, data)
+##### layer.featureOver -> (event, latlng, pos, data)
- A callback when hovers in a feature
+ A callback when hovers in a feature.
###### CALLBACK ARGUMENTS
@@ -444,17 +589,16 @@ Promise object. You can listen for the following events:
###### EXAMPLE
``` javascript
-
layer.on('featureOver', function(e, latlng, pos, data) {
console.log("mouse over polygon with data: " + data);
});
```
-##### featureOut -> ()
+##### layer.featureOut -> ()
- A callback when hovers out a feature.
+ A callback when hovers out any feature.
-##### featureClick -> (event, latlng, pos, data)
+##### layer.featureClick -> (event, latlng, pos, data)
A callback when clicks in a feature.
@@ -464,14 +608,67 @@ Promise object. You can listen for the following events:
-##### cartodb.SQL
+### Specific UI functions
-**cartodb.SQL** is the tool you will use to access data you store in your CartoDB tables. This is a really powerful technique for returning things like: **items closest to a point**, **items ordered by date**, or **GeoJSON vector geometries**. It’s all powered with SQL and our tutorials will show you how easy it is to begin with SQL.
+There are a few functions in CartoDB.js for creating, enabling, and disabling pieces of the user-interface.
+##### cartodb.geo.ui.Tooltip
+Shows a small tooltip on hover:
``` javascript
+ var tooltip = vis.addOverlay({
+ type: 'tooltip'
+ template: '<p>{{variable}}</p>' // mustache template
+ });
+```
+
+##### cartodb.geo.ui.Tooltip.enable
+The tooltip is shown when hover on feature when is called.
- var sql = cartodb.SQL({ user: 'cartodb_user' });
+##### cartodb.geo.ui.Tooltip.disable
+The tooltip is not shown when hover on feature.
+
+
+##### cartodb.geo.ui.InfoBox
+Show an small box when the user hovers on a map feature. The position is fixed:
+
+``` javascript
+ var box = vis.addOverlay({
+ type: 'infobox',
+ template: '<p>{{name_to_display}}</p>'
+ width: 200, // width of the box
+ position: 'bottom|right' // top, bottom, left and right are available
+ });
+```
+
+##### cartodb.geo.ui.InfoBox.enable
+The tooltip is shown when hover on feature when is called.
+
+##### cartodb.geo.ui.InfoBox.disable
+The tooltip is not shown when hover on feature.
+
+##### cartodb.geo.ui.Zoom
+Shows the zoom control:
+
+``` javascript
+ vis.addOverlay({ type: 'zoom' });
+```
+##### cartodb.geo.ui.Zoom.show()
+##### cartodb.geo.ui.Zoom.hide()
+
+
+### Getting data with SQL
+
+CartoDB offers a powerful SQL API for you to query and retreive data from your CartoDB tables. The CartoDB.js offers a simple to use wrapper for sending those requests and using the results.
+
+
+##### cartodb.SQL
+
+**cartodb.SQL** is the tool you will use to access data you store in your CartoDB tables. This is a really powerful technique for returning things like: **items closest to a point**, **items ordered by date**, or **GeoJSON vector geometries**. It’s all powered with SQL and our tutorials will show you how easy it is to begin with SQL.
+
+<div class="margin20"></div>
+``` javascript
+ var sql = new cartodb.SQL({ user: 'cartodb_user' });
sql.execute("select * from table where id > {{id}}", { id: 3 })
.done(function(data) {
console.log(data.rows);
@@ -481,6 +678,7 @@ Promise object. You can listen for the following events:
console.log("error:" + err);
})
```
+<div class="margin20"></div>
It accepts the following options:
@@ -509,7 +707,7 @@ Promise object. You can listen for the following events:
You can also use done and error methods:
-```javascript
+``` javascript
sql.execute('select * from table')
.done(fn)
.error(fnError)
@@ -519,7 +717,7 @@ You can also use done and error methods:
Return the bounds [ [sw_lat, sw_lon], [ne_lat, ne_lon ] ] for the geometry resulting of specified query.
-```javascript
+``` javascript
sql.getBounds('select * form table').done(function(bounds) {
console.log(bounds);
});
@@ -530,111 +728,15 @@ Return the bounds [ [sw_lat, sw_lon], [ne_lat, ne_lon ] ] for the geometry resul
+ **sql**: a string with the sql query to calculate the bounds from.
-##### cartodb.Vis
-
-this oject allow to do a complete visualization, it manages the map and layer creation. In addiction to that allows to add different widgets like zoom, loader, infowindow, tooltips, info boxes and so on
-
-##### cartodb.createVis(map_id, vizjson_url[, options] [, callback])
-
-creates a visualization inside the map_id DOM object
-
-```javascript
- var url = 'http://examples-beta.cartodb.com/api/v1/viz/791/viz.json';
- cartodb.createVis('map', url)
- .done(function(vis, layers) {
- });
-```
-
-###### ARGUMENTS
- + **map_id**: a DOM object, for example ``$('#map')`` or a DOM id
- + **vizjson_url**: url of the vizjson object
- + **options**:
- - shareable: add facebook and twitter share buttons
- - title: adds a header with the title of the visualization
- - description: adds description to the header (as you set in the UI)
- - searchControl: adds a search control (default: false)
- - zoomControl: adds zoom control (default: true)
- - loaderControl: adds loading control (default: true)
- - center_lat: center coordinates where the map is initializated
- - center_lon
- - zoom: initial zoom
-
-##### cartodb.Vis.getNativeMap ()
-returns the native map object being used. It can be google.maps.Map or L.Map depending on the provider you setup in the UI
-
-##### cartodb.Vis.getOverlays()
-returns a list of overlays currently on the screen (see overlays description)
-
-##### cartodb.Vis.getOverlay(type)
-return the first overlay with the specified ``type``
-
-```javascript
- var zoom = vis.getOverlay('zoom')
- zoom.clean() # remove it from the screen
-```
-
-##### cartodb.Vis.getLayers()
-return an array of layers in the map. The first is the base layer
-
-##### cartodb.Vis.addOverlay(options)
-add an overlay to the map, these are the overlays you can add: zoom, tooltip, infobox
-
-###### RETURNS
-an overlay object, depending on the options.type different object will be returned, see cartodb.vis.Overlays
-
-##### cartodb.vis.Overlays
-An overlay is a control shown on top of the map.
-
-Overlay objects are always created using method ``addOverlay`` of cartodb.Vis object.
-
-An overlay is internally a ``Backbone.View`` so if you know how backbone works you can use it. If you want to use plain DOM objects you can access to ``overlay.el`` (``overlay.$el`` for jquery object).
-
-##### cartodb.geo.ui.Tooltip
-shows a small tooltip on hover
-```javascript
-var tooltip = vis.addOverlay({
- type: 'tooltip'
- template: '<p>{{variable}}</p>' // mustache template
-});
-```
-##### cartodb.geo.ui.Tooltip.enable
-the tooltip is shown when hover on feature when is called
-
-##### cartodb.geo.ui.Tooltip.disable
-the tooltip is not shown when hover on feature
-
-
-##### cartodb.geo.ui.InfoBox
-show an small box when the user hovers on a map feature. The position is fixed
-
-```javascript
-var box = vis.addOverlay({
- type: 'infobox',
- template: '<p>{{name_to_display}}</p>'
- width: 200, // width of the box
- position: 'bottom|right' // top, bottom, left and right are available
-});
-```
-
-##### cartodb.geo.ui.InfoBox.enable
-the tooltip is shown when hover on feature when is called
-
-##### cartodb.geo.ui.InfoBox.disable
-the tooltip is not shown when hover on feature
+### Versions
+Keep in mind the version of CartoDB.js you are using for development. For any live code, we recommend you link directly to the tested CartoDB.js version from your development. You can find the version at anytime as follows:
+##### **cartodb.VERSION**
-##### cartodb.geo.ui.Zoom
-shows the zoom control
+Contains the library version, should be something like '2.0.11'.
-```javascript
-vis.addOverlay({ type: 'zoom' });
-```
-##### cartodb.geo.ui.Zoom.show()
-##### cartodb.geo.ui.Zoom.hide()
-##### **cartodb.VERSION**
-Contains the library version, should be something like '2.0.1'.
28 examples/TheHobbitLocations/css/style.css
View
@@ -108,8 +108,8 @@ div.cartodb_tooltip p {
/*SYLES FOR THE CUSTOM INFOWINDOW*/
-div.cartodb-popup{
- background: transparent;
+div.cartodb-popup {
+ background: none;
width: 240px;
padding: 0;
-moz-border-radius-topright: 4px;
@@ -124,7 +124,7 @@ div.cartodb-popup a.cartodb-popup-close-button{
right: -13px;
}
-div.cartodb-popup-content-wrapper{
+div.cartodb-popup div.cartodb-popup-content-wrapper{
padding: 0;
width: 240px;
max-width: none;
@@ -177,7 +177,7 @@ div.cartodb-popup div.cartodb-popup-cont p{
opacity: .5;
}
-div.cartodb-popup-tip-container{
+div.cartodb-popup div.cartodb-popup-tip-container{
background: none;
background-color: #FFF;
width: 240px;
@@ -189,7 +189,7 @@ div.cartodb-popup-tip-container{
margin-bottom: 10px;
}
-div.cartodb-popup-tip-container::after {
+div.cartodb-popup div.cartodb-popup-tip-container::after {
position: absolute;
bottom: -10px;
left: 26px;
@@ -200,3 +200,21 @@ div.cartodb-popup-tip-container::after {
height: 0;
z-index: 1;
}
+
+div.cartodb_infobox {
+ bottom:35px!important;
+ font-family: "Helvetica",Arial;
+}
+
+div.cartodb_infobox h3 {
+ color:#333333;
+ font-size:15px;
+}
+
+div.cartodb_infobox p {
+ display:block;
+ margin:10px 0 0 0;
+ color:#788787;
+ font-size:13px;
+ line-height:16px;
+}
5 examples/TheHobbitLocations/index.html
View
@@ -2,7 +2,7 @@
<head>
<title>THE HOBBIT FILMING LOCATIONS - A Cartodb.js map</title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
- <link rel="stylesheet" href="../../v2/themes/css/cartodb.css" />
+ <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.ie.css" />
@@ -56,8 +56,7 @@
</script>
<!--Include the js. Please be sure that you use a locked version in case you go to production-->
- <!--<script src="http://libs.cartocdn.com/cartodb.js/v2/cartodb.js"></script>-->
- <script src="../../src/cartodb.js"></script>
+ <script src="http://libs.cartocdn.com/cartodb.js/v2/cartodb.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
8