Skip to content
Browse files

examples folder added to the library and popup issue solved

  • Loading branch information...
1 parent df29fa8 commit c2d1f1582d364251121ef678e9960b2de46a7efe @xavijam xavijam committed Jun 21, 2012
View
2 README.md
@@ -183,7 +183,7 @@ We strongly recommend the use of the files available in this repository. These a
# Creating an example
-Here's a [live example](http://vizzuality.github.com/cartodb-leaflet/custompopup.html)!
+Here's [live example](http://vizzuality.github.com/cartodb-leaflet/examples/custom-popup.html)!
First of all add the necessary script and css files:
View
5 css/cartodb-leaflet.css
@@ -4,9 +4,10 @@
.leaflet-popup-content p {width:100%; margin:2px 0 3px!important; padding:0; font:normal 12px Arial; color:#666666;}
/* CartoDB popup*/
-div.cartodb-popup {position:absolute; display:block; width:214px; padding:0; -webkit-transform: translateZ(1000px);/*Hack for Safari*/}
+div.cartodb-popup {position:absolute; display:block; width:214px; padding:0; -webkit-transform: translateZ(10000px);/*Hack for Safari*/}
+div.cartodb-popup:hover {cursor:default;}
div.cartodb-popup a.cartodb-popup-close-button {position:absolute; right:3px; top:2px; width:22px; height:15px; padding:4px 0 3px 0; text-align:center; font:bold 15px "Helvetica",Arial; color:#666666; text-decoration:none; line-height:15px; background:none; text-indent:0; overflow:visible}
-div.cartodb-popup a.cartodb-popup-close-button:hover {color:#333333}
+div.cartodb-popup a.cartodb-popup-close-button:hover {color:#333333; cursor:pointer}
div.cartodb-popup div.cartodb-popup-content-wrapper {width:186px; padding:25px 18px 5px 10px; margin:0; background:url('../img/sprite.png') 0 top; border:none; box-shadow:none; border-radius:0; -moz-border-radius:0; -webkit-border-radius:0}
div.cartodb-popup div.cartodb-popup-content {width:186px; max-height:200px; padding:0; margin:0; overflow-y:auto; overflow-x:hidden}
div.cartodb-popup div.cartodb-popup-content .jspTrack {background: #dddddd;}
View
118 css/style.css
@@ -12,4 +12,120 @@ header nav a {font:bold 12px "Segoe UI Bold", "Helvetica Neue", "Helvetica", Ari
em {font: bold 13px/16px "Segoe UI Bold", "Helvetica Neue", "Helvetica", Arial!important;}
h2 {font:bold 34px "Segoe UI Bold", "Helvetica Neue", "Helvetica", Arial!important;}
h3 {font: bold 23px/24px "Segoe UI Bold", "Helvetica Neue", "Helvetica", Arial!important;}
-h5 {font: bold 19px/15px "Segoe UI Bold", "Helvetica Neue", "Helvetica", Arial!important;}
+h5 {font: bold 19px/15px "Segoe UI Bold", "Helvetica Neue", "Helvetica", Arial!important;}
+
+/* Things for examples */
+form.example {position:absolute!important; top:25px; right:25px; margin:0!important; width:150px!important;
+ padding:10px!important; background:white; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; border:1px solid #CCC;
+ z-index:1000;
+}
+
+/* Checkbox */
+form.example input[type="checkbox"] {
+ background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)),
+ -webkit-linear-gradient(left, #f66 50%, #6cf 50%);
+ background-size: 100% 100%, 200% 100%;
+ background-position: 0 0, 5px 0;
+ border-radius: 25px;
+ box-shadow: inset 0 1px 4px hsla(0,0%,0%,.5),
+ inset 0 0 10px hsla(0,0%,0%,.5),
+ 0 0 0 1px hsla(0,0%,0%,.1),
+ 0 -1px 2px 1px hsla(0,0%,0%,.25),
+ 0 2px 2px 1px hsla(0,0%,100%,.5),
+ 0 -2px 10px 2px hsla(0,0%,100%,.75),
+ 0 2px 10px 2px hsla(0,0%,0%,.25);
+ cursor: pointer;
+ height: 10px;
+ padding-right: 10px;
+ position: relative;
+ width: 20px!important;
+ margin:0!important;
+ left:0;
+ -webkit-appearance: none;
+ -webkit-transition: .15s;
+}
+form.example input[type="checkbox"]:after {
+ background-color: #eee;
+ background-image: -webkit-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
+ background-image: -moz-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
+ border-radius: 25px;
+ box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,1),
+ inset 0 -1px 1px 1px hsla(0,0%,0%,.25),
+ 0 1px 3px 1px hsla(0,0%,0%,.5),
+ 0 0 2px hsla(0,0%,0%,.25);
+ content: '';
+ display: block;
+ height: 10px;
+ left: 0;
+ position: relative;
+ top: 0;
+ width: 10px;
+}
+form.example input[type="checkbox"]:checked {
+ background-position: 0 0, 15px 0;
+ padding-left: 10px;
+ padding-right: 0;
+}
+form.example input[type="checkbox"]:hover:before {
+ background: hsla(0,0%,0%,.25);
+ border-radius: 10px;
+ color: #e4ded4;
+ content: '';
+ font: 12px/20px sans-serif;
+ height: 20px;
+ left: 25px;
+ letter-spacing: 1px;
+ position: absolute;
+ text-align: center;
+ text-transform: uppercase;
+ top: -5px;
+ width: 20px;
+}
+form.example input[type="checkbox"]:checked:hover:before {
+ content: '';
+}
+
+/* Range */
+
+form.example input[type="range"] {
+ background-image: -webkit-linear-gradient(left, hsla(0,0%,100%,.1) 45%, transparent 45%),
+ -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)),
+ -webkit-linear-gradient(left, #f66, #6cf);
+ background-size: 3px 3px, 100% 100%, 100% 100%;
+ border-radius: 25px;
+ box-shadow: inset 0 1px 4px hsla(0,0%,0%,.5),
+ inset 0 0 10px hsla(0,0%,0%,.5),
+ 0 0 0 1px hsla(0,0%,0%,.1),
+ 0 -1px 2px 1px hsla(0,0%,0%,.25),
+ 0 2px 2px 1px hsla(0,0%,100%,.5),
+ 0 -2px 10px 2px hsla(0,0%,100%,.75),
+ 0 2px 10px 2px hsla(0,0%,0%,.25);
+ cursor: ew-resize;
+ height: 10px;
+ position: relative;
+ width: 150px!important;
+ margin:0!important;
+ left:0;
+ -webkit-appearance: none;
+ -webkit-transition: .15s;
+}
+form.example input[type="range"]::-webkit-slider-thumb {
+ background-color: #eee;
+ background-image: -webkit-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
+ border-radius: 25px;
+ box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,1),
+ inset 0 -1px 1px 1px hsla(0,0%,0%,.25),
+ 0 1px 3px 1px hsla(0,0%,0%,.5),
+ 0 0 2px hsla(0,0%,0%,.25);
+ content: '';
+ display: block;
+ height: 10px;
+ left: 0;
+ position: relative;
+ top: 0;
+ width: 10px;
+ -webkit-appearance: none;
+}
+
+form.example p {width:auto!important; display:block; letter-spacing:0; padding-bottom:5px; margin:0!important; text-align:center; font:normal 13px Arial; color:#666666;}
+form.example label {margin:0 0 0 26px; font:normal 13px Arial; color:#666666;}
View
4 dist/cartodb-popup-min.js
@@ -1,2 +1,2 @@
-/*1.1*/L.CartoDBPopup=L.Class.extend({includes:L.Mixin.Events,options:{minWidth:50,maxWidth:300,maxHeight:null,autoPan:true,closeButton:true,offset:new L.Point(58,2),autoPanPadding:new L.Point(5,5),className:""},initialize:function(a,b){L.Util.setOptions(this,a);this._source=b},onAdd:function(a){this._map=a;if(!this._container){this._initLayout()}this._updateContent();this._container.style.opacity="0";a._panes.popupPane.appendChild(this._container);a.on("viewreset",this._updatePosition,this);if(a.options.closePopupOnClick){a.on("preclick",this._close,this)}this._update();this._container.style.opacity="1"},onRemove:function(a){a._panes.popupPane.removeChild(this._container);L.Util.falseFn(this._container.offsetWidth);a.off("viewreset",this._updatePosition,this).off("preclick",this._close,this);this._container.style.opacity="0";this._map=null},setLatLng:function(a){this._latlng=a;this._update();return this},setContent:function(a){this._content=a;this._update();return this},_close:function(){var b=this._map;if(b){b._popup=null;var c=this._container,a=this;emile(c,{bottom:"-="+10+"px",opacity:0,duration:100,after:function(){b.removeLayer(a).fire("popupclose",{popup:a})}})}},_initLayout:function(){var c="cartodb-popup",a=this._container=L.DomUtil.create("div",c+" "+this.options.className),b;if(this.options.closeButton){b=this._closeButton=L.DomUtil.create("a",c+"-close-button",a);b.href="#close";b.innerHTML="x";L.DomEvent.addListener(b,"click",this._onCloseButtonClick,this);L.DomEvent.addListener(b,"touchend",this._onCloseButtonClick,this);L.DomEvent.disableClickPropagation(b)}var d=this._wrapper=L.DomUtil.create("div",c+"-content-wrapper",a);L.DomEvent.disableClickPropagation(d);this._contentNode=L.DomUtil.create("div",c+"-content",d);L.DomEvent.addListener(this._contentNode,"mousewheel",L.DomEvent.stopPropagation);this._tipContainer=L.DomUtil.create("div",c+"-tip-container",a);this._tip=L.DomUtil.create("div",c+"-tip",this._tipContainer)},_update:function(){if(!this._map){return}this._container.style.visibility="hidden";this._updateContent();this._updateLayout();this._updatePosition();this._container.style.opacity=0;this._container.style.visibility="visible";emile(this._container,{opacity:1,duration:200});this._adjustPan()},_updateContent:function(){if(!this._content){return}if(typeof this._content==="string"){this._contentNode.innerHTML=this._content}else{this._contentNode.innerHTML="";var a="";for(var b in this._content){if(b=="cartodb_id"){this._tipContainer.innerHTML="<label>id: <strong>"+this._content[b]+"</strong></label>"}else{a+="<label>"+b+"</label>";a+='<p class="'+((this._content[b]!=null&&this._content[b]!="")?"":"empty")+'">'+(this._content[b]||"empty")+"</p>"}}this._contentNode.innerHTML=a}this.fire("contentupdate")},_updateLayout:function(){var b=this._contentNode;b.style.width="";b.style.whiteSpace="nowrap";var c=b.offsetWidth;c=Math.min(c,this.options.maxWidth);c=Math.max(c,this.options.minWidth);b.style.width=(c+1)+"px";b.style.whiteSpace="";b.style.height="";var a=b.offsetHeight,d=this.options.maxHeight,e=" leaflet-popup-scrolled";if(d&&a>d){b.style.height=d+"px";b.className+=e}else{b.className=b.className.replace(e,"")}this._containerWidth=this._container.offsetWidth},_updatePosition:function(){var a=this._map.latLngToLayerPoint(this._latlng);this._containerBottom=-a.y-this.options.offset.y;this._containerLeft=a.x-Math.round(this._containerWidth/2)+this.options.offset.x;this._container.style.bottom=this._containerBottom+"px";this._container.style.left=this._containerLeft+"px"},_adjustPan:function(){if(!this.options.autoPan){return}var g=this._map,d=this._container.offsetHeight,c=this._containerWidth,a=new L.Point(this._containerLeft,-d-this._containerBottom),h=g.layerPointToContainerPoint(a),f=new L.Point(0,0),e=this.options.autoPanPadding,b=g.getSize();if(h.x<0){f.x=h.x-e.x}if(h.x+c>b.x){f.x=h.x+c-b.x+e.x}if(h.y<0){f.y=h.y-e.y}if(h.y+d>b.y){f.y=h.y+d-b.y+e.y}if(f.x||f.y){g.panBy(f)}},_onCloseButtonClick:function(a){this._close();L.DomEvent.stop(a)}});
-!function(ae){function O(f,e){f=typeof f=="string"?document.getElementById(f):f,e=C(e);var h={duration:e.duration,easing:e.easing,after:e.after};delete e.duration,delete e.easing,delete e.after;if(aa&&typeof h.easing!="function"){return D(f,e,h)}var g=N(e,function(d,c){d=K(d);return P(d) in X&&Y.test(c)?[d,c+"px"]:[d,c]});E(f,g,h)}function C(e){var d={};for(var f in e){d[f]=e[f],f=="after"&&delete e[f]}return d}function D(r,q,p){var o=[],n=[],l=p.duration||1000,h=p.easing||"ease-out",g="";l=l+"ms",r.addEventListener(T,function e(){r.setAttribute("style",g),p.after&&p.after(),r.removeEventListener(T,e,!0)},!0),setTimeout(function(){var b;for(b in q){q.hasOwnProperty(b)&&o.push(K(b)+" "+l+" "+h)}for(b in q){var a=P(b) in X&&Y.test(q[b])?q[b]+"px":q[b];q.hasOwnProperty(b)&&(r.style[P(b)]=a)}g=r.getAttribute("style"),o=o.join(","),r.style[aa+"Transition"]=o},10)}function E(z,y,x,w){x=x||{};var v=F(y),u=z.currentStyle?z.currentStyle:getComputedStyle(z,null),t={},s=+(new Date),r,q=x.duration||200,p=s+q,o,n=x.easing||function(b){return -Math.cos(b*Math.PI)/2+0.5};for(r in v){t[r]=G(u[r])}o=setInterval(function(){var a=+(new Date),d,c=a>p?1:(a-s)/q;for(d in v){z.style[d]=v[d].f(t[d].v,v[d].v,n(c))+v[d].u}a>p&&(clearInterval(o),x.after&&x.after(),w&&setTimeout(w,1))},10)}function F(b){var j,i={},h=U.length,g;ad.innerHTML='<div style="'+b+'"></div>',j=ad.childNodes[0].style;while(h--){(g=j[U[h]])&&(i[U[h]]=G(g))}return i}function G(e){var d=parseFloat(e),f=e?e.replace(/^[\-\d\.]+/,""):e;return isNaN(d)?{v:f,f:H,u:""}:{v:d,f:J,u:f}}function H(r,q,p){var o=2,n,m,l,k=[],j=[];while((n=3)&&(m=arguments[o-1])&&o--){if(I(m,0)=="r"){m=m.match(/\d+/g);while(n--){k.push(~~m[n])}}else{m.length==4&&(m="#"+I(m,1)+I(m,1)+I(m,2)+I(m,2)+I(m,3)+I(m,3));while(n--){k.push(parseInt(I(m,1+n*2,2),16))}}}while(n--){l=~~(k[n+3]+(k[n]-k[n+3])*p),j.push(l<0?0:l>255?255:l)}return"rgb("+j.join(",")+")"}function I(e,d,f){return e.substr(d,f||1)}function J(e,d,f){return(e+(d-e)*f).toFixed(3)}function K(b){if(b.toUpperCase()===b){return b}return b.replace(/([a-zA-Z0-9])([A-Z])/g,function(e,d,f){return d+"-"+f}).toLowerCase()}function N(d,c){return Q(d,function(b,f){var e=c?c(f,b):[f,b];return e[0]+":"+e[1]+";"}).join("")}function P(b){return b.replace(/-(.)/g,function(d,c){return c.toUpperCase()})}function Q(g,f,j){var i=[],h;for(h in g){i.push(f.call(j,g[h],h,g))}return i}var ad=document.createElement("div"),ac=["webkit","Moz","O"],ab=3,aa,Z,Y=/\d+$/,X={},W="backgroundColor borderBottomColor borderLeftColor borderRightColor borderTopColor color fontWeight lineHeight opacity outlineColor zIndex",V="top bottom left right borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing borderRadius marginBottom marginLeft marginRight marginTop width height maxHeight maxWidth minHeight minWidth paddingBottom paddingLeft paddingRight paddingTop fontSize wordSpacing textIndent letterSpacing outlineWidth outlineOffset",U=(W+" "+V).split(" ");while(ab--){Z=ac[ab],ad.style.cssText="-"+Z.toLowerCase()+"-transition-property:opacity;",typeof ad.style[Z+"TransitionProperty"]!="undefined"&&(aa=Z)}var T=/^w/.test(aa)?"webkitTransitionEnd":"transitionend";for(var S=V.split(" "),R=S.length;R--;){X[S[R]]=1}var M=ae.emile;O.noConflict=function(){ae.emile=M;return this},ae.emile=O}(this);
+/*1.1*/L.CartoDBPopup=L.Class.extend({includes:L.Mixin.Events,options:{minWidth:50,maxWidth:300,maxHeight:null,autoPan:true,closeButton:true,offset:new L.Point(58,2),autoPanPadding:new L.Point(5,5),className:""},initialize:function(options,source){L.Util.setOptions(this,options);this._source=source},onAdd:function(map){this._map=map;if(!this._container){this._initLayout()}this._updateContent();this._container.style.opacity="0";map._panes.popupPane.appendChild(this._container);map.on("viewreset",this._updatePosition,this);if(map.options.closePopupOnClick){map.on("preclick",this._close,this)}this._update();this._container.style.opacity="1"},onRemove:function(map){map._panes.popupPane.removeChild(this._container);L.Util.falseFn(this._container.offsetWidth);map.off("viewreset",this._updatePosition,this).off("preclick",this._close,this);this._container.style.opacity="0";this._map=null},setLatLng:function(latlng){this._latlng=latlng;this._update();return this},setContent:function(content){this._content=content;this._update();return this},_close:function(){var map=this._map;if(map){map._popup=null;var div=this._container,that=this;emile(div,{bottom:"-="+10+"px",opacity:0,duration:100,after:function(){map.removeLayer(that).fire("popupclose",{popup:that})}})}},_initLayout:function(){var prefix="cartodb-popup",container=this._container=L.DomUtil.create("div",prefix+" "+this.options.className),closeButton;if(this.options.closeButton){closeButton=this._closeButton=L.DomUtil.create("a",prefix+"-close-button",container);closeButton.href="#close";closeButton.innerHTML="x";L.DomEvent.addListener(closeButton,"click",this._onCloseButtonClick,this);L.DomEvent.addListener(closeButton,"touchend",this._onCloseButtonClick,this);L.DomEvent.disableClickPropagation(closeButton)}var wrapper=this._wrapper=L.DomUtil.create("div",prefix+"-content-wrapper",container);L.DomEvent.addListener(this._wrapper,"click",L.DomEvent.stopPropagation);L.DomEvent.disableClickPropagation(wrapper);this._contentNode=L.DomUtil.create("div",prefix+"-content",wrapper);L.DomEvent.addListener(this._contentNode,"mousewheel",L.DomEvent.stopPropagation);this._tipContainer=L.DomUtil.create("div",prefix+"-tip-container",container);this._tip=L.DomUtil.create("div",prefix+"-tip",this._tipContainer)},_update:function(){if(!this._map){return}this._container.style.visibility="hidden";this._updateContent();this._updateLayout();this._updatePosition();this._container.style.opacity=0;this._container.style.visibility="visible";emile(this._container,{opacity:1,duration:200});this._adjustPan()},_updateContent:function(){if(!this._content){return}if(typeof this._content==="string"){this._contentNode.innerHTML=this._content}else{this._contentNode.innerHTML="";var html="";for(var column in this._content){if(column=="cartodb_id"){this._tipContainer.innerHTML="<label>id: <strong>"+this._content[column]+"</strong></label>"}else{html+="<label>"+column+"</label>";html+='<p class="'+((this._content[column]!=null&&this._content[column]!="")?"":"empty")+'">'+(this._content[column]||"empty")+"</p>"}}this._contentNode.innerHTML=html}this.fire("contentupdate")},_updateLayout:function(){var container=this._contentNode;container.style.width="";container.style.whiteSpace="nowrap";var width=container.offsetWidth;width=Math.min(width,this.options.maxWidth);width=Math.max(width,this.options.minWidth);container.style.width=(width+1)+"px";container.style.whiteSpace="";container.style.height="";var height=container.offsetHeight,maxHeight=this.options.maxHeight,scrolledClass=" leaflet-popup-scrolled";if(maxHeight&&height>maxHeight){container.style.height=maxHeight+"px";container.className+=scrolledClass}else{container.className=container.className.replace(scrolledClass,"")}this._containerWidth=this._container.offsetWidth},_updatePosition:function(){var pos=this._map.latLngToLayerPoint(this._latlng);this._containerBottom=-pos.y-this.options.offset.y;this._containerLeft=pos.x-Math.round(this._containerWidth/2)+this.options.offset.x;this._container.style.bottom=this._containerBottom+"px";this._container.style.left=this._containerLeft+"px"},_adjustPan:function(){if(!this.options.autoPan){return}var map=this._map,containerHeight=this._container.offsetHeight,containerWidth=this._containerWidth,layerPos=new L.Point(this._containerLeft,-containerHeight-this._containerBottom),containerPos=map.layerPointToContainerPoint(layerPos),adjustOffset=new L.Point(0,0),padding=this.options.autoPanPadding,size=map.getSize();if(containerPos.x<0){adjustOffset.x=containerPos.x-padding.x}if(containerPos.x+containerWidth>size.x){adjustOffset.x=containerPos.x+containerWidth-size.x+padding.x}if(containerPos.y<0){adjustOffset.y=containerPos.y-padding.y}if(containerPos.y+containerHeight>size.y){adjustOffset.y=containerPos.y+containerHeight-size.y+padding.y}if(adjustOffset.x||adjustOffset.y){map.panBy(adjustOffset)}},_onCloseButtonClick:function(e){this._close();L.DomEvent.stop(e)}});
+!function(a){function A(a,b){a=typeof a=="string"?document.getElementById(a):a,b=z(b);var c={duration:b.duration,easing:b.easing,after:b.after};delete b.duration,delete b.easing,delete b.after;if(e&&typeof c.easing!="function"){return y(a,b,c)}var d=q(b,function(a,b){a=r(a);return p(a) in h&&g.test(b)?[a,b+"px"]:[a,b]});x(a,d,c)}function z(a){var b={};for(var c in a){b[c]=a[c],c=="after"&&delete a[c]}return b}function y(a,b,c){var d=[],f=[],i=c.duration||1000,j=c.easing||"ease-out",k="";i=i+"ms",a.addEventListener(l,function m(){a.setAttribute("style",k),c.after&&c.after(),a.removeEventListener(l,m,!0)},!0),setTimeout(function(){var c;for(c in b){b.hasOwnProperty(c)&&d.push(r(c)+" "+i+" "+j)}for(c in b){var f=p(c) in h&&g.test(b[c])?b[c]+"px":b[c];b.hasOwnProperty(c)&&(a.style[p(c)]=f)}k=a.getAttribute("style"),d=d.join(","),a.style[e+"Transition"]=d},10)}function x(a,b,c,d){c=c||{};var e=w(b),f=a.currentStyle?a.currentStyle:getComputedStyle(a,null),g={},h=+(new Date),i,j=c.duration||200,k=h+j,l,m=c.easing||function(a){return -Math.cos(a*Math.PI)/2+0.5};for(i in e){g[i]=v(f[i])}l=setInterval(function(){var b=+(new Date),f,i=b>k?1:(b-h)/j;for(f in e){a.style[f]=e[f].f(g[f].v,e[f].v,m(i))+e[f].u}b>k&&(clearInterval(l),c.after&&c.after(),d&&setTimeout(d,1))},10)}function w(a){var c,d={},e=k.length,f;b.innerHTML='<div style="'+a+'"></div>',c=b.childNodes[0].style;while(e--){(f=c[k[e]])&&(d[k[e]]=v(f))}return d}function v(a){var b=parseFloat(a),c=a?a.replace(/^[\-\d\.]+/,""):a;return isNaN(b)?{v:c,f:u,u:""}:{v:b,f:s,u:c}}function u(a,b,c){var d=2,e,f,g,h=[],i=[];while((e=3)&&(f=arguments[d-1])&&d--){if(t(f,0)=="r"){f=f.match(/\d+/g);while(e--){h.push(~~f[e])}}else{f.length==4&&(f="#"+t(f,1)+t(f,1)+t(f,2)+t(f,2)+t(f,3)+t(f,3));while(e--){h.push(parseInt(t(f,1+e*2,2),16))}}}while(e--){g=~~(h[e+3]+(h[e]-h[e+3])*c),i.push(g<0?0:g>255?255:g)}return"rgb("+i.join(",")+")"}function t(a,b,c){return a.substr(b,c||1)}function s(a,b,c){return(a+(b-a)*c).toFixed(3)}function r(a){if(a.toUpperCase()===a){return a}return a.replace(/([a-zA-Z0-9])([A-Z])/g,function(a,b,c){return b+"-"+c}).toLowerCase()}function q(a,b){return o(a,function(a,c){var d=b?b(c,a):[c,a];return d[0]+":"+d[1]+";"}).join("")}function p(a){return a.replace(/-(.)/g,function(a,b){return b.toUpperCase()})}function o(a,b,c){var d=[],e;for(e in a){d.push(b.call(c,a[e],e,a))}return d}var b=document.createElement("div"),c=["webkit","Moz","O"],d=3,e,f,g=/\d+$/,h={},i="backgroundColor borderBottomColor borderLeftColor borderRightColor borderTopColor color fontWeight lineHeight opacity outlineColor zIndex",j="top bottom left right borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing borderRadius marginBottom marginLeft marginRight marginTop width height maxHeight maxWidth minHeight minWidth paddingBottom paddingLeft paddingRight paddingTop fontSize wordSpacing textIndent letterSpacing outlineWidth outlineOffset",k=(i+" "+j).split(" ");while(d--){f=c[d],b.style.cssText="-"+f.toLowerCase()+"-transition-property:opacity;",typeof b.style[f+"TransitionProperty"]!="undefined"&&(e=f)}var l=/^w/.test(e)?"webkitTransitionEnd":"transitionend";for(var m=j.split(" "),n=m.length;n--;){h[m[n]]=1}var B=a.emile;A.noConflict=function(){a.emile=B;return this},a.emile=A}(this);
View
5 dist/cartodb-popup.js
@@ -1,7 +1,7 @@
/**
* @name cartodb-popup
- * @version 1.0 [May 18, 2012]
+ * @version 1.1 [June 21, 2012]
* @author: jmedina@vizzuality.com
* @fileoverview <b>Author:</b> jmedina@vizzuality.com<br/> <b>Licence:</b>
* Licensed under <a
@@ -131,6 +131,9 @@ L.CartoDBPopup = L.Class.extend({
container = this._container = L.DomUtil.create('div', prefix + ' ' + this.options.className),
closeButton;
+ L.DomEvent.addListener(container, 'mousedown', L.DomEvent.stopPropagation);
+ L.DomEvent.addListener(container, 'touchend', L.DomEvent.stopPropagation);
+
if (this.options.closeButton) {
closeButton = this._closeButton = L.DomUtil.create('a', prefix + '-close-button', container);
closeButton.href = '#close';
View
65 examples/custom-popup.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
+ <title>CartoDB + Leaflet | Custom infowindow</title>
+ <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
+ <style>body,html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;} #map {height:100%;}</style>
+ <link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /><![endif]-->
+ <link href="../css/style.css" rel="stylesheet" type="text/css">
+ <link href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+ <script src="http://code.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
+ <script type="text/javascript" src="../js/wax.leaf.min-6.0.5-touched.js"></script>
+ <script type="text/javascript" src="../dist/cartodb-leaflet-min.js"></script>
+ <script type="text/javascript" src="../dist/cartodb-popup-min.js"></script>
+
+ <script type="text/javascript">
+ function initialize() {
+ var map = new L.Map('map').setView(new L.LatLng(43.718379593199494, -3.99772644042969), 4)
+ , mapboxUrl = 'http://{s}.tiles.mapbox.com/v3/cartodb.map-1nh578vv/{z}/{x}/{y}.png'
+ , mapbox = new L.TileLayer(mapboxUrl, {maxZoom: 18, attribution: "Powered by Leaflet and Mapbox"});
+ map.addLayer(mapbox,true);
+
+ // Create a CartoDB popup
+ var popup = new L.CartoDBPopup();
+
+ // Now the CartoDB layer, the earthquakes
+ var earthquakes = new L.CartoDBLayer({
+ map: map,
+ user_name:"examples",
+ table_name: 'earthquakes',
+ query: "SELECT cartodb_id,the_geom_webmercator,the_geom,magnitude FROM {{table_name}}",
+ tile_style: "#{{table_name}}{marker-fill:#E25B5B}",
+ interactivity: "cartodb_id, magnitude",
+ featureOver: function(ev,latlng,pos,data) {
+ document.body.style.cursor = "pointer";
+ },
+ featureOut: function() {
+ document.body.style.cursor = "default";
+ },
+ featureClick: function(ev,latlng,pos,data) {
+ ev.stopPropagation();
+ // Set popup content
+ popup.setContent(data);
+
+ // Set latlng
+ popup.setLatLng(latlng);
+
+ // Show it!
+ map.openPopup(popup);
+ },
+ auto_bound: false,
+ debug: true
+ });
+ // Adding layer to map
+ map.addLayer(earthquakes);
+ }
+ </script>
+</head>
+<body onload="initialize()">
+ <div id="map"></div>
+</body>
+</html>
View
100 examples/hover-line.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
+ <title>CartoDB + Leaflet | Hover line</title>
+ <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
+ <style>body,html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;} #map {height:100%;}</style>
+ <link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /><![endif]-->
+ <link href="../css/style.css" rel="stylesheet" type="text/css">
+ <link href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+ <script src="http://code.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
+ <script type="text/javascript" src="../js/wax.leaf.min-6.0.5-touched.js"></script>
+ <script type="text/javascript" src="../dist/cartodb-leaflet-min.js"></script>
+ <script type="text/javascript" src="../dist/cartodb-popup-min.js"></script>
+
+ <script type="text/javascript">
+ function initialize() {
+ var map = new L.Map('map').setView(new L.LatLng(39.90973623453719, -99.31640625), 4)
+ , mapboxUrl = 'http://{s}.tiles.mapbox.com/v3/cartodb.map-1nh578vv/{z}/{x}/{y}.png'
+ , mapbox = new L.TileLayer(mapboxUrl, {maxZoom: 18, attribution: "Powered by Leaflet and Mapbox"});
+ map.addLayer(mapbox,true);
+
+ // Create a CartoDB leaflet popup
+ var popup = new L.CartoDBPopup()
+ // Initialize hover polyline
+ , polyline = new L.GeoJSON(null)
+ // Hover polyline style
+ , polyline_style = {color: "#333", weight: 2, opacity:1, fillOpacity: 0, clickable:false}
+ // Create the CartoDB layer
+ , usa_rivers = new L.CartoDBLayer({
+ map: map,
+ user_name:"examples",
+ table_name: 'usa_rivers',
+ query: "SELECT cartodb_id,name_full,ST_SIMPLIFY(the_geom_webmercator,0.0001) as the_geom_webmercator,ST_ASGEOJSON(ST_SIMPLIFY(the_geom,0.0001)) as geometry FROM {{table_name}}",
+ opacity: 1,
+ interactivity: "cartodb_id, name_full, geometry",
+ featureOver: function(ev,latlng,pos,data) {
+ document.body.style.cursor = "pointer";
+
+ // Show the hover polyline if it is a different feature
+ if (data.cartodb_id != polyline.cartodb_id) {
+ map.removeLayer(polyline);
+ polyline.off("featureparse");
+
+ polyline = new L.GeoJSON(null);
+ polyline.cartodb_id = data.cartodb_id;
+
+ // Change style
+ polyline.on("featureparse", function (e) {
+ e.layer.setStyle(polyline_style);
+ });
+
+ polyline.addGeoJSON(JSON.parse(data.geometry));
+ map.addLayer(polyline);
+ }
+ },
+ featureOut: function() {
+ document.body.style.cursor = "default";
+
+ // Hide and remove in any case the hover polyline
+ polyline.cartodb_id = null;
+ polyline.off("featureparse");
+ map.removeLayer(polyline)
+ },
+ featureClick: function(ev,latlng,pos,data) {
+ // Stop propagation
+ ev.stopPropagation();
+
+ // Set popup content
+ var html = '';
+ for(var column in data) {
+ if (column != "geometry") {
+ html += '<label>' + column + '</label>';
+ html += '<p>' + data[column] + '</p>';
+ }
+ }
+ popup.setContent(html);
+
+ // Set latlng
+ popup.setLatLng(latlng);
+
+ // Show it!
+ map.openPopup(popup);
+ },
+ auto_bound: false,
+ debug: false
+ });
+
+ // Adding the layer to map
+ map.addLayer(usa_rivers);
+ }
+ </script>
+</head>
+<body onload="initialize()">
+ <div id="map"></div>
+</body>
+</html>
View
394 examples/hover-point.html
@@ -1,302 +1,96 @@
-<!doctype html>
-<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
-<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
-<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
-<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
-<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
- <head>
- <meta charset="utf-8">
- <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
- <title>CartoDB | Leaflet library with interaction</title>
- <link href="http://developers.cartodb.com/stylesheets/all.css" media="screen" rel="stylesheet" type="text/css" />
- <link href="../css/style.css" media="screen" rel="stylesheet" type="text/css" />
- <script src="http://developers.cartodb.com/javascripts/all.js" type="text/javascript"></script>
- <link rel="shortcut icon" href="http://developers.cartodb.com/images/favicon.ico" />
- <script type="text/javascript">
- var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-20934186-3']); _gaq.push(['_setDomainName', 'cartodb.com']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
- </script>
- <noscript><meta http-equiv="refresh" content="0;url=http://cartodb.com/no_javascript.html"></noscript>
- </head>
- <body class="developers examples" onload="initialize()">
- <div class="background blue grid fixed">
- <header>
- <h1 class="left">
- <a href="http://cartodb.com">CartoDB</a>
- </h1>
- <nav class="right">
- <a href="http://cartodb.com/tour">Tour</a>
- <a href="http://cartodb.com/maps">Maps</a>
- <a class="selected" href="http://developers.cartodb.com">Developers</a>
- <a href="http://cartodb.com/pricing">Pricing</a>
- <a href="http://cartodb.com/login">Sign in</a>
- </nav>
- </header>
- </div>
-
- <div class="background floating">
- <section class="shadow top">
- <div class="content">
- <hgroup><h2 class="dark">CartoDB Leaflet - Hover interactivity with point</h2><em class="hard">HARD</em></hgroup>
- </div>
- <div class="content no_padding border code">
-
- <link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css" />
- <!--[if lt IE 9]> <link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /> <![endif]-->
- <link href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
- <script src="http://code.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
- <script type="text/javascript" src="../js/wax.leaf.min-6.0.5-touched.js"></script>
- <script type="text/javascript" src="../dist/cartodb-leaflet-min.js"></script>
- <script type="text/javascript" src="../dist/cartodb-popup-min.js"></script>
-
- <script type="text/javascript">
- function initialize() {
- var map = new L.Map('map').setView(new L.LatLng(40.718379593199494, -73.99772644042969), 14)
- , mapboxUrl = 'http://{s}.tiles.mapbox.com/v3/cartodb.map-1nh578vv/{z}/{x}/{y}.png'
- , mapbox = new L.TileLayer(mapboxUrl, {maxZoom: 18, attribution: "Powered by Leaflet and Mapbox"});
- map.addLayer(mapbox,true);
-
- // Create a CartoDB leaflet popup
- var popup = new L.CartoDBPopup()
- // Initialize hover point
- , point = new L.GeoJSON(null)
- // Hover point style
- , hover_style = {radius:8, color:"#333", weight:3, opacity:1, fillColor: "#F96700", fillOpacity:1, clickable:false}
- // Second cartodb layer, earthquakes
- , nyc_parks = new L.CartoDBLayer({
- map: map,
- user_name:"examples",
- table_name: 'nyc_wifi',
- query: "SELECT cartodb_id,name,address,the_geom_webmercator,ST_ASGEOJSON(the_geom) as geometry FROM {{table_name}}",
- opacity: 1,
- interactivity: "cartodb_id,name,address,geometry",
- featureOver: function(ev,latlng,pos,data) {
- document.body.style.cursor = "pointer";
-
- // Show the hover point if it is a different feature
- if (data.cartodb_id != point.cartodb_id) {
- map.removeLayer(point);
-
- point = new L.GeoJSON(JSON.parse(data.geometry),{
- pointToLayer: function(latlng) {
- return new L.CircleMarker(latlng, hover_style);
- }
- });
- point.cartodb_id = data.cartodb_id;
-
- map.addLayer(point);
- }
- },
- featureOut: function() {
- document.body.style.cursor = "default";
-
- // Hide and remove in any case the hover point
- point.cartodb_id = null;
- map.removeLayer(point)
- },
- featureClick: function(ev,latlng,pos,data) {
- // Stop propagation
- ev.stopPropagation();
-
- // Set popup content
- var html = '';
- for(var column in data) {
- if (column != "geometry") {
- html += '<label>' + column + '</label>';
- html += '<p>' + data[column] + '</p>';
- }
- }
- popup.setContent(html);
-
- // Set latlng
- popup.setLatLng(latlng);
-
- // Show it!
- map.openPopup(popup);
- },
- auto_bound: false,
- debug: false
- });
-
- // Adding the layer to map
- map.addLayer(nyc_parks);
- }
- </script>
- <div id="map"></div>
- <span class="separator"></span>
- </div>
- <a class="back" href="http://developers.cartodb.com/">Back</a>
- </section>
-
- <section class="shadow leftwards bottom nav">
- <div class="content overflow">
- <div class="left">
- <h3 class="big">Overview</h3>
- <p class="light margin15">This is an example using the CartoDB Leaflet library with hover interactivity. We encourage you to read Leaflet documentation about <a href="http://leaflet.cloudmade.com/examples/geojson.html" target="_blank">how to manage a GeoJSON</a>.</p>
-
- <h5 class="margin30">Code</h5>
- <pre class="margin10" data-language="javascript">
-/*
- * Remember to load all the necessary files
- * And after that, when the document will be ready, do this:
- */
-
-function initialize() {
- var map = new L.Map('map').setView(new L.LatLng(40.718379593199494, -73.99772644042969), 14)
- , mapboxUrl = 'http://{s}.tiles.mapbox.com/v3/cartodb.map-1nh578vv/{z}/{x}/{y}.png'
- , mapbox = new L.TileLayer(mapboxUrl, {maxZoom: 18, attribution: "Powered by Leaflet and Mapbox"});
- map.addLayer(mapbox,true);
-
- // Create a CartoDB leaflet popup
- var popup = new L.CartoDBPopup()
- // Initialize hover polygon
- , polygon = new L.GeoJSON(null)
- // Hover polygon style
- , polygon_style = {color: "#333", weight: 2, opacity:1, fillOpacity: 0, clickable:false}
- // Second cartodb layer, earthquakes
- , nyc_parks = new L.CartoDBLayer({
- map: map,
- user_name:"examples",
- table_name: 'nyc_parks',
- query: "SELECT cartodb_id,location,acres,ST_SIMPLIFY(the_geom_webmercator,0.0001) as the_geom_webmercator,ST_ASGEOJSON(ST_SIMPLIFY(the_geom,0.0001)) as geometry FROM {{table_name}}",
- opacity: 1,
- interactivity: "cartodb_id, location, geometry, acres",
- featureOver: function(ev,latlng,pos,data) {
- document.body.style.cursor = "pointer";
-
- // Show the hover polygon if it is a different feature
- if (data.cartodb_id != polygon.cartodb_id) {
- map.removeLayer(polygon);
- polygon.off("featureparse");
+<!DOCTYPE html>
+<html>
+<head>
+ <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
+ <title>CartoDB + Leaflet | Hover point</title>
+ <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
+ <style>body,html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;} #map {height:100%;}</style>
+ <link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /><![endif]-->
+ <link href="../css/style.css" rel="stylesheet" type="text/css">
+ <link href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+ <script src="http://code.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
+ <script type="text/javascript" src="../js/wax.leaf.min-6.0.5-touched.js"></script>
+ <script type="text/javascript" src="../dist/cartodb-leaflet-min.js"></script>
+ <script type="text/javascript" src="../dist/cartodb-popup-min.js"></script>
+
+ <script type="text/javascript">
+ function initialize() {
+ var map = new L.Map('map').setView(new L.LatLng(40.718379593199494, -73.99772644042969), 14)
+ , mapboxUrl = 'http://{s}.tiles.mapbox.com/v3/cartodb.map-1nh578vv/{z}/{x}/{y}.png'
+ , mapbox = new L.TileLayer(mapboxUrl, {maxZoom: 18, attribution: "Powered by Leaflet and Mapbox"});
+ map.addLayer(mapbox,true);
+
+ // Create a CartoDB leaflet popup
+ var popup = new L.CartoDBPopup()
+ // Initialize hover point
+ , point = new L.GeoJSON(null)
+ // Hover point style
+ , hover_style = {radius:8, color:"#333", weight:3, opacity:1, fillColor: "#F96700", fillOpacity:1, clickable:false}
+ // Create the CartoDB layer
+ , nyc_wifi = new L.CartoDBLayer({
+ map: map,
+ user_name:"examples",
+ table_name: 'nyc_wifi',
+ query: "SELECT cartodb_id,name,address,the_geom_webmercator,ST_ASGEOJSON(the_geom) as geometry FROM {{table_name}}",
+ opacity: 1,
+ interactivity: "cartodb_id,name,address,geometry",
+ featureOver: function(ev,latlng,pos,data) {
+ document.body.style.cursor = "pointer";
+
+ // Show the hover point if it is a different feature
+ if (data.cartodb_id != point.cartodb_id) {
+ map.removeLayer(point);
+
+ point = new L.GeoJSON(JSON.parse(data.geometry),{
+ pointToLayer: function(latlng) {
+ return new L.CircleMarker(latlng, hover_style);
+ }
+ });
+ point.cartodb_id = data.cartodb_id;
+
+ map.addLayer(point);
+ }
+ },
+ featureOut: function() {
+ document.body.style.cursor = "default";
+
+ // Hide and remove in any case the hover point
+ point.cartodb_id = null;
+ map.removeLayer(point)
+ },
+ featureClick: function(ev,latlng,pos,data) {
+ // Stop propagation
+ ev.stopPropagation();
+
+ // Set popup content
+ var html = '';
+ for(var column in data) {
+ if (column != "geometry") {
+ html += '<label>' + column + '</label>';
+ html += '<p>' + data[column] + '</p>';
+ }
+ }
+ popup.setContent(html);
+
+ // Set latlng
+ popup.setLatLng(latlng);
+
+ // Show it!
+ map.openPopup(popup);
+ },
+ auto_bound: false,
+ debug: false
+ });
- polygon = new L.GeoJSON(null);
- polygon.cartodb_id = data.cartodb_id;
-
- // Change style
- polygon.on("featureparse", function (e) {
- e.layer.setStyle(polygon_style);
- });
-
- polygon.addGeoJSON(JSON.parse(data.geometry));
- map.addLayer(polygon);
- }
- },
- featureOut: function() {
- document.body.style.cursor = "default";
-
- // Hide and remove in any case the hover polygon
- polygon.cartodb_id = null;
- polygon.off("featureparse");
- map.removeLayer(polygon)
- },
- featureClick: function(ev,latlng,pos,data) {
- // Stop propagation
- ev.stopPropagation();
-
- // Set popup content
- var html = '';
- for(var column in data) {
- if (column != "geometry") {
- html += '<label>' + column + '</label>';
- html += '<p>' + data[column] + '</p>';
- }
- }
- popup.setContent(html);
-
- // Set latlng
- popup.setLatLng(latlng);
-
- // Show it!
- map.openPopup(popup);
- },
- auto_bound: false,
- debug: false
- });
-
- // Adding the layer to map
- map.addLayer(nyc_parks);
-}</pre>
- </div>
- <div class="right">
- <a class="button blue download" href="https://github.com/Vizzuality/cartodb-leaflet/zipball/gh-pages">Download this library</a>
- <h3 class="big margin40">Related resources</h3>
- <ul class="vt related">
- <li><a href="http://developers.cartodb.com/documentation/cartodb-apis.html#maps_api">CartoDB Maps API</a></li>
- <li><a href="http://vizzuality.github.com/cartodb-gmapsv3">CartoDB Google Maps library</a></li>
- <li><a href="/examples/">CartoDB Leaflet examples</a></li>
- </ul>
- </div>
- </div>
- </section>
-
- <section class="grey carto shadow margin40">
- <div class="content less_padding">
- <div class="left">
- <h2 class="compact dark">Further info? Take a look a the docs</h2>
- <p class="light">Visit our support area and get some help from the community.</p>
- </div>
- <div class="right">
- <a class="button blue right margin5" href="http://developers.cartodb.com/documentation/using-cartodb.html">Go to documentation</a>
- </div>
- </div>
- </section>
-
- <div class="background white border margin40">
- <section>
- <div class="content less_padding">
- <div class="left">
- <h3 class="lighter margin10">CartoDB is also used by</h3>
- </div>
- <div class="right">
- <ul class="logos">
- <li><a class="unep-wcmc" target="_blank" href="http://www.unep-wcmc.org/"><img alt="UNEP-WCMC" title="UNEP-WCMC" src="http://developers.cartodb.com/images/logos/unep-wcmc.png" /></a></li>
- <li><a class="nasa" target="nasa" href="http://www.nasa.gov"><img alt="NASA" title="NASA" src="http://developers.cartodb.com/images/logos/nasa.png" /></a></li>
- <li><a class="diversity" target="_blank" href="http://www.cbd.int/"><img alt="Convention on Biological Diversity" title="Convention on Biological Diversity" src="http://developers.cartodb.com/images/logos/diversity.png" /></a></li>
- <li><a class="wsj" target="_blank" href="http://europe.wsj.com/home-page"><img alt="Wall Street Journal" title="Wall Street Journal" src="http://developers.cartodb.com/images/logos/wsj.png" /></a></li>
- <li><a class="wri" target="_blank" href="http://www.wri.org/"><img alt="WORLD RESOURCES INSTITUTE" title="WORLD RESOURCES INSTITUTE" src="http://developers.cartodb.com/images/logos/wri.png" /></a></li>
- </ul>
- </div>
- </div>
- </section>
- </div>
-
-
- <div class="background white border">
- <section>
- <div class="content no_padding">
- <ul class="hz">
- <li>
- <h3>Common questions</h3>
- </li>
- <li>
- <h3>Do you have any educational plans?</h3>
- <p class="light margin15">Yes we have. <a href="mailto:wadus@cartodb.com">Contact us</a> for getting more information. We are quite friends of academics so, you will get a lot of benefits.</p>
- </li>
- <li>
- <h3>Need something extra? Let us now.</h3>
- <p class="light margin15">Need us to help you with your visualization or application? Does your organization have unique requirements that don’t quite fit our plans? <a href="mailto:support@cartodb.com">Contact us</a>.</p>
- </li>
- </ul>
- </div>
- </section>
- </div>
-
-
- <footer>
- <div class="wrap">
- <span class="cartodb">CartoDB</span>
- <p class="lighter small left">CartoDB is a product of <a class="vizzuality" href="http://vizzuality.com">Vizzuality</a>
- </p>
- <nav class="right">
- <a href="http://cartodb.com/tour">Feature tour</a>
- <a href="http://cartodb.com/tutorial/step/1">Getting started</a>
- <a href="http://cartodb.com/maps">Maps</a>
- <a href="http://developers.cartodb.com/">Developers</a>
- <a href="http://blog.cartodb.com">Blog</a>
- <a href="http://cartodb.com/pricing">Pricing</a>
- <a href="mailto:support@cartodb.com">Contact</a>
- </nav>
- </div>
- </footer>
- </div>
- </body>
+ // Adding the layer to map
+ map.addLayer(nyc_wifi);
+ }
+ </script>
+</head>
+<body onload="initialize()">
+ <div id="map"></div>
+</body>
</html>
View
402 examples/hover-polygon.html
@@ -1,306 +1,100 @@
-<!doctype html>
-<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
-<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
-<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
-<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
-<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
- <head>
- <meta charset="utf-8">
- <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
- <title>CartoDB | Leaflet library with interaction</title>
- <link href="http://developers.cartodb.com/stylesheets/all.css" media="screen" rel="stylesheet" type="text/css" />
- <link href="../css/style.css" media="screen" rel="stylesheet" type="text/css" />
- <script src="http://developers.cartodb.com/javascripts/all.js" type="text/javascript"></script>
- <link rel="shortcut icon" href="http://developers.cartodb.com/images/favicon.ico" />
- <script type="text/javascript">
- var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-20934186-3']); _gaq.push(['_setDomainName', 'cartodb.com']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
- </script>
- <noscript><meta http-equiv="refresh" content="0;url=http://cartodb.com/no_javascript.html"></noscript>
- </head>
- <body class="developers examples" onload="initialize()">
- <div class="background blue grid fixed">
- <header>
- <h1 class="left">
- <a href="http://cartodb.com">CartoDB</a>
- </h1>
- <nav class="right">
- <a href="http://cartodb.com/tour">Tour</a>
- <a href="http://cartodb.com/maps">Maps</a>
- <a class="selected" href="http://developers.cartodb.com">Developers</a>
- <a href="http://cartodb.com/pricing">Pricing</a>
- <a href="http://cartodb.com/login">Sign in</a>
- </nav>
- </header>
- </div>
-
- <div class="background floating">
- <section class="shadow top">
- <div class="content">
- <hgroup><h2 class="dark">CartoDB Leaflet - Hover interactivity with polygons</h2><em class="hard">HARD</em></hgroup>
- </div>
- <div class="content no_padding border code">
-
- <link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css" />
- <!--[if lt IE 9]> <link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /> <![endif]-->
- <link href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
- <script src="http://code.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
- <script type="text/javascript" src="../js/wax.leaf.min-6.0.5-touched.js"></script>
- <script type="text/javascript" src="../dist/cartodb-leaflet-min.js"></script>
- <script type="text/javascript" src="../dist/cartodb-popup-min.js"></script>
-
- <script type="text/javascript">
- function initialize() {
- var map = new L.Map('map').setView(new L.LatLng(40.718379593199494, -73.99772644042969), 14)
- , mapboxUrl = 'http://{s}.tiles.mapbox.com/v3/cartodb.map-1nh578vv/{z}/{x}/{y}.png'
- , mapbox = new L.TileLayer(mapboxUrl, {maxZoom: 18, attribution: "Powered by Leaflet and Mapbox"});
- map.addLayer(mapbox,true);
-
- // Create a CartoDB leaflet popup
- var popup = new L.CartoDBPopup()
- // Initialize hover polygon
- , polygon = new L.GeoJSON(null)
- // Hover polygon style
- , polygon_style = {color: "#333", weight: 2, opacity:1, fillOpacity: 0, clickable:false}
- // Second cartodb layer, earthquakes
- , nyc_parks = new L.CartoDBLayer({
- map: map,
- user_name:"examples",
- table_name: 'nyc_parks',
- query: "SELECT cartodb_id,location,acres,ST_SIMPLIFY(the_geom_webmercator,0.0001) as the_geom_webmercator,ST_ASGEOJSON(ST_SIMPLIFY(the_geom,0.0001)) as geometry FROM {{table_name}}",
- opacity: 1,
- interactivity: "cartodb_id, location, geometry, acres",
- featureOver: function(ev,latlng,pos,data) {
- document.body.style.cursor = "pointer";
-
- // Show the hover polygon if it is a different feature
- if (data.cartodb_id != polygon.cartodb_id) {
- map.removeLayer(polygon);
- polygon.off("featureparse");
-
- polygon = new L.GeoJSON(null);
- polygon.cartodb_id = data.cartodb_id;
-
- // Change style
- polygon.on("featureparse", function (e) {
- e.layer.setStyle(polygon_style);
- });
-
- polygon.addGeoJSON(JSON.parse(data.geometry));
- map.addLayer(polygon);
- }
- },
- featureOut: function() {
- document.body.style.cursor = "default";
-
- // Hide and remove in any case the hover polygon
- polygon.cartodb_id = null;
- polygon.off("featureparse");
- map.removeLayer(polygon)
- },
- featureClick: function(ev,latlng,pos,data) {
- // Stop propagation
- ev.stopPropagation();
-
- // Set popup content
- var html = '';
- for(var column in data) {
- if (column != "geometry") {
- html += '<label>' + column + '</label>';
- html += '<p>' + data[column] + '</p>';
- }
- }
- popup.setContent(html);
-
- // Set latlng
- popup.setLatLng(latlng);
-
- // Show it!
- map.openPopup(popup);
- },
- auto_bound: false,
- debug: false
- });
-
- // Adding the layer to map
- map.addLayer(nyc_parks);
- }
- </script>
- <div id="map"></div>
- <span class="separator"></span>
- </div>
- <a class="back" href="http://developers.cartodb.com/">Back</a>
- </section>
-
- <section class="shadow leftwards bottom nav">
- <div class="content overflow">
- <div class="left">
- <h3 class="big">Overview</h3>
- <p class="light margin15">This is an example using the CartoDB Leaflet library with hover interactivity. We encourage you to read Leaflet documentation about <a href="http://leaflet.cloudmade.com/examples/geojson.html" target="_blank">how to manage a GeoJSON</a>.</p>
-
- <h5 class="margin30">Code</h5>
- <pre class="margin10" data-language="javascript">
-/*
- * Remember to load all the necessary files
- * And after that, when the document will be ready, do this:
- */
-
-function initialize() {
- var map = new L.Map('map').setView(new L.LatLng(40.718379593199494, -73.99772644042969), 14)
- , mapboxUrl = 'http://{s}.tiles.mapbox.com/v3/cartodb.map-1nh578vv/{z}/{x}/{y}.png'
- , mapbox = new L.TileLayer(mapboxUrl, {maxZoom: 18, attribution: "Powered by Leaflet and Mapbox"});
- map.addLayer(mapbox,true);
-
- // Create a CartoDB leaflet popup
- var popup = new L.CartoDBPopup()
- // Initialize hover polygon
- , polygon = new L.GeoJSON(null)
- // Hover polygon style
- , polygon_style = {color: "#333", weight: 2, opacity:1, fillOpacity: 0, clickable:false}
- // Second cartodb layer, earthquakes
- , nyc_parks = new L.CartoDBLayer({
- map: map,
- user_name:"examples",
- table_name: 'nyc_parks',
- query: "SELECT cartodb_id,location,acres,ST_SIMPLIFY(the_geom_webmercator,0.0001) as the_geom_webmercator,ST_ASGEOJSON(ST_SIMPLIFY(the_geom,0.0001)) as geometry FROM {{table_name}}",
- opacity: 1,
- interactivity: "cartodb_id, location, geometry, acres",
- featureOver: function(ev,latlng,pos,data) {
- document.body.style.cursor = "pointer";
-
- // Show the hover polygon if it is a different feature
- if (data.cartodb_id != polygon.cartodb_id) {
- map.removeLayer(polygon);
- polygon.off("featureparse");
+<!DOCTYPE html>
+<html>
+<head>
+ <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
+ <title>CartoDB + Leaflet | Hover polygon</title>
+ <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
+ <style>body,html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;} #map {height:100%;}</style>
+ <link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /><![endif]-->
+ <link href="../css/style.css" rel="stylesheet" type="text/css">
+ <link href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+ <script src="http://code.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
+ <script type="text/javascript" src="../js/wax.leaf.min-6.0.5-touched.js"></script>
+ <script type="text/javascript" src="../dist/cartodb-leaflet-min.js"></script>
+ <script type="text/javascript" src="../dist/cartodb-popup-min.js"></script>
+
+ <script type="text/javascript">
+ function initialize() {
+ var map = new L.Map('map').setView(new L.LatLng(40.718379593199494, -73.99772644042969), 14)
+ , mapboxUrl = 'http://{s}.tiles.mapbox.com/v3/cartodb.map-1nh578vv/{z}/{x}/{y}.png'
+ , mapbox = new L.TileLayer(mapboxUrl, {maxZoom: 18, attribution: "Powered by Leaflet and Mapbox"});
+ map.addLayer(mapbox,true);
+
+ // Create a CartoDB leaflet popup
+ var popup = new L.CartoDBPopup()
+ // Initialize hover polygon
+ , polygon = new L.GeoJSON(null)
+ // Hover polygon style
+ , polygon_style = {color: "#333", weight: 2, opacity:1, fillOpacity: 0, clickable:false}
+ // Create the CartoDB layer
+ , nyc_parks = new L.CartoDBLayer({
+ map: map,
+ user_name:"examples",
+ table_name: 'nyc_parks',
+ query: "SELECT cartodb_id,location,acres,ST_SIMPLIFY(the_geom_webmercator,0.0001) as the_geom_webmercator,ST_ASGEOJSON(ST_SIMPLIFY(the_geom,0.0001)) as geometry FROM {{table_name}}",
+ opacity: 1,
+ interactivity: "cartodb_id, location, geometry, acres",
+ featureOver: function(ev,latlng,pos,data) {
+ document.body.style.cursor = "pointer";
+
+ // Show the hover polygon if it is a different feature
+ if (data.cartodb_id != polygon.cartodb_id) {
+ map.removeLayer(polygon);
+ polygon.off("featureparse");
+
+ polygon = new L.GeoJSON(null);
+ polygon.cartodb_id = data.cartodb_id;
+
+ // Change style
+ polygon.on("featureparse", function (e) {
+ e.layer.setStyle(polygon_style);
+ });
+
+ polygon.addGeoJSON(JSON.parse(data.geometry));
+ map.addLayer(polygon);
+ }
+ },
+ featureOut: function() {
+ document.body.style.cursor = "default";
+
+ // Hide and remove in any case the hover polygon
+ polygon.cartodb_id = null;
+ polygon.off("featureparse");
+ map.removeLayer(polygon)
+ },
+ featureClick: function(ev,latlng,pos,data) {
+ // Stop propagation
+ ev.stopPropagation();
+
+ // Set popup content
+ var html = '';
+ for(var column in data) {
+ if (column != "geometry") {
+ html += '<label>' + column + '</label>';
+ html += '<p>' + data[column] + '</p>';
+ }
+ }
+ popup.setContent(html);
+
+ // Set latlng
+ popup.setLatLng(latlng);
+
+ // Show it!
+ map.openPopup(popup);
+ },
+ auto_bound: false,
+ debug: false
+ });
- polygon = new L.GeoJSON(null);
- polygon.cartodb_id = data.cartodb_id;
-
- // Change style
- polygon.on("featureparse", function (e) {
- e.layer.setStyle(polygon_style);
- });
-
- polygon.addGeoJSON(JSON.parse(data.geometry));
- map.addLayer(polygon);
- }
- },
- featureOut: function() {
- document.body.style.cursor = "default";
-
- // Hide and remove in any case the hover polygon
- polygon.cartodb_id = null;
- polygon.off("featureparse");
- map.removeLayer(polygon)
- },
- featureClick: function(ev,latlng,pos,data) {
- // Stop propagation
- ev.stopPropagation();
-
- // Set popup content
- var html = '';
- for(var column in data) {
- if (column != "geometry") {
- html += '<label>' + column + '</label>';
- html += '<p>' + data[column] + '</p>';
- }
- }
- popup.setContent(html);
-
- // Set latlng
- popup.setLatLng(latlng);
-
- // Show it!
- map.openPopup(popup);
- },
- auto_bound: false,
- debug: false
- });
-
- // Adding the layer to map
- map.addLayer(nyc_parks);
-}</pre>
- </div>
- <div class="right">
- <a class="button blue download" href="https://github.com/Vizzuality/cartodb-leaflet/zipball/gh-pages">Download this library</a>
- <h3 class="big margin40">Related resources</h3>
- <ul class="vt related">
- <li><a href="http://developers.cartodb.com/documentation/cartodb-apis.html#maps_api">CartoDB Maps API</a></li>
- <li><a href="http://vizzuality.github.com/cartodb-gmapsv3">CartoDB Google Maps library</a></li>
- <li><a href="/examples/">CartoDB Leaflet examples</a></li>
- </ul>
- </div>
- </div>
- </section>
-
- <section class="grey carto shadow margin40">
- <div class="content less_padding">
- <div class="left">
- <h2 class="compact dark">Further info? Take a look a the docs</h2>
- <p class="light">Visit our support area and get some help from the community.</p>
- </div>
- <div class="right">
- <a class="button blue right margin5" href="http://developers.cartodb.com/documentation/using-cartodb.html">Go to documentation</a>
- </div>
- </div>
- </section>
-
- <div class="background white border margin40">
- <section>
- <div class="content less_padding">
- <div class="left">
- <h3 class="lighter margin10">CartoDB is also used by</h3>
- </div>
- <div class="right">
- <ul class="logos">
- <li><a class="unep-wcmc" target="_blank" href="http://www.unep-wcmc.org/"><img alt="UNEP-WCMC" title="UNEP-WCMC" src="http://developers.cartodb.com/images/logos/unep-wcmc.png" /></a></li>
- <li><a class="nasa" target="nasa" href="http://www.nasa.gov"><img alt="NASA" title="NASA" src="http://developers.cartodb.com/images/logos/nasa.png" /></a></li>
- <li><a class="diversity" target="_blank" href="http://www.cbd.int/"><img alt="Convention on Biological Diversity" title="Convention on Biological Diversity" src="http://developers.cartodb.com/images/logos/diversity.png" /></a></li>
- <li><a class="wsj" target="_blank" href="http://europe.wsj.com/home-page"><img alt="Wall Street Journal" title="Wall Street Journal" src="http://developers.cartodb.com/images/logos/wsj.png" /></a></li>
- <li><a class="wri" target="_blank" href="http://www.wri.org/"><img alt="WORLD RESOURCES INSTITUTE" title="WORLD RESOURCES INSTITUTE" src="http://developers.cartodb.com/images/logos/wri.png" /></a></li>
- </ul>
- </div>
- </div>
- </section>
- </div>
-
-
- <div class="background white border">
- <section>
- <div class="content no_padding">
- <ul class="hz">
- <li>
- <h3>Common questions</h3>
- </li>
- <li>
- <h3>Do you have any educational plans?</h3>
- <p class="light margin15">Yes we have. <a href="mailto:wadus@cartodb.com">Contact us</a> for getting more information. We are quite friends of academics so, you will get a lot of benefits.</p>
- </li>
- <li>
- <h3>Need something extra? Let us now.</h3>
- <p class="light margin15">Need us to help you with your visualization or application? Does your organization have unique requirements that don’t quite fit our plans? <a href="mailto:support@cartodb.com">Contact us</a>.</p>
- </li>
- </ul>
- </div>
- </section>
- </div>
-
-
- <footer>
- <div class="wrap">
- <span class="cartodb">CartoDB</span>
- <p class="lighter small left">CartoDB is a product of <a class="vizzuality" href="http://vizzuality.com">Vizzuality</a>
- </p>
- <nav class="right">
- <a href="http://cartodb.com/tour">Feature tour</a>
- <a href="http://cartodb.com/tutorial/step/1">Getting started</a>
- <a href="http://cartodb.com/maps">Maps</a>
- <a href="http://developers.cartodb.com/">Developers</a>
- <a href="http://blog.cartodb.com">Blog</a>
- <a href="http://cartodb.com/pricing">Pricing</a>
- <a href="mailto:support@cartodb.com">Contact</a>
- </nav>
- </div>
- </footer>
- </div>
- </body>
+ // Adding the layer to map
+ map.addLayer(nyc_parks);
+ }
+ </script>
+</head>
+<body onload="initialize()">
+ <div id="map"></div>
+</body>
</html>
View
175 examples/index.html
@@ -1,175 +0,0 @@
-<!doctype html>
-<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
-<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
-<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
-<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
-<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
- <head>
- <meta charset="utf-8">
- <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
- <title>CartoDB | Leaflet library</title>
- <link href="http://developers.cartodb.com/stylesheets/all.css" media="screen" rel="stylesheet" type="text/css" />
- <link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
- <script src="http://developers.cartodb.com/javascripts/all.js" type="text/javascript"></script>
- <link rel="shortcut icon" href="http://developers.cartodb.com/images/favicon.ico" />
- <script type="text/javascript">
- var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-20934186-3']); _gaq.push(['_setDomainName', 'cartodb.com']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
- </script>
- <noscript><meta http-equiv="refresh" content="0;url=http://cartodb.com/no_javascript.html"></noscript>
- </head>
- <body class="developers examples" onload="initialize()">
- <div class="background blue grid fixed">
- <header>
- <h1 class="left">
- <a href="http://cartodb.com">CartoDB</a>
- </h1>
- <nav class="right">
- <a href="http://cartodb.com/tour">Tour</a>
- <a href="http://cartodb.com/maps">Maps</a>
- <a class="selected" href="http://developers.cartodb.com">Developers</a>
- <a href="http://cartodb.com/pricing">Pricing</a>
- <a href="http://cartodb.com/login">Sign in</a>
- </nav>
- </header>
- </div>
-
- <div class="background floating">
- <section class="top black no_padding shadow">
- <div class="content">
- <h2 class="center big">Here are some examples using<br/>CartoDB Leaflet library</h2>
- <form>
- <input type="text" value="" data-label="What are you looking for?"/>
- <input type="submit" class="button blue border" value="Search" />
- </form>
- </div>
- </section>
-
- <section class="shadow bottom">
- <div class="content no_padding">
- <ul class="examples_list">
- <li>
- <h3><a href="custom-popup.html">CartoDB custom popup</a></h3>
- <p class="light">A leaflet map using our genuine popup.</p>
- <em class="basic">basic</em>
- </li>
-
- <li>
- <h3><a href="query-by-distance.html">Query by distance</a></h3>
- <p class="light">Search features around a point within a specific radius.</p>
- <em class="medium">medium</em>
- </li>
-
- <li>
- <h3><a href="search-column.html">Search by column</a></h3>
- <p class="light">Search any feature in the table by a column.</p>
- <em class="medium">medium</em>
- </li>
-
- <li>
- <h3><a href="hover-polygon.html">Hover interactivity with polygons</a></h3>
- <p class="light">Use an interactivity polygon to highlight the feature.</p>
- <em class="hard">hard</em>
- </li>
-
- <li>
- <h3><a href="hover-point.html">Hover interactivity with points</a></h3>
- <p class="light">Use an interactivity point to highlight the feature.</p>
- <em class="hard">hard</em>
- </li>
-
- <li>
- <h3><a href="hover-line.html">Hover interactivity with lines</a></h3>
- <p class="light">Use an interactivity line to highlight the feature.</p>
- <em class="hard">hard</em>
- </li>
-
- </ul>
- </div>
- </section>
-
- <section class="grey carto shadow margin40">
- <div class="content less_padding">
- <div class="left">
- <h2 class="compact dark">Further info? Take a look a the docs</h2>
- <p class="light margin10">Visit our support area and get some help from the community.</p>
- </div>
- <div class="right">
- <a class="button blue right margin5" href="http://developers.cartodb.com/documentation/using-cartodb.html">Go to documentation</a>
- </div>
- </div>
- </section>
-
- <section class="white shadow leftwards margin40">
- <div class="content overflow">
- <h3>CartoDB Video Channel</h3>
- <div class="left">
- <iframe class="margin30" src="//player.vimeo.com/video/29030961?portrait=0" width="599" height="329" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
- </div>
- <div class="right margin30">
- <p class="light">Let’s get started with what is CartoDB and why we created it.<p>
- <p class="light margin20">Andrew Hill and Simon Tokumine, both CartoDB developers explain why we are so excited about it.</p>
- <p class="light margin20">The video was featured at FOSS4G in Denver, when CartoDB got presented to the OSS community.</p>
- <p class="light margin20">If you want to watch more videos, interviews or even tutorials, take a look at our video channel</p>
- <a href="http://vimeo.com/channels/cartodb" target="_blank" class="button blue border video margin20">Visit our video channel</a>
- </div>
- </div>
- </section>
-
- <div class="background white border margin40">
- <section>
- <div class="content less_padding">
- <div class="left">
- <h3 class="lighter margin10">CartoDB is also used by</h3>
- </div>
- <div class="right">
- <ul class="logos">
- <li><a class="unep-wcmc" target="_blank" href="http://www.unep-wcmc.org/"><img alt="UNEP-WCMC" title="UNEP-WCMC" src="http://developers.cartodb.com/images/logos/unep-wcmc.png" /></a></li>
- <li><a class="nasa" target="nasa" href="http://www.nasa.gov"><img alt="NASA" title="NASA" src="http://developers.cartodb.com/images/logos/nasa.png" /></a></li>
- <li><a class="diversity" target="_blank" href="http://www.cbd.int/"><img alt="Convention on Biological Diversity" title="Convention on Biological Diversity" src="http://developers.cartodb.com/images/logos/diversity.png" /></a></li>
- <li><a class="wsj" target="_blank" href="http://europe.wsj.com/home-page"><img alt="Wall Street Journal" title="Wall Street Journal" src="http://developers.cartodb.com/images/logos/wsj.png" /></a></li>
- <li><a class="wri" target="_blank" href="http://www.wri.org/"><img alt="WORLD RESOURCES INSTITUTE" title="WORLD RESOURCES INSTITUTE" src="http://developers.cartodb.com/images/logos/wri.png" /></a></li>
- </ul>
- </div>
- </div>
- </section>
- </div>
-
- <div class="background white border">
- <section>
- <div class="content no_padding">
- <ul class="hz">
- <li>
- <h3>Common questions</h3>
- </li>
- <li>
- <h3>Do you have any educational plans?</h3>
- <p class="light margin15">Yes we have. <a href="mailto:support@cartodb.com">Contact us</a> for getting more information. We are quite friends of academics so, you will get a lot of benefits.</p>
- </li>
- <li>
- <h3>Need something extra? Let us now.</h3>
- <p class="light margin15">Need us to help you with your visualization or application? Does your organization have unique requirements that don’t quite fit our plans? <a href="mailto:support@cartodb.com">Contact us</a>.</p>
- </li>
- </ul>
- </div>
- </section>
- </div>
-
- <footer>
- <div class="wrap">
- <span class="cartodb">CartoDB</span>
- <p class="lighter small left">CartoDB is a product of <a class="vizzuality" href="http://vizzuality.com">Vizzuality</a>
- </p>
- <nav class="right">
- <a href="http://cartodb.com/tour">Feature tour</a>
- <a href="http://cartodb.com/tutorial/step/1">Getting started</a>
- <a href="http://cartodb.com/maps">Maps</a>
- <a href="http://developers.cartodb.com">Developers</a>
- <a href="http://blog.cartodb.com">Blog</a>
- <a href="http://cartodb.com/pricing">Pricing</a>
- <a href="mailto:support@cartodb.com">Contact</a>
- </nav>
- </div>
- </footer>
- </div>
- </body>
-</html>
View
112 examples/query-by-distance.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
+ <title>CartoDB + Leaflet | Query by distance</title>
+ <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
+ <style>body,html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;} #map {height:100%;}</style>
+ <link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /><![endif]-->
+ <link href="../css/style.css" rel="stylesheet" type="text/css">
+ <link href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+ <script src="http://code.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
+ <script type="text/javascript" src="../js/wax.leaf.min-6.0.5-touched.js"></script>
+ <script type="text/javascript" src="../dist/cartodb-leaflet-min.js"></script>
+ <script type="text/javascript" src="../dist/cartodb-popup-min.js"></script>
+
+ <script type="text/javascript">
+ var circle
+ , earthquakes
+ , position = new L.LatLng(36.204824, 138.252924)
+ , radius = 1000000; // 1000km
+
+ function initialize() {
+ var map = new L.Map('map').setView(position, 4)
+ , mapboxUrl = 'http://{s}.tiles.mapbox.com/v3/cartodb.map-1nh578vv/{z}/{x}/{y}.png'
+ , mapbox = new L.TileLayer(mapboxUrl, {maxZoom: 18, attribution: "Powered by Leaflet and Mapbox"});
+ map.addLayer(mapbox,true);
+
+ // Create a CartoDB popup
+ var popup = new L.CartoDBPopup();
+
+ // Add circle
+ circle = new L.Circle(position, radius, {
+ color: 'red',
+ fillColor: '#f03',
+ fillOpacity: 0,
+ weight: 2
+ });
+ map.addLayer(circle);
+
+ // Now the CartoDB layer, the earthquakes
+ earthquakes = new L.CartoDBLayer({
+ map: map,
+ user_name:"examples",
+ table_name: 'earthquakes',
+ query: "SELECT * FROM {{table_name}} WHERE ST_Intersects( the_geom, ST_Buffer( ST_SetSRID('POINT(" + position.lng + " " + position.lat + ")'::geometry , 4326), "+ getRadDeg(radius,position)+"))",
+ tile_style: "#{{table_name}}{marker-fill:#E25B5B}",
+ interactivity: "cartodb_id, magnitude",
+ featureOver: function(ev,latlng,pos,data) {
+ document.body.style.cursor = "pointer";
+ },
+ featureOut: function() {
+ document.body.style.cursor = "default";
+ },
+ featureClick: function(ev,latlng,pos,data) {
+ ev.stopPropagation();
+ // Set popup content
+ popup.setContent(data);
+
+ // Set latlng
+ popup.setLatLng(latlng);
+
+ // Show it!
+ map.openPopup(popup);
+ },
+ auto_bound: false,
+ debug: true
+ });
+ // Adding layer to map
+ map.addLayer(earthquakes);
+ }
+
+ function getRadDeg(dist,actual) {
+ var deg = 180;
+ var brng = deg * Math.PI / 180;
+ dist = dist/6371000;
+ var lat1 = actual.lat * Math.PI / 180;
+ var lon1 = actual.lng * Math.PI / 180;
+ var lat2 = Math.asin(Math.sin(lat1) * Math.cos(dist) +
+ Math.cos(lat1) * Math.sin(dist) * Math.cos(brng));
+ var lon2 = lon1 + Math.atan2(Math.sin(brng) * Math.sin(dist) *
+ Math.cos(lat1),
+ Math.cos(dist) - Math.sin(lat1) *
+ Math.sin(lat2));
+ if (isNaN(lat2) || isNaN(lon2)) return null;
+ return actual.lat - (lat2 * 180 / Math.PI) ;
+ }
+
+ function onRangeChange() {
+ // Get the new radius
+ radius = $("input.range").val();
+
+ // Set new radius to the circle
+ circle.setRadius(radius)
+ }
+
+ function onMouseUp() {
+ // Change the query
+ earthquakes.setQuery("SELECT * FROM {{table_name}} WHERE ST_Intersects( the_geom, ST_Buffer( ST_SetSRID('POINT(" + position.lng + " " + position.lat + ")'::geometry , 4326), "+ getRadDeg(radius,position)+"))");
+ }
+ </script>
+</head>
+<body onload="initialize()">
+ <div id="map"></div>
+ <form class="example">
+ <p class="small">Change the circle radius</p>
+ <input type="range" class="range" min="100000" max="2000000" value="1000000" onchange="onRangeChange()" onmouseup="onMouseUp()"/>
+ </form>
+</body>
+</html>
View
0 examples/search-column.html
No changes.
View
56 custompopup.html → examples/show-hide.html
@@ -3,46 +3,37 @@
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
- <title>Using CartoDB with Leaflet and custom infowindow</title>
+ <title>CartoDB + Leaflet | Show / Hide</title>
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
- <style>body,html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;} #map {height:100%;} .leaflet-container {background:#A7BDDE!important;}</style>
+ <style>body,html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;} #map {height:100%;}</style>
<link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /><![endif]-->
- <link href="css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
+ <link href="../css/style.css" rel="stylesheet" type="text/css">
+ <link href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
- <script type="text/javascript" src="js/wax.leaf.min-6.0.5-touched.js"></script>
- <script type="text/javascript" src="dist/cartodb-leaflet-min.js"></script>
- <script type="text/javascript" src="dist/cartodb-popup.js"></script>
+ <script type="text/javascript" src="../js/wax.leaf.min-6.0.5-touched.js"></script>
+ <script type="text/javascript" src="../dist/cartodb-leaflet-min.js"></script>
+ <script type="text/javascript" src="../dist/cartodb-popup-min.js"></script>
<script type="text/javascript">
+ var earthquakes;
function initialize() {
- // Create map
- var map = new L.Map('map').setView(new L.LatLng(20,0), 3);
+ var map = new L.Map('map').setView(new L.LatLng(36.204824, 138.252924), 4)
+ , mapboxUrl = 'http://{s}.tiles.mapbox.com/v3/cartodb.map-1nh578vv/{z}/{x}/{y}.png'
+ , mapbox = new L.TileLayer(mapboxUrl, {maxZoom: 18, attribution: "Powered by Leaflet and Mapbox"});
+ map.addLayer(mapbox,true);
// Create a CartoDB popup
var popup = new L.CartoDBPopup();
- // First cartodb layer, countries
- var cartodb_leaflet1 = new L.CartoDBLayer({
- map: map,
- user_name:'examples',
- table_name: 'country_colors',
- query: "SELECT * FROM {{table_name}}",
- auto_bound: false,
- debug: true
- });
- // Adding layer to map
- map.addLayer(cartodb_leaflet1);
-
-
- // Second cartodb layer, earthquakes
- var cartodb_leaflet2 = new L.CartoDBLayer({
+ // Now the CartoDB layer, the earthquakes
+ earthquakes = new L.CartoDBLayer({
map: map,
user_name:"examples",
table_name: 'earthquakes',
- query: "SELECT cartodb_id,the_geom_webmercator,the_geom,magnitude FROM {{table_name}}",
+ query: "SELECT * FROM {{table_name}}",
tile_style: "#{{table_name}}{marker-fill:#E25B5B}",
interactivity: "cartodb_id, magnitude",
featureOver: function(ev,latlng,pos,data) {
@@ -62,15 +53,28 @@
// Show it!
map.openPopup(popup);
},
- auto_bound: true,
+ auto_bound: false,
debug: true
});
// Adding layer to map
- map.addLayer(cartodb_leaflet2);
+ map.addLayer(earthquakes);
+ }
+
+
+ function onChange() {
+ if ($('input[type="checkbox"]').attr("checked")) {
+ earthquakes.show()
+ } else {
+ earthquakes.hide()
+ }
}
</script>
</head>
<body onload="initialize()">
<div id="map"></div>
+ <form class="example">
+ <input type="checkbox" checked onchange="onChange()"/>
+ <label class="small">Toggle the layer</label>
+ </form>
</body>
</html>
View
2 index.html
@@ -420,7 +420,7 @@ <h5 class="margin30" id="custom-popup">Custom popup</h5>
...
</pre>
- <p class="light margin15">You can see an example using it <a href="custompopup.html">here</a>.</p>
+ <p class="light margin15">You can see an example using it <a href="examples/custom-popup.html">here</a>.</p>
</div>
</section>

0 comments on commit c2d1f15

Please sign in to comment.
Something went wrong with that request. Please try again.