cdb
This commit is contained in:
zhongjin
@@ -0,0 +1,32 @@
|
||||
html,body,div,span,object,iframe,
|
||||
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
|
||||
abbr,address,cite,code,
|
||||
del,dfn,em,img,ins,kbd,q,samp,
|
||||
small,strong,sub,sup,var,
|
||||
b,i,
|
||||
dl,dt,dd,ol,ul,li,
|
||||
fieldset,form,label,legend,
|
||||
table,caption,tbody,tfoot,thead,tr,th,td,
|
||||
article,aside,canvas,details,figcaption,figure,
|
||||
footer,header,hgroup,menu,nav,section,summary,
|
||||
time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
|
||||
body{line-height:1;}
|
||||
article,aside,details,figcaption,figure,
|
||||
footer,header,hgroup,menu,nav,section{display:block;}
|
||||
nav ul{list-style:none;}
|
||||
blockquote,q{quotes:none;}
|
||||
blockquote:before,blockquote:after,
|
||||
q:before,q:after{content:'';content:none;}
|
||||
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}
|
||||
ins{background-color:#ff9;color:#000;text-decoration:none;}
|
||||
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}
|
||||
del{text-decoration:line-through;}
|
||||
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help;}
|
||||
table{border-collapse:collapse;border-spacing:0;}
|
||||
hr{display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0;}
|
||||
input,select{vertical-align:middle;}
|
||||
ul{list-style:none;}
|
||||
a:focus {outline:none;}
|
||||
input:focus {outline:none;}
|
||||
|
||||
|
||||
@@ -0,0 +1,220 @@
|
||||
@font-face {
|
||||
font-family: 'robotoregular';
|
||||
src: url('../fonts/roboto-regular-webfont.eot');
|
||||
src: url('../fonts/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/roboto-regular-webfont.woff') format('woff'),
|
||||
url('../fonts/roboto-regular-webfont.ttf') format('truetype'),
|
||||
url('../fonts/roboto-regular-webfont.svg#robotoregular') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body{
|
||||
background-color: #99BDBC;
|
||||
}
|
||||
|
||||
div#map{
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 350px;
|
||||
background-color: #99BDBC;
|
||||
}
|
||||
|
||||
div#overlay{
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
background: url(../img/overlay.png) no-repeat center center fixed;
|
||||
background-size: cover;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
filter: progrid:DXImageTransform.Microsoft.AlphaImage(src='.../img/overlay.png', sizingMethod='scale');
|
||||
-ms-filter: "progrid:DXImageTransform.Microsoft.AlphaImage(src='../img/overlay.png', sizingMethod='scale')";
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
div#leftBkg{
|
||||
background: url(../img/leftBkg.png) repeat-y;
|
||||
width: 619px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
div.left{
|
||||
position: absolute;
|
||||
left: 60px;
|
||||
top: 60px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
div.left div#title{
|
||||
width: 428px;
|
||||
height: 195px;
|
||||
background: url(../img/title.png) no-repeat;
|
||||
}
|
||||
|
||||
div.left p{
|
||||
font-family: "robotoregular", Helvetica, Arial, Sans-serif;
|
||||
font-size: 17px;
|
||||
width: 320px;
|
||||
margin: 30px 0 0 10px;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
div.left p a,
|
||||
div.left p a:visited{
|
||||
color:#000;
|
||||
}
|
||||
|
||||
div.left div#legendBox{
|
||||
background: url(../img/legendBullets.png) 0 0 no-repeat;
|
||||
margin: 30px 0 0 10px;
|
||||
}
|
||||
|
||||
div.left div#legendBox ul li{
|
||||
list-style: none;
|
||||
font-family: "robotoregular", Helvetica, Arial, Sans-serif;
|
||||
font-size: 15px;
|
||||
margin: 7px 0 0 22px;
|
||||
opacity: .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;
|
||||
}
|
||||
|
||||
/*SYLES FOR THE CUSTOM INFOWINDOW*/
|
||||
|
||||
div.cartodb-popup {
|
||||
background: none;
|
||||
width: 240px;
|
||||
padding: 0;
|
||||
-moz-border-radius-topright: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
-moz-border-radius-toplleft: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
box-shadow: 0 0 9px rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
div.cartodb-popup a.cartodb-popup-close-button{
|
||||
top: -12px;
|
||||
right: -13px;
|
||||
}
|
||||
|
||||
div.cartodb-popup div.cartodb-popup-content-wrapper{
|
||||
padding: 0;
|
||||
width: 240px;
|
||||
max-width: none;
|
||||
background: none;
|
||||
background-color: #FFF;
|
||||
-moz-border-radius-topright: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
-moz-border-radius-toplleft: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
|
||||
div.cartodb-popup div.cartodb-popup-cont{
|
||||
width: 248px;
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
div.cartodb-popup div.cartodb-popup-cont h4{
|
||||
font-family: Times New Roman, Times, serif;
|
||||
font-size: 25px;
|
||||
color:#FFF;
|
||||
position: absolute;
|
||||
text-transform: none;
|
||||
font-weight: normal;
|
||||
z-index: 5px;
|
||||
top:98px;
|
||||
left: 14px;
|
||||
text-shadow: 0 1px 0 #000;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
div.cartodb-popup div.cartodb-popup-cont a.videoButton{
|
||||
background: url(../img/videoButton.png) 0 0 no-repeat;
|
||||
width: 20px;
|
||||
height: 17px;
|
||||
position: absolute;
|
||||
z-index: 6px;
|
||||
top:105px;
|
||||
right: 14px;
|
||||
}
|
||||
|
||||
div.cartodb-popup div.cartodb-popup-cont a.videoButton:hover{
|
||||
background: url(../img/videoButton.png) 0 -17px no-repeat;
|
||||
}
|
||||
|
||||
div.cartodb-popup div.cartodb-popup-cont p{
|
||||
font-family: "robotoregular", Helvetica, Arial, Sans-serif;
|
||||
font-size: 14px;
|
||||
padding: 12px 15px 0 15px;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
div.cartodb-popup div.cartodb-popup-tip-container{
|
||||
background: none;
|
||||
background-color: #FFF;
|
||||
width: 240px;
|
||||
height: 15px;
|
||||
-moz-border-radius-bottomright: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
-moz-border-radius-bottomlleft: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
div.cartodb-popup div.cartodb-popup-tip-container::after {
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 26px;
|
||||
content: '';
|
||||
border: 5px solid white;
|
||||
border-color: white transparent transparent white;
|
||||
width: 0;
|
||||
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;
|
||||
}
|
||||
Binary file not shown.
@@ -0,0 +1,247 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata></metadata>
|
||||
<defs>
|
||||
<font id="robotoregular" horiz-adv-x="1164" >
|
||||
<font-face units-per-em="2048" ascent="1536" descent="-512" />
|
||||
<missing-glyph horiz-adv-x="509" />
|
||||
<glyph unicode="fi" horiz-adv-x="1140" d="M28 936v146h170v117q0 182 106.5 282t295.5 100q67 0 132 -15.5t153 -45.5l-34 -160q-53 21 -113 36t-123 15q-117 0 -168.5 -52t-51.5 -160v-117h215v-146h-215v-936h-197v936h-170zM783 0v1082h198v-1082h-198z" />
|
||||
<glyph horiz-adv-x="2048" />
|
||||
<glyph horiz-adv-x="2048" />
|
||||
<glyph unicode="
" horiz-adv-x="509" />
|
||||
<glyph horiz-adv-x="0" />
|
||||
<glyph unicode="	" horiz-adv-x="0" />
|
||||
<glyph unicode=" " horiz-adv-x="509" />
|
||||
<glyph unicode="	" horiz-adv-x="509" />
|
||||
<glyph unicode=" " horiz-adv-x="509" />
|
||||
<glyph unicode="!" horiz-adv-x="539" d="M171 0v204h198v-204h-198zM171 478v978h197v-978h-197z" />
|
||||
<glyph unicode=""" horiz-adv-x="733" d="M126 936l1 240v280h197v-270l-101 -250h-97zM435 936v520h198v-270l-101 -250h-97z" />
|
||||
<glyph unicode="#" horiz-adv-x="1276" d="M70 410v140h264l68 348h-256v142h284l82 416h151l-82 -416h255l82 416h151l-82 -416h199v-142h-226l-68 -348h219v-140h-247l-80 -410h-152l80 410h-255l-80 -410h-151l80 410h-236zM485 550h255l68 348h-255z" />
|
||||
<glyph unicode="$" horiz-adv-x="1193" d="M131 424l2 5h190q0 -154 78 -219.5t190 -65.5q129 0 201.5 61.5t72.5 170.5q0 90 -63.5 153.5t-210.5 113.5q-202 61 -305 163t-103 272q0 165 95 269t261 125v221h158v-222q167 -22 259.5 -137t92.5 -308h-196q0 127 -63 206t-174 79q-118 0 -177 -61.5t-59 -168.5 q0 -97 61 -157t219 -114q204 -66 303 -164.5t99 -267.5q0 -172 -103 -273.5t-283 -120.5v-192h-157v191q-172 18 -282 125.5t-106 315.5z" />
|
||||
<glyph unicode="%" horiz-adv-x="1498" d="M104 1099v77q0 127 82 214t219 87t219 -86.5t82 -214.5v-77q0 -127 -81.5 -213t-217.5 -86q-138 0 -220.5 86t-82.5 213zM250 1099q0 -74 40.5 -125.5t116.5 -51.5q73 0 113 51t40 126v77q0 74 -40.5 126.5t-114.5 52.5q-75 0 -115 -52.5t-40 -126.5v-77zM349 177 l711 1138l109 -67l-711 -1138zM809 279v78q0 127 82 213.5t219 86.5q136 0 218.5 -86.5t82.5 -213.5v-78q0 -128 -82 -214t-217 -86q-138 0 -220.5 86t-82.5 214zM955 279q0 -75 40.5 -126.5t116.5 -51.5q73 0 113 51.5t40 126.5v78q0 74 -41 126t-114 52q-74 0 -114.5 -52 t-40.5 -126v-78z" />
|
||||
<glyph unicode="&" horiz-adv-x="1276" d="M64 392q0 122 70.5 213.5t210.5 183.5q-78 99 -116 176.5t-38 159.5q0 169 97.5 260.5t268.5 91.5q158 0 257 -91t99 -219q0 -98 -52.5 -169.5t-155.5 -146.5l-109 -80l340 -409q41 65 64 144t23 167h176q0 -132 -39 -244t-113 -201l185 -223l-2 -5h-229l-85 102 q-80 -60 -177 -91.5t-201 -31.5q-217 0 -345.5 115t-128.5 298zM261 392q0 -113 71 -186t206 -73q72 0 142 24.5t132 70.5l-361 435l-40 -29q-91 -68 -120.5 -130t-29.5 -112zM388 1127q0 -53 27 -110.5t81 -125.5l138 95q57 38 77.5 82.5t20.5 98.5q0 61 -48.5 108 t-126.5 47q-81 0 -125 -56.5t-44 -138.5z" />
|
||||
<glyph unicode="'" horiz-adv-x="445" d="M126 951l1 265v240h197v-223l-101 -282h-97z" />
|
||||
<glyph unicode="(" horiz-adv-x="679" d="M132 582v9q0 394 159 673t334 372l6 -1l38 -116q-137 -107 -238.5 -343t-101.5 -583v-13q0 -347 101 -583t239 -352l-38 -108h-6q-175 93 -334 371.5t-159 673.5z" />
|
||||
<glyph unicode=")" horiz-adv-x="687" d="M6 -355q135 105 237.5 345.5t102.5 589.5v13q0 342 -105.5 583.5t-234.5 351.5l38 108h6q174 -93 333.5 -372t159.5 -673v-9q0 -395 -159.5 -673.5t-333.5 -371.5h-6z" />
|
||||
<glyph unicode="*" horiz-adv-x="884" d="M88 763l49 154l236 -90l-10 254h161l-10 -260l233 89l48 -156l-242 -68l153 -200l-132 -96l-140 218l-135 -210l-133 92l158 206z" />
|
||||
<glyph unicode="+" horiz-adv-x="1162" d="M78 605v178h402v423h197v-423h399v-178h-399v-459h-197v459h-402z" />
|
||||
<glyph unicode="," horiz-adv-x="404" d="M48 -258l70 316v163h197v-173l-150 -306h-117z" />
|
||||
<glyph unicode="-" horiz-adv-x="923" d="M167 538v154h590v-154h-590z" />
|
||||
<glyph unicode="." horiz-adv-x="548" d="M161 0v202h197v-202h-197z" />
|
||||
<glyph unicode="/" horiz-adv-x="850" d="M16 -125l608 1581h167l-607 -1581h-168z" />
|
||||
<glyph unicode="0" horiz-adv-x="1153" d="M113 514v428q0 245 125.5 390t336.5 145q212 0 338.5 -145t126.5 -390v-428q0 -247 -125.5 -391t-337.5 -144q-211 0 -337.5 144t-126.5 391zM310 474q0 -157 70.5 -249t196.5 -92q128 0 197 91.5t69 249.5v509q0 157 -70 248t-198 91q-127 0 -196 -91t-69 -248v-509z " />
|
||||
<glyph unicode="1" horiz-adv-x="1153" d="M195 1271v152l515 54v-1477h-198v1274z" />
|
||||
<glyph unicode="2" horiz-adv-x="1153" d="M138 1052q-5 178 119 301.5t337 123.5q195 0 307 -108t112 -279q0 -115 -63.5 -225t-193.5 -276l-367 -430l2 -5h663v-154h-904v135l457 545q122 148 165.5 235.5t43.5 176.5q0 101 -59 165.5t-163 64.5q-129 0 -196.5 -79t-67.5 -197h-190z" />
|
||||
<glyph unicode="3" horiz-adv-x="1153" d="M120 378l2 6h188q0 -106 76.5 -178.5t197.5 -72.5q120 0 189 74.5t69 194.5q0 137 -63.5 205t-199.5 68h-162v153h162q132 0 186.5 65.5t54.5 183.5q0 110 -59.5 177.5t-176.5 67.5q-114 0 -188.5 -70.5t-74.5 -176.5h-188l-3 6q-5 164 124 280t330 116q203 0 318 -102.5 t115 -301.5q0 -102 -53.5 -186t-149.5 -131q110 -44 167.5 -133.5t57.5 -216.5q0 -200 -126.5 -313.5t-328.5 -113.5q-186 0 -327.5 109.5t-136.5 289.5z" />
|
||||
<glyph unicode="4" horiz-adv-x="1153" d="M72 336v111l613 1009h208v-966h201v-154h-201v-336h-196v336h-625zM283 490h414v683l-6 1l-19 -50z" />
|
||||
<glyph unicode="5" horiz-adv-x="1153" d="M157 377l2 6h178q0 -119 68.5 -184.5t177.5 -65.5q125 0 194 88t69 241q0 139 -69.5 225t-193.5 86q-116 0 -168 -35t-77 -108l-163 17l84 809h729v-175h-563l-47 -419q47 35 104 57.5t130 23.5q202 2 316.5 -126.5t114.5 -352.5q0 -219 -117.5 -352t-342.5 -133 q-185 0 -308 101t-118 297z" />
|
||||
<glyph unicode="6" horiz-adv-x="1153" d="M137 552v335q0 256 145.5 423t358.5 167q86 0 170 -17t139 -43l-42 -151q-57 25 -120 40.5t-147 15.5q-137 0 -222.5 -117t-85.5 -296v-113q61 61 144.5 96t179.5 35q188 0 297.5 -126t109.5 -331q0 -224 -122.5 -357.5t-330.5 -133.5q-202 0 -338 153.5t-136 419.5z M333 533q0 -185 80.5 -292.5t197.5 -107.5q123 0 189.5 93.5t66.5 243.5q0 142 -71.5 226t-201.5 84q-93 0 -159.5 -39.5t-101.5 -106.5v-101z" />
|
||||
<glyph unicode="7" horiz-adv-x="1153" d="M97 1301v155h966v-155q-276 -328 -373 -579t-97 -563v-159h-197v159q0 330 121.5 594.5t351.5 547.5h-772z" />
|
||||
<glyph unicode="8" horiz-adv-x="1153" d="M102 400q0 123 76.5 217t206.5 138q-112 42 -177 128.5t-65 200.5q0 191 122.5 292t319.5 101q186 0 305.5 -101.5t119.5 -291.5q0 -114 -64 -200.5t-170 -129.5q124 -43 199 -137t75 -217q0 -201 -130.5 -311t-332.5 -110q-214 0 -349.5 110t-135.5 311zM299 404 q0 -123 80.5 -197t207.5 -74q114 0 190.5 74.5t76.5 196.5q0 119 -77.5 196t-191.5 77q-124 0 -205 -77t-81 -196zM340 1081q0 -111 70 -180t177 -69q97 0 161.5 69t64.5 180q0 105 -65.5 173t-162.5 68q-107 0 -176 -65.5t-69 -175.5z" />
|
||||
<glyph unicode="9" horiz-adv-x="1153" d="M93 978q0 220 127 359.5t314 139.5q218 0 350 -137t132 -387v-442q0 -251 -144 -391.5t-371 -140.5q-77 0 -157.5 16t-150.5 47l30 150q66 -32 129.5 -45.5t148.5 -13.5q142 0 229.5 98t87.5 278v124q-48 -71 -119.5 -107.5t-156.5 -36.5q-210 0 -329.5 129.5 t-119.5 359.5zM290 978q0 -150 66 -242.5t186 -92.5q103 0 173.5 47t102.5 120v172q0 163 -73 251.5t-205 88.5q-107 0 -178.5 -95.5t-71.5 -248.5z" />
|
||||
<glyph unicode=":" horiz-adv-x="517" d="M161 0v202h197v-202h-197zM161 876v202h197v-202h-197z" />
|
||||
<glyph unicode=";" horiz-adv-x="525" d="M99 -258l70 316v163h197v-173l-150 -306h-117zM162 876v202h197v-202h-197z" />
|
||||
<glyph unicode="<" horiz-adv-x="1040" d="M71 486v149l816 378v-201l-559 -233l-85 -18v-6l85 -19l559 -228v-201z" />
|
||||
<glyph unicode="=" horiz-adv-x="1153" d="M152 407v164h834v-164h-834zM152 823v164h834v-164h-834z" />
|
||||
<glyph unicode=">" horiz-adv-x="1072" d="M136 87v196l598 238l85 17v6l-85 20l-598 234v195l856 -378v-149z" />
|
||||
<glyph unicode="?" horiz-adv-x="974" d="M61 1122q-3 161 113.5 258t296.5 97q197 0 306 -100.5t109 -280.5q0 -129 -70.5 -236t-186.5 -219q-54 -54 -65.5 -97t-11.5 -134h-197q1 145 25 201t126 148q99 117 141 180t42 152q0 106 -56.5 163t-161.5 57q-91 0 -155 -49.5t-64 -145.5h-188zM353 0v208h206v-208 h-206z" />
|
||||
<glyph unicode="@" horiz-adv-x="1833" d="M114 478q19 423 249 688t602 265q379 0 581.5 -250t185.5 -679q-9 -214 -120 -368.5t-332 -154.5q-73 0 -126 41.5t-76 117.5q-50 -80 -122 -119.5t-168 -39.5q-125 0 -194 120.5t-51 316.5q23 259 137.5 415.5t279.5 156.5q105 0 169 -26t139 -80l-4 -4h6l-51 -585 q-9 -110 21.5 -151.5t81.5 -41.5q123 0 197 113.5t82 288.5q16 382 -144 595.5t-496 213.5q-308 0 -495.5 -231t-202.5 -602q-18 -376 150 -594.5t482 -218.5q88 0 178.5 21.5t152.5 56.5l38 -107q-67 -42 -170.5 -65.5t-202.5 -23.5q-380 0 -587.5 249.5t-189.5 681.5z M720 416q-11 -142 21.5 -216t106.5 -74q64 0 117 24.5t97 87.5q-1 12 -0.5 25.5t2.5 29.5l47 538q-26 12 -54.5 19t-59.5 7q-125 0 -191 -109.5t-86 -331.5z" />
|
||||
<glyph unicode="A" horiz-adv-x="1295" d="M43 0l525 1456h169l514 -1456h-201l-128 375h-548l-130 -375h-201zM431 540h435l-212 625h-6z" />
|
||||
<glyph unicode="B" horiz-adv-x="1302" d="M170 0v1456h475q228 0 357 -98.5t129 -295.5q0 -94 -58 -168.5t-154 -113.5q143 -20 226.5 -124t83.5 -245q0 -200 -130 -305.5t-352 -105.5h-577zM367 154h380q135 0 209.5 66.5t74.5 188.5q0 121 -76 195t-205 79h-13h-370v-529zM367 837h319q110 0 179 60.5t69 168.5 q0 118 -74.5 176.5t-214.5 58.5h-278v-464z" />
|
||||
<glyph unicode="C" horiz-adv-x="1297" d="M118 598v259q0 269 155.5 444.5t402.5 175.5q247 1 393 -131q142 -128 142 -337v-12l-2 -6h-189q0 153 -90 242t-254 89q-165 0 -263 -133t-98 -330v-261q0 -199 98 -332t263 -133q164 0 254 88.5t90 244.5h189l2 -6v-11q0 -198 -144 -332q-148 -138 -391 -138 q-247 0 -402.5 175t-155.5 444z" />
|
||||
<glyph unicode="D" horiz-adv-x="1387" d="M170 0v1456h458q285 0 458.5 -175.5t173.5 -453.5v-199q0 -279 -173.5 -453.5t-458.5 -174.5h-458zM367 154h261q202 0 318.5 133t116.5 341v201q0 206 -116.5 339t-318.5 133h-261v-1147z" />
|
||||
<glyph unicode="E" horiz-adv-x="1130" d="M170 0v1456h886v-155h-689v-471h598v-155h-598v-521h700v-154h-897z" />
|
||||
<glyph unicode="F" horiz-adv-x="1130" d="M170 0v1456h913v-155h-716v-502h614v-155h-614v-644h-197z" />
|
||||
<glyph unicode="G" horiz-adv-x="1387" d="M121 578v300q0 265 159 432t410 167q243 0 384 -129q137 -126 137 -319v-11l-2 -6h-189q0 133 -86 221.5t-244 88.5q-167 0 -269 -125t-102 -317v-302q0 -194 108 -319.5t276 -125.5q129 0 204.5 33.5t112.5 79.5v328h-330v154h527v-532q-52 -81 -180.5 -149t-333.5 -68 q-252 0 -417 167t-165 432z" />
|
||||
<glyph unicode="H" horiz-adv-x="1441" d="M170 0v1456h197v-658h707v658h197v-1456h-197v643h-707v-643h-197z" />
|
||||
<glyph unicode="I" horiz-adv-x="579" d="M190 0v1456h198v-1456h-198z" />
|
||||
<glyph unicode="J" horiz-adv-x="1123" d="M79 395l2 6h189q0 -136 63 -202t179 -66q109 0 178 79t69 210v1034h197v-1034q0 -203 -123.5 -323t-320.5 -120q-201 0 -320 107q-113 102 -113 293v16z" />
|
||||
<glyph unicode="K" horiz-adv-x="1302" d="M170 0v1456h197v-644h108l540 644h222l2 -5l-590 -689l632 -757l-2 -5h-239l-545 658h-128v-658h-197z" />
|
||||
<glyph unicode="L" horiz-adv-x="1126" d="M170 0v1456h197v-1302h710v-154h-907z" />
|
||||
<glyph unicode="M" horiz-adv-x="1779" d="M170 0v1456h259l463 -1183h6l465 1183h245v-1456h-197v1091l-6 1l-441 -1092h-137l-454 1128l-6 -1v-1127h-197z" />
|
||||
<glyph unicode="N" horiz-adv-x="1442" d="M170 0v1456h197l701 -1111l6 2v1109h197v-1456h-197l-701 1112l-6 -2v-1110h-197z" />
|
||||
<glyph unicode="O" horiz-adv-x="1396" d="M113 598v259q0 266 159.5 443t414.5 177q264 0 429.5 -176.5t165.5 -443.5v-259q0 -267 -165.5 -443t-429.5 -176q-255 0 -414.5 176t-159.5 443zM310 598q0 -202 102.5 -330t274.5 -128q183 0 290.5 127.5t107.5 330.5v261q0 200 -108 328t-290 128q-172 0 -274.5 -128 t-102.5 -328v-261z" />
|
||||
<glyph unicode="P" horiz-adv-x="1302" d="M170 0v1456h557q233 0 362.5 -120t129.5 -316q0 -198 -129.5 -317t-362.5 -119h-360v-584h-197zM367 738h360q148 0 221 79.5t73 200.5t-73.5 202t-220.5 81h-360v-563z" />
|
||||
<glyph unicode="Q" horiz-adv-x="1427" d="M113 598v259q0 266 159.5 443t414.5 177q264 0 429.5 -176.5t165.5 -443.5v-259q0 -115 -33.5 -217.5t-95.5 -183.5l217 -211l-135 -129l-222 213q-70 -45 -152 -68t-174 -23q-255 0 -414.5 176t-159.5 443zM310 598q0 -202 102.5 -330t274.5 -128q183 0 290.5 127.5 t107.5 330.5v261q0 200 -108 328t-290 128q-172 0 -274.5 -128t-102.5 -328v-261z" />
|
||||
<glyph unicode="R" horiz-adv-x="1303" d="M170 0v1455h498q239 0 365 -106t126 -308q0 -112 -58.5 -195t-170.5 -132q120 -39 172.5 -126.5t52.5 -216.5v-137q0 -68 15 -122t52 -88v-24h-203q-39 34 -50 100t-11 136v133q0 118 -69 190t-185 72h-337v-631h-197zM367 786h281q167 0 240.5 63.5t73.5 193.5 q0 123 -71.5 190.5t-222.5 67.5h-301v-515z" />
|
||||
<glyph unicode="S" horiz-adv-x="1252" d="M114 413l2 6h188q0 -137 104 -211.5t235 -74.5q140 0 221.5 63t81.5 171q0 99 -71 166t-250 114q-222 55 -346.5 162t-124.5 269q0 171 134 285t348 114q230 -1 366 -131q133 -127 133 -294v-10l-3 -6h-188q0 124 -86.5 205t-221.5 81q-138 0 -211.5 -67t-73.5 -174 q0 -95 80.5 -158.5t261.5 -111.5q220 -57 335 -168t115 -274q0 -176 -138.5 -283t-361.5 -107q-211 0 -373 118q-157 114 -156 304v12z" />
|
||||
<glyph unicode="T" horiz-adv-x="1225" d="M37 1301v155h1151v-155h-480v-1301h-197v1301h-474z" />
|
||||
<glyph unicode="U" horiz-adv-x="1386" d="M147 489v967h197v-967q0 -167 95.5 -261.5t246.5 -94.5q160 0 260.5 94.5t100.5 261.5v967h197v-967q0 -240 -156 -375t-402 -135q-237 0 -388 135.5t-151 374.5z" />
|
||||
<glyph unicode="V" horiz-adv-x="1295" d="M22 1456h214l376 -1074l33 -121h6l33 121l376 1074h213l-541 -1456h-169z" />
|
||||
<glyph unicode="W" horiz-adv-x="1763" d="M37 1456h213l212 -951l25 -191l6 -1l34 192l258 951h193l260 -951l34 -195h6l27 195l208 951h214l-352 -1456h-176l-291 1010l-22 131h-6l-21 -131l-295 -1010h-176z" />
|
||||
<glyph unicode="X" horiz-adv-x="1295" d="M66 0l472 734l-462 722h236l338 -568l340 568h238l-462 -722l472 -734h-235l-349 578l-350 -578h-238z" />
|
||||
<glyph unicode="Y" horiz-adv-x="1295" d="M40 1456h225l380 -740l380 740h225l-511 -944v-512h-196v527z" />
|
||||
<glyph unicode="Z" horiz-adv-x="1225" d="M97 0v146l778 1155h-767v155h992v-141l-781 -1161h814v-154h-1036z" />
|
||||
<glyph unicode="[" horiz-adv-x="552" d="M143 -312v1976h385v-155h-188v-1666h188v-155h-385z" />
|
||||
<glyph unicode="\" horiz-adv-x="846" d="M39 1456h186l608 -1581h-186z" />
|
||||
<glyph unicode="]" horiz-adv-x="552" d="M11 -157h189v1666h-189v155h386v-1976h-386v155z" />
|
||||
<glyph unicode="^" horiz-adv-x="856" d="M61 729l299 727h134l298 -727h-181l-166 419l-16 70h-6l-16 -70l-163 -419h-183z" />
|
||||
<glyph unicode="_" horiz-adv-x="931" d="M4 0h923v-154h-923v154z" />
|
||||
<glyph unicode="`" horiz-adv-x="641" d="M82 1512l3 6h230l175 -266h-158z" />
|
||||
<glyph unicode="a" horiz-adv-x="1126" d="M106 304q0 155 125.5 242.5t340.5 87.5h214v107q0 95 -58 150.5t-164 55.5q-96 0 -155 -48t-59 -115l-187 -2l-2 6v13q1 110 111 203q118 98 303 98q184 0 296 -93.5t112 -269.5v-521q0 -58 6 -112t22 -106h-203q-10 49 -15.5 86.5t-6.5 75.5q-55 -78 -143.5 -130.5 t-190.5 -52.5q-169 0 -257.5 86.5t-88.5 238.5zM303 300q0 -72 45 -114t133 -42q107 0 193 55t112 126v176h-221q-119 0 -190.5 -60t-71.5 -141z" />
|
||||
<glyph unicode="b" d="M143 0v1560h197v-606q51 72 126.5 110t176.5 38q200 0 312 -160t112 -421v-21q0 -234 -112.5 -377.5t-309.5 -143.5q-108 0 -187.5 42.5t-131.5 125.5l-32 -147h-151zM340 309q38 -80 99.5 -125t155.5 -45q139 0 207 99t68 262v21q0 186 -68.5 303.5t-208.5 117.5 q-91 0 -153.5 -44.5t-99.5 -119.5v-469z" />
|
||||
<glyph unicode="c" horiz-adv-x="1072" d="M97 520v42q0 229 124.5 384.5t351.5 155.5q181 0 297 -112q112 -108 111 -264v-11l-2 -6h-179q0 99 -64.5 168.5t-162.5 69.5q-145 0 -211.5 -112.5t-66.5 -272.5v-42q0 -163 65.5 -275t212.5 -112q91 0 159 60.5t68 148.5h178l3 -6v-9q0 -135 -120 -239 q-124 -108 -288 -109q-228 0 -352 155t-124 386z" />
|
||||
<glyph unicode="d" d="M98 500v21q0 261 111.5 421t312.5 160q95 0 168.5 -35t125.5 -102v595h197v-1560h-151l-30 137q-53 -78 -131 -118t-181 -40q-198 0 -310 143.5t-112 377.5zM295 500q0 -164 67 -262.5t208 -98.5q88 0 148 40t98 112v505q-38 67 -98.5 106.5t-145.5 39.5 q-142 0 -209.5 -117t-67.5 -304v-21z" />
|
||||
<glyph unicode="e" horiz-adv-x="1072" d="M97 520v44q0 233 134.5 385.5t328.5 152.5q217 0 325.5 -135t108.5 -359v-104h-692l-3 -5q0 -163 72 -264.5t220 -101.5q100 0 175.5 28.5t129.5 78.5l77 -128q-58 -56 -153 -94.5t-229 -38.5q-233 0 -363.5 149t-130.5 392zM307 664l2 -5h488v16q0 118 -58 195t-179 77 q-103 0 -170.5 -79.5t-82.5 -203.5z" />
|
||||
<glyph unicode="f" horiz-adv-x="674" d="M56 936v146h169v137q0 173 90.5 267.5t252.5 94.5q34 0 68.5 -5.5t76.5 -15.5l-24 -150q-18 4 -43.5 7t-53.5 3q-86 0 -128 -51.5t-42 -149.5v-137h196v-146h-196v-936h-197v936h-169z" />
|
||||
<glyph unicode="g" d="M108 500v21q0 261 111.5 421t311.5 160q103 0 181 -41.5t131 -119.5l24 141h157v-1088q0 -208 -121 -319.5t-349 -111.5q-78 0 -168.5 21.5t-159.5 58.5l30 153q57 -30 137.5 -48.5t158.5 -18.5q144 0 209.5 65.5t65.5 199.5v123q-53 -68 -127 -103t-171 -35 q-198 0 -309.5 143.5t-111.5 377.5zM305 500q0 -163 67 -262t207 -99q89 0 149 40.5t99 114.5v498q-38 69 -99 109.5t-147 40.5q-141 0 -208.5 -117t-67.5 -304v-21z" />
|
||||
<glyph unicode="h" d="M143 0v1560h197v-623q56 78 137.5 121.5t180.5 43.5q173 0 269.5 -104t96.5 -320v-678h-197v680q0 134 -57.5 198t-171.5 64q-88 0 -153 -34.5t-105 -96.5v-811h-197z" />
|
||||
<glyph unicode="i" horiz-adv-x="516" d="M159 0v1082h197v-1082h-197zM159 1359v201h197v-201h-197z" />
|
||||
<glyph unicode="j" horiz-adv-x="530" d="M-66 -419l14 155q14 -5 40 -8.5t43 -3.5q65 0 103.5 44t38.5 143v1171h197v-1171q0 -167 -86 -257.5t-239 -90.5q-31 0 -56.5 4.5t-54.5 13.5zM167 1363v197h197v-197h-197z" />
|
||||
<glyph unicode="k" horiz-adv-x="1050" d="M144 0v1560h197v-904h99l325 426h236l-393 -499l427 -583h-233l-360 499h-101v-499h-197z" />
|
||||
<glyph unicode="l" horiz-adv-x="516" d="M159 0v1560h197v-1560h-197z" />
|
||||
<glyph unicode="m" horiz-adv-x="1790" d="M143 0v1082h176l14 -142q53 77 134.5 119.5t189.5 42.5t185.5 -50t116.5 -150q52 93 135.5 146.5t195.5 53.5q165 0 261 -113.5t96 -341.5v-647h-197v649q0 160 -55 226.5t-164 66.5q-101 0 -163.5 -70t-73.5 -177v-8v-687h-198v649q0 152 -56.5 222.5t-162.5 70.5 q-90 0 -148 -37t-89 -104v-801h-197z" />
|
||||
<glyph unicode="n" d="M143 0v1082h176l14 -161q54 86 135.5 133.5t185.5 47.5q175 0 271 -102.5t96 -316.5v-683h-197v679q0 143 -56.5 203t-172.5 60q-91 0 -154.5 -36.5t-100.5 -102.5v-803h-197z" />
|
||||
<glyph unicode="o" d="M97 529v22q0 240 130 395.5t353 155.5q225 0 355.5 -155t130.5 -396v-22q0 -242 -130 -396t-354 -154t-354.5 154.5t-130.5 395.5zM294 529q0 -172 72.5 -284t215.5 -112q141 0 214 112t73 284v22q0 170 -73.5 283t-215.5 113q-141 0 -213.5 -113t-72.5 -283v-22z" />
|
||||
<glyph unicode="p" d="M143 -416v1498h151l31 -140q53 78 132 119t184 41q201 0 312.5 -159.5t111.5 -421.5v-21q0 -234 -112 -377.5t-309 -143.5q-100 0 -175.5 33.5t-128.5 100.5v-529h-197zM340 275q37 -67 97 -104.5t147 -37.5q140 0 212 102.5t72 264.5v21q0 184 -72.5 302.5t-213.5 118.5 q-85 0 -145 -38.5t-97 -105.5v-523z" />
|
||||
<glyph unicode="q" d="M98 500v21q0 261 111.5 421t312.5 160q98 0 173 -37.5t128 -108.5l28 126h151v-1498h-197v518q-52 -61 -123 -92t-162 -31q-198 0 -310 143.5t-112 377.5zM295 500q0 -164 67.5 -265.5t207.5 -101.5q81 0 138.5 36t96.5 101v546q-39 61 -96.5 96t-136.5 35 q-141 0 -209 -119.5t-68 -306.5v-21z" />
|
||||
<glyph unicode="r" horiz-adv-x="717" d="M143 0v1082h176l19 -158q46 84 113.5 131t155.5 47q22 0 42 -3.5t33 -7.5l-27 -183l-101 6q-78 0 -131.5 -37t-82.5 -104v-773h-197z" />
|
||||
<glyph unicode="s" horiz-adv-x="1071" d="M109 329l2 6h188q5 -105 78 -153.5t171 -48.5q105 0 164.5 44.5t59.5 113.5q0 65 -49.5 106t-187.5 72q-191 41 -293.5 115t-102.5 198q0 132 112.5 226t291.5 94q184 0 298 -100q109 -96 109 -222v-11l-2 -6h-188q0 70 -61.5 127t-155.5 57q-104 0 -155.5 -47 t-51.5 -112q0 -64 44.5 -99t183.5 -64q199 -42 302 -119t103 -201q0 -144 -116.5 -235t-304.5 -91q-207 0 -326 105q-113 100 -113 232v13z" />
|
||||
<glyph unicode="t" horiz-adv-x="690" d="M48 936v146h172v261h197v-261h205v-146h-205v-657q0 -76 31.5 -107t83.5 -31q17 0 38 4.5t35 9.5l27 -135q-22 -18 -65 -29.5t-85 -11.5q-120 0 -191 72.5t-71 227.5v657h-172z" />
|
||||
<glyph unicode="u" d="M139 444v638h197v-640q0 -173 51 -238t159 -65q105 0 173.5 42.5t103.5 120.5v780h197v-1082h-177l-13 160q-51 -87 -131 -134t-185 -47q-177 0 -276 113t-99 352z" />
|
||||
<glyph unicode="v" horiz-adv-x="1030" d="M46 1082h202l256 -763l17 -76h6l19 76l249 763h201l-398 -1082h-149z" />
|
||||
<glyph unicode="w" horiz-adv-x="1550" d="M45 1082h205l170 -688l25 -139h6l26 139l216 688h158l217 -688l28 -155h6l32 155l160 688h206l-314 -1082h-159l-214 659l-41 172h-6l-38 -172l-210 -659h-159z" />
|
||||
<glyph unicode="x" horiz-adv-x="1030" d="M46 0l361 547l-351 535h227l227 -399l230 399h230l-351 -535l361 -547h-226l-240 409l-240 -409h-228z" />
|
||||
<glyph unicode="y" horiz-adv-x="1030" d="M26 1082h220l228 -681l35 -136h6l266 817h219l-455 -1248q-41 -109 -117.5 -190t-206.5 -81q-24 0 -61 5.5t-57 10.5l20 155q-6 1 35.5 -2t52.5 -3q63 0 103 56t67 124l47 113z" />
|
||||
<glyph unicode="z" horiz-adv-x="1030" d="M94 0v138l585 788h-578v156h819v-134l-591 -794h625v-154h-860z" />
|
||||
<glyph unicode="{" horiz-adv-x="696" d="M63 543v147q106 0 157.5 61.5t51.5 174.5v206q0 171 82 290.5t277 174.5l40 -117q-110 -35 -156 -125.5t-46 -222.5v-206q0 -105 -42.5 -185t-127.5 -125q85 -46 127.5 -126.5t42.5 -183.5v-205q0 -132 46 -221.5t156 -125.5l-40 -118q-195 55 -277 175t-82 290v205 q0 112 -51.5 174.5t-157.5 62.5z" />
|
||||
<glyph unicode="|" horiz-adv-x="507" d="M145 -270v1726h197v-1726h-197z" />
|
||||
<glyph unicode="}" horiz-adv-x="696" d="M21 -246q109 36 156 125.5t47 221.5v205q0 107 45 187t139 123q-94 41 -139 121t-45 189v206q0 132 -47 222.5t-156 125.5l41 117q194 -55 276.5 -174.5t82.5 -290.5v-206q0 -113 50.5 -174.5t158.5 -61.5v-147q-108 0 -158.5 -62.5t-50.5 -174.5v-205q0 -170 -82.5 -290 t-276.5 -175z" />
|
||||
<glyph unicode="~" horiz-adv-x="1391" d="M128 474q0 136 85.5 232.5t217.5 96.5q88 0 163 -34.5t160 -104.5q58 -51 106 -74t100 -23q66 0 114.5 57t48.5 134l141 -18q0 -137 -87 -238t-217 -101q-90 0 -163.5 33t-158.5 107q-59 48 -108 72t-99 24q-67 0 -114.5 -53t-47.5 -128z" />
|
||||
<glyph unicode="¡" horiz-adv-x="507" d="M144 -374v978h197v-978h-197zM144 876v206h197v-206h-197z" />
|
||||
<glyph unicode="¢" horiz-adv-x="1122" d="M97 520v42q0 202 99 350t282 181v225h198v-227q140 -30 225 -134.5t82 -242.5l-3 -5h-180q0 99 -64.5 168.5t-162.5 69.5q-145 0 -211.5 -112.5t-66.5 -272.5v-42q0 -163 65.5 -275t212.5 -112q91 0 159 60.5t68 148.5h180l2 -5q3 -116 -86 -215t-220 -130v-237h-198v233 q-184 31 -282.5 179t-98.5 353z" />
|
||||
<glyph unicode="£" horiz-adv-x="1194" d="M70 615v155h158l-10 270q0 204 112 320.5t300 116.5q200 0 310 -104.5t106 -276.5l-2 -6h-190q0 118 -63 175t-161 57q-99 0 -157 -74.5t-58 -207.5l10 -270h418v-155h-413l6 -149q0 -90 -15.5 -171.5t-44.5 -140.5h735l-1 -154h-976v154h10q48 13 72 111t24 201l-6 149 h-164z" />
|
||||
<glyph unicode="¤" horiz-adv-x="1456" d="M104 112l138 140q-50 76 -76.5 166.5t-26.5 189.5q0 102 28.5 196t82.5 172l-146 149l139 139l143 -146q74 55 163 85.5t185 30.5q97 0 186 -31t164 -87l146 149l140 -140l-150 -153q52 -78 80.5 -170.5t28.5 -193.5q0 -98 -26.5 -187.5t-74.5 -165.5l142 -143l-140 -139 l-133 135q-77 -62 -169.5 -95t-193.5 -33t-193.5 32.5t-167.5 93.5l-130 -132zM321 608q0 -188 120.5 -320.5t292.5 -132.5q170 0 290.5 132.5t120.5 320.5q0 186 -120.5 318t-290.5 132q-172 0 -292.5 -132t-120.5 -318z" />
|
||||
<glyph unicode="¥" horiz-adv-x="1243" d="M30 1456h226l359 -663l360 663h224l-418 -718h312v-123h-383v-167h383v-122h-383v-326h-197v326h-375v122h375v167h-375v123h311z" />
|
||||
<glyph unicode="¦" horiz-adv-x="499" d="M145 -270v792h197v-792h-197zM145 698v758h197v-758h-197z" />
|
||||
<glyph unicode="§" horiz-adv-x="1259" d="M94 551q0 91 47 161.5t134 111.5q-68 50 -102 119.5t-34 166.5q0 166 134 266.5t358 100.5q233 0 363 -111.5t126 -313.5l-3 -6h-188q0 118 -79 197t-219 79q-145 0 -220 -59.5t-75 -150.5q0 -99 67 -148.5t278 -107.5q244 -69 355.5 -159.5t111.5 -265.5q0 -94 -48 -164 t-135 -110q69 -51 104 -119t35 -166q0 -172 -133 -269.5t-358 -97.5q-221 0 -372 102.5t-146 322.5l2 6l188 2q0 -143 96.5 -210.5t231.5 -67.5q137 0 215.5 59.5t78.5 150.5t-72 141.5t-276 113.5q-239 63 -352 156t-113 270zM291 553q0 -100 68 -151.5t278 -110.5 q56 -17 93 -28t70 -23q72 20 112 69.5t40 118.5q0 91 -73.5 144.5t-275.5 116.5q-47 12 -88.5 24.5t-77.5 27.5q-73 -19 -109.5 -69t-36.5 -119z" />
|
||||
<glyph unicode="¨" horiz-adv-x="1021" d="M170 1256v200h219v-200h-219zM640 1256v200h219v-200h-219z" />
|
||||
<glyph unicode="©" horiz-adv-x="1604" d="M88 729q0 315 207 531t503 216q295 0 502 -216t207 -531q0 -316 -207.5 -533t-501.5 -217q-296 0 -503 217t-207 533zM209 729q0 -265 171.5 -447t417.5 -182q245 0 417 182t172 447q0 263 -172 444t-417 181q-246 0 -417.5 -181t-171.5 -444zM436 669v119q0 173 94 280 t254 107q157 0 245.5 -79t84.5 -228l-2 -6h-146q0 95 -45.5 138.5t-136.5 43.5q-94 0 -145 -70.5t-51 -184.5v-120q0 -117 51 -187t145 -70q91 0 136 43t45 141h146l2 -6q4 -151 -84 -229.5t-245 -78.5q-160 0 -254 106.5t-94 280.5z" />
|
||||
<glyph unicode="ª" horiz-adv-x="917" d="M120 920q0 110 84.5 170t245.5 60h139v52q0 63 -30 97t-88 34q-67 0 -103.5 -27t-36.5 -76l-162 13l-1 6q-6 98 78.5 163t224.5 65q134 0 212 -71t78 -205v-314q0 -50 6 -94t20 -87h-174q-8 21 -13 45t-8 50q-33 -47 -89.5 -78t-133.5 -31q-119 0 -184 61t-65 167z M293 924q0 -45 29 -69t89 -24q51 0 105.5 30t72.5 65v110h-138q-75 0 -116.5 -33t-41.5 -79z" />
|
||||
<glyph unicode="«" horiz-adv-x="966" d="M97 506v19l295 389h148l-255 -399l255 -398h-148zM432 506v19l295 389h148l-255 -399l255 -398h-148z" />
|
||||
<glyph unicode="¬" horiz-adv-x="1137" d="M127 637v165h835v-427h-198v262h-637z" />
|
||||
<glyph unicode="­" horiz-adv-x="923" d="M167 538v154h590v-154h-590z" />
|
||||
<glyph unicode="®" horiz-adv-x="1604" d="M88 729q0 315 207 531t503 216q295 0 502 -216t207 -531q0 -316 -207.5 -533t-501.5 -217q-296 0 -503 217t-207 533zM209 729q0 -266 171.5 -447.5t417.5 -181.5q244 0 416 182t172 447q0 264 -171.5 444.5t-416.5 180.5q-246 0 -417.5 -180.5t-171.5 -444.5zM504 316 v850h280q152 0 238.5 -65.5t86.5 -191.5q0 -62 -33 -109t-96 -78q66 -26 95.5 -79t29.5 -128v-56q0 -41 3.5 -73.5t13.5 -53.5v-16h-153q-9 21 -11 61.5t-2 82.5v54q0 72 -33.5 106t-110.5 34h-159v-338h-149zM653 784h152q65 1 110.5 32.5t45.5 87.5q0 73 -39.5 102.5 t-137.5 29.5h-131v-252z" />
|
||||
<glyph unicode="¯" horiz-adv-x="950" d="M123 1310v146h721v-146h-721z" />
|
||||
<glyph unicode="°" horiz-adv-x="763" d="M128 1216q0 106 76 183.5t181 77.5q103 0 177.5 -77.5t74.5 -183.5q0 -108 -74 -182.5t-178 -74.5q-106 0 -181.5 74.5t-75.5 182.5zM259 1216q0 -55 36.5 -91t89.5 -36q52 0 87.5 36t35.5 91t-36 92.5t-87 37.5q-53 0 -89.5 -37.5t-36.5 -92.5z" />
|
||||
<glyph unicode="±" horiz-adv-x="1097" d="M99 702v154h381v411h177v-411h358v-154h-358v-413h-177v413h-381zM136 4v155h835v-155h-835z" />
|
||||
<glyph unicode="²" horiz-adv-x="868" d="M119 1240q-6 99 78 169t225 70q135 0 211 -64t76 -180q0 -80 -44.5 -136t-160.5 -161l-153 -135l2 -6h361v-130h-592v130l302 262q69 60 91 97.5t22 79.5q0 50 -28.5 81t-86.5 31q-67 0 -103.5 -32t-36.5 -82h-161z" />
|
||||
<glyph unicode="³" horiz-adv-x="876" d="M112 882l1 6h163q0 -46 37.5 -74.5t100.5 -28.5q72 0 114 29.5t42 77.5q0 62 -36.5 90.5t-109.5 28.5h-132v126h132q67 0 99.5 28.5t32.5 80.5q0 43 -36.5 72t-105.5 29q-56 0 -90.5 -24t-34.5 -64h-162l-2 6q-6 94 78.5 153.5t210.5 59.5q145 0 229 -59.5t84 -169.5 q0 -55 -35.5 -100.5t-97.5 -71.5q70 -23 108 -71t38 -116q0 -111 -90 -173t-236 -62q-127 0 -217.5 58t-84.5 169z" />
|
||||
<glyph unicode="´" horiz-adv-x="654" d="M131 1252l185 266h230l2 -6l-269 -260h-148z" />
|
||||
<glyph unicode="µ" d="M153 -416v1498h196v-642q2 -178 57.5 -242.5t155.5 -64.5q98 0 158.5 36t92.5 106v807h197v-1082h-177l-9 108q-44 -63 -107.5 -96t-146.5 -33q-72 0 -126.5 16.5t-94.5 51.5v-463h-196z" />
|
||||
<glyph unicode="¶" horiz-adv-x="1006" d="M63 988q0 207 129.5 337.5t362.5 130.5h281v-1456h-197v520h-84q-233 0 -362.5 129.5t-129.5 338.5z" />
|
||||
<glyph unicode="·" horiz-adv-x="540" d="M161 624v212h198v-212h-198z" />
|
||||
<glyph unicode="¸" horiz-adv-x="509" d="M119 -326q72 0 116 24.5t44 73.5q0 48 -36 67t-123 26l32 135h140l-12 -52q65 -11 108 -52t43 -121q0 -96 -79 -153t-226 -57z" />
|
||||
<glyph unicode="¹" horiz-adv-x="557" d="M95 1320v134l301 23v-812h-174v655h-127z" />
|
||||
<glyph unicode="º" horiz-adv-x="933" d="M120 1025v117q0 148 94 241.5t251 93.5q158 0 252 -93.5t94 -241.5v-117q0 -149 -93.5 -241.5t-250.5 -92.5q-158 0 -252.5 92.5t-94.5 241.5zM293 1025q0 -88 44 -140.5t130 -52.5q83 0 127.5 53t44.5 140v117q0 84 -45 137.5t-129 53.5t-128 -53.5t-44 -137.5v-117z " />
|
||||
<glyph unicode="»" horiz-adv-x="966" d="M116 170l231 380l-231 380h148l278 -357h5l1 -9l5 -5l-2 -9l2 -9l-5 -6l-1 -7h-4l-279 -358h-148zM462 170l231 380l-231 380h148l278 -357h5l1 -9l5 -5l-2 -9l2 -9l-5 -6l-1 -7h-4l-279 -358h-148z" />
|
||||
<glyph unicode="¼" horiz-adv-x="1595" d="M184 1319v134l301 23v-812h-174v655h-127zM339 185l711 1138l109 -67l-711 -1138zM785 254l422 547h173v-519h126v-130h-126v-152h-170v152h-417zM967 282h243v310l-6 1l-13 -22z" />
|
||||
<glyph unicode="½" horiz-adv-x="1708" d="M184 1319v134l301 23v-812h-174v655h-127zM352 185l711 1138l109 -67l-711 -1138zM930 573q-6 99 78 169t225 70q135 0 211 -64t76 -180q0 -80 -44.5 -136t-160.5 -161l-153 -135l2 -6h361v-130h-592v130l302 262q69 60 91 97.5t22 79.5q0 50 -28.5 81t-86.5 31 q-67 0 -103.5 -32t-36.5 -82h-161z" />
|
||||
<glyph unicode="¾" horiz-adv-x="1781" d="M128 883l1 6h163q0 -46 37.5 -74.5t100.5 -28.5q72 0 114 29.5t42 77.5q0 62 -36.5 90.5t-109.5 28.5h-132v126h132q67 0 99.5 28.5t32.5 80.5q0 43 -36.5 72t-105.5 29q-56 0 -90.5 -24t-34.5 -64h-162l-2 6q-6 94 78.5 153.5t210.5 59.5q145 0 229 -59.5t84 -169.5 q0 -55 -35.5 -100.5t-97.5 -71.5q70 -23 108 -71t38 -116q0 -111 -90 -173t-236 -62q-127 0 -217.5 58t-84.5 169zM522 185l711 1138l109 -67l-711 -1138zM974 254l422 547h173v-519h126v-130h-126v-152h-170v152h-417zM1156 282h243v310l-6 1l-13 -22z" />
|
||||
<glyph unicode="¿" horiz-adv-x="1013" d="M114 -13q0 127 70 233.5t187 220.5q53 53 65 96t12 135h197q-2 -146 -26 -202t-125 -147q-100 -118 -141.5 -181t-41.5 -150q0 -106 56 -163t162 -57q90 0 154.5 49.5t64.5 145.5h188l3 -6q2 -161 -114.5 -258t-295.5 -97q-198 0 -306.5 100.5t-108.5 280.5zM441 874v209 h206v-209h-206z" />
|
||||
<glyph unicode="À" horiz-adv-x="1295" d="M43 0l525 1456h169l514 -1456h-201l-128 375h-548l-130 -375h-201zM323 1861l3 6h230l175 -266h-158zM431 540h435l-212 625h-6z" />
|
||||
<glyph unicode="Á" horiz-adv-x="1295" d="M43 0l525 1456h169l514 -1456h-201l-128 375h-548l-130 -375h-201zM431 540h435l-212 625h-6zM558 1597l185 266h230l2 -6l-269 -260h-148z" />
|
||||
<glyph unicode="Â" horiz-adv-x="1295" d="M43 0l525 1456h169l514 -1456h-201l-128 375h-548l-130 -375h-201zM342 1601v26l246 237h120l248 -238v-25h-161l-147 148l-146 -148h-160zM431 540h435l-212 625h-6z" />
|
||||
<glyph unicode="Ã" horiz-adv-x="1295" d="M43 0l525 1456h169l514 -1456h-201l-128 375h-548l-130 -375h-201zM301 1628q0 93 59 161.5t150 68.5q56 0 140 -47t136 -47q41 0 71 32.5t30 79.5l108 -32q0 -94 -59.5 -159t-149.5 -65q-71 0 -148 46.5t-128 46.5q-43 0 -72 -32.5t-29 -78.5zM431 540h435l-212 625h-6z " />
|
||||
<glyph unicode="Ä" horiz-adv-x="1295" d="M43 0l525 1456h169l514 -1456h-201l-128 375h-548l-130 -375h-201zM304 1605v200h219v-200h-219zM431 540h435l-212 625h-6zM774 1605v200h219v-200h-219z" />
|
||||
<glyph unicode="Å" horiz-adv-x="1295" d="M43 0l525 1456h169l514 -1456h-201l-128 375h-548l-130 -375h-201zM431 540h435l-212 625h-6zM471 1734q0 72 51.5 120.5t124.5 48.5q72 0 122.5 -48.5t50.5 -120.5q0 -73 -50.5 -118.5t-122.5 -45.5q-74 0 -125 46t-51 118zM571 1734q0 -31 22.5 -52.5t53.5 -21.5 q30 0 51.5 21t21.5 53t-21.5 54.5t-51.5 22.5q-32 0 -54 -22.5t-22 -54.5z" />
|
||||
<glyph unicode="Æ" horiz-adv-x="1999" d="M14 0l881 1456h967v-155h-691l20 -466h590v-155h-584l22 -526h705v-154h-895l-15 350h-557l-201 -350h-242zM560 529h447l-31 710l-5 2z" />
|
||||
<glyph unicode="Ç" horiz-adv-x="1297" d="M118 598v259q0 269 155.5 444.5t402.5 175.5t393 -131.5t142 -348.5l-2 -6h-189q0 153 -90 242t-254 89q-165 0 -263 -133t-98 -330v-261q0 -199 98 -332t263 -133q164 0 254 88.5t90 244.5h189l2 -6q4 -205 -144 -343t-391 -138q-247 0 -402.5 175t-155.5 444zM581 -335 q72 0 116 24.5t44 73.5q0 48 -36 67t-123 26l32 135h140l-12 -52q65 -11 108 -52t43 -121q0 -96 -79 -153t-226 -57z" />
|
||||
<glyph unicode="È" horiz-adv-x="1130" d="M170 0v1456h886v-155h-689v-471h598v-155h-598v-521h700v-154h-897zM294 1861l3 6h230l175 -266h-158z" />
|
||||
<glyph unicode="É" horiz-adv-x="1130" d="M170 0v1456h886v-155h-689v-471h598v-155h-598v-521h700v-154h-897zM529 1597l185 266h230l2 -6l-269 -260h-148z" />
|
||||
<glyph unicode="Ê" horiz-adv-x="1130" d="M170 0v1456h886v-155h-689v-471h598v-155h-598v-521h700v-154h-897zM313 1601v26l246 237h120l248 -238v-25h-161l-147 148l-146 -148h-160z" />
|
||||
<glyph unicode="Ë" horiz-adv-x="1130" d="M170 0v1456h886v-155h-689v-471h598v-155h-598v-521h700v-154h-897zM275 1605v200h219v-200h-219zM745 1605v200h219v-200h-219z" />
|
||||
<glyph unicode="Ì" horiz-adv-x="579" d="M-35 1861l3 6h230l175 -266h-158zM190 0v1456h198v-1456h-198z" />
|
||||
<glyph unicode="Í" horiz-adv-x="579" d="M190 0v1456h198v-1456h-198zM199 1597l185 266h230l2 -6l-269 -260h-148z" />
|
||||
<glyph unicode="Î" horiz-adv-x="579" d="M-16 1601v26l246 237h120l248 -238v-25h-161l-147 148l-146 -148h-160zM190 0v1456h198v-1456h-198z" />
|
||||
<glyph unicode="Ï" horiz-adv-x="579" d="M-54 1605v200h219v-200h-219zM190 0v1456h198v-1456h-198zM416 1605v200h219v-200h-219z" />
|
||||
<glyph unicode="Ð" horiz-adv-x="1387" d="M2 663v155h168v638h458q285 0 458.5 -175.5t173.5 -453.5v-199q0 -279 -173.5 -453.5t-458.5 -174.5h-458v663h-168zM367 154h261q202 0 318.5 133t116.5 341v201q0 206 -116.5 339t-318.5 133h-261v-483h276v-155h-276v-509z" />
|
||||
<glyph unicode="Ñ" horiz-adv-x="1442" d="M170 0v1456h197l701 -1111l6 2v1109h197v-1456h-197l-701 1112l-6 -2v-1110h-197zM372 1628q0 93 59 161.5t150 68.5q56 0 140 -47t136 -47q41 0 71 32.5t30 79.5l108 -32q0 -94 -59.5 -159t-149.5 -65q-71 0 -148 46.5t-128 46.5q-43 0 -72 -32.5t-29 -78.5z" />
|
||||
<glyph unicode="Ò" horiz-adv-x="1396" d="M113 598v259q0 266 159.5 443t414.5 177q264 0 429.5 -176.5t165.5 -443.5v-259q0 -267 -165.5 -443t-429.5 -176q-255 0 -414.5 176t-159.5 443zM310 598q0 -202 102.5 -330t274.5 -128q183 0 290.5 127.5t107.5 330.5v261q0 200 -108 328t-290 128q-172 0 -274.5 -128 t-102.5 -328v-261zM373 1882l3 6h230l175 -266h-158z" />
|
||||
<glyph unicode="Ó" horiz-adv-x="1396" d="M113 598v259q0 266 159.5 443t414.5 177q264 0 429.5 -176.5t165.5 -443.5v-259q0 -267 -165.5 -443t-429.5 -176q-255 0 -414.5 176t-159.5 443zM310 598q0 -202 102.5 -330t274.5 -128q183 0 290.5 127.5t107.5 330.5v261q0 200 -108 328t-290 128q-172 0 -274.5 -128 t-102.5 -328v-261zM608 1618l185 266h230l2 -6l-269 -260h-148z" />
|
||||
<glyph unicode="Ô" horiz-adv-x="1396" d="M113 598v259q0 266 159.5 443t414.5 177q264 0 429.5 -176.5t165.5 -443.5v-259q0 -267 -165.5 -443t-429.5 -176q-255 0 -414.5 176t-159.5 443zM310 598q0 -202 102.5 -330t274.5 -128q183 0 290.5 127.5t107.5 330.5v261q0 200 -108 328t-290 128q-172 0 -274.5 -128 t-102.5 -328v-261zM392 1622v26l246 237h120l248 -238v-25h-161l-147 148l-146 -148h-160z" />
|
||||
<glyph unicode="Õ" horiz-adv-x="1396" d="M113 598v259q0 266 159.5 443t414.5 177q264 0 429.5 -176.5t165.5 -443.5v-259q0 -267 -165.5 -443t-429.5 -176q-255 0 -414.5 176t-159.5 443zM310 598q0 -202 102.5 -330t274.5 -128q183 0 290.5 127.5t107.5 330.5v261q0 200 -108 328t-290 128q-172 0 -274.5 -128 t-102.5 -328v-261zM351 1649q0 93 59 161.5t150 68.5q56 0 140 -47t136 -47q41 0 71 32.5t30 79.5l108 -32q0 -94 -59.5 -159t-149.5 -65q-71 0 -148 46.5t-128 46.5q-43 0 -72 -32.5t-29 -78.5z" />
|
||||
<glyph unicode="Ö" horiz-adv-x="1396" d="M113 598v259q0 266 159.5 443t414.5 177q264 0 429.5 -176.5t165.5 -443.5v-259q0 -267 -165.5 -443t-429.5 -176q-255 0 -414.5 176t-159.5 443zM310 598q0 -202 102.5 -330t274.5 -128q183 0 290.5 127.5t107.5 330.5v261q0 200 -108 328t-290 128q-172 0 -274.5 -128 t-102.5 -328v-261zM354 1626v200h219v-200h-219zM824 1626v200h219v-200h-219z" />
|
||||
<glyph unicode="×" horiz-adv-x="1096" d="M88 351l327 334l-327 334l126 126l326 -333l327 333l126 -126l-328 -334l328 -334l-126 -126l-327 332l-326 -332z" />
|
||||
<glyph unicode="Ø" horiz-adv-x="1396" d="M113 598v259q0 266 159.5 443t414.5 177q94 0 178.5 -25.5t156.5 -71.5l81 137h149l-132 -221q77 -84 119.5 -197t42.5 -242v-259q0 -267 -165.5 -443t-429.5 -176q-85 0 -160.5 20.5t-139.5 60.5l-91 -154h-149l139 234q-84 84 -128.5 202t-44.5 256zM310 598 q0 -85 19 -158t54 -125l6 -1l544 916q-50 41 -112 63t-134 22q-172 0 -274.5 -128t-102.5 -328v-261zM475 208q44 -34 97 -51t115 -17q183 0 290.5 127.5t107.5 330.5v261q0 75 -16.5 142t-46.5 117l-6 1z" />
|
||||
<glyph unicode="Ù" horiz-adv-x="1386" d="M147 489v967h197v-967q0 -167 95.5 -261.5t246.5 -94.5q160 0 260.5 94.5t100.5 261.5v967h197v-967q0 -240 -156 -375t-402 -135q-237 0 -388 135.5t-151 374.5zM372 1861l3 6h230l175 -266h-158z" />
|
||||
<glyph unicode="Ú" horiz-adv-x="1386" d="M147 489v967h197v-967q0 -167 95.5 -261.5t246.5 -94.5q160 0 260.5 94.5t100.5 261.5v967h197v-967q0 -240 -156 -375t-402 -135q-237 0 -388 135.5t-151 374.5zM607 1597l185 266h230l2 -6l-269 -260h-148z" />
|
||||
<glyph unicode="Û" horiz-adv-x="1386" d="M147 489v967h197v-967q0 -167 95.5 -261.5t246.5 -94.5q160 0 260.5 94.5t100.5 261.5v967h197v-967q0 -240 -156 -375t-402 -135q-237 0 -388 135.5t-151 374.5zM391 1601v26l246 237h120l248 -238v-25h-161l-147 148l-146 -148h-160z" />
|
||||
<glyph unicode="Ü" horiz-adv-x="1386" d="M147 489v967h197v-967q0 -167 95.5 -261.5t246.5 -94.5q160 0 260.5 94.5t100.5 261.5v967h197v-967q0 -240 -156 -375t-402 -135q-237 0 -388 135.5t-151 374.5zM353 1605v200h219v-200h-219zM823 1605v200h219v-200h-219z" />
|
||||
<glyph unicode="Ý" horiz-adv-x="1295" d="M40 1456h225l380 -740l380 740h225l-511 -944v-512h-196v527zM556 1596l185 266h230l2 -6l-269 -260h-148z" />
|
||||
<glyph unicode="Þ" horiz-adv-x="1209" d="M163 0v1456h197v-293h269q232 0 362 -118t130 -307q0 -190 -130 -307.5t-362 -117.5h-269v-313h-197zM360 467h269q147 0 220.5 78t73.5 191q0 114 -73.5 193.5t-220.5 79.5h-269v-542z" />
|
||||
<glyph unicode="ß" horiz-adv-x="1221" d="M137 0v1082q0 223 117.5 348t300.5 125q161 0 262 -86t101 -253q0 -118 -64.5 -228t-64.5 -167q0 -82 173.5 -224t173.5 -281q0 -167 -104.5 -252t-282.5 -85q-84 0 -172.5 20.5t-125.5 50.5l44 159q43 -28 108 -52t126 -24q108 0 159 47.5t51 125.5q0 84 -173.5 227.5 t-173.5 289.5q0 80 70.5 190.5t70.5 186.5q0 93 -51 147t-117 54q-104 0 -168 -83.5t-64 -235.5v-1082h-196z" />
|
||||
<glyph unicode="à" horiz-adv-x="1126" d="M106 304q0 155 125.5 242.5t340.5 87.5h214v107q0 95 -58 150.5t-164 55.5q-96 0 -155 -48t-59 -115l-187 -2l-2 6q-7 118 110.5 216t303.5 98q184 0 296 -93.5t112 -269.5v-521q0 -58 6 -112t22 -106h-203q-10 49 -15.5 86.5t-6.5 75.5q-55 -78 -143.5 -130.5 t-190.5 -52.5q-169 0 -257.5 86.5t-88.5 238.5zM230 1539l3 6h230l175 -266h-158zM303 300q0 -72 45 -114t133 -42q107 0 193 55t112 126v176h-221q-119 0 -190.5 -60t-71.5 -141z" />
|
||||
<glyph unicode="á" horiz-adv-x="1126" d="M106 304q0 155 125.5 242.5t340.5 87.5h214v107q0 95 -58 150.5t-164 55.5q-96 0 -155 -48t-59 -115l-187 -2l-2 6q-7 118 110.5 216t303.5 98q184 0 296 -93.5t112 -269.5v-521q0 -58 6 -112t22 -106h-203q-10 49 -15.5 86.5t-6.5 75.5q-55 -78 -143.5 -130.5 t-190.5 -52.5q-169 0 -257.5 86.5t-88.5 238.5zM303 300q0 -72 45 -114t133 -42q107 0 193 55t112 126v176h-221q-119 0 -190.5 -60t-71.5 -141zM465 1275l185 266h230l2 -6l-269 -260h-148z" />
|
||||
<glyph unicode="â" horiz-adv-x="1126" d="M106 304q0 155 125.5 242.5t340.5 87.5h214v107q0 95 -58 150.5t-164 55.5q-96 0 -155 -48t-59 -115l-187 -2l-2 6q-7 118 110.5 216t303.5 98q184 0 296 -93.5t112 -269.5v-521q0 -58 6 -112t22 -106h-203q-10 49 -15.5 86.5t-6.5 75.5q-55 -78 -143.5 -130.5 t-190.5 -52.5q-169 0 -257.5 86.5t-88.5 238.5zM249 1279v26l246 237h120l248 -238v-25h-161l-147 148l-146 -148h-160zM303 300q0 -72 45 -114t133 -42q107 0 193 55t112 126v176h-221q-119 0 -190.5 -60t-71.5 -141z" />
|
||||
<glyph unicode="ã" horiz-adv-x="1126" d="M106 304q0 155 125.5 242.5t340.5 87.5h214v107q0 95 -58 150.5t-164 55.5q-96 0 -155 -48t-59 -115l-187 -2l-2 6q-7 118 110.5 216t303.5 98q184 0 296 -93.5t112 -269.5v-521q0 -58 6 -112t22 -106h-203q-10 49 -15.5 86.5t-6.5 75.5q-55 -78 -143.5 -130.5 t-190.5 -52.5q-169 0 -257.5 86.5t-88.5 238.5zM208 1306q0 93 59 161.5t150 68.5q56 0 140 -47t136 -47q41 0 71 32.5t30 79.5l108 -32q0 -94 -59.5 -159t-149.5 -65q-71 0 -148 46.5t-128 46.5q-43 0 -72 -32.5t-29 -78.5zM303 300q0 -72 45 -114t133 -42q107 0 193 55 t112 126v176h-221q-119 0 -190.5 -60t-71.5 -141z" />
|
||||
<glyph unicode="ä" horiz-adv-x="1126" d="M106 304q0 155 125.5 242.5t340.5 87.5h214v107q0 95 -58 150.5t-164 55.5q-96 0 -155 -48t-59 -115l-187 -2l-2 6q-7 118 110.5 216t303.5 98q184 0 296 -93.5t112 -269.5v-521q0 -58 6 -112t22 -106h-203q-10 49 -15.5 86.5t-6.5 75.5q-55 -78 -143.5 -130.5 t-190.5 -52.5q-169 0 -257.5 86.5t-88.5 238.5zM211 1283v200h219v-200h-219zM303 300q0 -72 45 -114t133 -42q107 0 193 55t112 126v176h-221q-119 0 -190.5 -60t-71.5 -141zM681 1283v200h219v-200h-219z" />
|
||||
<glyph unicode="å" horiz-adv-x="1126" d="M106 304q0 155 125.5 242.5t340.5 87.5h214v107q0 95 -58 150.5t-164 55.5q-96 0 -155 -48t-59 -115l-187 -2l-2 6q-7 118 110.5 216t303.5 98q184 0 296 -93.5t112 -269.5v-521q0 -58 6 -112t22 -106h-203q-10 49 -15.5 86.5t-6.5 75.5q-55 -78 -143.5 -130.5 t-190.5 -52.5q-169 0 -257.5 86.5t-88.5 238.5zM303 300q0 -72 45 -114t133 -42q107 0 193 55t112 126v176h-221q-119 0 -190.5 -60t-71.5 -141zM378 1412q0 72 51.5 120.5t124.5 48.5q72 0 122.5 -48.5t50.5 -120.5q0 -73 -50.5 -118.5t-122.5 -45.5q-74 0 -125 46t-51 118 zM478 1412q0 -31 22.5 -52.5t53.5 -21.5q30 0 51.5 21t21.5 53t-21.5 54.5t-51.5 22.5q-32 0 -54 -22.5t-22 -54.5z" />
|
||||
<glyph unicode="æ" horiz-adv-x="1789" d="M88 304q0 157 115 243t335 86h229v87q0 106 -52 166.5t-149 60.5q-103 0 -164 -55t-61 -133l-188 18l-2 6q-5 138 110 228.5t305 90.5q114 0 201.5 -40.5t137.5 -117.5q64 75 151.5 116.5t188.5 41.5q214 0 329.5 -130t115.5 -358v-119h-709l-2 -5q1 -159 79.5 -258 t233.5 -99q103 0 169.5 27.5t144.5 78.5l67 -138q-53 -44 -147 -83t-234 -39q-136 0 -240 48.5t-170 138.5q-56 -79 -167.5 -133t-271.5 -54q-170 0 -262.5 87t-92.5 238zM285 300q0 -74 50 -120.5t147 -46.5q76 0 159 43.5t126 100.5v214h-227q-120 0 -187.5 -55.5 t-67.5 -135.5zM983 645l2 -5h508v31q0 122 -60 199t-188 77q-113 0 -182 -84.5t-80 -217.5z" />
|
||||
<glyph unicode="ç" horiz-adv-x="1072" d="M97 520v42q0 229 124.5 384.5t351.5 155.5q181 0 296.5 -112t111.5 -275l-2 -6h-179q0 99 -64.5 168.5t-162.5 69.5q-145 0 -211.5 -112.5t-66.5 -272.5v-42q0 -163 65.5 -275t212.5 -112q91 0 159 60.5t68 148.5h178l3 -6q4 -140 -120 -248.5t-288 -108.5 q-228 0 -352 155t-124 386zM450 -335q72 0 116 24.5t44 73.5q0 48 -36 67t-123 26l32 135h140l-12 -52q65 -11 108 -52t43 -121q0 -96 -79 -153t-226 -57z" />
|
||||
<glyph unicode="è" horiz-adv-x="1072" d="M97 520v44q0 233 134.5 385.5t328.5 152.5q217 0 325.5 -135t108.5 -359v-104h-692l-3 -5q0 -163 72 -264.5t220 -101.5q100 0 175.5 28.5t129.5 78.5l77 -128q-58 -56 -153 -94.5t-229 -38.5q-233 0 -363.5 149t-130.5 392zM214 1540l3 6h230l175 -266h-158zM307 664 l2 -5h488v16q0 118 -58 195t-179 77q-103 0 -170.5 -79.5t-82.5 -203.5z" />
|
||||
<glyph unicode="é" horiz-adv-x="1072" d="M97 520v44q0 233 134.5 385.5t328.5 152.5q217 0 325.5 -135t108.5 -359v-104h-692l-3 -5q0 -163 72 -264.5t220 -101.5q100 0 175.5 28.5t129.5 78.5l77 -128q-58 -56 -153 -94.5t-229 -38.5q-233 0 -363.5 149t-130.5 392zM307 664l2 -5h488v16q0 118 -58 195t-179 77 q-103 0 -170.5 -79.5t-82.5 -203.5zM449 1276l185 266h230l2 -6l-269 -260h-148z" />
|
||||
<glyph unicode="ê" horiz-adv-x="1072" d="M97 520v44q0 233 134.5 385.5t328.5 152.5q217 0 325.5 -135t108.5 -359v-104h-692l-3 -5q0 -163 72 -264.5t220 -101.5q100 0 175.5 28.5t129.5 78.5l77 -128q-58 -56 -153 -94.5t-229 -38.5q-233 0 -363.5 149t-130.5 392zM233 1280v26l246 237h120l248 -238v-25h-161 l-147 148l-146 -148h-160zM307 664l2 -5h488v16q0 118 -58 195t-179 77q-103 0 -170.5 -79.5t-82.5 -203.5z" />
|
||||
<glyph unicode="ë" horiz-adv-x="1072" d="M97 520v44q0 233 134.5 385.5t328.5 152.5q217 0 325.5 -135t108.5 -359v-104h-692l-3 -5q0 -163 72 -264.5t220 -101.5q100 0 175.5 28.5t129.5 78.5l77 -128q-58 -56 -153 -94.5t-229 -38.5q-233 0 -363.5 149t-130.5 392zM195 1284v200h219v-200h-219zM307 664l2 -5 h488v16q0 118 -58 195t-179 77q-103 0 -170.5 -79.5t-82.5 -203.5zM665 1284v200h219v-200h-219z" />
|
||||
<glyph unicode="ì" horiz-adv-x="515" d="M-72 1518l3 6h230l175 -266h-158zM153 0v1082h197v-1082h-197z" />
|
||||
<glyph unicode="í" horiz-adv-x="515" d="M153 0v1082h197v-1082h-197zM162 1254l185 266h230l2 -6l-269 -260h-148z" />
|
||||
<glyph unicode="î" horiz-adv-x="515" d="M-53 1258v26l246 237h120l248 -238v-25h-161l-147 148l-146 -148h-160zM153 0v1082h197v-1082h-197z" />
|
||||
<glyph unicode="ï" horiz-adv-x="515" d="M-91 1262v200h219v-200h-219zM153 0v1082h197v-1082h-197zM379 1262v200h219v-200h-219z" />
|
||||
<glyph unicode="ð" horiz-adv-x="1202" d="M72 466q0 228 138 370t351 142q90 0 169.5 -37t131.5 -97l4 5q-9 109 -51.5 197t-110.5 154l-290 -165l-77 102l256 146q-39 22 -80.5 39t-85.5 31l60 164q79 -19 151 -52t135 -79l218 125l77 -102l-195 -112q95 -104 147 -241.5t52 -300.5v-220q0 -245 -144 -400.5 t-359 -155.5q-218 0 -357.5 140t-139.5 347zM269 466q0 -132 82 -232.5t222 -100.5q133 0 217.5 114t84.5 288v148q-35 59 -115.5 99.5t-198.5 40.5q-131 0 -211.5 -104t-80.5 -253z" />
|
||||
<glyph unicode="ñ" d="M143 0v1082h176l14 -161q54 86 135.5 133.5t185.5 47.5q175 0 271 -102.5t96 -316.5v-683h-197v679q0 143 -56.5 203t-172.5 60q-91 0 -154.5 -36.5t-100.5 -102.5v-803h-197zM231 1306q0 93 59 161.5t150 68.5q56 0 140 -47t136 -47q41 0 71 32.5t30 79.5l108 -32 q0 -94 -59.5 -159t-149.5 -65q-71 0 -148 46.5t-128 46.5q-43 0 -72 -32.5t-29 -78.5z" />
|
||||
<glyph unicode="ò" d="M97 529v22q0 240 130 395.5t353 155.5q225 0 355.5 -155t130.5 -396v-22q0 -242 -130 -396t-354 -154t-354.5 154.5t-130.5 395.5zM257 1539l3 6h230l175 -266h-158zM294 529q0 -172 72.5 -284t215.5 -112q141 0 214 112t73 284v22q0 170 -73.5 283t-215.5 113 q-141 0 -213.5 -113t-72.5 -283v-22z" />
|
||||
<glyph unicode="ó" d="M97 529v22q0 240 130 395.5t353 155.5q225 0 355.5 -155t130.5 -396v-22q0 -242 -130 -396t-354 -154t-354.5 154.5t-130.5 395.5zM294 529q0 -172 72.5 -284t215.5 -112q141 0 214 112t73 284v22q0 170 -73.5 283t-215.5 113q-141 0 -213.5 -113t-72.5 -283v-22z M492 1275l185 266h230l2 -6l-269 -260h-148z" />
|
||||
<glyph unicode="ô" d="M97 529v22q0 240 130 395.5t353 155.5q225 0 355.5 -155t130.5 -396v-22q0 -242 -130 -396t-354 -154t-354.5 154.5t-130.5 395.5zM276 1279v26l246 237h120l248 -238v-25h-161l-147 148l-146 -148h-160zM294 529q0 -172 72.5 -284t215.5 -112q141 0 214 112t73 284v22 q0 170 -73.5 283t-215.5 113q-141 0 -213.5 -113t-72.5 -283v-22z" />
|
||||
<glyph unicode="õ" d="M97 529v22q0 240 130 395.5t353 155.5q225 0 355.5 -155t130.5 -396v-22q0 -242 -130 -396t-354 -154t-354.5 154.5t-130.5 395.5zM235 1306q0 93 59 161.5t150 68.5q56 0 140 -47t136 -47q41 0 71 32.5t30 79.5l108 -32q0 -94 -59.5 -159t-149.5 -65q-71 0 -148 46.5 t-128 46.5q-43 0 -72 -32.5t-29 -78.5zM294 529q0 -172 72.5 -284t215.5 -112q141 0 214 112t73 284v22q0 170 -73.5 283t-215.5 113q-141 0 -213.5 -113t-72.5 -283v-22z" />
|
||||
<glyph unicode="ö" d="M97 529v22q0 240 130 395.5t353 155.5q225 0 355.5 -155t130.5 -396v-22q0 -242 -130 -396t-354 -154t-354.5 154.5t-130.5 395.5zM238 1283v200h219v-200h-219zM294 529q0 -172 72.5 -284t215.5 -112q141 0 214 112t73 284v22q0 170 -73.5 283t-215.5 113 q-141 0 -213.5 -113t-72.5 -283v-22zM708 1283v200h219v-200h-219z" />
|
||||
<glyph unicode="÷" horiz-adv-x="1170" d="M71 597v188h998v-188h-998zM472 180v203h198v-203h-198zM472 999v203h198v-203h-198z" />
|
||||
<glyph unicode="ø" d="M97 529v22q0 240 130 395.5t353 155.5q56 0 107.5 -11t97.5 -31l74 149h129l-104 -211q88 -74 135 -190t47 -257v-22q0 -242 -130 -396t-354 -154q-51 0 -97 8.5t-88 24.5l-72 -147h-129l100 204q-96 71 -147.5 191t-51.5 269zM294 529q0 -91 20 -166.5t61 -123.5h6 l332 674q-29 16 -62.5 25t-70.5 9q-141 0 -213.5 -113t-72.5 -283v-22zM469 156q24 -12 52 -17.5t61 -5.5q141 0 214 112t73 284v22q0 80 -17.5 150.5t-49.5 117.5h-6z" />
|
||||
<glyph unicode="ù" d="M139 444v638h197v-640q0 -173 51 -238t159 -65q105 0 173.5 42.5t103.5 120.5v780h197v-1082h-177l-13 160q-51 -87 -131 -134t-185 -47q-177 0 -276 113t-99 352zM255 1518l3 6h230l175 -266h-158z" />
|
||||
<glyph unicode="ú" d="M139 444v638h197v-640q0 -173 51 -238t159 -65q105 0 173.5 42.5t103.5 120.5v780h197v-1082h-177l-13 160q-51 -87 -131 -134t-185 -47q-177 0 -276 113t-99 352zM490 1254l185 266h230l2 -6l-269 -260h-148z" />
|
||||
<glyph unicode="û" d="M139 444v638h197v-640q0 -173 51 -238t159 -65q105 0 173.5 42.5t103.5 120.5v780h197v-1082h-177l-13 160q-51 -87 -131 -134t-185 -47q-177 0 -276 113t-99 352zM274 1258v26l246 237h120l248 -238v-25h-161l-147 148l-146 -148h-160z" />
|
||||
<glyph unicode="ü" d="M139 444v638h197v-640q0 -173 51 -238t159 -65q105 0 173.5 42.5t103.5 120.5v780h197v-1082h-177l-13 160q-51 -87 -131 -134t-185 -47q-177 0 -276 113t-99 352zM236 1262v200h219v-200h-219zM706 1262v200h219v-200h-219z" />
|
||||
<glyph unicode="ý" horiz-adv-x="1030" d="M26 1082h220l228 -681l35 -136h6l266 817h219l-455 -1248q-41 -109 -117.5 -190t-206.5 -81q-24 0 -61 5.5t-57 10.5l20 155q-6 1 35.5 -2t52.5 -3q63 0 103 56t67 124l47 113zM424 1254l185 266h230l2 -6l-269 -260h-148z" />
|
||||
<glyph unicode="þ" horiz-adv-x="1186" d="M153 -416v1976h197v-598q53 68 128 104t173 36q201 0 312.5 -159.5t111.5 -421.5v-21q0 -234 -112 -377.5t-309 -143.5q-100 0 -175.5 33.5t-128.5 100.5v-529h-197zM350 275q37 -67 97 -104.5t147 -37.5q140 0 212 102.5t72 264.5v21q0 184 -72.5 302.5t-213.5 118.5 q-85 0 -145 -38.5t-97 -105.5v-523z" />
|
||||
<glyph unicode="ÿ" horiz-adv-x="1030" d="M26 1082h220l228 -681l35 -136h6l266 817h219l-455 -1248q-41 -109 -117.5 -190t-206.5 -81q-24 0 -61 5.5t-57 10.5l20 155q-6 1 35.5 -2t52.5 -3q63 0 103 56t67 124l47 113zM170 1262v200h219v-200h-219zM640 1262v200h219v-200h-219z" />
|
||||
<glyph unicode="Œ" horiz-adv-x="1960" d="M104 576v304q0 265 154.5 431t403.5 166q69 0 140.5 -6t150.5 -15h838v-155h-689v-471h598v-155h-598v-521h700v-154h-849q-92 -10 -157 -15.5t-132 -5.5q-249 0 -404.5 166t-155.5 431zM301 576q0 -214 97 -328t266 -114q61 0 122 4.5t119 13.5v1151q-61 8 -122 13.5 t-121 5.5q-169 0 -265 -113.5t-96 -326.5v-306z" />
|
||||
<glyph unicode="œ" horiz-adv-x="1854" d="M97 529v22q0 240 130 395.5t353 155.5q128 0 228 -54t164 -150q64 96 160 150t208 54q217 0 325.5 -135t108.5 -359v-104h-692l-3 -5q0 -163 72 -264.5t220 -101.5q100 0 175.5 28.5t129.5 78.5l77 -128q-58 -56 -153 -94.5t-229 -38.5q-135 0 -237 51.5t-165 146.5 q-64 -94 -162.5 -146t-224.5 -52q-224 0 -354.5 154.5t-130.5 395.5zM294 529q0 -172 72.5 -284t215.5 -112q141 0 214 112t73 284v22q0 170 -73.5 283t-215.5 113q-141 0 -213.5 -113t-72.5 -283v-22zM1087 664l2 -5h488v16q0 118 -58 195t-179 77q-103 0 -170.5 -79.5 t-82.5 -203.5z" />
|
||||
<glyph unicode="Ÿ" horiz-adv-x="1295" d="M40 1456h225l380 -740l380 740h225l-511 -944v-512h-196v527zM302 1604v200h219v-200h-219zM772 1604v200h219v-200h-219z" />
|
||||
<glyph unicode="ˆ" horiz-adv-x="979" d="M171 1252v26l246 237h120l248 -238v-25h-161l-147 148l-146 -148h-160z" />
|
||||
<glyph unicode="˜" horiz-adv-x="979" d="M135 1275q0 93 59 161.5t150 68.5q56 0 140 -47t136 -47q41 0 71 32.5t30 79.5l108 -32q0 -94 -59.5 -159t-149.5 -65q-71 0 -148 46.5t-128 46.5q-43 0 -72 -32.5t-29 -78.5z" />
|
||||
<glyph unicode=" " horiz-adv-x="951" />
|
||||
<glyph unicode=" " horiz-adv-x="1903" />
|
||||
<glyph unicode=" " horiz-adv-x="951" />
|
||||
<glyph unicode=" " horiz-adv-x="1903" />
|
||||
<glyph unicode=" " horiz-adv-x="634" />
|
||||
<glyph unicode=" " horiz-adv-x="475" />
|
||||
<glyph unicode=" " horiz-adv-x="317" />
|
||||
<glyph unicode=" " horiz-adv-x="317" />
|
||||
<glyph unicode=" " horiz-adv-x="237" />
|
||||
<glyph unicode=" " horiz-adv-x="380" />
|
||||
<glyph unicode=" " horiz-adv-x="105" />
|
||||
<glyph unicode="‐" horiz-adv-x="923" d="M167 538v154h590v-154h-590z" />
|
||||
<glyph unicode="‑" horiz-adv-x="923" d="M167 538v154h590v-154h-590z" />
|
||||
<glyph unicode="‒" horiz-adv-x="923" d="M167 538v154h590v-154h-590z" />
|
||||
<glyph unicode="–" horiz-adv-x="1416" d="M167 648v155h1086v-155h-1086z" />
|
||||
<glyph unicode="—" horiz-adv-x="1660" d="M139 648v155h1336v-155h-1336z" />
|
||||
<glyph unicode="‘" horiz-adv-x="524" d="M145 917v184l101 355h97l-1 -361v-178h-197z" />
|
||||
<glyph unicode="’" horiz-adv-x="516" d="M160 917l1 343v196h197v-193l-101 -346h-97z" />
|
||||
<glyph unicode="‚" horiz-adv-x="540" d="M168 -255l1 263v241h197v-223l-101 -281h-97z" />
|
||||
<glyph unicode="“" horiz-adv-x="788" d="M123 917v184l101 355h97l-1 -361v-178h-197zM451 917v184l101 355h97l-1 -361v-178h-197z" />
|
||||
<glyph unicode="”" horiz-adv-x="769" d="M125 917l1 343v196h197v-193l-101 -346h-97zM461 917l1 343v196h197v-193l-101 -346h-97z" />
|
||||
<glyph unicode="„" horiz-adv-x="767" d="M138 -239l1 325v194h197v-184l-101 -335h-97zM446 -239l1 333v186h197v-184l-101 -335h-97z" />
|
||||
<glyph unicode="•" horiz-adv-x="695" d="M137 733v60q0 88 56 144t150 56q95 0 151.5 -56t56.5 -144v-60q0 -89 -56 -143.5t-151 -54.5t-151 55t-56 143z" />
|
||||
<glyph unicode="…" horiz-adv-x="1380" d="M161 0v202h197v-202h-197zM604 0v202h197v-202h-197zM1024 0v202h197v-202h-197z" />
|
||||
<glyph unicode=" " horiz-adv-x="380" />
|
||||
<glyph unicode="‹" horiz-adv-x="615" d="M108 541v19l295 389h148l-255 -399l255 -398h-148z" />
|
||||
<glyph unicode="›" horiz-adv-x="615" d="M94 170l231 380l-231 380h148l278 -357h5l1 -9l5 -5l-2 -9l2 -9l-5 -6l-1 -7h-4l-279 -358h-148z" />
|
||||
<glyph unicode=" " horiz-adv-x="475" />
|
||||
<glyph unicode="€" horiz-adv-x="1088" d="M79 512v124h146v166h-146v125h146v15q0 244 141.5 389.5t372.5 145.5q59 0 117.5 -8t124.5 -23l-19 -159q-54 16 -110.5 25.5t-112.5 9.5q-146 0 -231.5 -103t-85.5 -275v-17h492v-125h-492v-166h492v-124h-485l-2 -5q-4 -169 81.5 -271.5t232.5 -102.5q57 0 113 8.5 t108 25.5l19 -157q-56 -15 -117.5 -23t-122.5 -8q-231 0 -373.5 144.5t-142.5 388.5h-146z" />
|
||||
<glyph unicode="™" horiz-adv-x="1284" d="M103 1374v82h384v-82h-145v-455h-94v455h-145zM565 919v537h116l161 -390h6l162 390h110v-537h-93v343l-6 2l-150 -345h-51l-156 359l-6 -2v-357h-93z" />
|
||||
<glyph unicode="" horiz-adv-x="1080" d="M0 0v1080h1080v-1080h-1080z" />
|
||||
<glyph unicode="fl" horiz-adv-x="1190" d="M56 936v146h169v137q0 173 90.5 267.5t252.5 94.5q34 0 68.5 -5.5t76.5 -15.5l-24 -150q-18 4 -43.5 7t-53.5 3q-86 0 -128 -51.5t-42 -149.5v-137h196v-146h-196v-936h-197v936h-169zM833 0v1560h197v-1560h-197z" />
|
||||
<glyph unicode="ffi" horiz-adv-x="1814" d="M56 936v146h169v137q0 173 90.5 267.5t252.5 94.5q34 0 68.5 -5.5t76.5 -15.5l-24 -150q-18 4 -43.5 7t-53.5 3q-86 0 -128 -51.5t-42 -149.5v-137h196v-146h-196v-936h-197v936h-169zM702 936v146h170v117q0 182 106.5 282t295.5 100q67 0 132 -15.5t153 -45.5l-34 -160 q-53 21 -113 36t-123 15q-117 0 -168.5 -52t-51.5 -160v-117h215v-146h-215v-936h-197v936h-170zM1457 0v1082h198v-1082h-198z" />
|
||||
<glyph unicode="ffl" horiz-adv-x="1864" d="M56 936v146h169v137q0 173 90.5 267.5t252.5 94.5q34 0 68.5 -5.5t76.5 -15.5l-24 -150q-18 4 -43.5 7t-53.5 3q-86 0 -128 -51.5t-42 -149.5v-137h196v-146h-196v-936h-197v936h-169zM730 936v146h169v137q0 173 90.5 267.5t252.5 94.5q34 0 68.5 -5.5t76.5 -15.5 l-24 -150q-18 4 -43.5 7t-53.5 3q-86 0 -128 -51.5t-42 -149.5v-137h196v-146h-196v-936h-197v936h-169zM1507 0v1560h197v-1560h-197z" />
|
||||
</font>
|
||||
</defs></svg>
|
||||
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 474 B |
@@ -0,0 +1,60 @@
|
||||
<html>
|
||||
<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="https://libs.cartocdn.com/cartodb.js/v3/3.12/themes/css/cartodb.css" />
|
||||
<link href="css/style.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="map"></div>
|
||||
<div id="leftBkg"></div>
|
||||
<div id="overlay"></div>
|
||||
|
||||
<div class="left">
|
||||
<div id="title"></div>
|
||||
<p>Click on each location to discover pics of the places and comments from the production videos.</p>
|
||||
<p>The data is hosted on <a href="http://cartodb.com">CartoDB</a> and was assembled from various data sources. </p>
|
||||
<p>This map was developed using the CartoDB JavaScript library, <a href="https://github.com/CartoDB/cartodb.js">Cartodb.js</a> Fork it and create your own.</p>
|
||||
<div id="legendBox">
|
||||
<ul>
|
||||
<li>Natural Parks</li>
|
||||
<li>Villages</li>
|
||||
<li>Rivers</li>
|
||||
<li>Fields</li>
|
||||
<li>Caves</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pointTT">
|
||||
<p></p>
|
||||
</div>
|
||||
|
||||
<!--Custom html for the infowindow customization-->
|
||||
<!--You can write simple html or use Mustache templates http://mustache.github.com/-->
|
||||
<!--Content.data contains the field info-->
|
||||
<script type="infowindow/html" id="infowindow_template">
|
||||
<div class="cartodb-popup">
|
||||
<a href="#close" class="cartodb-popup-close-button close">x</a>
|
||||
<div class="cartodb-popup-content-wrapper">
|
||||
<div class="cartodb-popup-cont">
|
||||
<img src="{{content.data.pic}}" />
|
||||
<h4>{{content.data.name_to_display}}</h4>
|
||||
{{#content.data.video_url}}
|
||||
<a class="videoButton" href="{{content.data.video_url}}" target="_blank"> </a>
|
||||
{{/content.data.video_url}}
|
||||
<p>{{content.data.description}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cartodb-popup-tip-container"></div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<!--Include the js. Please be sure that you use a locked version in case you go to production-->
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.12/cartodb.js"></script>
|
||||
<script type="text/javascript" src="js/app.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,39 @@
|
||||
var map;
|
||||
|
||||
function main() {
|
||||
|
||||
var options = {
|
||||
center: [-42.27730877423707, 172.63916015625],
|
||||
zoom: 6,
|
||||
zoomControl: false, // dont add the zoom overlay (it is added by default)
|
||||
loaderControl: false //dont show tiles loader
|
||||
};
|
||||
|
||||
cartodb.createVis('map', 'http://saleiva.carto.com/api/v2/viz/20a26a6a-eef9-11e2-8999-3085a9a9563c/viz.json', options)
|
||||
.done(function(vis, layers) {
|
||||
// there are two layers, base layer and points layer
|
||||
var sublayer = layers[1].getSubLayer(0);
|
||||
sublayer.set({ 'interactivity': ['cartodb_id', 'name_to_display', 'description'] });
|
||||
|
||||
// Set the custom infowindow template defined on the html
|
||||
sublayer.infowindow.set('template', $('#infowindow_template').html());
|
||||
|
||||
// add the tooltip show when hover on the point
|
||||
vis.addOverlay({
|
||||
type: 'tooltip',
|
||||
position: 'top|center',
|
||||
template: '<p>{{name_to_display}}</p>'
|
||||
});
|
||||
|
||||
vis.addOverlay({
|
||||
type: 'infobox',
|
||||
template: '<h3>{{name_to_display}}</h3><p>{{description}}</p>',
|
||||
width: 200,
|
||||
position: 'bottom|right'
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
window.onload = main;
|
||||
@@ -0,0 +1,76 @@
|
||||
<!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"/>
|
||||
<style>
|
||||
html, body,#map {
|
||||
width:100%;
|
||||
height:100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
}
|
||||
div#searchbox{
|
||||
background-color: #d2eaef;
|
||||
opacity: 0.8;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 50px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
display: block;
|
||||
z-index: 9000;
|
||||
|
||||
}
|
||||
div#searchbox input{
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<div id="searchbox">
|
||||
<input type="text" name="ad" value="" id="ad" size="10" />
|
||||
<button type="button" id="searchButton">Search</button>
|
||||
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
<script>
|
||||
var input;
|
||||
function main () {
|
||||
|
||||
var layerUrl = 'https://documentation.carto.com/api/v2/viz/34dfd2e4-d62b-11e5-b5e7-0ea31932ec1d/viz.json';
|
||||
|
||||
// add CartoDB layer
|
||||
cartodb.createVis(map, layerUrl)
|
||||
.done(function (vis,layer) {
|
||||
// set the map options
|
||||
map = vis.getNativeMap().setView([41.390205, 2.154007],4);
|
||||
|
||||
// When the search button is clicked
|
||||
$('#searchButton').click(function () {
|
||||
// store in the input variable the value from the input box
|
||||
input = $('#ad').val();
|
||||
|
||||
// execute the CARTO SQL API
|
||||
var sql = new cartodb.SQL({ user: 'documentation' });
|
||||
// get the bounds of the geometry which has the same string value (in the name column) than the string value written in the input box
|
||||
sql.getBounds("SELECT * FROM world_borders_1 where name ILIKE '" + input + "'").done(function (bounds) {
|
||||
// sets the map view that contains the bounds defined by the getBounds method with the maximum zoom possible
|
||||
map.fitBounds(bounds);
|
||||
});
|
||||
});
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
window.onload = main;
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
88
lib/assets/javascripts/cdb/examples/annotations.html
Normal file
88
lib/assets/javascripts/cdb/examples/annotations.html
Normal file
@@ -0,0 +1,88 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Easy example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
|
||||
<script>
|
||||
function main() {
|
||||
cartodb.createVis('map', 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json', {
|
||||
shareable: true,
|
||||
title: false,
|
||||
description: true,
|
||||
search: true,
|
||||
tiles_loader: true,
|
||||
center_lat: 0,
|
||||
center_lon: 0,
|
||||
zoom: 2
|
||||
})
|
||||
.done(function(vis, layers) {
|
||||
// layer 0 is the base layer, layer 1 is cartodb layer
|
||||
// setInteraction is disabled by default
|
||||
layers[1].setInteraction(true);
|
||||
layers[1].on('featureOver', function(e, latlng, pos, data) {
|
||||
cartodb.log.log(e, latlng, pos, data);
|
||||
});
|
||||
|
||||
// you can get the native map to work with it
|
||||
var map = vis.getNativeMap();
|
||||
|
||||
var annotation = new cdb.geo.ui.Annotation({
|
||||
latlng:[-20, -54],
|
||||
text: "Hi, I'm <strong>here</strong>",
|
||||
mapView: vis.mapView,
|
||||
style: {
|
||||
"z-index": 1000,
|
||||
"color": "#FFF",
|
||||
"text-align": "right",
|
||||
"font-size": "13",
|
||||
"font-family-name": "Helvetica",
|
||||
"box-color": "#F84F40",
|
||||
"box-opacity": 0.7,
|
||||
"box-padding": 10,
|
||||
"line-color": "#F84F40",
|
||||
"line-width": 50
|
||||
}
|
||||
});
|
||||
|
||||
this.mapView.$el.append(annotation.render().$el);
|
||||
|
||||
window.annotation = annotation = new cdb.geo.ui.Annotation({
|
||||
latlng:[14, 34],
|
||||
text: "… and I'm here :)",
|
||||
style: {
|
||||
boxColor: "#FEB24C",
|
||||
lineColor: "#FEB24C"
|
||||
},
|
||||
mapView: vis.mapView
|
||||
});
|
||||
|
||||
this.mapView.$el.append(annotation.render().$el);
|
||||
|
||||
})
|
||||
.error(function(err) {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
window.onload = main;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
50
lib/assets/javascripts/cdb/examples/basemap.html
Normal file
50
lib/assets/javascripts/cdb/examples/basemap.html
Normal file
@@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Basemap | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#content {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map {
|
||||
float:left;
|
||||
margin: 10px;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
<script>
|
||||
var basemap = {
|
||||
type: "http",
|
||||
options: {
|
||||
urlTemplate: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
|
||||
subdomains: ["a", "b", "c"]
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
<div class="map">
|
||||
<script>
|
||||
cartodb.Image("https://documentation.cartodb.com/api/v2/viz/01f93132-d5e6-11e3-855b-0e10bcd91c2b/viz.json", { basemap: basemap }).size(500, 500).write();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
52
lib/assets/javascripts/cdb/examples/bing.html
Normal file
52
lib/assets/javascripts/cdb/examples/bing.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Bing Maps + CartoDB.js</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<style>
|
||||
html, body, #myMap{
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.core.js"></script>
|
||||
<script type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
|
||||
<script type="text/javascript">
|
||||
var map = null;
|
||||
|
||||
function getMap()
|
||||
{
|
||||
map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'Your Bing Maps Key'});
|
||||
cartodb.Tiles.getTiles({
|
||||
type: 'cartodb',
|
||||
user_name: 'examples',
|
||||
sublayers: [{
|
||||
sql: 'select * from ne_10m_populated_p_2',
|
||||
cartocss: '#ne_10m_populated_p_2{ marker-fill: #F11810; marker-opacity: 0.9; marker-allow-overlap: true; marker-placement: point; marker-type: ellipse; marker-width: 7.5; marker-line-width: 2; marker-line-color: #000; marker-line-opacity: 0.2; }'
|
||||
}]
|
||||
}, function(tileTemplate) {
|
||||
var options = {
|
||||
uriConstructor: function(tile, zoom) {
|
||||
var i = tile.x + tile.y;
|
||||
return tileTemplate.tiles[0]
|
||||
.replace('{s}', 'abcd'[i%3])
|
||||
.replace('{z}', tile.levelOfDetail)
|
||||
.replace('{x}', tile.x)
|
||||
.replace('{y}', tile.y)
|
||||
},
|
||||
width: 256,
|
||||
height: 256
|
||||
};
|
||||
var tileSource = new Microsoft.Maps.TileSource(options);
|
||||
var tilelayer= new Microsoft.Maps.TileLayer({ mercator: tileSource});
|
||||
map.entities.push(tilelayer);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="getMap();">
|
||||
<div id='myMap' style="position:relative; width:100%; height:100%;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
61
lib/assets/javascripts/cdb/examples/bounds.html
Normal file
61
lib/assets/javascripts/cdb/examples/bounds.html
Normal file
@@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Set Bounds example | CartoDB.js</title>
|
||||
<!--
|
||||
This example shows you how to get a bounding box for a feature from CartoDB
|
||||
and move your map according to that bbox.
|
||||
-->
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: #E5F5F7;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
var layer;
|
||||
function main() {
|
||||
var map = L.map('map', {
|
||||
zoomControl: false,
|
||||
center: [53, 20],
|
||||
zoom: 3
|
||||
});
|
||||
|
||||
cartodb.createLayer(map, {
|
||||
type: 'cartodb',
|
||||
user_name: 'examples',
|
||||
sublayers: [{
|
||||
sql: 'select * from country_boundaries',
|
||||
cartocss: '#layer{ polygon-fill: #f7e5d1; polygon-opacity: 1; line-color: #d2c0b1; line-width: 0.8; }'
|
||||
}]
|
||||
})
|
||||
.addTo(map)
|
||||
.on('done', function(layer_) {
|
||||
var sql = new cartodb.SQL({ user: 'examples' });
|
||||
sql.getBounds("select * from country_boundaries where iso_a3='MEX'").done(function(bounds) {
|
||||
map.fitBounds(bounds)
|
||||
});
|
||||
}).on('error', function() {
|
||||
cartodb.log.log("some error occurred");
|
||||
});
|
||||
}
|
||||
window.onload = main;
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
56
lib/assets/javascripts/cdb/examples/callback_layer.html
Normal file
56
lib/assets/javascripts/cdb/examples/callback_layer.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Leaflet example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
<script src="https://d3js.org/queue.v1.min.js"></script>
|
||||
|
||||
<script>
|
||||
function main() {
|
||||
var map = new L.Map('map', {
|
||||
zoomControl: false,
|
||||
center: [43, 0],
|
||||
zoom: 3
|
||||
});
|
||||
L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
|
||||
attribution: 'Stamen'
|
||||
}).addTo(map);
|
||||
var layers = [
|
||||
'https://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json',
|
||||
'https://documentation.cartodb.com/api/v2/viz/236085de-ea08-11e2-958c-5404a6a683d5/viz.json'
|
||||
// add here more layers
|
||||
]
|
||||
var q = queue(3);
|
||||
layers.forEach(function(vizjson) {
|
||||
q.defer(function(vizjson, callback) {
|
||||
cartodb.createLayer(map, vizjson, function(layer) { callback(null, layer); })
|
||||
}, vizjson);
|
||||
})
|
||||
q.await(function() {
|
||||
var leafletLayers = Array.prototype.slice.call(arguments, 1);
|
||||
leafletLayers.forEach(function(lyr) {
|
||||
lyr.addTo(map);
|
||||
});
|
||||
})
|
||||
}
|
||||
// you could use $(window).load(main);
|
||||
window.onload = main;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
152
lib/assets/javascripts/cdb/examples/core.html
Normal file
152
lib/assets/javascripts/cdb/examples/core.html
Normal file
@@ -0,0 +1,152 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Core | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#content {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map {
|
||||
float:left;
|
||||
margin: 10px;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://www.google.com/jsapi"></script>
|
||||
<script>google.load("jquery", "1.7.1");</script>
|
||||
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.core.js"></script>
|
||||
<script>
|
||||
|
||||
/* 1: We can create an image using a custom build layer definition: */
|
||||
var layer_definition = {
|
||||
user_name: "documentation",
|
||||
tiler_domain: "cartodb.com",
|
||||
tiler_port: "80",
|
||||
tiler_protocol: "http",
|
||||
layers: [{
|
||||
type: "http",
|
||||
options: {
|
||||
urlTemplate: "https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png",
|
||||
subdomains: [ "a", "b", "c" ]
|
||||
}
|
||||
}, {
|
||||
type: "cartodb",
|
||||
options: {
|
||||
sql: "SELECT * FROM nyc_wifi",
|
||||
cartocss: "/** simple visualization */ #nyc_wifi{ marker-fill-opacity: 0.8; marker-line-color: #FFFFFF; marker-line-width: 1; marker-line-opacity: .8; marker-placement: point; marker-type: ellipse; marker-width: 6; marker-fill: #6ac41c; marker-allow-overlap: true; }",
|
||||
cartocss_version: "2.1.1"
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
// and now we just ask for the URL and append it to the page
|
||||
cartodb.Image(layer_definition).size(250, 250).zoom(9).center([40.708517, -73.993414]).getUrl(function(error, url) {
|
||||
var img = new Image();
|
||||
|
||||
img.onerror = function() {
|
||||
console.log(error);
|
||||
};
|
||||
|
||||
img.onload = function() {
|
||||
var $map = $('<div class="map"></div>');
|
||||
var $img = $('<img src="' + url + '" />');
|
||||
$map.append($img);
|
||||
$("#content").append($map);
|
||||
};
|
||||
|
||||
img.src = url;
|
||||
|
||||
});
|
||||
|
||||
/* 2: Another option: with a vizjson defined in the CartoDB editor */
|
||||
var vizjsons = [
|
||||
{ zoom: 2, url: "https://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json" },
|
||||
{ zoom: 17, url: "https://documentation.cartodb.com/api/v2/viz/c3dd77a6-d5e4-11e3-a5b4-0e73339ffa50/viz.json" },
|
||||
{ zoom: 12, url: "https://documentation.cartodb.com/api/v2/viz/df45a412-d5dc-11e3-855b-0e10bcd91c2b/viz.json" },
|
||||
{ zoom: 2, url: "https://documentation.cartodb.com/api/v2/viz/e7132460-d5e8-11e3-8459-0e10bcd91c2b/viz.json" },
|
||||
{ basemap:"dark_nolabels", zoom: 8, url: "https://documentation.cartodb.com/api/v2/viz/d5c2419c-d08d-11e3-80a5-0e230854a1cb/viz.json" },
|
||||
{ basemap:"dark_nolabels", zoom: 5, url: "https://team.cartodb.com/api/v2/viz/a5a2b18a-5ea0-11e4-a944-0e4fddd5de28/viz.json" }
|
||||
];
|
||||
|
||||
// Let's load all those URLs and add them to the page
|
||||
for (var i = 0; i < vizjsons.length; i++) {
|
||||
|
||||
var v = vizjsons[i];
|
||||
|
||||
cartodb.Image(v.url, { basemap: v.basemap }).size(250, 250).zoom(v.zoom).getUrl(function(error, url) {
|
||||
var img = new Image();
|
||||
|
||||
img.onerror = function() {
|
||||
console.log(error);
|
||||
};
|
||||
|
||||
img.onload = function() {
|
||||
var $map = $('<div class="map"></div>');
|
||||
var $img = $('<img src="' + url + '" />');
|
||||
$map.append($img);
|
||||
$("#content").append($map);
|
||||
};
|
||||
|
||||
img.src = url;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
/* 3. Wait, say you have some images defined like this:
|
||||
|
||||
<img data-vizjson-url="[VIZJSON_URL]" class="thumb" />
|
||||
|
||||
then you can create the images with the following code: */
|
||||
|
||||
$(function() {
|
||||
$('.thumb').each(function() {
|
||||
cartodb.Image($(this).data('vizjson-url')).size(250, 250).into(this);
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
|
||||
<div class="map">
|
||||
<script>
|
||||
<!-- 4. You can also inject the image directly in the page like this: -->
|
||||
cartodb.Image(vizjsons[1].url).size(250, 250).write();
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<div class="map">
|
||||
<script>
|
||||
<!-- and you can specify a bunch of options too: -->
|
||||
cartodb.Image(vizjsons[0].url).size(250, 250).write({ class: "hi", id: "nice", src: "http://awesomegifs.com/wp-content/uploads/don-draper-slow-clap.gif" });
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<div class="map">
|
||||
<img data-vizjson-url="http://arce.cartodb.com/api/v2/viz/378a0910-a229-11e4-9569-0e018d66dc29/viz.json" class="thumb" />
|
||||
</div>
|
||||
|
||||
<div class="map">
|
||||
<img data-vizjson-url="http://documentation.cartodb.com/api/v2/viz/c3dd77a6-d5e4-11e3-a5b4-0e73339ffa50/viz.json" width="250" height="250" class="thumb" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,70 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Tooltip on hover with createLayer() | Cartodb.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
|
||||
<style>
|
||||
html, body,#map {
|
||||
width:100%;
|
||||
height:100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script type="tooltip/html" id="tooltip_template">
|
||||
<div class="cartodb-tooltip-content-wrapper">
|
||||
<div class="cartodb-tooltip-content">
|
||||
<h3>Name</h3>
|
||||
<p>{{name}}</p>
|
||||
<h3>Population</h3>
|
||||
<p>{{pop2005}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<div id='map'></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
function main() {
|
||||
|
||||
var map = new L.Map('map', {center: [20, 20], zoom: 2});
|
||||
|
||||
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="https://carto.com/attribution/">CartoDB</a>'
|
||||
}).addTo(map);
|
||||
|
||||
cartodb.createLayer(map, 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json')
|
||||
.addTo(map)
|
||||
.on('done', function(layer) {
|
||||
//do stuff
|
||||
var sublayer = layer.getSubLayer(0);
|
||||
|
||||
sublayer.setInteractivity('cartodb_id, name, pop2005');
|
||||
|
||||
// tooltip definition for createLayer()
|
||||
var testTooltip = layer.leafletMap.viz.addOverlay({
|
||||
type: 'tooltip',
|
||||
layer: sublayer,
|
||||
template: $('#tooltip_template').html(),
|
||||
width: 200,
|
||||
position: 'bottom|right',
|
||||
fields: [{ name: 'name', population: 'pop2005' }]
|
||||
});
|
||||
$('body').append(testTooltip.render().el);
|
||||
|
||||
});
|
||||
}
|
||||
window.onload = main;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CartoTemplate | CartoDB</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="https://carto.com/favicon.ico" />
|
||||
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
<!--
|
||||
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
<!--
|
||||
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
-->
|
||||
|
||||
|
||||
<!-- Drop your code between the script tags below! -->
|
||||
<script>
|
||||
|
||||
mapUrl='https://documentation.cartodb.com/api/v2/viz/34dfd2e4-d62b-11e5-b5e7-0ea31932ec1d/viz.json'
|
||||
|
||||
|
||||
map= new L.Map('map', {
|
||||
zoom:2,
|
||||
center:[0,0]
|
||||
});
|
||||
|
||||
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png',
|
||||
{attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="https://carto.com/attribution/">CartoDB</a>'
|
||||
}).addTo(map);
|
||||
|
||||
cartodb.createLayer(map, mapUrl,{
|
||||
//options
|
||||
legends:false
|
||||
}).addTo(map)
|
||||
.done(function(layer){
|
||||
//do stuff
|
||||
console.log('legends active :'+ layer.options.legends);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CartoTemplate | CartoDB</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
/*.cartodb-logo{
|
||||
display:none!important;
|
||||
}*/
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
<!--
|
||||
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
<!--
|
||||
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
-->
|
||||
|
||||
|
||||
<!-- Drop your code between the script tags below! -->
|
||||
<script>
|
||||
|
||||
mapUrl='https://team.cartodb.com/u/ernestomb/api/v2/viz/066ff802-a580-11e5-a9bb-0e3ff518bd15/viz.json'
|
||||
|
||||
map= new L.Map('map', {
|
||||
zoom:9,
|
||||
center:[40.5,-3.6]
|
||||
});
|
||||
|
||||
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png',
|
||||
{attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
|
||||
}).addTo(map);
|
||||
|
||||
cartodb.createLayer(map, mapUrl,{
|
||||
//options
|
||||
refreshTime:3500
|
||||
}).addTo(map)
|
||||
.done(function(layer){
|
||||
//do stuff
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
543
lib/assets/javascripts/cdb/examples/css/OLstyle.css
Normal file
543
lib/assets/javascripts/cdb/examples/css/OLstyle.css
Normal file
@@ -0,0 +1,543 @@
|
||||
div.olMap {
|
||||
z-index: 0;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
div.olMapViewport {
|
||||
text-align: left;
|
||||
-ms-touch-action: none;
|
||||
}
|
||||
|
||||
div.olLayerDiv {
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
}
|
||||
|
||||
.olLayerGoogleCopyright {
|
||||
left: 2px;
|
||||
bottom: 2px;
|
||||
}
|
||||
.olLayerGoogleV3.olLayerGoogleCopyright {
|
||||
right: auto !important;
|
||||
}
|
||||
.olLayerGooglePoweredBy {
|
||||
left: 2px;
|
||||
bottom: 15px;
|
||||
}
|
||||
.olLayerGoogleV3.olLayerGooglePoweredBy {
|
||||
bottom: 15px !important;
|
||||
}
|
||||
/* GMaps should not set styles on its container */
|
||||
.olForeignContainer {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.olControlAttribution {
|
||||
font-size: smaller;
|
||||
right: 3px;
|
||||
bottom: 4.5em;
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
.olControlScale {
|
||||
right: 3px;
|
||||
bottom: 3em;
|
||||
display: block;
|
||||
position: absolute;
|
||||
font-size: smaller;
|
||||
}
|
||||
.olControlScaleLine {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
bottom: 15px;
|
||||
font-size: xx-small;
|
||||
}
|
||||
.olControlScaleLineBottom {
|
||||
border: solid 2px black;
|
||||
border-bottom: none;
|
||||
margin-top:-2px;
|
||||
text-align: center;
|
||||
}
|
||||
.olControlScaleLineTop {
|
||||
border: solid 2px black;
|
||||
border-top: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.olControlPermalink {
|
||||
right: 3px;
|
||||
bottom: 1.5em;
|
||||
display: block;
|
||||
position: absolute;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
div.olControlMousePosition {
|
||||
bottom: 0;
|
||||
right: 3px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
font-family: Arial;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.olControlOverviewMapContainer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.olControlOverviewMapElement {
|
||||
padding: 10px 18px 10px 10px;
|
||||
background-color: #00008B;
|
||||
-moz-border-radius: 1em 0 0 0;
|
||||
}
|
||||
|
||||
.olControlOverviewMapMinimizeButton,
|
||||
.olControlOverviewMapMaximizeButton {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
right: 0;
|
||||
bottom: 80px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.olControlOverviewMapExtentRectangle {
|
||||
overflow: hidden;
|
||||
background-image: url("img/blank.gif");
|
||||
cursor: move;
|
||||
border: 2px dotted red;
|
||||
}
|
||||
.olControlOverviewMapRectReplacement {
|
||||
overflow: hidden;
|
||||
cursor: move;
|
||||
background-image: url("img/overview_replacement.gif");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.olLayerGeoRSSDescription {
|
||||
float:left;
|
||||
width:100%;
|
||||
overflow:auto;
|
||||
font-size:1.0em;
|
||||
}
|
||||
.olLayerGeoRSSClose {
|
||||
float:right;
|
||||
color:gray;
|
||||
font-size:1.2em;
|
||||
margin-right:6px;
|
||||
font-family:sans-serif;
|
||||
}
|
||||
.olLayerGeoRSSTitle {
|
||||
float:left;font-size:1.2em;
|
||||
}
|
||||
|
||||
.olPopupContent {
|
||||
padding:5px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.olControlNavigationHistory {
|
||||
background-image: url("img/navigation_history.png");
|
||||
background-repeat: no-repeat;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
}
|
||||
.olControlNavigationHistoryPreviousItemActive {
|
||||
background-position: 0 0;
|
||||
}
|
||||
.olControlNavigationHistoryPreviousItemInactive {
|
||||
background-position: 0 -24px;
|
||||
}
|
||||
.olControlNavigationHistoryNextItemActive {
|
||||
background-position: -24px 0;
|
||||
}
|
||||
.olControlNavigationHistoryNextItemInactive {
|
||||
background-position: -24px -24px;
|
||||
}
|
||||
|
||||
div.olControlSaveFeaturesItemActive {
|
||||
background-image: url(img/save_features_on.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 1px;
|
||||
}
|
||||
div.olControlSaveFeaturesItemInactive {
|
||||
background-image: url(img/save_features_off.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 1px;
|
||||
}
|
||||
|
||||
.olHandlerBoxZoomBox {
|
||||
border: 2px solid red;
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
opacity: 0.50;
|
||||
font-size: 1px;
|
||||
filter: alpha(opacity=50);
|
||||
}
|
||||
.olHandlerBoxSelectFeature {
|
||||
border: 2px solid blue;
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
opacity: 0.50;
|
||||
font-size: 1px;
|
||||
filter: alpha(opacity=50);
|
||||
}
|
||||
|
||||
.olControlPanPanel {
|
||||
top: 10px;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
.olControlPanPanel div {
|
||||
background-image: url(img/pan-panel.png);
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.olControlPanPanel .olControlPanNorthItemInactive {
|
||||
top: 0;
|
||||
left: 9px;
|
||||
background-position: 0 0;
|
||||
}
|
||||
.olControlPanPanel .olControlPanSouthItemInactive {
|
||||
top: 36px;
|
||||
left: 9px;
|
||||
background-position: 18px 0;
|
||||
}
|
||||
.olControlPanPanel .olControlPanWestItemInactive {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: 0;
|
||||
background-position: 0 18px;
|
||||
}
|
||||
.olControlPanPanel .olControlPanEastItemInactive {
|
||||
top: 18px;
|
||||
left: 18px;
|
||||
background-position: 18px 18px;
|
||||
}
|
||||
|
||||
.olControlZoomPanel {
|
||||
top: 71px;
|
||||
left: 14px;
|
||||
}
|
||||
|
||||
.olControlZoomPanel div {
|
||||
background-image: url(img/zoom-panel.png);
|
||||
position: absolute;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.olControlZoomPanel .olControlZoomInItemInactive {
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
|
||||
top: 18px;
|
||||
left: 0;
|
||||
background-position: 0 -18px;
|
||||
}
|
||||
|
||||
.olControlZoomPanel .olControlZoomOutItemInactive {
|
||||
top: 36px;
|
||||
left: 0;
|
||||
background-position: 0 18px;
|
||||
}
|
||||
|
||||
/*
|
||||
* When a potential text is bigger than the image it move the image
|
||||
* with some headers (closes #3154)
|
||||
*/
|
||||
.olControlPanZoomBar div {
|
||||
font-size: 1px;
|
||||
}
|
||||
|
||||
.olPopupCloseBox {
|
||||
background: url("img/close.gif") no-repeat;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.olFramedCloudPopupContent {
|
||||
padding: 5px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.olControlNoSelect {
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
}
|
||||
|
||||
.olImageLoadError {
|
||||
background-color: pink;
|
||||
opacity: 0.5;
|
||||
filter: alpha(opacity=50); /* IE */
|
||||
}
|
||||
|
||||
/**
|
||||
* Cursor styles
|
||||
*/
|
||||
|
||||
.olCursorWait {
|
||||
cursor: wait;
|
||||
}
|
||||
.olDragDown {
|
||||
cursor: move;
|
||||
}
|
||||
.olDrawBox {
|
||||
cursor: crosshair;
|
||||
}
|
||||
.olControlDragFeatureOver {
|
||||
cursor: move;
|
||||
}
|
||||
.olControlDragFeatureActive.olControlDragFeatureOver.olDragDown {
|
||||
cursor: -moz-grabbing;
|
||||
}
|
||||
|
||||
/**
|
||||
* Layer switcher
|
||||
*/
|
||||
.olControlLayerSwitcher {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
right: 0;
|
||||
width: 20em;
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
margin-top: 3px;
|
||||
margin-left: 3px;
|
||||
margin-bottom: 3px;
|
||||
font-size: smaller;
|
||||
color: white;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.olControlLayerSwitcher .layersDiv {
|
||||
padding-top: 5px;
|
||||
padding-left: 10px;
|
||||
padding-bottom: 5px;
|
||||
padding-right: 10px;
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
.olControlLayerSwitcher .layersDiv .baseLbl,
|
||||
.olControlLayerSwitcher .layersDiv .dataLbl {
|
||||
margin-top: 3px;
|
||||
margin-left: 3px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.olControlLayerSwitcher .layersDiv .baseLayersDiv,
|
||||
.olControlLayerSwitcher .layersDiv .dataLayersDiv {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.olControlLayerSwitcher .maximizeDiv,
|
||||
.olControlLayerSwitcher .minimizeDiv {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
top: 5px;
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.olBingAttribution {
|
||||
color: #DDD;
|
||||
}
|
||||
.olBingAttribution.road {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.olGoogleAttribution.hybrid, .olGoogleAttribution.satellite {
|
||||
color: #EEE;
|
||||
}
|
||||
.olGoogleAttribution {
|
||||
color: #333;
|
||||
}
|
||||
span.olGoogleAttribution a {
|
||||
color: #77C;
|
||||
}
|
||||
span.olGoogleAttribution.hybrid a, span.olGoogleAttribution.satellite a {
|
||||
color: #EEE;
|
||||
}
|
||||
|
||||
/**
|
||||
* Editing and navigation icons.
|
||||
* (using the editing_tool_bar.png sprint image)
|
||||
*/
|
||||
.olControlNavToolbar ,
|
||||
.olControlEditingToolbar {
|
||||
margin: 5px 5px 0 0;
|
||||
}
|
||||
.olControlNavToolbar div,
|
||||
.olControlEditingToolbar div {
|
||||
background-image: url("img/editing_tool_bar.png");
|
||||
background-repeat: no-repeat;
|
||||
margin: 0 0 5px 5px;
|
||||
width: 24px;
|
||||
height: 22px;
|
||||
cursor: pointer
|
||||
}
|
||||
/* positions */
|
||||
.olControlEditingToolbar {
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.olControlNavToolbar {
|
||||
top: 295px;
|
||||
left: 9px;
|
||||
}
|
||||
/* layouts */
|
||||
.olControlEditingToolbar div {
|
||||
float: right;
|
||||
}
|
||||
/* individual controls */
|
||||
.olControlNavToolbar .olControlNavigationItemInactive,
|
||||
.olControlEditingToolbar .olControlNavigationItemInactive {
|
||||
background-position: -103px -1px;
|
||||
}
|
||||
.olControlNavToolbar .olControlNavigationItemActive ,
|
||||
.olControlEditingToolbar .olControlNavigationItemActive {
|
||||
background-position: -103px -24px;
|
||||
}
|
||||
.olControlNavToolbar .olControlZoomBoxItemInactive {
|
||||
background-position: -128px -1px;
|
||||
}
|
||||
.olControlNavToolbar .olControlZoomBoxItemActive {
|
||||
background-position: -128px -24px;
|
||||
}
|
||||
.olControlEditingToolbar .olControlDrawFeaturePointItemInactive {
|
||||
background-position: -77px -1px;
|
||||
}
|
||||
.olControlEditingToolbar .olControlDrawFeaturePointItemActive {
|
||||
background-position: -77px -24px;
|
||||
}
|
||||
.olControlEditingToolbar .olControlDrawFeaturePathItemInactive {
|
||||
background-position: -51px -1px;
|
||||
}
|
||||
.olControlEditingToolbar .olControlDrawFeaturePathItemActive {
|
||||
background-position: -51px -24px;
|
||||
}
|
||||
.olControlEditingToolbar .olControlDrawFeaturePolygonItemInactive{
|
||||
background-position: -26px -1px;
|
||||
}
|
||||
.olControlEditingToolbar .olControlDrawFeaturePolygonItemActive {
|
||||
background-position: -26px -24px;
|
||||
}
|
||||
|
||||
div.olControlZoom, div.olControlTextButtonPanel {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
background: rgba(255,255,255,0.4);
|
||||
border-radius: 4px;
|
||||
padding: 2px;
|
||||
}
|
||||
div.olControlZoom a {
|
||||
font-size: 18px;
|
||||
line-height: 19px;
|
||||
height: 22px;
|
||||
width:22px;
|
||||
padding: 0;
|
||||
}
|
||||
div.olControlZoom a, div.olControlTextButtonPanel .olButton {
|
||||
display: block;
|
||||
margin: 1px;
|
||||
color: white;
|
||||
font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
background: #130085; /* fallback for IE - IE6 requires background shorthand*/
|
||||
background: rgba(0, 60, 136, 0.5);
|
||||
filter: alpha(opacity=80);
|
||||
}
|
||||
div.olControlZoom a:hover, div.olControlTextButtonPanel .olButton:hover {
|
||||
background: #130085; /* fallback for IE */
|
||||
background: rgba(0, 60, 136, 0.7);
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
@media only screen and (max-width: 600px) {
|
||||
div.olControlZoom a:hover, div.olControlTextButtonPanel .olButton:hover {
|
||||
background: rgba(0, 60, 136, 0.5);
|
||||
}
|
||||
}
|
||||
a.olControlZoomIn {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
a.olControlZoomOut {
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
|
||||
/**
|
||||
* TextButtonPanel
|
||||
*/
|
||||
|
||||
div.olControlTextButtonPanel .olButton {
|
||||
float: left;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
div.olControlTextButtonPanel.vertical .olButton {
|
||||
float: none;
|
||||
}
|
||||
div.olControlTextButtonPanel .olButton:first-child {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
div.olControlTextButtonPanel .olButton:last-child {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
div.olControlTextButtonPanel.vertical .olButton:first-child {
|
||||
border-radius: 4px 4px 0 0
|
||||
}
|
||||
div.olControlTextButtonPanel.vertical .olButton:last-child {
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Animations
|
||||
*/
|
||||
|
||||
.olLayerGrid .olTileImage {
|
||||
-webkit-transition: opacity 0.2s linear;
|
||||
-moz-transition: opacity 0.2s linear;
|
||||
-o-transition: opacity 0.2s linear;
|
||||
transition: opacity 0.2s linear;
|
||||
}
|
||||
|
||||
/* Turn on GPU support where available */
|
||||
.olTileImage {
|
||||
-webkit-transform: translateZ(0);
|
||||
-moz-transform: translateZ(0);
|
||||
-o-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
-ms-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
-webkit-perspective: 1000;
|
||||
-moz-perspective: 1000;
|
||||
-ms-perspective: 1000;
|
||||
perspective: 1000;
|
||||
}
|
||||
|
||||
/* when replacing tiles, do not show tile and backbuffer at the same time */
|
||||
.olTileReplacing {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* override any max-width image settings (e.g. bootstrap.css) */
|
||||
img.olTileImage {
|
||||
max-width: none;
|
||||
}
|
||||
53
lib/assets/javascripts/cdb/examples/cursor_interaction.html
Normal file
53
lib/assets/javascripts/cdb/examples/cursor_interaction.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Adding Cursor interaction to your map example | CartoDB.js</title>
|
||||
<!--
|
||||
This example shows you how to add cursor interaction to your map using CartoDB.js
|
||||
-->
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: #E5F5F7;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.uncompressed.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
function main() {
|
||||
var map = new L.Map('map', {
|
||||
zoomControl: false,
|
||||
center: [43, -30],
|
||||
zoom: 3
|
||||
});
|
||||
|
||||
cartodb.createLayer(map, 'http://examples.cartodb.com/api/v2/viz/255729a6-e28c-11e3-bcb7-0e10bcd91c2b/viz.json')
|
||||
.addTo(map)
|
||||
.on('done', function(layer) {
|
||||
var subLayer = layer.getSubLayer(0);
|
||||
subLayer.setInteraction(true); // Interaction for that layer must be enabled
|
||||
cdb.vis.Vis.addCursorInteraction(map, subLayer); // undo with removeCursorInteraction
|
||||
layer.on('featureOver', featureOver);
|
||||
})
|
||||
|
||||
function featureOver(e, latlng, pos, data) {
|
||||
console.log(data.cartodb_id)
|
||||
}
|
||||
}
|
||||
window.onload = main;
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
106
lib/assets/javascripts/cdb/examples/custom.html
Normal file
106
lib/assets/javascripts/cdb/examples/custom.html
Normal file
@@ -0,0 +1,106 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Legends | CartoDB.js</title>
|
||||
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
<script>
|
||||
|
||||
window.onload = function() {
|
||||
|
||||
var map_viz_url = 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json';
|
||||
|
||||
var onVisDone = function(vis, layers) {
|
||||
|
||||
layers[1].setInteraction(true);
|
||||
|
||||
layers[1].on('featureOver', function(e, latlng, pos, data, layerNumber) {
|
||||
cartodb.log.log(e, latlng, pos, data, layerNumber);
|
||||
});
|
||||
|
||||
// Adds our custom legend
|
||||
var customLegend = new cdb.geo.ui.Legend.Custom({
|
||||
title: "Custom Legend",
|
||||
data: [
|
||||
{ name: "Natural Parks", value: "#58A062" },
|
||||
{ name: "Villages", value: "#F07971" },
|
||||
{ name: "Rivers", value: "#54BFDE" },
|
||||
{ name: "Fields", value: "#9BC562" },
|
||||
{ name: "Caves", value: "#FABB5C" }
|
||||
]
|
||||
});
|
||||
|
||||
$(".legends").append(customLegend.render().$el);
|
||||
|
||||
};
|
||||
|
||||
cartodb.createVis('map', map_viz_url, {
|
||||
legends: false,
|
||||
zoom: 3,
|
||||
no_cdn: true
|
||||
}).done(onVisDone);
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
html, body {
|
||||
position:relative;
|
||||
}
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.legend-selector {
|
||||
position:absolute;
|
||||
top: 20px; right: 20px;
|
||||
margin: 0; padding: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.legend-selector li {
|
||||
display:inline-block;
|
||||
margin: 0 0 0 10px; padding: 0;
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
.legend-selector li a {
|
||||
display:block;
|
||||
text-decoration:none;
|
||||
text-align:center;
|
||||
font: normal 13px "Helvetica",Arial;
|
||||
color: #858585;
|
||||
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;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
-o-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #999;
|
||||
background: #FFF;
|
||||
z-index: 5;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.legend-selector li a.selected {
|
||||
background:#f1f1f1;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<ul class="legend-selector"> </ul>
|
||||
<div id="map">
|
||||
<div class="legends"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
67
lib/assets/javascripts/cdb/examples/custom_infowindow.html
Normal file
67
lib/assets/javascripts/cdb/examples/custom_infowindow.html
Normal file
@@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Custom infowindow example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="https://carto.com/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<script type="infowindow/html" id="infowindow_template">
|
||||
<span> custom </span>
|
||||
<div class="cartodb-popup">
|
||||
<a href="#close" class="cartodb-popup-close-button close">x</a>
|
||||
|
||||
<div class="cartodb-popup-content-wrapper">
|
||||
<div class="cartodb-popup-content">
|
||||
<img style="width: 100%" src="http://rambo.webcindario.com/images/18447755.jpg">
|
||||
<!-- content.data contains the field info -->
|
||||
<h4>{{content.data.name}}</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cartodb-popup-tip-container"></div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
|
||||
<script>
|
||||
function main() {
|
||||
var map = L.map('map', {
|
||||
zoomControl: false,
|
||||
center: [0, 0],
|
||||
zoom: 3
|
||||
});
|
||||
|
||||
// add a nice baselayer from Stamen
|
||||
L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
|
||||
attribution: 'Stamen'
|
||||
}).addTo(map);
|
||||
|
||||
cartodb.createLayer(map, 'https://documentation.carto.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json')
|
||||
.addTo(map)
|
||||
.on('done', function(layer) {
|
||||
// get sublayer 0 and set the infowindow template
|
||||
var sublayer = layer.getSubLayer(0);
|
||||
|
||||
sublayer.infowindow.set('template', $('#infowindow_template').html());
|
||||
}).on('error', function() {
|
||||
console.log("some error occurred");
|
||||
});
|
||||
}
|
||||
|
||||
window.onload = main;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
59
lib/assets/javascripts/cdb/examples/easy.html
Normal file
59
lib/assets/javascripts/cdb/examples/easy.html
Normal file
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Easy example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="https://carto.com/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
|
||||
<script>
|
||||
function main() {
|
||||
cartodb.createVis('map', 'https://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json', {
|
||||
shareable: true,
|
||||
title: true,
|
||||
description: true,
|
||||
search: true,
|
||||
tiles_loader: true,
|
||||
center_lat: 0,
|
||||
center_lon: 0,
|
||||
zoom: 2
|
||||
})
|
||||
.done(function(vis, layers) {
|
||||
// layer 0 is the base layer, layer 1 is cartodb layer
|
||||
// setInteraction is disabled by default
|
||||
layers[1].setInteraction(true);
|
||||
layers[1].on('featureOver', function(e, latlng, pos, data) {
|
||||
cartodb.log.log(e, latlng, pos, data);
|
||||
});
|
||||
|
||||
// you can get the native map to work with it
|
||||
var map = vis.getNativeMap();
|
||||
|
||||
// now, perform any operations you need
|
||||
// map.setZoom(3);
|
||||
// map.panTo([50.5, 30.5]);
|
||||
})
|
||||
.error(function(err) {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
window.onload = main;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
33
lib/assets/javascripts/cdb/examples/examples.json
Normal file
33
lib/assets/javascripts/cdb/examples/examples.json
Normal file
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"main": {
|
||||
"file": "easy.html"
|
||||
},
|
||||
"categories": [
|
||||
{
|
||||
"title": "Basics",
|
||||
"samples": [
|
||||
{
|
||||
"title": "Easy implementation",
|
||||
"desc": "An easy example using the library",
|
||||
"file": "easy.html"
|
||||
},{
|
||||
"title": "Leaflet integration",
|
||||
"desc": "An example of leaflet integration",
|
||||
"file": "leaflet.html"
|
||||
}
|
||||
]},
|
||||
{
|
||||
"title": "More than basics",
|
||||
"samples": [
|
||||
{
|
||||
"title": "Infowindow",
|
||||
"desc": "Customizing infowindow data",
|
||||
"file": "custom_infowindow.html"
|
||||
},{
|
||||
"title": "Layer selector",
|
||||
"desc": "An example using a layer selector",
|
||||
"file": "layer_selector.html"
|
||||
}
|
||||
]}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
{
|
||||
"interactions": [
|
||||
{
|
||||
"layers": {
|
||||
"layer-0": {
|
||||
"cartocss": "#european_countries_e {polygon-fill: red}",
|
||||
"sql": "SELECT * FROM european_countries_e WHERE cartodb_id > 23",
|
||||
"interactivity": "cartodb_id"
|
||||
}
|
||||
},
|
||||
"name": "a",
|
||||
"className": "test-1",
|
||||
"text": "Red polygons"
|
||||
},
|
||||
|
||||
{
|
||||
"layers": {
|
||||
"layer-0": {
|
||||
"cartocss": "#european_countries_e {polygon-fill: blue}",
|
||||
"sql": "SELECT * FROM european_countries_e WHERE cartodb_id < 2",
|
||||
"interactivity": "cartodb_id"
|
||||
}
|
||||
},
|
||||
"name": "a",
|
||||
"className": "test-2",
|
||||
"text": "Blue polygons"
|
||||
},
|
||||
|
||||
{
|
||||
"layers": {
|
||||
"layer-0": {
|
||||
"cartocss": "#european_countries_e {polygon-fill: yellow}",
|
||||
"sql": "SELECT * FROM european_countries_e WHERE cartodb_id > 30",
|
||||
"interactivity": "cartodb_id"
|
||||
}
|
||||
},
|
||||
"name": "a",
|
||||
"className": "test-3",
|
||||
"text": "Yellow polygons long name dude"
|
||||
}
|
||||
],
|
||||
|
||||
"vizjson": "http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json"
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="no-js">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>CartoDB · Template</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.3/normalize.min.css">
|
||||
<link rel="stylesheet" href="main.css">
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.12/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<div id="filters">
|
||||
<ul></ul>
|
||||
</div>
|
||||
|
||||
<script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.12/cartodb.js"></script>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,49 @@
|
||||
|
||||
body, html, #map {
|
||||
width:100%;
|
||||
height:100%;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
a {font-size:13px; color:#2483B4; text-decoration:none;}
|
||||
a.selected {background:#F7F7F7; color:#333;}
|
||||
a:hover {color:#333;}
|
||||
a.selected:hover {color:#333; cursor:default;}
|
||||
|
||||
#filters {
|
||||
position:absolute;
|
||||
top:20px; right:20px;
|
||||
width:147px;
|
||||
z-index:10;
|
||||
background:white;
|
||||
border-radius:3px;
|
||||
-moz-border-radius:3px;
|
||||
-webkit-border-radius:3px;
|
||||
box-shadow:rgba(0, 0, 0, 0.2) 0 0 4px 2px;
|
||||
border:1px solid rgba(204,204,204,0.35);
|
||||
}
|
||||
|
||||
#filters ul {
|
||||
margin:0;
|
||||
padding:0;
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
#filters li {
|
||||
margin:0; padding:0;
|
||||
border-bottom:1px solid rgba(204,204,204,0.35);
|
||||
}
|
||||
|
||||
#filters li:last-child {
|
||||
margin:0; padding:0;
|
||||
border-bottom:none;
|
||||
}
|
||||
|
||||
#filters li a {
|
||||
display:block;
|
||||
padding:13px 13px 15px 13px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
161
lib/assets/javascripts/cdb/examples/filters-template/main.js
Normal file
161
lib/assets/javascripts/cdb/examples/filters-template/main.js
Normal file
@@ -0,0 +1,161 @@
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
var Template = cdb.core.View.extend({
|
||||
|
||||
initialize: function() {
|
||||
this._initElements();
|
||||
},
|
||||
|
||||
_initElements: function() {
|
||||
this.filters = new Filters({ el: this.$('#filters') });
|
||||
this.map = new Map({ el: this.$('#map'), filters: this.filters });
|
||||
}
|
||||
});
|
||||
|
||||
window.template = new Template({ el: document.body });
|
||||
})
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Map
|
||||
*/
|
||||
|
||||
var Map = cdb.core.View.extend({
|
||||
|
||||
initialize: function() {
|
||||
_.bindAll(this, '_initMap');
|
||||
this.filters = this.options.filters;
|
||||
this._getVizJson();
|
||||
this._bindEvents();
|
||||
},
|
||||
|
||||
_getVizJson: function() {
|
||||
$.ajax({
|
||||
url: 'data.json',
|
||||
success: this._initMap,
|
||||
error: function() {
|
||||
cdb.log.info('problems getting vizjson info, check tools.json url please')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
_initMap: function(data) {
|
||||
var self = this;
|
||||
cartodb.createVis(this.$el, data.vizjson)
|
||||
.done(function(vis, layers) {
|
||||
self.layers = layers[1];
|
||||
self.map = vis.getNativeMap();
|
||||
});
|
||||
},
|
||||
|
||||
_bindEvents: function() {
|
||||
this.filters.bind('change', this._changeLayerGroup, this);
|
||||
},
|
||||
|
||||
_changeLayerGroup: function(layers) {
|
||||
var self = this;
|
||||
|
||||
_.each(layers, function(opts, i) {
|
||||
var pos = i.split('-')[1];
|
||||
var sublayer = self.layers.getSubLayer(pos);
|
||||
|
||||
if (sublayer) {
|
||||
sublayer.set(opts);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
/**
|
||||
* Filters
|
||||
*/
|
||||
|
||||
var Filters = cdb.core.View.extend({
|
||||
|
||||
initialize: function() {
|
||||
_.bindAll(this, 'render');
|
||||
this._getActions();
|
||||
},
|
||||
|
||||
render: function(data) {
|
||||
this.clearSubViews();
|
||||
|
||||
var self = this;
|
||||
|
||||
if (!data.interactions) return false;
|
||||
var buttons = data.interactions;
|
||||
|
||||
for (var i = 0, l = buttons.length; i < l; i++) {
|
||||
var a = new FiltersItem({ data: buttons[i] });
|
||||
a.bind('change', this._triggerChange, this)
|
||||
self.addView(a);
|
||||
self.$('ul').append(a.render().el);
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
_triggerChange: function(d) {
|
||||
this._setSelectedFilter(d);
|
||||
this.trigger('change', d.layers, this);
|
||||
},
|
||||
|
||||
_setSelectedFilter: function(d) {
|
||||
this.$('ul li a').removeClass('selected');
|
||||
this.$('ul li a').each(function(i,a) {
|
||||
if ($(a).text() == d.text && $(a).attr('class') == d.className) {
|
||||
$(a).addClass('selected')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
_getActions: function() {
|
||||
$.ajax({
|
||||
url: 'data.json',
|
||||
success: this.render,
|
||||
error: function() {
|
||||
cdb.log.info('oh no!, check your json location or if you are using a web server (Apache?)')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
var FiltersItem = cdb.core.View.extend({
|
||||
|
||||
tagName: 'li',
|
||||
|
||||
events: {
|
||||
'click': '_onClick'
|
||||
},
|
||||
|
||||
initialize: function() {
|
||||
_.bindAll(this, '_onClick');
|
||||
this.data = this.options.data;
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var $a = $('<a>');
|
||||
$a
|
||||
.addClass(this.data.className)
|
||||
.text(this.data.text)
|
||||
.attr('href', '#/' + this.data.text.replace(/ /gi,'-'));
|
||||
|
||||
this.$el.append($a);
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
_onClick: function(e) {
|
||||
this.killEvent(e);
|
||||
this.trigger('change', this.data, this);
|
||||
}
|
||||
|
||||
})
|
||||
41
lib/assets/javascripts/cdb/examples/format.html
Normal file
41
lib/assets/javascripts/cdb/examples/format.html
Normal file
@@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Single image example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#content {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map {
|
||||
float:left;
|
||||
margin: 10px;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
<div class="map">
|
||||
<script>
|
||||
cartodb.Image("https://documentation.cartodb.com/api/v2/viz/df45a412-d5dc-11e3-855b-0e10bcd91c2b/viz.json").bbox([[-87.82814025878906,41.88719899247721], [ -87.5936508178711,41.942765696654604]]).size(500, 500).format("jpg").write();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,85 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Driving directions to clicked point | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.12/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include google maps library -->
|
||||
<script type="text/javascript" src="http://www.maps.google.com/maps/api/js?sensor=false&v=3.30"></script>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="https://libs.cartocdn.com.s3.amazonaws.com/cartodb.js/v3/3.12/cartodb.js"></script>
|
||||
|
||||
<script>
|
||||
var map;
|
||||
var google_api_key = "AIzaSyCADWr4a6NraGN1ldmcBKN4W_6c6teuImw"
|
||||
function main() {
|
||||
|
||||
// Map center
|
||||
var myLatlng = new google.maps.LatLng(37.753, -122.433);
|
||||
var myOptions = {
|
||||
zoom: 13,
|
||||
center: myLatlng,
|
||||
disableDefaultUI: true,
|
||||
mapTypeId: google.maps.MapTypeId.ROADMAP
|
||||
}
|
||||
|
||||
// Render basemap
|
||||
map = new google.maps.Map(document.getElementById("map"), myOptions);
|
||||
|
||||
// Create services for later rendering of directions
|
||||
var directionsDisplay = new google.maps.DirectionsRenderer();
|
||||
directionsDisplay.setMap(map);
|
||||
var directionsService = new google.maps.DirectionsService();
|
||||
|
||||
// The location of the Exploratorium
|
||||
var exploratorium = new google.maps.LatLng(37.801434, -122.397561);
|
||||
|
||||
// Our CartoDB visualization
|
||||
var vizjson_url = "http://team.cartodb.com/api/v2/viz/db067df4-8f8b-11e4-97e2-0e4fddd5de28/viz.json";
|
||||
cartodb.createLayer(map, vizjson_url)
|
||||
.addTo(map)
|
||||
.done(function(layers) {
|
||||
var subLayer = layers.getSubLayer(0);
|
||||
// Change our SQL applied to the layer to include Lat and Lon values in the response
|
||||
subLayer.set({"interactivity":"cartodb_id, lon, lat", "sql": "SELECT *, ST_X(the_geom) lon, ST_Y(the_geom) lat FROM schools_public_pt"})
|
||||
subLayer.setInteraction(true); // Interaction for that layer must be enabled
|
||||
cdb.vis.Vis.addCursorInteraction(map, subLayer); // undo with removeCursorInteraction
|
||||
|
||||
// Setup our event when an object is clicked
|
||||
layers.on('featureClick', function(e, latlng, pos, data){
|
||||
// the location of the clicked school
|
||||
var school = new google.maps.LatLng(data.lat, data.lon);
|
||||
|
||||
var request = {
|
||||
origin : school,
|
||||
destination : exploratorium,
|
||||
travelMode : google.maps.TravelMode.DRIVING
|
||||
};
|
||||
directionsService.route(request, function(response, status) {
|
||||
if (status == google.maps.DirectionsStatus.OK) {
|
||||
directionsDisplay.setDirections(response);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
}
|
||||
window.onload = main;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>GMaps Heatmap of bike trips | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.12/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include google maps library + visualization-->
|
||||
<script src="https://maps.googleapis.com/maps/api/js?v=3.32&libraries=visualization"></script>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="https://libs.cartocdn.com.s3.amazonaws.com/cartodb.js/v3/3.12/cartodb.js"></script>
|
||||
|
||||
<script>
|
||||
var map, pointarray, heatmap;
|
||||
var google_api_key = "AIzaSyCADWr4a6NraGN1ldmcBKN4W_6c6teuImw"
|
||||
function main() {
|
||||
|
||||
// Map center
|
||||
var myLatlng = new google.maps.LatLng(40.722, -73.997);
|
||||
var myOptions = {
|
||||
zoom: 14,
|
||||
center: myLatlng,
|
||||
disableDefaultUI: true,
|
||||
mapTypeId: google.maps.MapTypeId.SATELLITE
|
||||
}
|
||||
|
||||
// Render basemap
|
||||
map = new google.maps.Map(document.getElementById("map"), myOptions);
|
||||
|
||||
var sql = cartodb.SQL({ user: 'andrew', format: 'geojson'});
|
||||
sql.execute("SELECT cartodb_id, the_geom FROM cleveland_spring_points").done(function(data) {
|
||||
data = data.features.map(function(r) {
|
||||
return new google.maps.LatLng(r.geometry.coordinates[1], r.geometry.coordinates[0])
|
||||
});
|
||||
var pointArray = new google.maps.MVCArray(data);
|
||||
heatmap = new google.maps.visualization.HeatmapLayer({
|
||||
data: pointArray
|
||||
});
|
||||
heatmap.set('radius', heatmap.get('radius') ? null : 20);
|
||||
heatmap.setMap(map);
|
||||
});
|
||||
|
||||
}
|
||||
window.onload = main;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>GMaps Satellite basemap | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.12/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include google maps library -->
|
||||
<script type="text/javascript" src="http://www.maps.google.com/maps/api/js?sensor=false&v=3.30"></script>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="../../dist/cartodb.uncompressed.js"></script>
|
||||
|
||||
<script>
|
||||
function main() {
|
||||
var vizjson_url = "http://team.cartodb.com/api/v2/viz/7fff1080-f64b-11e3-82d4-0e230854a1cb/viz.json";
|
||||
cartodb.createVis("map", vizjson_url, { share: true, title: true, description: true, search: true
|
||||
, gmaps_base_type: 'satellite'
|
||||
})
|
||||
.done(function(vis, layers) {
|
||||
});
|
||||
}
|
||||
window.onload = main;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>GMaps plus Torque | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.12/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include google maps library -->
|
||||
<script type="text/javascript" src="http://www.maps.google.com/maps/api/js?sensor=false&v=3.30"></script>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="https://libs.cartocdn.com.s3.amazonaws.com/cartodb.js/v3/3.12/cartodb.js"></script>
|
||||
|
||||
<script>
|
||||
function main() {
|
||||
var vizjson_url = "http://team.cartodb.com/api/v2/viz/5d42a76a-96d1-11e4-976b-0e4fddd5de28/viz.json";
|
||||
cartodb.createVis("map", vizjson_url, { share: true, title: true, description: true, search: true
|
||||
, gmaps_base_type: 'roadmap'
|
||||
})
|
||||
.done(function(vis, layers) {
|
||||
});
|
||||
}
|
||||
window.onload = main;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,85 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Driving directions to clicked point | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include google maps library -->
|
||||
<script type="text/javascript" src="http://www.maps.google.com/maps/api/js?sensor=false&v=3.30"></script>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="https://libs.cartocdn.com.s3.amazonaws.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
|
||||
<script>
|
||||
var map;
|
||||
var google_api_key = "AIzaSyCADWr4a6NraGN1ldmcBKN4W_6c6teuImw"
|
||||
function main() {
|
||||
|
||||
// Map center
|
||||
var myLatlng = new google.maps.LatLng(37.753, -122.433);
|
||||
var myOptions = {
|
||||
zoom: 13,
|
||||
center: myLatlng,
|
||||
disableDefaultUI: true,
|
||||
mapTypeId: google.maps.MapTypeId.ROADMAP
|
||||
}
|
||||
|
||||
// Render basemap
|
||||
map = new google.maps.Map(document.getElementById("map"), myOptions);
|
||||
|
||||
// Create services for later rendering of directions
|
||||
var directionsDisplay = new google.maps.DirectionsRenderer();
|
||||
directionsDisplay.setMap(map);
|
||||
var directionsService = new google.maps.DirectionsService();
|
||||
|
||||
// The location of the Exploratorium
|
||||
var exploratorium = new google.maps.LatLng(37.801434, -122.397561);
|
||||
|
||||
// Our CartoDB visualization
|
||||
var vizjson_url = "http://team.cartodb.com/api/v2/viz/db067df4-8f8b-11e4-97e2-0e4fddd5de28/viz.json";
|
||||
cartodb.createLayer(map, vizjson_url)
|
||||
.addTo(map)
|
||||
.done(function(layers) {
|
||||
var subLayer = layers.getSubLayer(0);
|
||||
// Change our SQL applied to the layer to include Lat and Lon values in the response
|
||||
subLayer.set({"interactivity":"cartodb_id, lon, lat", "sql": "SELECT *, ST_X(the_geom) lon, ST_Y(the_geom) lat FROM schools_public_pt"})
|
||||
subLayer.setInteraction(true); // Interaction for that layer must be enabled
|
||||
cdb.vis.Vis.addCursorInteraction(map, subLayer); // undo with removeCursorInteraction
|
||||
|
||||
// Setup our event when an object is clicked
|
||||
layers.on('featureClick', function(e, latlng, pos, data){
|
||||
// the location of the clicked school
|
||||
var school = new google.maps.LatLng(data.lat, data.lon);
|
||||
|
||||
var request = {
|
||||
origin : school,
|
||||
destination : exploratorium,
|
||||
travelMode : google.maps.TravelMode.DRIVING
|
||||
};
|
||||
directionsService.route(request, function(response, status) {
|
||||
if (status == google.maps.DirectionsStatus.OK) {
|
||||
directionsDisplay.setDirections(response);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
}
|
||||
window.onload = main;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
40
lib/assets/javascripts/cdb/examples/gmaps_force_basemap.html
Normal file
40
lib/assets/javascripts/cdb/examples/gmaps_force_basemap.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Force GMaps base type | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include google maps library -->
|
||||
<script type="text/javascript" src="http://www.maps.google.com/maps/api/js?sensor=false&v=3.30"></script>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="https://libs.cartocdn.com.s3.amazonaws.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
|
||||
<script>
|
||||
function main() {
|
||||
var vizjson_url = "http://documentation.cartodb.com/api/v2/viz/9f130ef2-6371-11e4-a0fd-0e9d821ea90d/viz.json";
|
||||
cartodb.createVis("map", vizjson_url, { share: true, title: true, description: true, search: true
|
||||
, gmaps_base_type: 'roadmap'
|
||||
, gmaps_style: '[{"featureType": "water","elementType": "geometry","stylers": [{ "color": "#80a580" }]}] '
|
||||
})
|
||||
.done(function(vis, layers) {
|
||||
});
|
||||
}
|
||||
window.onload = main;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>GMaps Heatmap of bike trips | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include google maps library + visualization-->
|
||||
<script src="https://maps.googleapis.com/maps/api/js?v=3.32&libraries=visualization"></script>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="https://libs.cartocdn.com.s3.amazonaws.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
|
||||
<script>
|
||||
var map, pointarray, heatmap;
|
||||
var google_api_key = "AIzaSyCADWr4a6NraGN1ldmcBKN4W_6c6teuImw"
|
||||
function main() {
|
||||
|
||||
// Map center
|
||||
var myLatlng = new google.maps.LatLng(40.722, -73.997);
|
||||
var myOptions = {
|
||||
zoom: 14,
|
||||
center: myLatlng,
|
||||
disableDefaultUI: true,
|
||||
mapTypeId: google.maps.MapTypeId.SATELLITE
|
||||
}
|
||||
|
||||
// Render basemap
|
||||
map = new google.maps.Map(document.getElementById("map"), myOptions);
|
||||
|
||||
var sql = cartodb.SQL({ user: 'andrew', format: 'geojson'});
|
||||
sql.execute("SELECT cartodb_id, the_geom FROM cleveland_spring_points").done(function(data) {
|
||||
data = data.features.map(function(r) {
|
||||
return new google.maps.LatLng(r.geometry.coordinates[1], r.geometry.coordinates[0])
|
||||
});
|
||||
var pointArray = new google.maps.MVCArray(data);
|
||||
heatmap = new google.maps.visualization.HeatmapLayer({
|
||||
data: pointArray
|
||||
});
|
||||
heatmap.set('radius', heatmap.get('radius') ? null : 20);
|
||||
heatmap.setMap(map);
|
||||
});
|
||||
|
||||
}
|
||||
window.onload = main;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
39
lib/assets/javascripts/cdb/examples/gmaps_satellite.html
Normal file
39
lib/assets/javascripts/cdb/examples/gmaps_satellite.html
Normal file
@@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>GMaps Satellite basemap | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include google maps library -->
|
||||
<script type="text/javascript" src="http://www.maps.google.com/maps/api/js?sensor=false&v=3.30"></script>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="../../dist/cartodb.uncompressed.js"></script>
|
||||
|
||||
<script>
|
||||
function main() {
|
||||
var vizjson_url = "http://team.cartodb.com/api/v2/viz/7fff1080-f64b-11e3-82d4-0e230854a1cb/viz.json";
|
||||
cartodb.createVis("map", vizjson_url, { share: true, title: true, description: true, search: true
|
||||
, gmaps_base_type: 'satellite'
|
||||
})
|
||||
.done(function(vis, layers) {
|
||||
});
|
||||
}
|
||||
window.onload = main;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
39
lib/assets/javascripts/cdb/examples/gmaps_with_torque.html
Normal file
39
lib/assets/javascripts/cdb/examples/gmaps_with_torque.html
Normal file
@@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>GMaps plus Torque | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include google maps library -->
|
||||
<script type="text/javascript" src="http://www.maps.google.com/maps/api/js?sensor=false&v=3.30"></script>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="https://libs.cartocdn.com.s3.amazonaws.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
|
||||
<script>
|
||||
function main() {
|
||||
var vizjson_url = "http://team.cartodb.com/api/v2/viz/5d42a76a-96d1-11e4-976b-0e4fddd5de28/viz.json";
|
||||
cartodb.createVis("map", vizjson_url, { share: true, title: true, description: true, search: true
|
||||
, gmaps_base_type: 'roadmap'
|
||||
})
|
||||
.done(function(vis, layers) {
|
||||
});
|
||||
}
|
||||
window.onload = main;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
80
lib/assets/javascripts/cdb/examples/header_overlay.html
Normal file
80
lib/assets/javascripts/cdb/examples/header_overlay.html
Normal file
@@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Header with createLayer | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body > div.cartodb-header{
|
||||
display: none;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
width: 100%;
|
||||
background-color: rgba(0,0,0,.5);
|
||||
font-family: 'Helvetica Neue',Helvetica,sans-serif;
|
||||
line-height: normal;
|
||||
z-index: 99999;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.14/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.14/cartodb.js"></script>
|
||||
|
||||
<script>
|
||||
function main() {
|
||||
var map = new L.Map('map', {
|
||||
zoomControl: false,
|
||||
center: [43, 0],
|
||||
zoom: 3
|
||||
});
|
||||
|
||||
L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
|
||||
attribution: 'Stamen',
|
||||
}).addTo(map);
|
||||
|
||||
cartodb.createLayer(map, 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json').addTo(map)
|
||||
.done(function(layer) {
|
||||
|
||||
var sublayer = layer.getSubLayer(0);
|
||||
|
||||
var i = new cdb.geo.ui.Header({
|
||||
model: new cdb.core.Model({
|
||||
extra: {
|
||||
title: "Title",
|
||||
description: "Description",
|
||||
show_title: true,
|
||||
show_description: true
|
||||
}
|
||||
}),
|
||||
template: cdb.core.Template.compile(
|
||||
' \
|
||||
<div class="content">\
|
||||
<div class="title">{{{ title }}}</div>\
|
||||
<div class="description">{{{ description }}}</div>\
|
||||
</div>',
|
||||
'mustache'
|
||||
)
|
||||
});
|
||||
|
||||
$('body').append(i.render().el);
|
||||
})
|
||||
.error(function(err) {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
window.onload = main;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
157
lib/assets/javascripts/cdb/examples/image.html
Normal file
157
lib/assets/javascripts/cdb/examples/image.html
Normal file
@@ -0,0 +1,157 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Image loading methods example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#content {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map {
|
||||
float:left;
|
||||
margin: 10px;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
<script>
|
||||
|
||||
/* 1: We can create an image using a custom build layer definition: */
|
||||
var layer_definition = {
|
||||
user_name: "documentation",
|
||||
tiler_domain: "cartodb.com",
|
||||
tiler_port: "80",
|
||||
tiler_protocol: "http",
|
||||
layers: [{
|
||||
type: "http",
|
||||
options: {
|
||||
urlTemplate: "https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png",
|
||||
subdomains: [ "a", "b", "c" ]
|
||||
}
|
||||
}, {
|
||||
type: "cartodb",
|
||||
options: {
|
||||
sql: "SELECT * FROM nyc_wifi",
|
||||
cartocss: "/** simple visualization */ #nyc_wifi{ marker-fill-opacity: 0.8; marker-line-color: #FFFFFF; marker-line-width: 1; marker-line-opacity: .8; marker-placement: point; marker-type: ellipse; marker-width: 6; marker-fill: #6ac41c; marker-allow-overlap: true; }",
|
||||
cartocss_version: "2.1.1"
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
// and now we just ask for the URL and append it to the page
|
||||
cartodb.Image(layer_definition).size(250, 250).zoom(9).center([40.708517, -73.993414]).getUrl(function(error, url) {
|
||||
var img = new Image();
|
||||
|
||||
img.onerror = function() {
|
||||
console.log(error);
|
||||
};
|
||||
|
||||
img.onload = function() {
|
||||
var $map = $('<div class="map"></div>');
|
||||
var $img = $('<img src="' + url + '" />');
|
||||
$map.append($img);
|
||||
$("#content").append($map);
|
||||
};
|
||||
|
||||
img.src = url;
|
||||
|
||||
});
|
||||
|
||||
var basemap = {
|
||||
type: "http",
|
||||
options: {
|
||||
urlTemplate: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
|
||||
subdomains: ["a", "b", "c"]
|
||||
}
|
||||
};
|
||||
|
||||
/* 2: Another option: with a vizjson defined in the CartoDB editor */
|
||||
var vizjsons = [
|
||||
{ zoom: 2, url: "https://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json" },
|
||||
{ zoom: 17, url: "https://documentation.cartodb.com/api/v2/viz/c3dd77a6-d5e4-11e3-a5b4-0e73339ffa50/viz.json" },
|
||||
{ zoom: 12, url: "https://documentation.cartodb.com/api/v2/viz/df45a412-d5dc-11e3-855b-0e10bcd91c2b/viz.json" },
|
||||
{ zoom: 2, url: "https://documentation.cartodb.com/api/v2/viz/e7132460-d5e8-11e3-8459-0e10bcd91c2b/viz.json" },
|
||||
{ zoom: 8, url: "https://documentation.cartodb.com/api/v2/viz/d5c2419c-d08d-11e3-80a5-0e230854a1cb/viz.json" },
|
||||
{ basemap: basemap, zoom: 5, url: "https://documentation.cartodb.com/api/v2/viz/d5c2419c-d08d-11e3-80a5-0e230854a1cb/viz.json" }
|
||||
];
|
||||
|
||||
// Let's load all those URLs and add them to the page
|
||||
for (var i = 0; i < vizjsons.length; i++) {
|
||||
|
||||
var v = vizjsons[i];
|
||||
|
||||
cartodb.Image(v.url, { basemap: basemap }).size(250, 250).zoom(v.zoom).getUrl(function(error, url) {
|
||||
var img = new Image();
|
||||
|
||||
img.onerror = function() {
|
||||
console.log(error);
|
||||
};
|
||||
|
||||
img.onload = function() {
|
||||
var $map = $('<div class="map"></div>');
|
||||
var $img = $('<img src="' + url + '" />');
|
||||
$map.append($img);
|
||||
$("#content").append($map);
|
||||
};
|
||||
|
||||
img.src = url;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
/* 3. Wait, say you have some images defined like this:
|
||||
|
||||
<img data-vizjson-url="[VIZJSON_URL]" class="thumb" />
|
||||
|
||||
then you can create the images with the following code: */
|
||||
|
||||
$(function() {
|
||||
$('.thumb').each(function() {
|
||||
cartodb.Image($(this).data('vizjson-url')).size(250, 250).into(this);
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
|
||||
<div class="map">
|
||||
<script>
|
||||
<!-- 4. You can also inject the image directly in the page like this: -->
|
||||
cartodb.Image(vizjsons[1].url).size(250, 250).write();
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<div class="map">
|
||||
<script>
|
||||
<!-- and you can specify a bunch of options too: -->
|
||||
cartodb.Image(vizjsons[0].url).size(250, 250).write({ class: "hi", id: "nice", src: "http://awesomegifs.com/wp-content/uploads/don-draper-slow-clap.gif" });
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<div class="map">
|
||||
<img data-vizjson-url="https://documentation.cartodb.com/api/v2/viz/d5c2419c-d08d-11e3-80a5-0e230854a1cb/viz.json" class="thumb" />
|
||||
</div>
|
||||
|
||||
<div class="map">
|
||||
<img data-vizjson-url="http://documentation.cartodb.com/api/v2/viz/c3dd77a6-d5e4-11e3-a5b4-0e73339ffa50/viz.json" width="250" height="250" class="thumb" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
50
lib/assets/javascripts/cdb/examples/images/basemap.html
Normal file
50
lib/assets/javascripts/cdb/examples/images/basemap.html
Normal file
@@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Basemap | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#content {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map {
|
||||
float:left;
|
||||
margin: 10px;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.12/cartodb.js"></script>
|
||||
<script>
|
||||
var basemap = {
|
||||
type: "http",
|
||||
options: {
|
||||
urlTemplate: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
|
||||
subdomains: ["a", "b", "c"]
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
<div class="map">
|
||||
<script>
|
||||
cartodb.Image("https://documentation.cartodb.com/api/v2/viz/01f93132-d5e6-11e3-855b-0e10bcd91c2b/viz.json", { basemap: basemap }).size(500, 500).write();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
152
lib/assets/javascripts/cdb/examples/images/core.html
Normal file
152
lib/assets/javascripts/cdb/examples/images/core.html
Normal file
@@ -0,0 +1,152 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Core | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#content {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map {
|
||||
float:left;
|
||||
margin: 10px;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://www.google.com/jsapi"></script>
|
||||
<script>google.load("jquery", "1.7.1");</script>
|
||||
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.12/cartodb.core.js"></script>
|
||||
<script>
|
||||
|
||||
/* 1: We can create an image using a custom build layer definition: */
|
||||
var layer_definition = {
|
||||
user_name: "documentation",
|
||||
tiler_domain: "cartodb.com",
|
||||
tiler_port: "80",
|
||||
tiler_protocol: "http",
|
||||
layers: [{
|
||||
type: "http",
|
||||
options: {
|
||||
urlTemplate: "https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png",
|
||||
subdomains: [ "a", "b", "c" ]
|
||||
}
|
||||
}, {
|
||||
type: "cartodb",
|
||||
options: {
|
||||
sql: "SELECT * FROM nyc_wifi",
|
||||
cartocss: "/** simple visualization */ #nyc_wifi{ marker-fill-opacity: 0.8; marker-line-color: #FFFFFF; marker-line-width: 1; marker-line-opacity: .8; marker-placement: point; marker-type: ellipse; marker-width: 6; marker-fill: #6ac41c; marker-allow-overlap: true; }",
|
||||
cartocss_version: "2.1.1"
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
// and now we just ask for the URL and append it to the page
|
||||
cartodb.Image(layer_definition).size(250, 250).zoom(9).center([40.708517, -73.993414]).getUrl(function(error, url) {
|
||||
var img = new Image();
|
||||
|
||||
img.onerror = function() {
|
||||
console.log(error);
|
||||
};
|
||||
|
||||
img.onload = function() {
|
||||
var $map = $('<div class="map"></div>');
|
||||
var $img = $('<img src="' + url + '" />');
|
||||
$map.append($img);
|
||||
$("#content").append($map);
|
||||
};
|
||||
|
||||
img.src = url;
|
||||
|
||||
});
|
||||
|
||||
/* 2: Another option: with a vizjson defined in the CartoDB editor */
|
||||
var vizjsons = [
|
||||
{ zoom: 2, url: "https://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json" },
|
||||
{ zoom: 17, url: "https://documentation.cartodb.com/api/v2/viz/c3dd77a6-d5e4-11e3-a5b4-0e73339ffa50/viz.json" },
|
||||
{ zoom: 12, url: "https://documentation.cartodb.com/api/v2/viz/df45a412-d5dc-11e3-855b-0e10bcd91c2b/viz.json" },
|
||||
{ zoom: 2, url: "https://documentation.cartodb.com/api/v2/viz/e7132460-d5e8-11e3-8459-0e10bcd91c2b/viz.json" },
|
||||
{ basemap:"dark_nolabels", zoom: 8, url: "https://documentation.cartodb.com/api/v2/viz/d5c2419c-d08d-11e3-80a5-0e230854a1cb/viz.json" },
|
||||
{ basemap:"dark_nolabels", zoom: 5, url: "https://team.cartodb.com/api/v2/viz/a5a2b18a-5ea0-11e4-a944-0e4fddd5de28/viz.json" }
|
||||
];
|
||||
|
||||
// Let's load all those URLs and add them to the page
|
||||
for (var i = 0; i < vizjsons.length; i++) {
|
||||
|
||||
var v = vizjsons[i];
|
||||
|
||||
cartodb.Image(v.url, { basemap: v.basemap }).size(250, 250).zoom(v.zoom).getUrl(function(error, url) {
|
||||
var img = new Image();
|
||||
|
||||
img.onerror = function() {
|
||||
console.log(error);
|
||||
};
|
||||
|
||||
img.onload = function() {
|
||||
var $map = $('<div class="map"></div>');
|
||||
var $img = $('<img src="' + url + '" />');
|
||||
$map.append($img);
|
||||
$("#content").append($map);
|
||||
};
|
||||
|
||||
img.src = url;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
/* 3. Wait, say you have some images defined like this:
|
||||
|
||||
<img data-vizjson-url="[VIZJSON_URL]" class="thumb" />
|
||||
|
||||
then you can create the images with the following code: */
|
||||
|
||||
$(function() {
|
||||
$('.thumb').each(function() {
|
||||
cartodb.Image($(this).data('vizjson-url')).size(250, 250).into(this);
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
|
||||
<div class="map">
|
||||
<script>
|
||||
<!-- 4. You can also inject the image directly in the page like this: -->
|
||||
cartodb.Image(vizjsons[1].url).size(250, 250).write();
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<div class="map">
|
||||
<script>
|
||||
<!-- and you can specify a bunch of options too: -->
|
||||
cartodb.Image(vizjsons[0].url).size(250, 250).write({ class: "hi", id: "nice", src: "http://awesomegifs.com/wp-content/uploads/don-draper-slow-clap.gif" });
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<div class="map">
|
||||
<img data-vizjson-url="http://arce.cartodb.com/api/v2/viz/378a0910-a229-11e4-9569-0e018d66dc29/viz.json" class="thumb" />
|
||||
</div>
|
||||
|
||||
<div class="map">
|
||||
<img data-vizjson-url="http://documentation.cartodb.com/api/v2/viz/c3dd77a6-d5e4-11e3-a5b4-0e73339ffa50/viz.json" width="250" height="250" class="thumb" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
41
lib/assets/javascripts/cdb/examples/images/format.html
Normal file
41
lib/assets/javascripts/cdb/examples/images/format.html
Normal file
@@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Single image example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#content {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map {
|
||||
float:left;
|
||||
margin: 10px;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.12/cartodb.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
<div class="map">
|
||||
<script>
|
||||
cartodb.Image("https://documentation.cartodb.com/api/v2/viz/df45a412-d5dc-11e3-855b-0e10bcd91c2b/viz.json").bbox([[-87.82814025878906,41.88719899247721], [ -87.5936508178711,41.942765696654604]]).size(500, 500).format("jpg").write();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
157
lib/assets/javascripts/cdb/examples/images/image.html
Normal file
157
lib/assets/javascripts/cdb/examples/images/image.html
Normal file
@@ -0,0 +1,157 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Image loading methods example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#content {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map {
|
||||
float:left;
|
||||
margin: 10px;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.12/cartodb.js"></script>
|
||||
<script>
|
||||
|
||||
/* 1: We can create an image using a custom build layer definition: */
|
||||
var layer_definition = {
|
||||
user_name: "documentation",
|
||||
tiler_domain: "cartodb.com",
|
||||
tiler_port: "80",
|
||||
tiler_protocol: "http",
|
||||
layers: [{
|
||||
type: "http",
|
||||
options: {
|
||||
urlTemplate: "https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png",
|
||||
subdomains: [ "a", "b", "c" ]
|
||||
}
|
||||
}, {
|
||||
type: "cartodb",
|
||||
options: {
|
||||
sql: "SELECT * FROM nyc_wifi",
|
||||
cartocss: "/** simple visualization */ #nyc_wifi{ marker-fill-opacity: 0.8; marker-line-color: #FFFFFF; marker-line-width: 1; marker-line-opacity: .8; marker-placement: point; marker-type: ellipse; marker-width: 6; marker-fill: #6ac41c; marker-allow-overlap: true; }",
|
||||
cartocss_version: "2.1.1"
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
// and now we just ask for the URL and append it to the page
|
||||
cartodb.Image(layer_definition).size(250, 250).zoom(9).center([40.708517, -73.993414]).getUrl(function(error, url) {
|
||||
var img = new Image();
|
||||
|
||||
img.onerror = function() {
|
||||
console.log(error);
|
||||
};
|
||||
|
||||
img.onload = function() {
|
||||
var $map = $('<div class="map"></div>');
|
||||
var $img = $('<img src="' + url + '" />');
|
||||
$map.append($img);
|
||||
$("#content").append($map);
|
||||
};
|
||||
|
||||
img.src = url;
|
||||
|
||||
});
|
||||
|
||||
var basemap = {
|
||||
type: "http",
|
||||
options: {
|
||||
urlTemplate: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
|
||||
subdomains: ["a", "b", "c"]
|
||||
}
|
||||
};
|
||||
|
||||
/* 2: Another option: with a vizjson defined in the CartoDB editor */
|
||||
var vizjsons = [
|
||||
{ zoom: 2, url: "http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json" },
|
||||
{ zoom: 17, url: "http://documentation.cartodb.com/api/v2/viz/c3dd77a6-d5e4-11e3-a5b4-0e73339ffa50/viz.json" },
|
||||
{ zoom: 12, url: "https://documentation.cartodb.com/api/v2/viz/df45a412-d5dc-11e3-855b-0e10bcd91c2b/viz.json" },
|
||||
{ zoom: 2, url: "https://documentation.cartodb.com/api/v2/viz/e7132460-d5e8-11e3-8459-0e10bcd91c2b/viz.json" },
|
||||
{ zoom: 8, url: "https://documentation.cartodb.com/api/v2/viz/d5c2419c-d08d-11e3-80a5-0e230854a1cb/viz.json" },
|
||||
{ basemap: basemap, zoom: 5, url: "https://documentation.cartodb.com/api/v2/viz/d5c2419c-d08d-11e3-80a5-0e230854a1cb/viz.json" }
|
||||
];
|
||||
|
||||
// Let's load all those URLs and add them to the page
|
||||
for (var i = 0; i < vizjsons.length; i++) {
|
||||
|
||||
var v = vizjsons[i];
|
||||
|
||||
cartodb.Image(v.url, { basemap: basemap }).size(250, 250).zoom(v.zoom).getUrl(function(error, url) {
|
||||
var img = new Image();
|
||||
|
||||
img.onerror = function() {
|
||||
console.log(error);
|
||||
};
|
||||
|
||||
img.onload = function() {
|
||||
var $map = $('<div class="map"></div>');
|
||||
var $img = $('<img src="' + url + '" />');
|
||||
$map.append($img);
|
||||
$("#content").append($map);
|
||||
};
|
||||
|
||||
img.src = url;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
/* 3. Wait, say you have some images defined like this:
|
||||
|
||||
<img data-vizjson-url="[VIZJSON_URL]" class="thumb" />
|
||||
|
||||
then you can create the images with the following code: */
|
||||
|
||||
$(function() {
|
||||
$('.thumb').each(function() {
|
||||
cartodb.Image($(this).data('vizjson-url')).size(250, 250).into(this);
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
|
||||
<div class="map">
|
||||
<script>
|
||||
<!-- 4. You can also inject the image directly in the page like this: -->
|
||||
cartodb.Image(vizjsons[1].url).size(250, 250).write();
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<div class="map">
|
||||
<script>
|
||||
<!-- and you can specify a bunch of options too: -->
|
||||
cartodb.Image(vizjsons[0].url).size(250, 250).write({ class: "hi", id: "nice", src: "http://awesomegifs.com/wp-content/uploads/don-draper-slow-clap.gif" });
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<div class="map">
|
||||
<img data-vizjson-url="https://documentation.cartodb.com/api/v2/viz/d5c2419c-d08d-11e3-80a5-0e230854a1cb/viz.json" class="thumb" />
|
||||
</div>
|
||||
|
||||
<div class="map">
|
||||
<img data-vizjson-url="http://documentation.cartodb.com/api/v2/viz/c3dd77a6-d5e4-11e3-a5b4-0e73339ffa50/viz.json" width="250" height="250" class="thumb" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Image example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#content {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map {
|
||||
float:left;
|
||||
margin: 10px;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
.map img { display: none; }
|
||||
</style>
|
||||
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.12/cartodb.js"></script>
|
||||
<script>
|
||||
|
||||
/* 1: We can create an image using a custom build layer definition: */
|
||||
var layer_definition = {
|
||||
user_name: "documentation",
|
||||
tiler_domain: "cartodb.com",
|
||||
tiler_port: "80",
|
||||
tiler_protocol: "http",
|
||||
layers: [{
|
||||
type: "http",
|
||||
options: {
|
||||
urlTemplate: "https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png",
|
||||
subdomains: [ "a", "b", "c" ]
|
||||
}
|
||||
}, {
|
||||
type: "cartodb",
|
||||
options: {
|
||||
sql: "SELECT * FROM nyc_wifi",
|
||||
cartocss: "/** simple visualization */ #nyc_wifi{ marker-fill-opacity: 0.8; marker-line-color: #FFFFFF; marker-line-width: 1; marker-line-opacity: .8; marker-placement: point; marker-type: ellipse; marker-width: 6; marker-fill: #6ac41c; marker-allow-overlap: true; }",
|
||||
cartocss_version: "2.1.1"
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
// and now we just ask for the URL and append it to the page
|
||||
cartodb.Image(layer_definition).size(500, 500).zoom(13).center([40.708517, -73.993414]).getUrl(function(error, url) {
|
||||
|
||||
var img = new Image();
|
||||
|
||||
img.onerror = function() {
|
||||
console.log(error);
|
||||
};
|
||||
|
||||
img.onload = function() {
|
||||
var $map = $('<div class="map"></div>');
|
||||
var $img = $('<img src="' + url + '" />');
|
||||
$map.append($img);
|
||||
$("#content").append($map);
|
||||
$img.fadeIn(250);
|
||||
};
|
||||
|
||||
img.src = url;
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content"></div>
|
||||
</body>
|
||||
</html>
|
||||
79
lib/assets/javascripts/cdb/examples/images/plain-color.html
Normal file
79
lib/assets/javascripts/cdb/examples/images/plain-color.html
Normal file
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Plain color | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#content {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map {
|
||||
float:left;
|
||||
margin: 10px;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
.map img { display: none; }
|
||||
</style>
|
||||
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.12/cartodb.js"></script>
|
||||
<script>
|
||||
|
||||
var layer_definition = {
|
||||
user_name: "documentation",
|
||||
tiler_domain: "cartodb.com",
|
||||
tiler_port: "80",
|
||||
tiler_protocol: "http",
|
||||
layers: [{
|
||||
type: "plain",
|
||||
options: {
|
||||
color: "lightblue"
|
||||
}
|
||||
}, {
|
||||
type: "cartodb",
|
||||
options: {
|
||||
sql: "SELECT * FROM spreading_network",
|
||||
cartocss: "#spreading_network{ marker-fill-opacity: 0.9; marker-line-color: #FFF; marker-line-width: 1.5; marker-line-opacity: 1; marker-placement: point; marker-type: ellipse; marker-width: 10; marker-fill: #FF6600; marker-allow-overlap: true; } ",
|
||||
cartocss_version: "2.1.1"
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
cartodb.Image(layer_definition).size(500, 500).zoom(2).center([40.708517, -73.993414]).getUrl(function(error, url) {
|
||||
|
||||
var img = new Image();
|
||||
|
||||
img.onerror = function() {
|
||||
console.log(error);
|
||||
};
|
||||
|
||||
img.onload = function() {
|
||||
var $map = $('<div class="map"></div>');
|
||||
var $img = $('<img src="' + url + '" />');
|
||||
$map.append($img);
|
||||
$("#content").append($map);
|
||||
$img.fadeIn(250);
|
||||
};
|
||||
|
||||
img.src = url;
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content"></div>
|
||||
</body>
|
||||
</html>
|
||||
40
lib/assets/javascripts/cdb/examples/images/single-image.html
Normal file
40
lib/assets/javascripts/cdb/examples/images/single-image.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Single image example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#content {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map {
|
||||
float:left;
|
||||
margin: 10px;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
</style>
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.12/cartodb.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
<div class="map">
|
||||
<script>
|
||||
cartodb.Image("https://documentation.cartodb.com/api/v2/viz/d5c2419c-d08d-11e3-80a5-0e230854a1cb/viz.json").bbox([-87.82814025878906,41.88719899247721, -87.5936508178711,41.942765696654604]).size(500, 500).write();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
58
lib/assets/javascripts/cdb/examples/images/torque.html
Normal file
58
lib/assets/javascripts/cdb/examples/images/torque.html
Normal file
@@ -0,0 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Image example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#content {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map {
|
||||
float:left;
|
||||
margin: 10px;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
.map img { display: none; }
|
||||
</style>
|
||||
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.12/cartodb.js"></script>
|
||||
<script>
|
||||
|
||||
cartodb.Image("https://documentation.cartodb.com/api/v2/viz/3ec995a8-b6ae-11e4-849e-0e4fddd5de28/viz.json").size(500, 500).getUrl(function(error, url) {
|
||||
|
||||
var img = new Image();
|
||||
|
||||
img.onerror = function() {
|
||||
console.log(error);
|
||||
};
|
||||
|
||||
img.onload = function() {
|
||||
var $map = $('<div class="map"></div>');
|
||||
var $img = $('<img src="' + url + '" />');
|
||||
$map.append($img);
|
||||
$("#content").append($map);
|
||||
$img.fadeIn(250);
|
||||
};
|
||||
|
||||
img.src = url;
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content"></div>
|
||||
</body>
|
||||
</html>
|
||||
58
lib/assets/javascripts/cdb/examples/images/torque_step.html
Normal file
58
lib/assets/javascripts/cdb/examples/images/torque_step.html
Normal file
@@ -0,0 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Image example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#content {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map {
|
||||
float:left;
|
||||
margin: 10px;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
.map img { display: none; }
|
||||
</style>
|
||||
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.14/cartodb.js"></script>
|
||||
<script>
|
||||
|
||||
cartodb.Image("https://documentation.cartodb.com/api/v2/viz/3ec995a8-b6ae-11e4-849e-0e4fddd5de28/viz.json", { step: 100 }).size(500, 500).getUrl(function(error, url) {
|
||||
|
||||
var img = new Image();
|
||||
|
||||
img.onerror = function() {
|
||||
console.log(error);
|
||||
};
|
||||
|
||||
img.onload = function() {
|
||||
var $map = $('<div class="map"></div>');
|
||||
var $img = $('<img src="' + url + '" />');
|
||||
$map.append($img);
|
||||
$("#content").append($map);
|
||||
$img.fadeIn(250);
|
||||
};
|
||||
|
||||
img.src = url;
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content"></div>
|
||||
</body>
|
||||
</html>
|
||||
204
lib/assets/javascripts/cdb/examples/index.html
Normal file
204
lib/assets/javascripts/cdb/examples/index.html
Normal file
@@ -0,0 +1,204 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Legends | CartoDB.js</title>
|
||||
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
<script>
|
||||
|
||||
currentLegend = null;
|
||||
legends = {};
|
||||
legendsArray = [];
|
||||
|
||||
function selectLegend(e){
|
||||
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
var target = e.target;
|
||||
var $link = $(e.target);
|
||||
var type = $link.attr("data-legend");
|
||||
|
||||
if (type === 'stacked') {
|
||||
|
||||
$(".legend-selector a").addClass("selected");
|
||||
|
||||
var stackedLegend = new cdb.geo.ui.Legend.Stacked({
|
||||
data: legendsArray
|
||||
});
|
||||
|
||||
currentLegend = stackedLegend;
|
||||
|
||||
} else {
|
||||
|
||||
$(".legend-selector a.selected").removeClass("selected");
|
||||
$link.addClass("selected");
|
||||
|
||||
currentLegend = legends[type].legend;
|
||||
}
|
||||
|
||||
currentLegend.addTo(".legends");
|
||||
|
||||
// $("#map .legends").html(currentLegend.render().$el);
|
||||
|
||||
}
|
||||
|
||||
function renderLegendList() {
|
||||
|
||||
_.each(legends, function(legend, type) {
|
||||
|
||||
var li = '<li><a href="#" data-legend="' + type + '">' + legend.title + '</a></li>';
|
||||
$(".legend-selector").append(li);
|
||||
|
||||
});
|
||||
|
||||
var li = '<li><a href="#" data-legend="stacked">Stacked</a></li>';
|
||||
$(".legend-selector").append(li);
|
||||
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
|
||||
var customLegend = new cdb.geo.ui.Legend.Custom({
|
||||
title: "Custom Legend",
|
||||
data: [
|
||||
{ name: "Natural Parks", value: "#58A062" },
|
||||
{ name: "Villages", value: "#F07971" },
|
||||
{ name: "Rivers", value: "#54BFDE" },
|
||||
{ name: "Fields", value: "#9BC562" },
|
||||
{ name: "Caves", value: "#FABB5C" }
|
||||
]
|
||||
});
|
||||
|
||||
var categoryLegend = new cdb.geo.ui.Legend.Category({
|
||||
title: "Category Legend",
|
||||
data: [
|
||||
{ name: "Airport Parks", value: "img/airport-24@2x.png", type: "image" },
|
||||
{ name: "Heart", value: "img/heart-24@2x.png", type: "image" },
|
||||
{ name: "Zoom", value: "img/zoo-24@2x.png", type: "image" },
|
||||
{ name: "Fields", value: "img/tennis-24@2x.png", type: "image" },
|
||||
{ name: "Caves", value: "img/town-hall-24@2x.png", type: "image" },
|
||||
]
|
||||
});
|
||||
|
||||
var bubbleLegend = new cdb.geo.ui.Legend.Bubble({
|
||||
title: "Bubble Legend",
|
||||
min: 21, max: 20, color: "red"
|
||||
});
|
||||
|
||||
var densityLegend = new cdb.geo.ui.Legend.Density({
|
||||
title: "Density Legend",
|
||||
left: "0", right: "10", colors: [ "#58A062", "#F07971", "#54BFDE", "#9BC562", "#FABB5C" ]
|
||||
});
|
||||
|
||||
var intensityLegend = new cdb.geo.ui.Legend.Intensity({
|
||||
title: "Intensity Legend",
|
||||
left: "10", right: "20", color: "#f1f1f1"
|
||||
});
|
||||
|
||||
legends = {
|
||||
custom: { legend: customLegend, title: "Custom Legend" },
|
||||
bubble: { legend: bubbleLegend, title: "Bubble Legend" },
|
||||
density: { legend: densityLegend, title: "Density Legend" },
|
||||
category: { legend: categoryLegend, title: "Category Legend" },
|
||||
intensity: { legend: intensityLegend, title: "Intensity Legend" }
|
||||
};
|
||||
|
||||
legendsArray = [{
|
||||
title: "Category Legend",
|
||||
data: [
|
||||
{ name: "Natural Parks", value: "#58A062" },
|
||||
{ name: "Villages", value: "#F07971" },
|
||||
{ name: "Rivers", value: "#54BFDE" },
|
||||
{ name: "Fields", value: "#9BC562" },
|
||||
{ name: "Caves", value: "#FABB5C" }
|
||||
]
|
||||
}, {
|
||||
type: "bubble",
|
||||
title: "Bubble Legend",
|
||||
min: 21, max: 20, color: "red"
|
||||
}];
|
||||
|
||||
renderLegendList();
|
||||
|
||||
|
||||
$(".legend-selector a").click(selectLegend);
|
||||
|
||||
var map_viz_url = 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json';
|
||||
|
||||
var onVisDone = function(vis, layers) {
|
||||
|
||||
layers[1].setInteraction(true);
|
||||
|
||||
layers[1].on('featureOver', function(e, latlng, pos, data, layerNumber) {
|
||||
cartodb.log.log(e, latlng, pos, data, layerNumber);
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
cartodb.createVis('map', map_viz_url, { legends: false, no_cdn: true }).done(onVisDone);
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
html, body {
|
||||
position:relative;
|
||||
}
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.legend-selector {
|
||||
position:absolute;
|
||||
top: 20px; right: 20px;
|
||||
margin: 0; padding: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.legend-selector li {
|
||||
display:inline-block;
|
||||
margin: 0 0 0 10px; padding: 0;
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
.legend-selector li a {
|
||||
display:block;
|
||||
text-decoration:none;
|
||||
text-align:center;
|
||||
font: normal 13px "Helvetica",Arial;
|
||||
color: #858585;
|
||||
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;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
-o-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #999;
|
||||
background: #FFF;
|
||||
z-index: 5;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.legend-selector li a.selected {
|
||||
background:#f1f1f1;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<ul class="legend-selector"> </ul>
|
||||
<div id="map">
|
||||
<div class="legends"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
51
lib/assets/javascripts/cdb/examples/infowindow-on-hover.html
Normal file
51
lib/assets/javascripts/cdb/examples/infowindow-on-hover.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Easy example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
|
||||
<script>
|
||||
function main() {
|
||||
cartodb.createVis('map', 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json', {
|
||||
shareable: true,
|
||||
title: true,
|
||||
description: true,
|
||||
search: true,
|
||||
tiles_loader: true,
|
||||
center_lat: 0,
|
||||
center_lon: 0,
|
||||
zoom: 2
|
||||
})
|
||||
.done(function(vis, layers) {
|
||||
vis.addOverlay({
|
||||
type: 'tooltip',
|
||||
position: 'top|center',
|
||||
template: '<p>id: #{{cartodb_id}}</p>'
|
||||
});
|
||||
})
|
||||
.error(function(err) {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
window.onload = main;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Infowindow working with different positionings | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#map1 {
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
#map2 {
|
||||
height: 400px;
|
||||
padding: 0;
|
||||
margin: 800px 50px 0 550px;
|
||||
}
|
||||
|
||||
.scrollSign {
|
||||
margin-left: 550px;
|
||||
background: yellow;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map1"></div>
|
||||
<div class="scrollSign">⬇ ⬇ ⬇ Scroll down ⬇ ⬇ ⬇</div>
|
||||
<div id="map2"></div>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
|
||||
<script>
|
||||
function main() {
|
||||
cartodb.createVis('map1', 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json', {
|
||||
})
|
||||
cartodb.createVis('map2', 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json', {
|
||||
})
|
||||
}
|
||||
|
||||
window.onload = main;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,97 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Custom infowindow example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="http://libs.cartodb.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<script type="infowindow/html" id="infowindow_template">
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
|
||||
<script src="http://libs.cartodb.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
var INFOWINDOW_TEMPLATE = [
|
||||
'<div class="cartodb-popup v2">',
|
||||
' <a href="#close" class="cartodb-popup-close-button close">x</a>',
|
||||
' <div class="cartodb-popup-content-wrapper">',
|
||||
' <div class="cartodb-popup-content">',
|
||||
' <div id="chart_div">',
|
||||
' <script>',
|
||||
' draw_chart([{{content.data.pop_min}}, {{content.data.pop_max}}], "{{content.data.name}}");',
|
||||
' </scr' + 'ipt>',
|
||||
' </div>',
|
||||
' </div>',
|
||||
' </div>',
|
||||
' <div class="cartodb-popup-tip-container"></div>',
|
||||
'</div>'].join('');
|
||||
|
||||
// load visualization library from google
|
||||
google.load('visualization', '1.0', {'packages':['corechart']});
|
||||
|
||||
function draw_chart(data, name) {
|
||||
var data = google.visualization.arrayToDataTable([
|
||||
['', 'population'],
|
||||
['max', data[0]],
|
||||
['min', data[1]]
|
||||
]);
|
||||
|
||||
var options = {
|
||||
title: name + ' population',
|
||||
legend: { position: "none" },
|
||||
width: 300,
|
||||
};
|
||||
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
|
||||
chart.draw(data, options);
|
||||
}
|
||||
|
||||
function main() {
|
||||
|
||||
// create map
|
||||
var map = L.map('map', {
|
||||
zoomControl: false,
|
||||
center: [0, 0],
|
||||
zoom: 3
|
||||
});
|
||||
|
||||
|
||||
// add a nice baselayer from Cartodb
|
||||
L.tileLayer('http://{s}.api.cartocdn.com/base-light/{z}/{x}/{y}.png', {
|
||||
attribution: 'CartoDB'
|
||||
}).addTo(map);
|
||||
|
||||
cartodb.createLayer(map, 'http://documentation.cartodb.com/api/v2/viz/7eb2096a-51d9-11e3-89a7-5404a6a683d5/viz.json')
|
||||
.addTo(map)
|
||||
.on('done', function(layer) {
|
||||
// get sublayer 0 and set the infowindow template
|
||||
var sublayer = layer.getSubLayer(0);
|
||||
sublayer.infowindow.set({
|
||||
template: INFOWINDOW_TEMPLATE,
|
||||
sanitizeTemplate: false,
|
||||
width: 328,
|
||||
maxHeight: 400
|
||||
});
|
||||
}).on('error', function() {
|
||||
console.log("some error occurred");
|
||||
});
|
||||
}
|
||||
|
||||
window.onload = main;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
81
lib/assets/javascripts/cdb/examples/layer_definition.html
Normal file
81
lib/assets/javascripts/cdb/examples/layer_definition.html
Normal file
@@ -0,0 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Image example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#content {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map {
|
||||
float:left;
|
||||
margin: 10px;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
.map img { display: none; }
|
||||
</style>
|
||||
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
<script>
|
||||
|
||||
/* 1: We can create an image using a custom build layer definition: */
|
||||
var layer_definition = {
|
||||
user_name: "documentation",
|
||||
tiler_domain: "cartodb.com",
|
||||
tiler_port: "80",
|
||||
tiler_protocol: "http",
|
||||
layers: [{
|
||||
type: "http",
|
||||
options: {
|
||||
urlTemplate: "https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png",
|
||||
subdomains: [ "a", "b", "c" ]
|
||||
}
|
||||
}, {
|
||||
type: "cartodb",
|
||||
options: {
|
||||
sql: "SELECT * FROM nyc_wifi",
|
||||
cartocss: "/** simple visualization */ #nyc_wifi{ marker-fill-opacity: 0.8; marker-line-color: #FFFFFF; marker-line-width: 1; marker-line-opacity: .8; marker-placement: point; marker-type: ellipse; marker-width: 6; marker-fill: #6ac41c; marker-allow-overlap: true; }",
|
||||
cartocss_version: "2.1.1"
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
// and now we just ask for the URL and append it to the page
|
||||
cartodb.Image(layer_definition).size(500, 500).zoom(13).center([40.708517, -73.993414]).getUrl(function(error, url) {
|
||||
|
||||
var img = new Image();
|
||||
|
||||
img.onerror = function() {
|
||||
console.log(error);
|
||||
};
|
||||
|
||||
img.onload = function() {
|
||||
var $map = $('<div class="map"></div>');
|
||||
var $img = $('<img src="' + url + '" />');
|
||||
$map.append($img);
|
||||
$("#content").append($map);
|
||||
$img.fadeIn(250);
|
||||
};
|
||||
|
||||
img.src = url;
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content"></div>
|
||||
</body>
|
||||
</html>
|
||||
110
lib/assets/javascripts/cdb/examples/layer_selector.html
Normal file
110
lib/assets/javascripts/cdb/examples/layer_selector.html
Normal file
@@ -0,0 +1,110 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Layer selector example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="https://carto.com/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#layer_selector {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#layer_selector ul {
|
||||
padding: 0; margin: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
#layer_selector li {
|
||||
border-bottom: 1px solid #999;
|
||||
padding: 15px 30px;
|
||||
font-family: "Helvetica", Arial;
|
||||
font-size: 13px;
|
||||
color: #444;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
#layer_selector li:hover {
|
||||
background-color: #F0F0F0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#layer_selector li.selected {
|
||||
background-color: #EEE;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<div id="layer_selector" class="cartodb-infobox">
|
||||
<ul>
|
||||
<li data="all" class="selected">All countries</li>
|
||||
<li data="1000">area >1000 km<sup>2</sup></li>
|
||||
<li data="6000">area >6000 km<sup>2</sup></li>
|
||||
<li data="10000">area >10000 km<sup>2</sup></li>
|
||||
<li data="50000">area >50000 km<sup>2</sup></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
|
||||
<script>
|
||||
// create layer selector
|
||||
function createSelector(layer) {
|
||||
var sql = new cartodb.SQL({ user: 'documentation' });
|
||||
|
||||
var $options = $('#layer_selector li');
|
||||
$options.click(function(e) {
|
||||
// get the area of the selected layer
|
||||
var $li = $(e.target);
|
||||
var area = $li.attr('data');
|
||||
|
||||
// deselect all and select the clicked one
|
||||
$options.removeClass('selected');
|
||||
$li.addClass('selected');
|
||||
|
||||
// create query based on data from the layer
|
||||
var query = "select * from european_countries_e";
|
||||
|
||||
if(area !== 'all') {
|
||||
query = "select * from european_countries_e where area > " + area;
|
||||
}
|
||||
|
||||
// change the query in the layer to update the map
|
||||
layer.setSQL(query);
|
||||
});
|
||||
}
|
||||
|
||||
function main() {
|
||||
cartodb.createVis('map', 'https://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json', {
|
||||
tiles_loader: true,
|
||||
center_lat: 50,
|
||||
center_lon: 20,
|
||||
zoom: 3
|
||||
})
|
||||
.done(function(vis, layers) {
|
||||
// layer 0 is the base layer, layer 1 is cartodb layer
|
||||
var subLayer = layers[1].getSubLayer(0);
|
||||
createSelector(subLayer);
|
||||
})
|
||||
.error(function(err) {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
window.onload = main;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,54 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Layer selector overlay example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
width:100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
function main() {
|
||||
cartodb.createVis('map', 'http://development.localhost.lan:3000/api/v2/viz/1742e22e-cc67-11e2-8cdb-94942608096a/viz.json', {
|
||||
shareable: true,
|
||||
title: true,
|
||||
description: true,
|
||||
search: true,
|
||||
tiles_loader: true,
|
||||
layer_selector: true,
|
||||
center_lat: 0,
|
||||
center_lon: 0,
|
||||
zoom: 2,
|
||||
no_cdn: true
|
||||
})
|
||||
.error(function(err) {
|
||||
console.log(err);
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
//window.onload = main;
|
||||
var fn = function() { cartodb.load('../src/', main); }
|
||||
window.onload = fn;
|
||||
// $(document).ready(main);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
89
lib/assets/javascripts/cdb/examples/layer_toggle.html
Normal file
89
lib/assets/javascripts/cdb/examples/layer_toggle.html
Normal file
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Easy example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.layer-control {
|
||||
position: absolute;
|
||||
padding: 10px;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
background: #fff;
|
||||
border: 4px solid #000;
|
||||
z-index: 1000;
|
||||
}
|
||||
.layer-control a {
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layer-control">
|
||||
<a href="#" class="layer-toggle">Hide layer</a>
|
||||
</div>
|
||||
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
function main() {
|
||||
var map = new L.Map('map', {
|
||||
zoomControl: false,
|
||||
center: [43, 0],
|
||||
zoom: 3
|
||||
});
|
||||
|
||||
L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
|
||||
attribution: 'Stamen'
|
||||
}).addTo(map);
|
||||
|
||||
// create a layer with 1 sublayer
|
||||
cartodb.createLayer(map, {
|
||||
user_name: 'documentation',
|
||||
type: 'cartodb',
|
||||
sublayers: [{
|
||||
sql: "select * from european_countries_e",
|
||||
cartocss: '#european_countries_e {marker-fill: #F0F0F0;}'
|
||||
}]
|
||||
}).done(function(layer) {
|
||||
|
||||
// add the layer to our map which already contains 1 sublayer
|
||||
map.addLayer(layer);
|
||||
|
||||
// create and add a new sublayer
|
||||
var sublayer = layer.createSubLayer({
|
||||
sql: "select * from european_countries_e limit 200",
|
||||
cartocss: '#european_countries_e {marker-fill: red;}'
|
||||
});
|
||||
|
||||
// change the query for the first layer
|
||||
layer.getSubLayer(0).setSQL('select * from european_countries_e where area > 10');
|
||||
|
||||
$(".layer-toggle").on("click", function() {
|
||||
if (layer.toggle()) {
|
||||
$(this).text("Hide layer");
|
||||
} else {
|
||||
$(this).text("Show layer");
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
window.onload = main;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
57
lib/assets/javascripts/cdb/examples/leaflet.html
Normal file
57
lib/assets/javascripts/cdb/examples/leaflet.html
Normal file
@@ -0,0 +1,57 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Leaflet example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
|
||||
<script>
|
||||
function main() {
|
||||
var map = new L.Map('map', {
|
||||
zoomControl: false,
|
||||
center: [43, 0],
|
||||
zoom: 3
|
||||
});
|
||||
|
||||
L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
|
||||
attribution: 'Stamen'
|
||||
}).addTo(map);
|
||||
|
||||
cartodb.createLayer(map, 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json')
|
||||
.addTo(map)
|
||||
.on('done', function(layer) {
|
||||
|
||||
layer.setInteraction(true);
|
||||
|
||||
layer.on('featureOver', function(e, latlng, pos, data) {
|
||||
cartodb.log.log(e, latlng, pos, data);
|
||||
});
|
||||
|
||||
layer.on('error', function(err) {
|
||||
cartodb.log.log('error: ' + err);
|
||||
});
|
||||
}).on('error', function() {
|
||||
cartodb.log.log("some error occurred");
|
||||
});
|
||||
}
|
||||
|
||||
// you could use $(window).load(main);
|
||||
window.onload = main;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Leaflet control example with createLayer | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
|
||||
<script>
|
||||
function main() {
|
||||
var map = new L.Map('map', {
|
||||
zoomControl: false,
|
||||
center: [-37.81083500928111, 144.9632692337036],
|
||||
zoom: 15
|
||||
});
|
||||
|
||||
L.tileLayer('http://cartocdn_b.global.ssl.fastly.net/base-light/{z}/{x}/{y}.png', {
|
||||
attribution: 'CartoDB'
|
||||
}).addTo(map);
|
||||
|
||||
var layer1;
|
||||
var layer2;
|
||||
|
||||
cartodb.createLayer(map, 'https://documentation.cartodb.com/api/v2/viz/793c84c0-045b-11e5-9678-0e4fddd5de28/viz.json')
|
||||
.addTo(map)
|
||||
.done(function(layer)
|
||||
{
|
||||
layer1 = layer;
|
||||
|
||||
cartodb.createLayer(map, 'https://documentation.cartodb.com/api/v2/viz/969ce5d2-045b-11e5-8c43-0e0c41326911/viz.json')
|
||||
.done(function(layer)
|
||||
{
|
||||
layer2 = layer;
|
||||
|
||||
var overlayMaps = {
|
||||
"Layer1": layer1,
|
||||
"Layer2": layer2
|
||||
};
|
||||
L.control.layers(null, overlayMaps).addTo(map);
|
||||
});
|
||||
});
|
||||
|
||||
}//main
|
||||
|
||||
// you could use $(window).load(main);
|
||||
window.onload = main;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Leaflet example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="https://carto.com/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.core.js"></script>
|
||||
|
||||
<script>
|
||||
function main() {
|
||||
|
||||
var map = new L.Map('map', {
|
||||
zoomControl: false,
|
||||
center: [43, 0],
|
||||
zoom: 3
|
||||
});
|
||||
|
||||
L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
|
||||
attribution: 'Stamen'
|
||||
}).addTo(map);
|
||||
|
||||
cartodb.Tiles.getTiles({
|
||||
user_name: 'examples',
|
||||
type: 'cartodb',
|
||||
sublayers: [{
|
||||
sql: 'select * from country_boundaries',
|
||||
cartocss: '#layer { polygon-fill: #F00; polygon-opacity: 0.3; line-color: #F00; }'
|
||||
}]
|
||||
}, function(tileTemplate) {
|
||||
|
||||
L.tileLayer(tileTemplate.tiles[0], {
|
||||
attribution: 'Natural Earth data, map by CartoDB'
|
||||
}).addTo(map);
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
// you could use $(window).load(main);
|
||||
window.onload = main;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
108
lib/assets/javascripts/cdb/examples/leaflet_hover_features.html
Normal file
108
lib/assets/javascripts/cdb/examples/leaflet_hover_features.html
Normal file
@@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Leaflet example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
|
||||
<script>
|
||||
function main() {
|
||||
var map = new L.Map('map', {
|
||||
zoomControl: false,
|
||||
center: [43, 0],
|
||||
zoom: 3
|
||||
});
|
||||
|
||||
var polygons = {};
|
||||
|
||||
L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
|
||||
attribution: 'Stamen'
|
||||
}).addTo(map);
|
||||
|
||||
|
||||
function geometryHover(username, map, layer, options) {
|
||||
|
||||
options = options || {}
|
||||
var HIGHLIGHT_STYLE = {
|
||||
weight: 3,
|
||||
color: '#FFFFFF',
|
||||
opacity: 1,
|
||||
fillColor: '#FFFFFF',
|
||||
fillOpacity: 0.3
|
||||
};
|
||||
style = options.style || HIGHLIGHT_STYLE;
|
||||
var polygonsHighlighted = [];
|
||||
|
||||
|
||||
// fetch the geometry
|
||||
var sql = new cartodb.SQL({ user: username, format: 'geojson' });
|
||||
sql.execute("select cartodb_id, ST_Simplify(the_geom, 0.1) as the_geom from (" + layer.getQuery() + ") as _wrap").done(function(geojson) {
|
||||
var features = geojson.features;
|
||||
for(var i = 0; i < features.length; ++i) {
|
||||
var f = geojson.features[i];
|
||||
var key = f.properties.cartodb_id
|
||||
|
||||
// generate geometry
|
||||
var geo = L.GeoJSON.geometryToLayer(features[i].geometry);
|
||||
geo.setStyle(style);
|
||||
|
||||
// add to polygons
|
||||
polygons[key] = polygons[key] || [];
|
||||
polygons[key].push(geo);
|
||||
}
|
||||
});
|
||||
|
||||
function featureOver(e, latlng, pos, data) {
|
||||
featureOut();
|
||||
var pol = polygons[data.cartodb_id] || [];
|
||||
for(var i = 0; i < pol.length; ++i) {
|
||||
map.addLayer(pol[i]);
|
||||
polygonsHighlighted.push(pol[i]);
|
||||
}
|
||||
}
|
||||
|
||||
function featureOut() {
|
||||
var pol = polygonsHighlighted;
|
||||
for(var i = 0; i < pol.length; ++i) {
|
||||
map.removeLayer(pol[i]);
|
||||
}
|
||||
polygonsHighlighted = [];
|
||||
}
|
||||
|
||||
layer.on('featureOver', featureOver);
|
||||
layer.on('featureOut', featureOut);
|
||||
layer.setInteraction(true);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
cartodb.createLayer(map, 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json')
|
||||
.addTo(map)
|
||||
.on('done', function(layer) {
|
||||
geometryHover('documentation', map, layer.getSubLayer(0));
|
||||
}).on('error', function() {
|
||||
cartodb.log.log("some error occurred");
|
||||
});
|
||||
}
|
||||
|
||||
// you could use $(window).load(main);
|
||||
window.onload = main;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
91
lib/assets/javascripts/cdb/examples/leaflet_multilayer.html
Normal file
91
lib/assets/javascripts/cdb/examples/leaflet_multilayer.html
Normal file
@@ -0,0 +1,91 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Leaflet multilayer example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
<script>
|
||||
|
||||
function main() {
|
||||
|
||||
// create leaflet map
|
||||
var map = L.map('map', {
|
||||
zoomControl: false,
|
||||
center: [43, 0],
|
||||
zoom: 3
|
||||
})
|
||||
|
||||
// add a base layer
|
||||
L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
|
||||
attribution: 'Stamen'
|
||||
}).addTo(map);
|
||||
|
||||
// add cartodb layer with one sublayer
|
||||
cartodb.createLayer(map, {
|
||||
user_name: 'examples',
|
||||
type: 'cartodb',
|
||||
sublayers: [{
|
||||
sql: 'select * from country_boundaries',
|
||||
cartocss: '#layer { polygon-fill: #F00; polygon-opacity: 0.3; line-color: #F00; }'
|
||||
}]
|
||||
})
|
||||
.addTo(map)
|
||||
.done(function(layer) {
|
||||
var population;
|
||||
|
||||
// wait a little bit and add the most populated places
|
||||
setTimeout(function() {
|
||||
population = layer.createSubLayer({
|
||||
sql: 'select * from ne_10m_populated_p_2',
|
||||
cartocss: '#layer { marker-fill: black; line-color: #333; marker-width: 3 }',
|
||||
interactivity: 'name'
|
||||
});
|
||||
// print on the console the place name on hover
|
||||
population.on('featureOver', function(e, pos, pixel, data) {
|
||||
console.log(data.name);
|
||||
});
|
||||
population.setInteraction(true);
|
||||
}, 3000);
|
||||
|
||||
// show population only in USA
|
||||
setTimeout(function() {
|
||||
population.setSQL("select * from ne_10m_populated_p_2 where adm0name = 'United States of America'")
|
||||
}, 6000);
|
||||
|
||||
// bigger points in USA
|
||||
setTimeout(function() {
|
||||
population.setCartoCSS( '#layer { marker-fill: black; line-color: #333; marker-width: 10; marker-opacity: 0.6; }' );
|
||||
}, 8000);
|
||||
|
||||
// remove the countries layer
|
||||
setTimeout(function() {
|
||||
layer.getSubLayer(0).remove();
|
||||
}, 10000);
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
// you could use $(window).load(main);
|
||||
window.onload = main;
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
63
lib/assets/javascripts/cdb/examples/leaflet_namedmap.html
Normal file
63
lib/assets/javascripts/cdb/examples/leaflet_namedmap.html
Normal file
@@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Leaflet multilayer example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="http://libs.cartodb.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="http://libs.cartodb.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
<script>
|
||||
|
||||
function main() {
|
||||
|
||||
// create leaflet map
|
||||
var map = L.map('map', {
|
||||
zoomControl: false,
|
||||
center: [43, 0],
|
||||
zoom: 3
|
||||
})
|
||||
|
||||
// add a base layer
|
||||
L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
|
||||
attribution: 'Stamen'
|
||||
}).addTo(map);
|
||||
|
||||
// add cartodb layer with one sublayer
|
||||
cartodb.createLayer(map, {
|
||||
type: 'namedmap',
|
||||
user_name: 'documentation',
|
||||
options: {
|
||||
named_map: {
|
||||
name: 'tpl_b47ff8ec_e7eb_11e3_894f_0e230854a1cb'
|
||||
}
|
||||
}
|
||||
})
|
||||
.addTo(map)
|
||||
.done(function(layer) {
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
// you could use $(window).load(main);
|
||||
window.onload = main;
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
55
lib/assets/javascripts/cdb/examples/leaflet_raster.html
Normal file
55
lib/assets/javascripts/cdb/examples/leaflet_raster.html
Normal file
@@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Leaflet multilayer example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
<script>
|
||||
|
||||
function main() {
|
||||
|
||||
// create leaflet map
|
||||
var map = L.map('map', {
|
||||
zoomControl: false,
|
||||
center: [43, 0],
|
||||
zoom: 3
|
||||
})
|
||||
|
||||
// add cartodb layer with one sublayer
|
||||
cartodb.createLayer(map, {
|
||||
user_name: 'documentation',
|
||||
type: 'cartodb',
|
||||
sublayers: [{
|
||||
sql: 'select * from pop',
|
||||
cartocss: '#pop { raster-opacity: 1.0; }',
|
||||
raster: true
|
||||
}]
|
||||
})
|
||||
.addTo(map)
|
||||
|
||||
|
||||
}
|
||||
|
||||
// you could use $(window).load(main);
|
||||
window.onload = main;
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
79
lib/assets/javascripts/cdb/examples/leaflet_sandwich.html
Normal file
79
lib/assets/javascripts/cdb/examples/leaflet_sandwich.html
Normal file
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Leaflet multilayer example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.13/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
function main() {
|
||||
|
||||
// create leaflet map
|
||||
var map = L.map('map', {
|
||||
zoomControl: false,
|
||||
center: [43, 0],
|
||||
zoom: 3
|
||||
})
|
||||
|
||||
// add cartodb layer with multiple sublayers of different types
|
||||
cartodb.createLayer(map, {
|
||||
user_name: 'examples',
|
||||
type: 'cartodb',
|
||||
sublayers: [
|
||||
{
|
||||
type: "http",
|
||||
urlTemplate: "http://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png",
|
||||
subdomains: [ "a", "b", "c" ]
|
||||
},
|
||||
{
|
||||
sql: 'select * from country_boundaries',
|
||||
cartocss: '#layer { polygon-fill: #F00; polygon-opacity: 0.3; line-color: #F00; }'
|
||||
},
|
||||
],
|
||||
}, { filter: ['http', 'mapnik'] })
|
||||
.addTo(map)
|
||||
.done(function(layer) {
|
||||
setTimeout(function() {
|
||||
layer.getSubLayer(0).setURLTemplate(
|
||||
'https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png'
|
||||
)
|
||||
}, 4000);
|
||||
|
||||
setTimeout(function() {
|
||||
layer.createSubLayer({
|
||||
type: 'http',
|
||||
urlTemplate: 'http://{s}.tile.stamen.com/toner-labels/{z}/{x}/{y}.png',
|
||||
subdomains: [ "a", "b", "c" ]
|
||||
}, 2);
|
||||
}, 8000);
|
||||
|
||||
setTimeout(function() {
|
||||
layer.getSubLayer(2).hide();
|
||||
}, 12000);
|
||||
});
|
||||
}
|
||||
|
||||
// you could use $(window).load(main);
|
||||
window.onload = main;
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
57
lib/assets/javascripts/cdb/examples/leaflet_vector.html
Normal file
57
lib/assets/javascripts/cdb/examples/leaflet_vector.html
Normal file
@@ -0,0 +1,57 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Leaflet vector example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.core.js"></script>
|
||||
<script>
|
||||
|
||||
function main() {
|
||||
|
||||
var map = L.map('map', {
|
||||
zoomControl: false,
|
||||
center: [43, 0],
|
||||
zoom: 3
|
||||
})
|
||||
|
||||
var sql = new cartodb.SQL({ user: 'examples', format: 'geojson' });
|
||||
|
||||
L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
|
||||
attribution: 'Stamen'
|
||||
}).addTo(map);
|
||||
|
||||
// create the layer and add to the map, then will be filled with data
|
||||
var countriesLayer = L.geoJson().addTo(map);
|
||||
//sql.execute("select * from european_countries_e").done(function(geojson) {
|
||||
//sql.execute("select * from european_countries_e where area::float > {{area}}", { area: 10000 }).done(function(geojson) {
|
||||
sql.execute("select ST_Simplify(the_geom, 2) as the_geom from european_countries_e").done(function(geojson) {
|
||||
|
||||
|
||||
countriesLayer.addData(geojson);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
window.onload = main;
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Leaflet vector hover | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.core.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
function main() {
|
||||
|
||||
var map = L.map('map', {
|
||||
zoomControl: false,
|
||||
center: [43, 0],
|
||||
zoom: 3
|
||||
})
|
||||
|
||||
var sql = new cartodb.SQL({ user: 'examples', format: 'geojson' });
|
||||
|
||||
L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
|
||||
attribution: 'Stamen'
|
||||
}).addTo(map);
|
||||
|
||||
// create the layer and add to the map, then will be filled with data
|
||||
var countriesLayer = L.geoJson(null, {
|
||||
style: {
|
||||
color: "#ff0000",
|
||||
fillColor: "#ff0000",
|
||||
weight: 1,
|
||||
opacity: 0.65
|
||||
}
|
||||
}).addTo(map);
|
||||
|
||||
sql.execute("select cartodb_id, area, ST_Simplify(the_geom, 0.1) as the_geom from european_countries_e").done(function(geojson) {
|
||||
countriesLayer.addData(geojson);
|
||||
countriesLayer.on('mouseover', function(e) {
|
||||
e.layer.setStyle({
|
||||
weight: 3,
|
||||
opacity: 1
|
||||
});
|
||||
})
|
||||
countriesLayer.on('mouseout', function(e) {
|
||||
countriesLayer.resetStyle(e.layer);
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
window.onload = main;
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Leaflet vector query distance example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.core.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
function main() {
|
||||
|
||||
var map = L.map('map', {
|
||||
zoomControl: false,
|
||||
center: [40.78151171, -73.94959818,0],
|
||||
zoom: 13
|
||||
})
|
||||
|
||||
var sql = new cartodb.SQL({ user: 'examples', format: 'geojson' });
|
||||
|
||||
L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
|
||||
attribution: 'Stamen'
|
||||
}).addTo(map);
|
||||
|
||||
|
||||
map.on('click', function(e) {
|
||||
show_wifi_near(e.latlng, 500); //500 meters
|
||||
});
|
||||
|
||||
var geojsonMarkerOptions = {
|
||||
radius: 3,
|
||||
fillColor: "#ff7800",
|
||||
color: "#000",
|
||||
weight: 1,
|
||||
opacity: 1,
|
||||
fillOpacity: 0.8
|
||||
};
|
||||
|
||||
var wifiPoints = L.geoJson(null, {
|
||||
pointToLayer: function (feature, latlng) {
|
||||
return L.circleMarker(latlng, geojsonMarkerOptions);
|
||||
}
|
||||
}).addTo(map);
|
||||
|
||||
|
||||
function show_wifi_near(position, radioMeters) {
|
||||
var vars = {
|
||||
lat: position.lat,
|
||||
lon: position.lng,
|
||||
radio: radioMeters
|
||||
}
|
||||
sql.execute("select * from nyc_wifi where ST_Distance(the_geom::geography, ST_SetSRID(ST_MakePoint({{lon}}, {{lat}}), 4326)::geography) < {{radio}}", vars).done(function(geojson) {
|
||||
wifiPoints.addData(geojson);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
window.onload = main;
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
106
lib/assets/javascripts/cdb/examples/legends/custom.html
Normal file
106
lib/assets/javascripts/cdb/examples/legends/custom.html
Normal file
@@ -0,0 +1,106 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Legends | CartoDB.js</title>
|
||||
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
<script>
|
||||
|
||||
window.onload = function() {
|
||||
|
||||
var map_viz_url = 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json';
|
||||
|
||||
var onVisDone = function(vis, layers) {
|
||||
|
||||
layers[1].setInteraction(true);
|
||||
|
||||
layers[1].on('featureOver', function(e, latlng, pos, data, layerNumber) {
|
||||
cartodb.log.log(e, latlng, pos, data, layerNumber);
|
||||
});
|
||||
|
||||
// Adds our custom legend
|
||||
var customLegend = new cdb.geo.ui.Legend.Custom({
|
||||
title: "Custom Legend",
|
||||
data: [
|
||||
{ name: "Natural Parks", value: "#58A062" },
|
||||
{ name: "Villages", value: "#F07971" },
|
||||
{ name: "Rivers", value: "#54BFDE" },
|
||||
{ name: "Fields", value: "#9BC562" },
|
||||
{ name: "Caves", value: "#FABB5C" }
|
||||
]
|
||||
});
|
||||
|
||||
$(".legends").append(customLegend.render().$el);
|
||||
|
||||
};
|
||||
|
||||
cartodb.createVis('map', map_viz_url, {
|
||||
legends: false,
|
||||
zoom: 3,
|
||||
no_cdn: true
|
||||
}).done(onVisDone);
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
html, body {
|
||||
position:relative;
|
||||
}
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.legend-selector {
|
||||
position:absolute;
|
||||
top: 20px; right: 20px;
|
||||
margin: 0; padding: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.legend-selector li {
|
||||
display:inline-block;
|
||||
margin: 0 0 0 10px; padding: 0;
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
.legend-selector li a {
|
||||
display:block;
|
||||
text-decoration:none;
|
||||
text-align:center;
|
||||
font: normal 13px "Helvetica",Arial;
|
||||
color: #858585;
|
||||
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;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
-o-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #999;
|
||||
background: #FFF;
|
||||
z-index: 5;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.legend-selector li a.selected {
|
||||
background:#f1f1f1;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<ul class="legend-selector"> </ul>
|
||||
<div id="map">
|
||||
<div class="legends"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
lib/assets/javascripts/cdb/examples/legends/img/airport-24@2x.png
Executable file
BIN
lib/assets/javascripts/cdb/examples/legends/img/airport-24@2x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
lib/assets/javascripts/cdb/examples/legends/img/heart-24@2x.png
Executable file
BIN
lib/assets/javascripts/cdb/examples/legends/img/heart-24@2x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
lib/assets/javascripts/cdb/examples/legends/img/tennis-24@2x.png
Executable file
BIN
lib/assets/javascripts/cdb/examples/legends/img/tennis-24@2x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
lib/assets/javascripts/cdb/examples/legends/img/town-hall-24@2x.png
Executable file
BIN
lib/assets/javascripts/cdb/examples/legends/img/town-hall-24@2x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 899 B |
BIN
lib/assets/javascripts/cdb/examples/legends/img/zoo-24@2x.png
Executable file
BIN
lib/assets/javascripts/cdb/examples/legends/img/zoo-24@2x.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
204
lib/assets/javascripts/cdb/examples/legends/index.html
Normal file
204
lib/assets/javascripts/cdb/examples/legends/index.html
Normal file
@@ -0,0 +1,204 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Legends | CartoDB.js</title>
|
||||
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
<script>
|
||||
|
||||
currentLegend = null;
|
||||
legends = {};
|
||||
legendsArray = [];
|
||||
|
||||
function selectLegend(e){
|
||||
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
var target = e.target;
|
||||
var $link = $(e.target);
|
||||
var type = $link.attr("data-legend");
|
||||
|
||||
if (type === 'stacked') {
|
||||
|
||||
$(".legend-selector a").addClass("selected");
|
||||
|
||||
var stackedLegend = new cdb.geo.ui.Legend.Stacked({
|
||||
data: legendsArray
|
||||
});
|
||||
|
||||
currentLegend = stackedLegend;
|
||||
|
||||
} else {
|
||||
|
||||
$(".legend-selector a.selected").removeClass("selected");
|
||||
$link.addClass("selected");
|
||||
|
||||
currentLegend = legends[type].legend;
|
||||
}
|
||||
|
||||
currentLegend.addTo(".legends");
|
||||
|
||||
// $("#map .legends").html(currentLegend.render().$el);
|
||||
|
||||
}
|
||||
|
||||
function renderLegendList() {
|
||||
|
||||
_.each(legends, function(legend, type) {
|
||||
|
||||
var li = '<li><a href="#" data-legend="' + type + '">' + legend.title + '</a></li>';
|
||||
$(".legend-selector").append(li);
|
||||
|
||||
});
|
||||
|
||||
var li = '<li><a href="#" data-legend="stacked">Stacked</a></li>';
|
||||
$(".legend-selector").append(li);
|
||||
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
|
||||
var customLegend = new cdb.geo.ui.Legend.Custom({
|
||||
title: "Custom Legend",
|
||||
data: [
|
||||
{ name: "Natural Parks", value: "#58A062" },
|
||||
{ name: "Villages", value: "#F07971" },
|
||||
{ name: "Rivers", value: "#54BFDE" },
|
||||
{ name: "Fields", value: "#9BC562" },
|
||||
{ name: "Caves", value: "#FABB5C" }
|
||||
]
|
||||
});
|
||||
|
||||
var categoryLegend = new cdb.geo.ui.Legend.Category({
|
||||
title: "Category Legend",
|
||||
data: [
|
||||
{ name: "Airport Parks", value: "img/airport-24@2x.png", type: "image" },
|
||||
{ name: "Heart", value: "img/heart-24@2x.png", type: "image" },
|
||||
{ name: "Zoom", value: "img/zoo-24@2x.png", type: "image" },
|
||||
{ name: "Fields", value: "img/tennis-24@2x.png", type: "image" },
|
||||
{ name: "Caves", value: "img/town-hall-24@2x.png", type: "image" },
|
||||
]
|
||||
});
|
||||
|
||||
var bubbleLegend = new cdb.geo.ui.Legend.Bubble({
|
||||
title: "Bubble Legend",
|
||||
min: 21, max: 20, color: "red"
|
||||
});
|
||||
|
||||
var densityLegend = new cdb.geo.ui.Legend.Density({
|
||||
title: "Density Legend",
|
||||
left: "0", right: "10", colors: [ "#58A062", "#F07971", "#54BFDE", "#9BC562", "#FABB5C" ]
|
||||
});
|
||||
|
||||
var intensityLegend = new cdb.geo.ui.Legend.Intensity({
|
||||
title: "Intensity Legend",
|
||||
left: "10", right: "20", color: "#f1f1f1"
|
||||
});
|
||||
|
||||
legends = {
|
||||
custom: { legend: customLegend, title: "Custom Legend" },
|
||||
bubble: { legend: bubbleLegend, title: "Bubble Legend" },
|
||||
density: { legend: densityLegend, title: "Density Legend" },
|
||||
category: { legend: categoryLegend, title: "Category Legend" },
|
||||
intensity: { legend: intensityLegend, title: "Intensity Legend" }
|
||||
};
|
||||
|
||||
legendsArray = [{
|
||||
title: "Category Legend",
|
||||
data: [
|
||||
{ name: "Natural Parks", value: "#58A062" },
|
||||
{ name: "Villages", value: "#F07971" },
|
||||
{ name: "Rivers", value: "#54BFDE" },
|
||||
{ name: "Fields", value: "#9BC562" },
|
||||
{ name: "Caves", value: "#FABB5C" }
|
||||
]
|
||||
}, {
|
||||
type: "bubble",
|
||||
title: "Bubble Legend",
|
||||
min: 21, max: 20, color: "red"
|
||||
}];
|
||||
|
||||
renderLegendList();
|
||||
|
||||
|
||||
$(".legend-selector a").click(selectLegend);
|
||||
|
||||
var map_viz_url = 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json';
|
||||
|
||||
var onVisDone = function(vis, layers) {
|
||||
|
||||
layers[1].setInteraction(true);
|
||||
|
||||
layers[1].on('featureOver', function(e, latlng, pos, data, layerNumber) {
|
||||
cartodb.log.log(e, latlng, pos, data, layerNumber);
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
cartodb.createVis('map', map_viz_url, { legends: false, no_cdn: true }).done(onVisDone);
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
html, body {
|
||||
position:relative;
|
||||
}
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.legend-selector {
|
||||
position:absolute;
|
||||
top: 20px; right: 20px;
|
||||
margin: 0; padding: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.legend-selector li {
|
||||
display:inline-block;
|
||||
margin: 0 0 0 10px; padding: 0;
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
.legend-selector li a {
|
||||
display:block;
|
||||
text-decoration:none;
|
||||
text-align:center;
|
||||
font: normal 13px "Helvetica",Arial;
|
||||
color: #858585;
|
||||
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;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
-o-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #999;
|
||||
background: #FFF;
|
||||
z-index: 5;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.legend-selector li a.selected {
|
||||
background:#f1f1f1;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<ul class="legend-selector"> </ul>
|
||||
<div id="map">
|
||||
<div class="legends"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
171
lib/assets/javascripts/cdb/examples/legends/stacked.html
Normal file
171
lib/assets/javascripts/cdb/examples/legends/stacked.html
Normal file
@@ -0,0 +1,171 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Legends | CartoDB.js</title>
|
||||
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
<script>
|
||||
|
||||
window.onload = function() {
|
||||
|
||||
var map_viz_url = 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json';
|
||||
|
||||
var onVisDone = function(vis, layers) {
|
||||
|
||||
layers[1].setInteraction(true);
|
||||
|
||||
layers[1].on('featureOver', function(e, latlng, pos, data, layerNumber) {
|
||||
cartodb.log.log(e, latlng, pos, data, layerNumber);
|
||||
});
|
||||
|
||||
// Adds our custom legend
|
||||
var customLegendData = {
|
||||
title: "Custom Legend",
|
||||
data: [
|
||||
{ name: "Natural Parks", value: "#58A062" },
|
||||
{ name: "Villages", value: "#F07971" },
|
||||
{ name: "Rivers", value: "#54BFDE" },
|
||||
{ name: "Fields", value: "#9BC562" },
|
||||
{ name: "Caves", value: "#FABB5C" }
|
||||
]
|
||||
};
|
||||
|
||||
var densityLegendData = {
|
||||
type: "density",
|
||||
title: "Density Legend",
|
||||
left: "0", right: "10", colors: [ "#58A062", "#F07971", "#54BFDE", "#9BC562", "#FABB5C" ]
|
||||
}
|
||||
|
||||
var customLegend = new cdb.geo.ui.Legend.Custom({
|
||||
title: "Custom Legend",
|
||||
data: [
|
||||
{ name: "Natural Parks", value: "#58A062" },
|
||||
{ name: "Villages", value: "#F07971" },
|
||||
{ name: "Rivers", value: "#54BFDE" },
|
||||
{ name: "Fields", value: "#9BC562" },
|
||||
{ name: "Caves", value: "#FABB5C" }
|
||||
]
|
||||
});
|
||||
|
||||
var densityLegend = new cdb.geo.ui.Legend.Density({
|
||||
title: "Density Legend",
|
||||
left: "0", right: "10", colors: [ "#58A062", "#F07971", "#54BFDE", "#9BC562", "#FABB5C" ]
|
||||
});
|
||||
|
||||
var bubbleLegend = new cdb.geo.ui.Legend.Bubble({
|
||||
title: "Bubble Legend",
|
||||
min: 21, max: 20, color: "red"
|
||||
});
|
||||
|
||||
var intensityLegend = new cdb.geo.ui.Legend.Intensity({
|
||||
title: "Intensity Legend",
|
||||
left: "10", right: "20", color: "#f1f1f1"
|
||||
});
|
||||
|
||||
var choroplethLegend = new cdb.geo.ui.Legend.Choropleth({
|
||||
title: "Choropleth Legend",
|
||||
left: "10", right: "20", colors: [ "#58A062", "#F07971", "#54BFDE", "#9BC562", "#FABB5C" ]
|
||||
});
|
||||
|
||||
//var legendsDataArray = [ customLegendData, densityLegendData ];
|
||||
var legendsArray = [ choroplethLegend, intensityLegend, customLegend, densityLegend, bubbleLegend ];
|
||||
|
||||
var legendsDataArray = [
|
||||
{
|
||||
type: "choropleth",
|
||||
title: "Choropleth Legend",
|
||||
left: "10",
|
||||
right: "20",
|
||||
colors: [ "#58A062", "#F07971", "#54BFDE", "#9BC562", "#FABB5C" ]
|
||||
},
|
||||
{
|
||||
type: "choropleth",
|
||||
title: "Choropleth Legend",
|
||||
left: "10",
|
||||
right: "20",
|
||||
colors: [ "#58A062", "#F07971", "#54BFDE", "#9BC562", "#FABB5C" ]
|
||||
}
|
||||
|
||||
];
|
||||
|
||||
var stackedLegend = new cdb.geo.ui.Legend.Stacked({
|
||||
// data: legendsDataArray,
|
||||
legends: legendsArray
|
||||
});
|
||||
|
||||
window.stackedLegend = stackedLegend;
|
||||
|
||||
$(".legends").append(stackedLegend.render().$el);
|
||||
|
||||
};
|
||||
|
||||
cartodb.createVis('map', map_viz_url, {
|
||||
legends: false,
|
||||
zoom: 3,
|
||||
no_cdn: true
|
||||
}).done(onVisDone);
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
html, body {
|
||||
position:relative;
|
||||
}
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.legend-selector {
|
||||
position:absolute;
|
||||
top: 20px; right: 20px;
|
||||
margin: 0; padding: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.legend-selector li {
|
||||
display:inline-block;
|
||||
margin: 0 0 0 10px; padding: 0;
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
.legend-selector li a {
|
||||
display:block;
|
||||
text-decoration:none;
|
||||
text-align:center;
|
||||
font: normal 13px "Helvetica",Arial;
|
||||
color: #858585;
|
||||
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;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
-o-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #999;
|
||||
background: #FFF;
|
||||
z-index: 5;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.legend-selector li a.selected {
|
||||
background:#f1f1f1;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<ul class="legend-selector"> </ul>
|
||||
<div id="map">
|
||||
<div class="legends"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Map with dragging disabled | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
|
||||
<script>
|
||||
function main() {
|
||||
cartodb.createVis('map', 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json', {
|
||||
tiles_loader: true,
|
||||
center_lat: 45,
|
||||
center_lon: 30,
|
||||
zoom: 4,
|
||||
scrollwheel: false,
|
||||
zoomControl: false
|
||||
});
|
||||
}
|
||||
|
||||
// window.onload = main;
|
||||
var fn = function() { cartodb.load('../src/', main); }
|
||||
window.onload = fn;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
53
lib/assets/javascripts/cdb/examples/mobile.html
Normal file
53
lib/assets/javascripts/cdb/examples/mobile.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Mobile | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
|
||||
<script>
|
||||
function main() {
|
||||
var map = new L.Map('map', {
|
||||
zoomControl: false,
|
||||
center: [43, 0],
|
||||
zoom: 3
|
||||
});
|
||||
|
||||
L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
|
||||
attribution: 'Stamen'
|
||||
}).addTo(map);
|
||||
|
||||
cartodb.createLayer(map, 'http://documentation.cartodb.com/api/v2/viz/3fbabeb2-47b2-11e4-b614-0e9d821ea90d/viz.json', {
|
||||
searchControl: true,
|
||||
mobile_layout: true,
|
||||
force_mobile: $(window).width() < 620
|
||||
})
|
||||
.addTo(map)
|
||||
.on('done', function(layer) {
|
||||
|
||||
})
|
||||
.on('error', function(err) {
|
||||
alert("some error occurred: " + err);
|
||||
});
|
||||
}
|
||||
|
||||
window.onload = main;
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
58
lib/assets/javascripts/cdb/examples/modestmaps.html
Normal file
58
lib/assets/javascripts/cdb/examples/modestmaps.html
Normal file
@@ -0,0 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Modest maps example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<script src="http://modestmaps.com/modestmaps.min.js"></script>
|
||||
<!-- include cartodb.core.js library -->
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.core.js"></script>
|
||||
<script>
|
||||
|
||||
// create the map
|
||||
var template = 'http://c.tiles.mapbox.com/v3/examples.map-szwdot65/{Z}/{X}/{Y}.png';
|
||||
var provider = new MM.TemplatedLayer(template);
|
||||
var map = new MM.Map('map', provider);
|
||||
map.setZoom(2).setCenter({ lat: 51.55, lon: 0.1 });
|
||||
|
||||
// request cartodb layer
|
||||
cartodb.Tiles.getTiles({
|
||||
type: 'cartodb',
|
||||
user_name: 'examples',
|
||||
sublayers: [{
|
||||
sql: 'select * from ne_10m_populated_p_2',
|
||||
cartocss: '#ne_10m_populated_p_2{ marker-fill: #F11810; marker-opacity: 0.9; marker-allow-overlap: true; marker-placement: point; marker-type: ellipse; marker-width: 7.5; marker-line-width: 2; marker-line-color: #000; marker-line-opacity: 0.2; }'
|
||||
}]
|
||||
}, function(tileTemplate) {
|
||||
// modestmaps use uppercase template variables, replace them
|
||||
var template = tileTemplate.tiles[0]
|
||||
.replace('{s}','{S}')
|
||||
.replace('{z}','{Z}')
|
||||
.replace('{x}','{X}')
|
||||
.replace('{y}','{Y}')
|
||||
// use 0,1,2,3 subdomains
|
||||
var cartodbLayer = new MM.TemplatedLayer(template, '0123');
|
||||
map.insertLayerAt(1, cartodbLayer);
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
73
lib/assets/javascripts/cdb/examples/named-maps-example.html
Normal file
73
lib/assets/javascripts/cdb/examples/named-maps-example.html
Normal file
@@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Named Maps Tutorial | CartoDB</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="https://cartodb.com/assets/favicon.ico" />
|
||||
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
|
||||
|
||||
<!-- Drop your code between the script tags below! -->
|
||||
<script>
|
||||
function main() {
|
||||
// create leaflet map
|
||||
var map = L.map('map', {
|
||||
zoomControl: false,
|
||||
scrollWheelZoom: false,
|
||||
center: [0, 0],
|
||||
zoomControl: true,
|
||||
zoom: 3
|
||||
});
|
||||
|
||||
// add a base layer
|
||||
L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
|
||||
attribution: 'Stamen'
|
||||
}).addTo(map);
|
||||
|
||||
// add cartodb layer with one sublayer
|
||||
cartodb.createLayer(map, {
|
||||
user_name: 'documentation',
|
||||
type: 'namedmap',
|
||||
named_map: {
|
||||
name: "namedmap_tutorial",
|
||||
layers: [{
|
||||
layer_name: "t",
|
||||
interactivity: "cartodb_id, name, pop_max"
|
||||
}]
|
||||
}
|
||||
}, {https: true})
|
||||
.addTo(map)
|
||||
.done(function(layer) {
|
||||
layer.getSubLayer(0).setInteraction(true);
|
||||
|
||||
// on mouseover
|
||||
layer.getSubLayer(0).on('featureOver', function(e, pos, pixel, data) {
|
||||
// print data to console log
|
||||
console.log("Event #" + data.cartodb_id + ", name " + data.name + ", max population: " + data.pop_max);
|
||||
});
|
||||
|
||||
// show infowindows on click
|
||||
cdb.vis.Vis.addInfowindow(map, layer.getSubLayer(0), ['cartodb_id','name', 'pop_max']);
|
||||
});
|
||||
}
|
||||
|
||||
window.onload = main;
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
32
lib/assets/javascripts/cdb/examples/named-maps-template.html
Normal file
32
lib/assets/javascripts/cdb/examples/named-maps-template.html
Normal file
@@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Named Maps Tutorial | CartoDB</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
|
||||
|
||||
<!-- Drop your code between the script tags below! -->
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
74
lib/assets/javascripts/cdb/examples/new-infowindow.html
Normal file
74
lib/assets/javascripts/cdb/examples/new-infowindow.html
Normal file
@@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Custom infowindow example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
|
||||
<style>html, body, #map { height: 100%; padding: 0; margin: 0 }</style>
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<script type="infowindow/html" id="infowindow_template">
|
||||
<div class="cartodb-popup v2">
|
||||
<a href="#/close" class="cartodb-popup-close-button close">x</a>
|
||||
<div class="cartodb-popup-content-wrapper">
|
||||
<div class="cartodb-popup-content">
|
||||
<h4>OH!</h4>
|
||||
<p>Yes, this is a new infowindow</p>
|
||||
<h4>OH!</h4>
|
||||
<p>Yes, this is a new infowindow</p>
|
||||
<h4>OH!</h4>
|
||||
<p>Yes, this is a new infowindow</p>
|
||||
<h4>OH!</h4>
|
||||
<p>Yes, this is a new infowindow</p>
|
||||
<h4>OH!</h4>
|
||||
<p>Yes, this is a new infowindow</p>
|
||||
<h4>OH!</h4>
|
||||
<p>Yes, this is a new infowindow</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cartodb-popup-tip-container"></div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
var layer;
|
||||
|
||||
function main() {
|
||||
|
||||
var map = L.map('map', {
|
||||
zoomControl: false,
|
||||
center: [43, -3],
|
||||
zoom: 3
|
||||
});
|
||||
|
||||
// add a nice baselayer from Stamen
|
||||
L.tileLayer('http://a.tiles.mapbox.com/v3/examples.map-20v6611k/{z}/{x}/{y}.png', {
|
||||
attribution: 'MapBox'
|
||||
}).addTo(map);
|
||||
|
||||
cartodb.createLayer(map, 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json')
|
||||
.addTo(map)
|
||||
.on('done', function(lyr) {
|
||||
lyr.getSubLayer(0).infowindow.set({
|
||||
template: $('#infowindow_template').html(),
|
||||
width: 350,
|
||||
maxHeight: 400
|
||||
});
|
||||
}).on('error', function() {
|
||||
console.log("some error occurred");
|
||||
});
|
||||
}
|
||||
|
||||
window.onload = main;
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
49
lib/assets/javascripts/cdb/examples/odyssey_test.html
Normal file
49
lib/assets/javascripts/cdb/examples/odyssey_test.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Easy example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="../dist/cartodb.uncompressed.js"></script>
|
||||
<script src="../dist/cartodb.mod.torque.uncompressed.js"></script>
|
||||
<script src="../odyssey.js"></script>
|
||||
|
||||
<script>
|
||||
function main() {
|
||||
cartodb.createVis('map', '/odyseey_vizjson/od.json', {
|
||||
shareable: true,
|
||||
title: true,
|
||||
description: true,
|
||||
search: true,
|
||||
tiles_loader: true,
|
||||
center_lat: 0,
|
||||
center_lon: 0,
|
||||
zoom: 2,
|
||||
no_cdn: true
|
||||
})
|
||||
.done(function(vis, layers) {
|
||||
})
|
||||
.error(function(err) {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
window.onload = main;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
78
lib/assets/javascripts/cdb/examples/openlayers.html
Normal file
78
lib/assets/javascripts/cdb/examples/openlayers.html
Normal file
@@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OpenLayers example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="https://carto.com/favicon.ico" />
|
||||
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="./css/OLstyle.css" type="text/css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include cartodb.core.js library -->
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.core.js"></script>
|
||||
<script src="vendor/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
var map, layer;
|
||||
function init() {
|
||||
|
||||
// create openlayers map
|
||||
layer = new OpenLayers.Layer.OSM("Simple OSM Map");
|
||||
map = new OpenLayers.Map({
|
||||
div: 'map',
|
||||
layers: [layer],
|
||||
center: [0, 0],
|
||||
zoom: 1
|
||||
});
|
||||
|
||||
// request cartodb layer
|
||||
// most populated places rendered with red markers
|
||||
cartodb.Tiles.getTiles({
|
||||
type: 'cartodb',
|
||||
user_name: 'examples',
|
||||
sublayers: [{
|
||||
sql: 'select * from ne_10m_populated_p_2',
|
||||
cartocss: '#ne_10m_populated_p_2{ marker-fill: #F11810; marker-opacity: 0.9; marker-allow-overlap: true; marker-placement: point; marker-type: ellipse; marker-width: 7.5; marker-line-width: 2; marker-line-color: #000; marker-line-opacity: 0.2; }'
|
||||
}]
|
||||
}, function(tileTemplate) {
|
||||
// generate urls for openlayers
|
||||
var tilesUrl = []
|
||||
for(var i = 0; i < 4; ++i) {
|
||||
tilesUrl.push(
|
||||
tileTemplate.tiles[0]
|
||||
.replace('{s}', 'abcd'[i])
|
||||
.replace('{z}','${z}')
|
||||
.replace('{x}','${x}')
|
||||
.replace('{y}','${y}')
|
||||
);
|
||||
}
|
||||
|
||||
// create the openlayers layer
|
||||
var cartodbLayer = new OpenLayers.Layer.XYZ(
|
||||
"CartoDB example",
|
||||
tilesUrl, {
|
||||
attribution: "CartoDB, populated places",
|
||||
sphericalMercator: true,
|
||||
isBaseLayer: false
|
||||
});
|
||||
|
||||
// add to the map
|
||||
map.addLayer(cartodbLayer);
|
||||
});
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
81
lib/assets/javascripts/cdb/examples/openlayers3.html
Normal file
81
lib/assets/javascripts/cdb/examples/openlayers3.html
Normal file
@@ -0,0 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OpenLayers example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="http://openlayers.org/en/v3.12.1/css/ol.css" type="text/css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- include cartodb.core.js library -->
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.core.js"></script>
|
||||
<script src="http://openlayers.org/en/v3.12.1/build/ol.js"></script>
|
||||
<script type="text/javascript">
|
||||
var map, layer;
|
||||
function init() {
|
||||
|
||||
// request cartodb layer
|
||||
// most populated places rendered with red markers
|
||||
cartodb.Tiles.getTiles({
|
||||
type: 'cartodb',
|
||||
user_name: 'examples',
|
||||
sublayers: [{
|
||||
sql: 'select * from ne_10m_populated_p_2',
|
||||
cartocss: '#ne_10m_populated_p_2{ marker-fill: #F11810; marker-opacity: 0.9; marker-allow-overlap: true; marker-placement: point; marker-type: ellipse; marker-width: 7.5; marker-line-width: 2; marker-line-color: #000; marker-line-opacity: 0.2; }'
|
||||
}]
|
||||
}, function(tileTemplate) {
|
||||
// generate urls for openlayers
|
||||
var tilesUrl = []
|
||||
for(var i = 0; i < 4; ++i) {
|
||||
tilesUrl.push(
|
||||
tileTemplate.tiles[0]
|
||||
.replace('{s}', 'abcd'[i])
|
||||
);
|
||||
}
|
||||
|
||||
var map = new ol.Map({
|
||||
target: 'map',
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.XYZ({
|
||||
attributions: [new ol.Attribution({
|
||||
html: '© <a href="http://cartodb.com/attributions">CartoDB</a> ' +
|
||||
'© <a href="http://www.openstreetmap.org/copyright">' +
|
||||
'OpenStreetMap contributors</a>'
|
||||
})],
|
||||
url:'https://{1-4}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png'
|
||||
})
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.XYZ({
|
||||
attributions: [new ol.Attribution({ html: "CartoDB, populated places"})],
|
||||
urls: tilesUrl
|
||||
})
|
||||
})
|
||||
],
|
||||
view: new ol.View({
|
||||
center: ol.proj.fromLonLat([0, 0]),
|
||||
zoom: 4
|
||||
})
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
79
lib/assets/javascripts/cdb/examples/plain-color.html
Normal file
79
lib/assets/javascripts/cdb/examples/plain-color.html
Normal file
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Plain color | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#content {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map {
|
||||
float:left;
|
||||
margin: 10px;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
.map img { display: none; }
|
||||
</style>
|
||||
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
<script>
|
||||
|
||||
var layer_definition = {
|
||||
user_name: "documentation",
|
||||
tiler_domain: "cartodb.com",
|
||||
tiler_port: "80",
|
||||
tiler_protocol: "http",
|
||||
layers: [{
|
||||
type: "plain",
|
||||
options: {
|
||||
color: "lightblue"
|
||||
}
|
||||
}, {
|
||||
type: "cartodb",
|
||||
options: {
|
||||
sql: "SELECT * FROM spreading_network",
|
||||
cartocss: "#spreading_network{ marker-fill-opacity: 0.9; marker-line-color: #FFF; marker-line-width: 1.5; marker-line-opacity: 1; marker-placement: point; marker-type: ellipse; marker-width: 10; marker-fill: #FF6600; marker-allow-overlap: true; } ",
|
||||
cartocss_version: "2.1.1"
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
cartodb.Image(layer_definition).size(500, 500).zoom(2).center([40.708517, -73.993414]).getUrl(function(error, url) {
|
||||
|
||||
var img = new Image();
|
||||
|
||||
img.onerror = function() {
|
||||
console.log(error);
|
||||
};
|
||||
|
||||
img.onload = function() {
|
||||
var $map = $('<div class="map"></div>');
|
||||
var $img = $('<img src="' + url + '" />');
|
||||
$map.append($img);
|
||||
$("#content").append($map);
|
||||
$img.fadeIn(250);
|
||||
};
|
||||
|
||||
img.src = url;
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content"></div>
|
||||
</body>
|
||||
</html>
|
||||
46
lib/assets/javascripts/cdb/examples/search_with_pin.html
Normal file
46
lib/assets/javascripts/cdb/examples/search_with_pin.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Search with Pin + Infowindow | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
|
||||
<script>
|
||||
window.onload = function() {
|
||||
cartodb.createVis('map', 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json', {
|
||||
shareable: true,
|
||||
title: true,
|
||||
description: true,
|
||||
search: false,
|
||||
tiles_loader: true,
|
||||
center_lat: 0,
|
||||
center_lon: 0,
|
||||
zoom: 2
|
||||
})
|
||||
.done(function(vis, layers) {
|
||||
var search = cartodb.vis.Overlay.create('search', vis, {
|
||||
searchPin: true
|
||||
});
|
||||
$('.cartodb-share').after(search.render().el);
|
||||
search.show();
|
||||
})
|
||||
.error(function(err) {});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
40
lib/assets/javascripts/cdb/examples/single-image.html
Normal file
40
lib/assets/javascripts/cdb/examples/single-image.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Single image example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#content {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map {
|
||||
float:left;
|
||||
margin: 10px;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
</style>
|
||||
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
<div class="map">
|
||||
<script>
|
||||
cartodb.Image("https://documentation.cartodb.com/api/v2/viz/d5c2419c-d08d-11e3-80a5-0e230854a1cb/viz.json").bbox([-87.82814025878906,41.88719899247721, -87.5936508178711,41.942765696654604]).size(500, 500).write();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
88
lib/assets/javascripts/cdb/examples/slider.html
Normal file
88
lib/assets/javascripts/cdb/examples/slider.html
Normal file
@@ -0,0 +1,88 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Slider | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
|
||||
<!-- CartoDB library -->
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
|
||||
<script type="text/javascript" src="https://libs.cartocdn.com.s3.amazonaws.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
||||
|
||||
<!-- JQuery library -->
|
||||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
|
||||
|
||||
<!-- Before/after-map -->
|
||||
<script type="text/javascript" src="js/jquery.ui.touch-punch.min.js"></script>
|
||||
<script type="text/javascript" src="js/jquery.beforeafter-map-0.11-CDB.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body onload="main();">
|
||||
|
||||
<div id="map-container">
|
||||
<div id="before" style="height:600px;width:100%;"></div>
|
||||
<div id="after" style="height:600px;width:100%;"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function _generate_map(container){
|
||||
|
||||
var map = L.map(container, {
|
||||
center: [43,-90],
|
||||
zoom: 4,
|
||||
scrollWheelZoom: false,
|
||||
attributionControl: false,
|
||||
inertia: true
|
||||
});
|
||||
|
||||
L.tileLayer('http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.png', {
|
||||
attribution: 'Stamen'
|
||||
}).addTo(map);
|
||||
|
||||
if (container === "before") {
|
||||
cartodb.createLayer(map, 'http://documentation.cartodb.com/api/v2/viz/0b6b2f94-6a52-11e4-8910-0e853d047bba/viz.json')
|
||||
.addTo(map)
|
||||
.done(function(layer) {
|
||||
})
|
||||
.error(function(err) {
|
||||
console.log("error layer before : " + err);
|
||||
});
|
||||
|
||||
} else {
|
||||
cartodb.createLayer(map, 'http://documentation.cartodb.com/api/v2/viz/bdeb4618-6a52-11e4-8522-0e9d821ea90d/viz.json')
|
||||
.addTo(map)
|
||||
.done(function(layer) {
|
||||
|
||||
})
|
||||
.error(function(err) {
|
||||
console.log("error layer after: " + err);
|
||||
});
|
||||
}
|
||||
|
||||
return map;
|
||||
}
|
||||
|
||||
|
||||
function main() {
|
||||
var before = _generate_map("before"),
|
||||
after = _generate_map("after");
|
||||
|
||||
$('#map-container').beforeAfter(before, after,{
|
||||
arrowTop: 0.95,
|
||||
animateIntro: true,
|
||||
introDelay: 1500,
|
||||
introDuration: 2000,
|
||||
introPosition: .30,
|
||||
imagePath: './imgs/',
|
||||
showFullLinks: true,
|
||||
permArrows: true,
|
||||
arrowLeftOffset: -115,
|
||||
arrowRightOffset: -5
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
lib/assets/javascripts/cdb/examples/slider/imgs/handle.gif
Executable file
BIN
lib/assets/javascripts/cdb/examples/slider/imgs/handle.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 175 B |
BIN
lib/assets/javascripts/cdb/examples/slider/imgs/lt-small.png
Normal file
BIN
lib/assets/javascripts/cdb/examples/slider/imgs/lt-small.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
lib/assets/javascripts/cdb/examples/slider/imgs/rt-small.png
Executable file
BIN
lib/assets/javascripts/cdb/examples/slider/imgs/rt-small.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
231
lib/assets/javascripts/cdb/examples/slider/js/jquery.beforeafter-map-0.11-CDB.js
Executable file
231
lib/assets/javascripts/cdb/examples/slider/js/jquery.beforeafter-map-0.11-CDB.js
Executable file
@@ -0,0 +1,231 @@
|
||||
/* jQuery beforeafter-map/CartoDB plugin
|
||||
* @author @cartodb - http://www.twitter.com/cartodb
|
||||
* @version 0.1
|
||||
* @date November 12, 2014
|
||||
* category jQuery plugin
|
||||
* @license CC Attribution-NonCommercial-ShareAlike 3.0 Unported (CC BY-NC-SA 3.0) - http://creativecommons.org/licenses/by-nc-sa/3.0/
|
||||
Original code altered from:
|
||||
* jQuery beforeafter-map plugin
|
||||
* @author @grahamimac - http://www.twitter.com/grahamimac
|
||||
* @version 0.11
|
||||
* @date December 17, 2013
|
||||
* @category jQuery plugin
|
||||
* @license CC Attribution-NonCommercial-ShareAlike 3.0 Unported (CC BY-NC-SA 3.0) - http://creativecommons.org/licenses/by-nc-sa/3.0/
|
||||
Original code altered from:
|
||||
* jQuery beforeafter plugin
|
||||
* @author admin@catchmyfame.com - http://www.catchmyfame.com
|
||||
* @version 1.4
|
||||
* @date September 19, 2011
|
||||
* @category jQuery plugin
|
||||
* @copyright (c) 2009 admin@catchmyfame.com (www.catchmyfame.com)
|
||||
* @license CC Attribution-NonCommercial-ShareAlike 3.0 Unported (CC BY-NC-SA 3.0) - http://creativecommons.org/licenses/by-nc-sa/3.0/
|
||||
*/
|
||||
(function($){
|
||||
$.fn.extend({
|
||||
beforeAfter: function(_before_,_after_,options)
|
||||
{
|
||||
var defaults =
|
||||
{
|
||||
animateIntro : false,
|
||||
introDelay : 1000,
|
||||
introDuration : 1000,
|
||||
introPosition : .5,
|
||||
showFullLinks : true,
|
||||
beforeLinkText: 'Show only before',
|
||||
afterLinkText: 'Show only after',
|
||||
imagePath : './css/images/',
|
||||
cursor: 'pointer',
|
||||
clickSpeed: 600,
|
||||
linkDisplaySpeed: 200,
|
||||
dividerColor: '#888',
|
||||
enableKeyboard: false,
|
||||
keypressAmount: 20,
|
||||
onReady: function(){},
|
||||
changeOnResize: true,
|
||||
permArrows: false,
|
||||
arrowTop: 0.5,
|
||||
arrowLeftOffset: 0,
|
||||
arrowRightOffset: 0
|
||||
};
|
||||
var options = $.extend(defaults, options);
|
||||
if (!_before_ || !_after_){
|
||||
console.log('Error: pass variables used to create the map in .beforeAfter argument. E.g. $("map-container").beforeAfter(before,after,options).');
|
||||
return;
|
||||
}
|
||||
|
||||
var randID = Math.round(Math.random()*100000000);
|
||||
|
||||
return this.each(function() {
|
||||
var o=options;
|
||||
var obj = $(this);
|
||||
|
||||
var mapWidth = $('div:first', obj).width();
|
||||
var mapHeight = $('div:first', obj).height();
|
||||
var lArrOffsetStatic = -24;
|
||||
var rArrOffsetStatic = 24;
|
||||
|
||||
$(obj)
|
||||
.width(mapWidth)
|
||||
.height(mapHeight)
|
||||
.css({'overflow':'hidden','position':'relative','padding':'0'});
|
||||
|
||||
var _bSelect_ = $('div:first', obj), _aSelect_ = $('div:last', obj),
|
||||
_bID_ = $(_before_._container).attr('id'), _aID_ = $(_after_._container).attr('id');
|
||||
|
||||
_before_.options.inertia = false;
|
||||
_after_.options.inertia = false;
|
||||
|
||||
// Create an inner div wrapper (dragwrapper) to hold the images.
|
||||
$(obj).prepend('<div id="dragwrapper'+randID+'"><div id="drag'+randID+'"><img width="8" height="56" alt="handle" src="'+o.imagePath+'handle.gif" id="handle'+randID+'" /></div></div>'); // Create drag handle
|
||||
$('#dragwrapper'+randID).css({'opacity':.25,'position':'absolute','padding':'0','left':(mapWidth*o.introPosition)-($('#handle'+randID).width()/2)+'px','z-index':'20'}).width($('#handle'+randID).width()).height(mapHeight);
|
||||
|
||||
$(_before_._container).height(mapHeight).width(mapWidth*o.introPosition).css({'position':'absolute','overflow':'hidden','left':'0px','z-index':'10'}); // Set CSS properties of the before map div
|
||||
$(_after_._container).height(mapHeight).width(mapWidth).css({'position':'absolute','overflow':'hidden','right':'0px'}); // Set CSS properties of the after map div
|
||||
$('#drag'+randID).width(2).height(mapHeight).css({'background':o.dividerColor,'position':'absolute','left':'3px'}); // Set drag handle CSS properties
|
||||
$(_before_._container).css({'position':'absolute','top':'0px','left':'0px'});
|
||||
$(_after_._container).css({'position':'absolute','top':'0px','right':'0px'});
|
||||
$('#handle'+randID).css({'z-index':'100','position':'relative','cursor':o.cursor,'top':(mapHeight/2)-($('#handle'+randID).height()/2)+'px','left':'-3px'})
|
||||
|
||||
$(obj).append('<img src="'+o.imagePath+'lt-small.png" id="lt-arrow'+randID+'"><img src="'+o.imagePath+'rt-small.png" id="rt-arrow'+randID+'">');
|
||||
|
||||
if(o.showFullLinks)
|
||||
{
|
||||
$(obj).after('<div class="balinks" id="links'+randID+'" style="position:relative"><span class="balinks"><a id="showleft'+randID+'" href="javascript:void(0)">'+o.beforeLinkText+'</a></span><span class="balinks"><a id="showright'+randID+'" href="javascript:void(0)">'+o.afterLinkText+'</a></span></div>');
|
||||
$('#links'+randID).width(mapWidth);
|
||||
$('#showleft'+randID).css({'position':'absolute','left':'0px'}).click(function(){
|
||||
$('div:eq(2)', obj).animate({width:mapWidth},o.linkDisplaySpeed);
|
||||
$('#dragwrapper'+randID).animate({left:mapWidth-$('#dragwrapper'+randID).width()+'px'},o.linkDisplaySpeed);
|
||||
});
|
||||
$('#showright'+randID).css({'position':'absolute','right':'0px'}).click(function(){
|
||||
$('div:eq(2)', obj).animate({width:0},o.linkDisplaySpeed);
|
||||
$('#dragwrapper'+randID).animate({left:'0px'},o.linkDisplaySpeed);
|
||||
});
|
||||
}
|
||||
|
||||
// Custom for Our Changing Cities
|
||||
if (o.changeOnResize){
|
||||
var cInt;
|
||||
$(window).on('orientationchange pageshow resize', function () {
|
||||
var id = o.thisID;
|
||||
var center = [_after_.getCenter().lat, _after_.getCenter().lng], zoom = _after_.getZoom(),
|
||||
w = $(obj).width();
|
||||
$(_before_._container).width(w);
|
||||
$(_after_._container).width(w);
|
||||
_before_.invalidateSize();
|
||||
_after_.invalidateSize();
|
||||
clearInterval(cInt);
|
||||
cInt = setInterval(function(){
|
||||
$(_before_._container).width(parseInt( $('#dragwrapper'+randID).css('left') ) + 4 );
|
||||
if ($(_before_._container).width() != w){ clearInterval(cInt); }
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
|
||||
if(o.enableKeyboard)
|
||||
{
|
||||
$(document).keydown(function(event){
|
||||
if(event.keyCode == 39)
|
||||
{
|
||||
if( (parseInt($('#dragwrapper'+randID).css('left'))+parseInt($('#dragwrapper'+randID).width()) + o.keypressAmount) <= mapWidth )
|
||||
{
|
||||
$('#dragwrapper'+randID).css('left', parseInt( $('#dragwrapper'+randID).css('left') ) + o.keypressAmount + 'px');
|
||||
$('div:eq(2)', obj).width( parseInt( $('div:eq(2)', obj).width() ) + o.keypressAmount + 'px' );
|
||||
}
|
||||
else
|
||||
{
|
||||
$('#dragwrapper'+randID).css('left', mapWidth - parseInt( $('#dragwrapper'+randID).width() ) + 'px');
|
||||
$('div:eq(2)', obj).width( mapWidth - parseInt( $('#dragwrapper'+randID).width() )/2 + 'px' );
|
||||
}
|
||||
}
|
||||
if(event.keyCode == 37)
|
||||
{
|
||||
if( (parseInt($('#dragwrapper'+randID).css('left')) - o.keypressAmount) >= 0 )
|
||||
{
|
||||
$('#dragwrapper'+randID).css('left', parseInt( $('#dragwrapper'+randID).css('left') ) - o.keypressAmount + 'px');
|
||||
$('div:eq(2)', obj).width( parseInt( $('div:eq(2)', obj).width() ) - o.keypressAmount + 'px' );
|
||||
}
|
||||
else
|
||||
{
|
||||
$('#dragwrapper'+randID).css('left', '0px');
|
||||
$('div:eq(2)', obj).width($('#dragwrapper'+randID).width()/2);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$('#dragwrapper'+randID).draggable( { containment:obj,drag:drag,stop:drag }).css('-ms-touch-action', 'none');
|
||||
|
||||
function drag()
|
||||
{
|
||||
if (!o.permArrows){
|
||||
$('#lt-arrow'+randID+', #rt-arrow'+randID).stop().css('opacity',0);
|
||||
}
|
||||
$('div:eq(2)', obj).width( parseInt( $(this).css('left') ) + 4 );
|
||||
if (o.permArrows){
|
||||
$('#lt-arrow'+randID).css({'z-index':'20','position':'absolute','top':mapHeight*o.arrowTop-$('#lt-arrow'+randID).height()/2+'px','left':parseInt($('#dragwrapper'+randID).css('left'))+o.arrowLeftOffset+lArrOffsetStatic+'px'});
|
||||
$('#rt-arrow'+randID).css({'z-index':'20','position':'absolute','top':mapHeight*o.arrowTop-$('#lt-arrow'+randID).height()/2+'px','left':parseInt($('#dragwrapper'+randID).css('left'))+o.arrowRightOffset+rArrOffsetStatic+'px'});
|
||||
}
|
||||
}
|
||||
|
||||
if(o.animateIntro)
|
||||
{
|
||||
$('div:eq(2)', obj).width(mapWidth);
|
||||
$('#dragwrapper'+randID).css('left',mapWidth-($('#dragwrapper'+randID).width()/2)+'px');
|
||||
setTimeout(function(){
|
||||
$('#dragwrapper'+randID).css({'opacity':1}).animate({'left':(mapWidth*o.introPosition)-($('#dragwrapper'+randID).width()/2)+'px'},o.introDuration,function(){$('#dragwrapper'+randID).animate({'opacity':.25},1000)});
|
||||
$('div:eq(2)', obj).width(mapWidth).animate({'width':mapWidth*o.introPosition+'px'},o.introDuration,function(){clickit();o.onReady.call(this);});
|
||||
},o.introDelay);
|
||||
}
|
||||
else
|
||||
{
|
||||
clickit();
|
||||
o.onReady.call(this);
|
||||
}
|
||||
|
||||
function clickit()
|
||||
{
|
||||
if (o.permArrows){
|
||||
$('#lt-arrow'+randID).css({'z-index':'20','position':'absolute','top':mapHeight*o.arrowTop-$('#lt-arrow'+randID).height()/2+'px','left':parseInt($('#dragwrapper'+randID).css('left'))+o.arrowLeftOffset+lArrOffsetStatic+'px'});
|
||||
$('#rt-arrow'+randID).css({'z-index':'20','position':'absolute','top':mapHeight*o.arrowTop-$('#rt-arrow'+randID).height()/2+'px','left':parseInt($('#dragwrapper'+randID).css('left'))+o.arrowRightOffset+rArrOffsetStatic+'px'});
|
||||
}
|
||||
$(obj).hover(function(){
|
||||
if (!o.permArrows){
|
||||
$('#lt-arrow'+randID).stop().css({'z-index':'20','position':'absolute','top':mapHeight*o.arrowTop-$('#lt-arrow'+randID).height()/2+'px','left':parseInt($('#dragwrapper'+randID).css('left'))+o.arrowLeftOffset+lArrOffsetStatic+6+'px'}).animate({opacity:1,left:parseInt($('#lt-arrow'+randID).css('left'))-6+'px'},200);
|
||||
$('#rt-arrow'+randID).stop().css({'position':'absolute','top':mapHeight*o.arrowTop-$('#lt-arrow'+randID).height()/2+'px','left':parseInt($('#dragwrapper'+randID).css('left'))+o.arrowRightOffset+rArrOffsetStatic-6+'px'}).animate({opacity:1,left:parseInt($('#rt-arrow'+randID).css('left'))+6+'px'},200);
|
||||
}
|
||||
$('#dragwrapper'+randID).animate({'opacity':1},200);
|
||||
},function(){
|
||||
if (!o.permArrows){
|
||||
$('#lt-arrow'+randID).animate({opacity:0,left:parseInt($('#lt-arrow'+randID).css('left'))+o.arrowLeftOffset-6+'px'},350);
|
||||
$('#rt-arrow'+randID).animate({opacity:0,left:parseInt($('#rt-arrow'+randID).css('left'))+o.arrowRightOffset+6+'px'},350);
|
||||
}
|
||||
$('#dragwrapper'+randID).animate({'opacity':.25},350);
|
||||
}
|
||||
);
|
||||
|
||||
$(obj).one('mousemove', function(){$('#dragwrapper'+randID).stop().animate({'opacity':1},500);}); // If the mouse is over the container and we animate the intro, we run this to change the opacity when the mouse moves since the hover event doesnt get triggered yet
|
||||
}
|
||||
|
||||
// Pan and zoom other map when one map pans/zooms
|
||||
//_before_.on('dragend', _mapMove_).on('zoomend', _mapMove_);
|
||||
//_after_.on('dragend', _mapMove_).on('zoomend', _mapMove_);
|
||||
|
||||
_before_.on('drag', _mapMove_).on('zoomend', _mapMove_);
|
||||
_after_.on('drag', _mapMove_).on('zoomend', _mapMove_);
|
||||
|
||||
function _mapMove_(e)
|
||||
{
|
||||
console.log('moving...');
|
||||
console.log(o.on_event)
|
||||
var zoom = this.getZoom(),
|
||||
latlng = this.getCenter();
|
||||
latlng = [latlng.lat,latlng.lng];
|
||||
var thisID = $(this._container).attr('id');
|
||||
if (thisID == _bID_){ _after_.setView(latlng,zoom); }
|
||||
else if (thisID == _aID_){ _before_.setView(latlng,zoom,{animate:false}); }
|
||||
else { console.log('Error: Please report this as a bug'); }
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
})(jQuery);
|
||||
11
lib/assets/javascripts/cdb/examples/slider/js/jquery.ui.touch-punch.min.js
vendored
Executable file
11
lib/assets/javascripts/cdb/examples/slider/js/jquery.ui.touch-punch.min.js
vendored
Executable file
@@ -0,0 +1,11 @@
|
||||
/*
|
||||
* jQuery UI Touch Punch 0.2.2
|
||||
*
|
||||
* Copyright 2011, Dave Furfero
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
*
|
||||
* Depends:
|
||||
* jquery.ui.widget.js
|
||||
* jquery.ui.mouse.js
|
||||
*/
|
||||
(function(b){b.support.touch="ontouchend" in document;if(!b.support.touch){return;}var c=b.ui.mouse.prototype,e=c._mouseInit,a;function d(g,h){if(g.originalEvent.touches.length>1){return;}g.preventDefault();var i=g.originalEvent.changedTouches[0],f=document.createEvent("MouseEvents");f.initMouseEvent(h,true,true,window,1,i.screenX,i.screenY,i.clientX,i.clientY,false,false,false,false,0,null);g.target.dispatchEvent(f);}c._touchStart=function(g){var f=this;if(a||!f._mouseCapture(g.originalEvent.changedTouches[0])){return;}a=true;f._touchMoved=false;d(g,"mouseover");d(g,"mousemove");d(g,"mousedown");};c._touchMove=function(f){if(!a){return;}this._touchMoved=true;d(f,"mousemove");};c._touchEnd=function(f){if(!a){return;}d(f,"mouseup");d(f,"mouseout");if(!this._touchMoved){d(f,"click");}a=false;};c._mouseInit=function(){var f=this;f.element.bind("touchstart",b.proxy(f,"_touchStart")).bind("touchmove",b.proxy(f,"_touchMove")).bind("touchend",b.proxy(f,"_touchEnd"));e.call(f);};})(jQuery);
|
||||
88
lib/assets/javascripts/cdb/examples/slider/slider.html
Normal file
88
lib/assets/javascripts/cdb/examples/slider/slider.html
Normal file
@@ -0,0 +1,88 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Slider | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
|
||||
<!-- CartoDB library -->
|
||||
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
|
||||
<script type="text/javascript" src="https://libs.cartocdn.com.s3.amazonaws.com/cartodb.js/v3/3.12/cartodb.js"></script>
|
||||
|
||||
<!-- JQuery library -->
|
||||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
|
||||
|
||||
<!-- Before/after-map -->
|
||||
<script type="text/javascript" src="js/jquery.ui.touch-punch.min.js"></script>
|
||||
<script type="text/javascript" src="js/jquery.beforeafter-map-0.11-CDB.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body onload="main();">
|
||||
|
||||
<div id="map-container">
|
||||
<div id="before" style="height:600px;width:100%;"></div>
|
||||
<div id="after" style="height:600px;width:100%;"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function _generate_map(container){
|
||||
|
||||
var map = L.map(container, {
|
||||
center: [43,-90],
|
||||
zoom: 4,
|
||||
scrollWheelZoom: false,
|
||||
attributionControl: false,
|
||||
inertia: true
|
||||
});
|
||||
|
||||
L.tileLayer('http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.png', {
|
||||
attribution: 'Stamen'
|
||||
}).addTo(map);
|
||||
|
||||
if (container === "before") {
|
||||
cartodb.createLayer(map, 'http://documentation.cartodb.com/api/v2/viz/0b6b2f94-6a52-11e4-8910-0e853d047bba/viz.json')
|
||||
.addTo(map)
|
||||
.done(function(layer) {
|
||||
})
|
||||
.error(function(err) {
|
||||
console.log("error layer before : " + err);
|
||||
});
|
||||
|
||||
} else {
|
||||
cartodb.createLayer(map, 'http://documentation.cartodb.com/api/v2/viz/bdeb4618-6a52-11e4-8522-0e9d821ea90d/viz.json')
|
||||
.addTo(map)
|
||||
.done(function(layer) {
|
||||
|
||||
})
|
||||
.error(function(err) {
|
||||
console.log("error layer after: " + err);
|
||||
});
|
||||
}
|
||||
|
||||
return map;
|
||||
}
|
||||
|
||||
|
||||
function main() {
|
||||
var before = _generate_map("before"),
|
||||
after = _generate_map("after");
|
||||
|
||||
$('#map-container').beforeAfter(before, after,{
|
||||
arrowTop: 0.95,
|
||||
animateIntro: true,
|
||||
introDelay: 1500,
|
||||
introDuration: 2000,
|
||||
introPosition: .30,
|
||||
imagePath: './imgs/',
|
||||
showFullLinks: true,
|
||||
permArrows: true,
|
||||
arrowLeftOffset: -115,
|
||||
arrowRightOffset: -5
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user