Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

examples fixed

  • Loading branch information...
commit 51c51364f66c0ccad98eede2d31c86e06b57a8e8 1 parent 3162410
@xavijam xavijam authored
View
5 NEWS.md
@@ -1,8 +1,9 @@
[v 0.53]
-- New examples page.
-- Attribution paramater added + function to set it as well.
+- Examples index page back.
+- Attribution paramater + function added.
- Wax (v7.0.0dev9) library updated.
- Leaflet (v0.4.4) library updated.
+- Removed noscript redirects.
[v 0.52]
- Bug related to removing wax interacion fixex.
View
6 css/leaflet-v0.4.4.css → css/leaflet.css
@@ -142,11 +142,11 @@
height: 27px;
}
.leaflet-control-zoom-in {
- background-image: url(images/zoom-in.png);
+ background-image: url(http://cdn.leafletjs.com/leaflet-0.4.4/images/zoom-in.png);
margin-bottom: 5px;
}
.leaflet-control-zoom-out {
- background-image: url(images/zoom-out.png);
+ background-image: url(http://cdn.leafletjs.com/leaflet-0.4.4/images/zoom-out.png);
}
.leaflet-control-layers {
@@ -157,7 +157,7 @@
border-radius: 8px;
}
.leaflet-control-layers a {
- background-image: url(images/layers.png);
+ background-image: url(http://cdn.leafletjs.com/leaflet-0.4.4/images/layers.png);
width: 36px;
height: 36px;
}
View
44 css/leaflet.ie.css
@@ -0,0 +1,44 @@
+.leaflet-vml-shape {
+ width: 1px;
+ height: 1px;
+ }
+.lvml {
+ behavior: url(#default#VML);
+ display: inline-block;
+ position: absolute;
+ }
+
+.leaflet-control {
+ display: inline;
+ }
+
+.leaflet-popup-tip {
+ width: 21px;
+ _width: 27px;
+ margin: 0 auto;
+ _margin-top: -3px;
+
+ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
+ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
+ }
+.leaflet-popup-tip-container {
+ margin-top: -1px;
+ }
+.leaflet-popup-content-wrapper, .leaflet-popup-tip {
+ border: 1px solid #bbb;
+ }
+
+.leaflet-control-zoom {
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#3F000000',EndColorStr='#3F000000');
+ }
+.leaflet-control-zoom a {
+ background-color: #eee;
+ }
+.leaflet-control-zoom a:hover {
+ background-color: #fff;
+ }
+.leaflet-control-layers-toggle {
+ }
+.leaflet-control-attribution, .leaflet-control-layers {
+ background: white;
+ }
View
6 css/style.css
@@ -6,6 +6,9 @@ table tr td {border: 1px solid #CCC; text-align: left; margin: 0; padding: 6px 1
table td b {color:#333333;}
span.string p {display:inline-block; width:auto!important; font-size:13px;}
section.nav div.right {min-height:100px!important;}
+div.right .blue.button.download {position:relative; display:inline; top:auto; right:auto; float:none; padding-right:18px!important;}
+
+.leaflet-popup-content p {width:auto!important;}
/* Fonts for Firefox */
header nav a {font:bold 12px "Segoe UI Bold", "Helvetica Neue", "Helvetica", Arial;}
@@ -15,7 +18,8 @@ h3 {font: bold 23px/24px "Segoe UI Bold", "Helvetica Neue", "Helvetica", Arial!i
h5 {font: bold 19px/15px "Segoe UI Bold", "Helvetica Neue", "Helvetica", Arial!important;}
/* Things for examples */
-form.example {position:absolute!important; top:25px; right:25px; margin:0!important; width:150px!important;
+form.example {
+ position:absolute!important; top:25px; right:25px; margin:0!important; width:150px!important;
padding:10px!important; background:white; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; border:1px solid #CCC;
z-index:1000;
}
View
10 examples/custom-popup.html
@@ -6,13 +6,13 @@
<title>CartoDB + Leaflet | Custom infowindow</title>
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<style>body,html {width:100%; height:100%; margin:0; padding:0;} #map {position:relative; margin:0; width:100%; height:100%;}</style>
- <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.css" />
- <!--[if IE]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /><![endif]-->
+ <link rel="stylesheet" href="../css/leaflet.css" />
+ <!--[if IE]><link rel="stylesheet" href="../css/leaflet.ie.css" /><![endif]-->
<link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- <script src="../js/leaflet-0.4.0.js"></script>
- <script type="text/javascript" src="../js/wax.leaf.min-7.0.0dev1-touched.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
+ <script src="../js/leaflet.js"></script>
+ <script type="text/javascript" src="../js/wax.leaf.min.js"></script>
<script type="text/javascript" src="../dist/cartodb-leaflet-min.js"></script>
<script type="text/javascript" src="../dist/cartodb-popup-min.js"></script>
View
14 examples/esri.html
@@ -6,13 +6,13 @@
<title>CartoDB + ESRI</title>
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<style>body,html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;} #map {height:100%;}</style>
- <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.css" />
- <!--[if IE]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /><![endif]-->
+ <link rel="stylesheet" href="../css/leaflet.css" />
+ <!--[if IE]><link rel="stylesheet" href="../css/leaflet.ie.css" /><![endif]-->
<link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- <script src="../js/leaflet-0.4.0.js"></script>
- <script type="text/javascript" src="../js/wax.leaf.min-7.0.0dev1-touched.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
+ <script src="../js/leaflet.js"></script>
+ <script type="text/javascript" src="../js/wax.leaf.min.js"></script>
<script type="text/javascript" src="../dist/cartodb-leaflet-min.js"></script>
<script type="text/javascript" src="../dist/cartodb-popup-min.js"></script>
@@ -25,6 +25,9 @@
, streetMapUrl = 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}'
, streetMapLayer = new L.TileLayer(streetMapUrl, { maxZoom: 19, attribution: 'Tiles: &copy; Esri' });
+ map.setView(new L.LatLng(36.204824, 138.252924), 6).addLayer(streetMapLayer,true);
+
+
// Create a CartoDB popup
var popup = new L.CartoDBPopup();
@@ -60,7 +63,6 @@
// Adding layer to map
map.addLayer(earthquakes,false);
- map.setView(new L.LatLng(36.204824, 138.252924), 6).addLayer(streetMapLayer,true);
}
</script>
View
28 examples/hover-line.html
@@ -6,13 +6,13 @@
<title>CartoDB + Leaflet | Hover line</title>
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<style>body,html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;} #map {height:100%;}</style>
- <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.css" />
- <!--[if IE]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /><![endif]-->
+ <link rel="stylesheet" href="../css/leaflet.css" />
+ <!--[if IE]><link rel="stylesheet" href="../css/leaflet.ie.css" /><![endif]-->
<link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- <script src="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
- <script type="text/javascript" src="js/wax.leaf.min-7.0.0dev1-touched.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
+ <script src="../js/leaflet.js"></script>
+ <script type="text/javascript" src="../js/wax.leaf.min.js"></script>
<script type="text/javascript" src="../dist/cartodb-leaflet-min.js"></script>
<script type="text/javascript" src="../dist/cartodb-popup-min.js"></script>
@@ -43,18 +43,13 @@
// Show the hover polyline if it is a different feature
if (data.cartodb_id != polyline.cartodb_id) {
map.removeLayer(polyline);
- polyline.off("featureparse");
- polyline = new L.GeoJSON(null);
+ polyline = new L.GeoJSON(JSON.parse(data.geometry), {
+ style: function (feature) {
+ return polyline_style;
+ }
+ }).addTo(map);
polyline.cartodb_id = data.cartodb_id;
-
- // Change style
- polyline.on("featureparse", function (e) {
- e.layer.setStyle(polyline_style);
- });
-
- polyline.addGeoJSON(JSON.parse(data.geometry));
- map.addLayer(polyline);
}
},
featureOut: function() {
@@ -62,8 +57,7 @@
// Hide and remove in any case the hover polyline
polyline.cartodb_id = null;
- polyline.off("featureparse");
- map.removeLayer(polyline)
+ map.removeLayer(polyline);
},
featureClick: function(ev,latlng,pos,data) {
// Stop propagation
View
18 examples/hover-point.html
@@ -6,16 +6,17 @@
<title>CartoDB + Leaflet | Hover point</title>
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<style>body,html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;} #map {height:100%;}</style>
- <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.css" />
- <!--[if IE]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /><![endif]-->
+ <link rel="stylesheet" href="../css/leaflet.css" />
+ <!--[if IE]><link rel="stylesheet" href="../css/leaflet.ie.css" /><![endif]-->
<link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- <script src="http://code.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
- <script type="text/javascript" src="js/wax.leaf.min-7.0.0dev1.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
+ <script src="../js/leaflet.js"></script>
+ <script type="text/javascript" src="../js/wax.leaf.min.js"></script>
<script type="text/javascript" src="../dist/cartodb-leaflet-min.js"></script>
<script type="text/javascript" src="../dist/cartodb-popup-min.js"></script>
+
<script type="text/javascript">
function initialize() {
var map = new L.Map('map').setView(new L.LatLng(40.718379593199494, -73.99772644042969), 14)
@@ -45,13 +46,12 @@
map.removeLayer(point);
point = new L.GeoJSON(JSON.parse(data.geometry),{
- pointToLayer: function(latlng) {
+ pointToLayer: function(feature,latlng) {
return new L.CircleMarker(latlng, hover_style);
}
- });
+ }).addTo(map);
+
point.cartodb_id = data.cartodb_id;
-
- map.addLayer(point);
}
},
featureOut: function() {
View
26 examples/hover-polygon.html
@@ -6,14 +6,13 @@
<title>CartoDB + Leaflet | Hover polygon</title>
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<style>body,html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;} #map {height:100%;}</style>
- <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.css" />
- <!--[if IE]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /><![endif]-->
+ <link rel="stylesheet" href="../css/leaflet.css" />
+ <!--[if IE]><link rel="stylesheet" href="../css/leaflet.ie.css" /><![endif]-->
<link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- <script src="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
- <!--script type="text/javascript" src="../js/wax.leaf.min-6.2.3-touched.js"></script-->
- <script type="text/javascript" src="../js/wax.leaf.min-7.0.0dev1-touched.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
+ <script src="../js/leaflet.js"></script>
+ <script type="text/javascript" src="../js/wax.leaf.min.js"></script>
<script type="text/javascript" src="../dist/cartodb-leaflet-min.js"></script>
<script type="text/javascript" src="../dist/cartodb-popup-min.js"></script>
@@ -44,18 +43,13 @@
// Show the hover polygon if it is a different feature
if (data.cartodb_id != polygon.cartodb_id) {
map.removeLayer(polygon);
- polygon.off("featureparse");
- polygon = new L.GeoJSON(null);
+ polygon = new L.GeoJSON(JSON.parse(data.geometry), {
+ style: function (feature) {
+ return polygon_style;
+ }
+ }).addTo(map);
polygon.cartodb_id = data.cartodb_id;
-
- // Change style
- polygon.on("featureparse", function (e) {
- e.layer.setStyle(polygon_style);
- });
-
- polygon.addGeoJSON(JSON.parse(data.geometry));
- map.addLayer(polygon);
}
},
featureOut: function() {
View
204 examples/index.html
@@ -0,0 +1,204 @@
+<!doctype html>
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
+<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
+<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
+<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+ <head>
+ <meta charset="utf-8">
+ <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
+ <title>CartoDB | Leaflet library</title>
+ <link href="http://developers.cartodb.com/stylesheets/all.css" media="screen" rel="stylesheet" type="text/css" />
+ <link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
+ <script src="http://developers.cartodb.com/javascripts/all.js" type="text/javascript"></script>
+ <link rel="shortcut icon" href="http://developers.cartodb.com/images/favicon.ico" />
+ <script type="text/javascript">
+ var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-20934186-3']); _gaq.push(['_setDomainName', 'cartodb.com']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
+ </script>
+ <noscript><meta http-equiv="refresh" content="0;url=http://cartodb.com/no_javascript.html"></noscript>
+ </head>
+ <body class="developers examples" onload="initialize()">
+ <div class="background blue grid fixed">
+ <header>
+ <h1 class="left">
+ <a href="http://cartodb.com">CartoDB</a>
+ </h1>
+ <nav class="right">
+ <a href="http://cartodb.com/tour">Tour</a>
+ <a href="http://cartodb.com/maps">Maps</a>
+ <a class="selected" href="http://developers.cartodb.com">Developers</a>
+ <a href="http://cartodb.com/pricing">Pricing</a>
+ <a href="http://cartodb.com/login">Sign in</a>
+ </nav>
+ </header>
+ </div>
+
+ <div class="background floating">
+ <section class="top black no_padding shadow">
+ <div class="content">
+ <h2 class="center big">Here are some examples using<br/>CartoDB Leaflet library</h2>
+ <form>
+ <input type="text" value="" data-label="What are you looking for?"/>
+ <input type="submit" class="button blue border" value="Search" />
+ </form>
+ </div>
+ </section>
+
+ <section class="shadow bottom">
+ <div class="content no_padding">
+ <ul class="examples_list">
+ <li>
+ <h3><a href="custom-popup.html">CartoDB custom popup</a></h3>
+ <p class="light">A leaflet map using our genuine popup.</p>
+ <em class="basic">basic</em>
+ </li>
+
+ <li>
+ <h3><a href="query-by-distance.html">Query by distance</a></h3>
+ <p class="light">Search features around a point within a specific radius.</p>
+ <em class="medium">medium</em>
+ </li>
+
+ <li>
+ <h3><a href="show-hide.html">Show and hide a layer</a></h3>
+ <p class="light">Show and hide a CartoDB layer.</p>
+ <em class="basic">basic</em>
+ </li>
+
+ <li>
+ <h3><a href="hover-polygon.html">Hover interactivity with polygons</a></h3>
+ <p class="light">Use an interactivity polygon to highlight the feature.</p>
+ <em class="hard">hard</em>
+ </li>
+
+ <li>
+ <h3><a href="hover-point.html">Hover interactivity with points</a></h3>
+ <p class="light">Use an interactivity point to highlight the feature.</p>
+ <em class="hard">hard</em>
+ </li>
+
+ <li>
+ <h3><a href="hover-line.html">Hover interactivity with lines</a></h3>
+ <p class="light">Use an interactivity line to highlight the feature.</p>
+ <em class="hard">hard</em>
+ </li>
+
+ <li>
+ <h3><a href="esri.html">CartoDB + Esri base tiles</a></h3>
+ <p class="light">Use ESRI base tiles with CartoDB.</p>
+ <em class="basic">basic</em>
+ </li>
+
+ <li>
+ <h3><a href="wsj_elections.html">WSJ Elections map</a></h3>
+ <p class="light">An elections map from Wall Street Journal.</p>
+ <em class="medium">medium</em>
+ </li>
+
+ <li style="box-shadow:0 1px 0 0 #E5E5E5">
+ <h3><a href="ny_buildings.html">NY buildings</a></h3>
+ <p class="light">An example of NY buildings with the library.</p>
+ <em class="medium">medium</em>
+ </li>
+
+ <li>
+ <h3><a href="ny_licenses.html">NY State liquor licenses</a></h3>
+ <p class="light">An example of NY State liquor licenses.</p>
+ <em class="medium">medium</em>
+ </li>
+
+ <li>
+ <h3><a href="nyc_restaurant_week.html">NY Restaurant week</a></h3>
+ <p class="light">An CartoDB map for the 20th NY restaurant week.</p>
+ <em class="medium">medium</em>
+ </li>
+ </ul>
+ </div>
+ </section>
+
+ <section class="grey carto shadow margin40">
+ <div class="content less_padding">
+ <div class="left">
+ <h2 class="compact dark">Further info? Take a look a the docs</h2>
+ <p class="light margin10">Visit our support area and get some help from the community.</p>
+ </div>
+ <div class="right">
+ <a class="button blue right margin5" href="http://developers.cartodb.com/documentation/using-cartodb.html">Go to documentation</a>
+ </div>
+ </div>
+ </section>
+
+ <section class="white shadow leftwards margin40">
+ <div class="content overflow">
+ <h3>CartoDB Video Channel</h3>
+ <div class="left">
+ <iframe class="margin30" src="//player.vimeo.com/video/29030961?portrait=0" width="599" height="329" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
+ </div>
+ <div class="right margin30">
+ <p class="light">Let’s get started with what is CartoDB and why we created it.<p>
+ <p class="light margin20">Andrew Hill and Simon Tokumine, both CartoDB developers explain why we are so excited about it.</p>
+ <p class="light margin20">The video was featured at FOSS4G in Denver, when CartoDB got presented to the OSS community.</p>
+ <p class="light margin20">If you want to watch more videos, interviews or even tutorials, take a look at our video channel</p>
+ <a href="http://vimeo.com/channels/cartodb" target="_blank" class="button blue border video margin20">Visit our video channel</a>
+ </div>
+ </div>
+ </section>
+
+ <div class="background white border margin40">
+ <section>
+ <div class="content less_padding">
+ <div class="left">
+ <h3 class="lighter margin10">CartoDB is also used by</h3>
+ </div>
+ <div class="right">
+ <ul class="logos">
+ <li><a class="unep-wcmc" target="_blank" href="http://www.unep-wcmc.org/"><img alt="UNEP-WCMC" title="UNEP-WCMC" src="http://developers.cartodb.com/images/logos/unep-wcmc.png" /></a></li>
+ <li><a class="nasa" target="nasa" href="http://www.nasa.gov"><img alt="NASA" title="NASA" src="http://developers.cartodb.com/images/logos/nasa.png" /></a></li>
+ <li><a class="diversity" target="_blank" href="http://www.cbd.int/"><img alt="Convention on Biological Diversity" title="Convention on Biological Diversity" src="http://developers.cartodb.com/images/logos/diversity.png" /></a></li>
+ <li><a class="wsj" target="_blank" href="http://europe.wsj.com/home-page"><img alt="Wall Street Journal" title="Wall Street Journal" src="http://developers.cartodb.com/images/logos/wsj.png" /></a></li>
+ <li><a class="wri" target="_blank" href="http://www.wri.org/"><img alt="WORLD RESOURCES INSTITUTE" title="WORLD RESOURCES INSTITUTE" src="http://developers.cartodb.com/images/logos/wri.png" /></a></li>
+ </ul>
+ </div>
+ </div>
+ </section>
+ </div>
+
+ <div class="background white border">
+ <section>
+ <div class="content no_padding">
+ <ul class="hz">
+ <li>
+ <h3>Common questions</h3>
+ </li>
+ <li>
+ <h3>Do you have any educational plans?</h3>
+ <p class="light margin15">Yes we have. <a href="mailto:support@cartodb.com">Contact us</a> for getting more information. We are quite friends of academics so, you will get a lot of benefits.</p>
+ </li>
+ <li>
+ <h3>Need something extra? Let us now.</h3>
+ <p class="light margin15">Need us to help you with your visualization or application? Does your organization have unique requirements that don’t quite fit our plans? <a href="mailto:support@cartodb.com">Contact us</a>.</p>
+ </li>
+ </ul>
+ </div>
+ </section>
+ </div>
+
+ <footer>
+ <div class="wrap">
+ <span class="cartodb">CartoDB</span>
+ <p class="lighter small left">CartoDB is a product of <a class="vizzuality" href="http://vizzuality.com">Vizzuality</a>
+ </p>
+ <nav class="right">
+ <a href="http://cartodb.com/tour">Feature tour</a>
+ <a href="http://cartodb.com/tutorial/step/1">Getting started</a>
+ <a href="http://cartodb.com/maps">Maps</a>
+ <a href="http://developers.cartodb.com">Developers</a>
+ <a href="http://blog.cartodb.com">Blog</a>
+ <a href="http://cartodb.com/pricing">Pricing</a>
+ <a href="mailto:support@cartodb.com">Contact</a>
+ </nav>
+ </div>
+ </footer>
+ </div>
+ </body>
+</html>
View
241 examples/ny_buildings.html
@@ -2,137 +2,128 @@
<html lang="en">
<head>
<meta charset="utf-8">
- <title>NY State liquor licenses</title>
+ <title>CartoDB | NY Buildings</title>
<meta name="description" content="">
<meta name="author" content="">
-
- <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
- <!--[if lt IE 9]>
- <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
- <![endif]-->
-
- <!-- Le styles -->
+ <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<link href="css/bootstrap.min.css" rel="stylesheet">
- <link href="css/ny_licenses.css" rel="stylesheet">
-
-
- <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.css" />
- <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /><![endif]-->
- <link href="http://dl.dropbox.com/u/580074/ny_licenses/css/cartodb.css" rel="stylesheet" type="text/css">
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
- <script type="text/javascript" src="../js/wax.leaf.min-6.2.3-touched.js"></script>
- <script type="text/javascript" src="../dist/cartodb-leaflet.js"></script>
- <script type="text/javascript" src="../dist/cartodb-popup-min.js"></script>
-
- <script type="text/javascript">
- var licenses, map;
-
- function initialize() {
- map = new L.Map('map_canvas').setView(new L.LatLng(40.71785916529029,-73.86829376220703), 11);
-
- var mapboxUrl = 'http://{s}.tiles.mapbox.com/v3/cartodb.map-1nh578vv/{z}/{x}/{y}.png',
- mapbox = new L.TileLayer(mapboxUrl, {maxZoom: 17,attribution:"Powered by Leaflet and Mapbox"});
- map.addLayer(mapbox,true);
-
-
- var query="SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas ORDER BY random()";
-
-
+ <style>body,html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;} #map_canvas {position:absolute; top:40px; left:0; right:0; bottom:0;}</style>
+ <link rel="stylesheet" href="../css/leaflet.css" />
+ <!--[if IE]><link rel="stylesheet" href="../css/leaflet.ie.css" /><![endif]-->
+ <link href="../css/style.css" rel="stylesheet" type="text/css">
+ <link href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
+ <script src="../js/leaflet.js"></script>
+ <script type="text/javascript" src="../js/wax.leaf.min.js"></script>
+ <script type="text/javascript" src="../dist/cartodb-leaflet-min.js"></script>
+ <script type="text/javascript" src="../dist/cartodb-popup-min.js"></script>
+
+ <script type="text/javascript">
+ var licenses, map;
+
+ function initialize() {
+ map = new L.Map('map_canvas').setView(new L.LatLng(40.71785916529029,-73.86829376220703), 11);
+
+ var mapboxUrl = 'http://{s}.tiles.mapbox.com/v3/cartodb.map-1nh578vv/{z}/{x}/{y}.png',
+ mapbox = new L.TileLayer(mapboxUrl, {maxZoom: 17,attribution:"Powered by Leaflet and Mapbox"});
+ map.addLayer(mapbox,true);
+
+
+ var query="SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas ORDER BY random()";
var popup = new L.CartoDBPopup();
- var circleMarker = new L.CircleMarker(null);
+ var circleMarker = {};
var hover_style = {radius:3, color:"#333", weight:2, opacity:1, fillColor: "#FFCC00", fillOpacity:0, clickable:false};
-
-
- licenses = new L.CartoDBLayer({
- map: map,
- user_name:'viz2',
- extra_params:{v:2},
- cdn_url:'http://d2c5ry9dy1ewvi.cloudfront.net',
- table_name: 'bodegas',
- query: query,
- interactivity: "cartodb_id,dba,licensecat,licensetype,lng,lat",
- featureOver: function(ev,latlng,pos,data) {
- document.body.style.cursor = "pointer";
- showTooltip(data,pos)
- // Show the hover point if it is a different feature
- if (data.cartodb_id != circleMarker.cartodb_id) {
- map.removeLayer(circleMarker);
- circleMarker = new L.CircleMarker(new L.LatLng(data.lat, data.lng), hover_style);
- circleMarker.cartodb_id = data.cartodb_id;
+ licenses = new L.CartoDBLayer({
+ map: map,
+ user_name:'viz2',
+ extra_params:{v:2},
+ cdn_url:'http://d2c5ry9dy1ewvi.cloudfront.net',
+ table_name: 'bodegas',
+ query: query,
+ interactivity: "cartodb_id,dba,licensecat,licensetype,lng,lat",
+ featureOver: function(ev,latlng,pos,data) {
+ document.body.style.cursor = "pointer";
+ showTooltip(data,pos)
- map.addLayer(circleMarker);
- }
-
- },
- featureOut: function() {
- document.body.style.cursor = "default";
- hideTooltip();
-
- // Hide and remove in any case the hover point
- circleMarker.cartodb_id = null;
- map.removeLayer(circleMarker)
- },
- featureClick: function(ev,latlng,pos,data) {},
- auto_bound: false
- });
-
- map.addLayer(licenses)
- }
-
- function showTooltip(data,point) {
- var html = "";
-
- var name = (data["dba"]!="")?data["dba"]:"Unknown";
- html += "<label>Name</label><p>" + name +"</p";
-
+ // Show the hover point if it is a different feature
+ if (data.cartodb_id != circleMarker.cartodb_id) {
+ map.removeLayer(circleMarker);
+
+ circleMarker = new L.CircleMarker(new L.LatLng(data.lat, data.lng), hover_style);
+ circleMarker.cartodb_id = data.cartodb_id;
+
+ map.addLayer(circleMarker);
+ }
+
+ },
+ featureOut: function() {
+ document.body.style.cursor = "default";
+ hideTooltip();
+
+ // Hide and remove in any case the hover point
+ circleMarker.cartodb_id = null;
+ map.removeLayer(circleMarker)
+ },
+ featureClick: function(ev,latlng,pos,data) {},
+ auto_bound: false
+ });
+
+ map.addLayer(licenses)
+ }
+
+ function showTooltip(data,point) {
+ var html = "";
+
+ var name = (data["dba"]!="")?data["dba"]:"Unknown";
+ html += "<label>Name</label><p>" + name +"</p";
+
+
+ html += "<br><label>Licenset Cat</label><p>" + getLicenseCategoryName(data["licensecat"]) +"</p";
+ html += "<br><label>License Type</label><p>" + data["licensetype"] +"</p";
+
+ $("#tooltip").html(html);
+ $("#tooltip").css({left: (point.x + 15) + 'px', top: point.y - ($("#tooltip").height()) + 10 + 'px'})
+ $("#tooltip").show();
+ }
+
+ function hideTooltip() {
+ $("#tooltip").hide();
+ }
- html += "<br><label>Licenset Cat</label><p>" + getLicenseCategoryName(data["licensecat"]) +"</p";
- html += "<br><label>License Type</label><p>" + data["licensetype"] +"</p";
+ function getLicenseCategoryName(licensecat) {
+ if (licensecat=='1')
+ return "On-Premise License";
+ if (licensecat=='2')
+ return "Off-Premise License";
+ if (licensecat=='3')
+ return "Wholesale License";
+ if (licensecat=='4')
+ return "Pending License";
+ }
- $("#tooltip").html(html);
- $("#tooltip").css({left: (point.x + 15) + 'px', top: point.y - ($("#tooltip").height()) + 10 + 'px'})
- $("#tooltip").show();
- }
+ function changeLayer(layer) {
+ if (layer == 'All') {
+ licenses.setQuery("SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas ORDER BY random()");
+ } else if (layer == 'On-Premise') {
+ licenses.setQuery("SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas WHERE licensecat='1'");
+ } else if (layer == 'Off-Premise') {
+ licenses.setQuery("SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas WHERE licensecat='2'");
+ } else if (layer == 'Wholesale') {
+ licenses.setQuery("SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas WHERE licensecat='3'");
+ } else if (layer == 'Pending') {
+ licenses.setQuery("SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas WHERE licensecat='4'");
+ }
+
+ }
+
+ </script>
- function hideTooltip() {
- $("#tooltip").hide();
- }
-
- function getLicenseCategoryName(licensecat) {
- if (licensecat=='1')
- return "On-Premise License";
- if (licensecat=='2')
- return "Off-Premise License";
- if (licensecat=='3')
- return "Wholesale License";
- if (licensecat=='4')
- return "Pending License";
- }
+ </head>
+ <body onload="initialize()">
- function changeLayer(layer) {
- if (layer == 'All') {
- licenses.setQuery("SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas ORDER BY random()");
- } else if (layer == 'On-Premise') {
- licenses.setQuery("SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas WHERE licensecat='1'");
- } else if (layer == 'Off-Premise') {
- licenses.setQuery("SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas WHERE licensecat='2'");
- } else if (layer == 'Wholesale') {
- licenses.setQuery("SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas WHERE licensecat='3'");
- } else if (layer == 'Pending') {
- licenses.setQuery("SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas WHERE licensecat='4'");
- }
-
- }
-
- </script>
-
-</head>
-<body onload="initialize()">
-
- <div id="map_canvas"></div>
+ <div id="map_canvas"></div>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
@@ -144,16 +135,11 @@ <h1 class="brand" href="#">NY State liquor licenses</h1>
<button class="btn" onClick="changeLayer('Off-Premise')">Off-Premise</button>
<button class="btn" onClick="changeLayer('Wholesale')">Wholesale</button>
<button class="btn" onClick="changeLayer('Pending')">Pending</button>
-
</div>
</div>
</div>
</div>
-
- <div class="container">
- </div> <!-- /container -->
-
<div class="alert alert-info" id="legend">
<img src="img/legend_licenses.png" />
</div>
@@ -162,14 +148,9 @@ <h1 class="brand" href="#">NY State liquor licenses</h1>
<p>Tooltip</p>
</div>
-
- <!-- Le javascript
- ================================================== -->
- <!-- Placed at the end of the document so the pages load faster -->
-
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
-</body>
+ </body>
</html>
View
244 examples/ny_licenses.html
@@ -2,137 +2,130 @@
<html lang="en">
<head>
<meta charset="utf-8">
- <title>NY State liquor licenses</title>
+ <title>CartoDB | NY State liquor licenses</title>
<meta name="description" content="">
<meta name="author" content="">
-
- <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
- <!--[if lt IE 9]>
- <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
- <![endif]-->
-
- <!-- Le styles -->
+ <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/ny_licenses.css" rel="stylesheet">
-
-
- <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.css" />
- <!--[if IE]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /><![endif]-->
- <link href="http://dl.dropbox.com/u/580074/ny_licenses/css/cartodb.css" rel="stylesheet" type="text/css">
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
- <script type="text/javascript" src="../js/wax.leaf.min-7.0.0dev1-touched.js"></script>
- <script type="text/javascript" src="../dist/cartodb-leaflet.js"></script>
- <script type="text/javascript" src="../dist/cartodb-popup-min.js"></script>
-
- <script type="text/javascript">
- var licenses, map;
-
- function initialize() {
- map = new L.Map('map_canvas').setView(new L.LatLng(40.71785916529029,-73.86829376220703), 11);
-
- var mapboxUrl = 'http://{s}.tiles.mapbox.com/v3/cartodb.map-1nh578vv/{z}/{x}/{y}.png',
- mapbox = new L.TileLayer(mapboxUrl, {maxZoom: 17,attribution:"Powered by Leaflet and Mapbox"});
- map.addLayer(mapbox,true);
+ <style>body,html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;} #map_canvas {position:absolute; top:40px; left:0; right:0; bottom:0;}</style>
+ <link rel="stylesheet" href="../css/leaflet.css" />
+ <!--[if IE]><link rel="stylesheet" href="../css/leaflet.ie.css" /><![endif]-->
+ <link href="../css/style.css" rel="stylesheet" type="text/css">
+ <link href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
+ <script src="../js/leaflet.js"></script>
+ <script type="text/javascript" src="../js/wax.leaf.min.js"></script>
+ <script type="text/javascript" src="../dist/cartodb-leaflet-min.js"></script>
+ <script type="text/javascript" src="../dist/cartodb-popup-min.js"></script>
+
+ <script type="text/javascript">
+ var licenses, map;
+
+ function initialize() {
+ map = new L.Map('map_canvas').setView(new L.LatLng(40.71785916529029,-73.86829376220703), 11);
+
+ var mapboxUrl = 'http://{s}.tiles.mapbox.com/v3/cartodb.map-1nh578vv/{z}/{x}/{y}.png',
+ mapbox = new L.TileLayer(mapboxUrl, {maxZoom: 17,attribution:"Powered by Leaflet and Mapbox"});
+ map.addLayer(mapbox,true);
+
+
+ var query="SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas ORDER BY random()";
+
+
+ var popup = new L.CartoDBPopup();
+ var circleMarker = {};
+ var hover_style = {radius:3, color:"#333", weight:2, opacity:1, fillColor: "#FFCC00", fillOpacity:0, clickable:false};
+
+
+ licenses = new L.CartoDBLayer({
+ map: map,
+ user_name:'viz2',
+ extra_params:{v:2},
+ cdn_url:'http://d2c5ry9dy1ewvi.cloudfront.net',
+ table_name: 'bodegas',
+ query: query,
+ interactivity: "cartodb_id,dba,licensecat,licensetype,lng,lat",
+ featureOver: function(ev,latlng,pos,data) {
+ document.body.style.cursor = "pointer";
+ showTooltip(data,pos)
-
- var query="SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas ORDER BY random()";
-
+ // Show the hover point if it is a different feature
+ if (data.cartodb_id != circleMarker.cartodb_id) {
+ map.removeLayer(circleMarker);
+
+ circleMarker = new L.CircleMarker(new L.LatLng(data.lat, data.lng), hover_style);
+ circleMarker.cartodb_id = data.cartodb_id;
+
+ map.addLayer(circleMarker);
+ }
+
+ },
+ featureOut: function() {
+ document.body.style.cursor = "default";
+ hideTooltip();
+
+ // Hide and remove in any case the hover point
+ circleMarker.cartodb_id = null;
+ map.removeLayer(circleMarker)
+ },
+ featureClick: function(ev,latlng,pos,data) {},
+ auto_bound: false
+ });
+
+ map.addLayer(licenses)
+ }
+
+ function showTooltip(data,point) {
+ var html = "";
- var popup = new L.CartoDBPopup();
- var circleMarker = new L.CircleMarker(null);
- var hover_style = {radius:3, color:"#333", weight:2, opacity:1, fillColor: "#FFCC00", fillOpacity:0, clickable:false};
+ var name = (data["dba"]!="")?data["dba"]:"Unknown";
+ html += "<label>Name</label><p>" + name +"</p";
- licenses = new L.CartoDBLayer({
- map: map,
- user_name:'viz2',
- extra_params:{v:2},
- cdn_url:'http://d2c5ry9dy1ewvi.cloudfront.net',
- table_name: 'bodegas',
- query: query,
- interactivity: "cartodb_id,dba,licensecat,licensetype,lng,lat",
- featureOver: function(ev,latlng,pos,data) {
- document.body.style.cursor = "pointer";
- showTooltip(data,pos)
-
- // Show the hover point if it is a different feature
- if (data.cartodb_id != circleMarker.cartodb_id) {
- map.removeLayer(circleMarker);
-
- circleMarker = new L.CircleMarker(new L.LatLng(data.lat, data.lng), hover_style);
- circleMarker.cartodb_id = data.cartodb_id;
-
- map.addLayer(circleMarker);
- }
-
- },
- featureOut: function() {
- document.body.style.cursor = "default";
- hideTooltip();
-
- // Hide and remove in any case the hover point
- circleMarker.cartodb_id = null;
- map.removeLayer(circleMarker)
- },
- featureClick: function(ev,latlng,pos,data) {},
- auto_bound: false
- });
-
- map.addLayer(licenses)
- }
-
- function showTooltip(data,point) {
- var html = "";
-
- var name = (data["dba"]!="")?data["dba"]:"Unknown";
- html += "<label>Name</label><p>" + name +"</p";
-
+ html += "<br><label>Licenset Cat</label><p>" + getLicenseCategoryName(data["licensecat"]) +"</p";
+ html += "<br><label>License Type</label><p>" + data["licensetype"] +"</p";
+
+ $("#tooltip").html(html);
+ $("#tooltip").css({left: (point.x + 15) + 'px', top: point.y - ($("#tooltip").height()) + 10 + 'px'})
+ $("#tooltip").show();
+ }
+
+ function hideTooltip() {
+ $("#tooltip").hide();
+ }
- html += "<br><label>Licenset Cat</label><p>" + getLicenseCategoryName(data["licensecat"]) +"</p";
- html += "<br><label>License Type</label><p>" + data["licensetype"] +"</p";
+ function getLicenseCategoryName(licensecat) {
+ if (licensecat=='1')
+ return "On-Premise License";
+ if (licensecat=='2')
+ return "Off-Premise License";
+ if (licensecat=='3')
+ return "Wholesale License";
+ if (licensecat=='4')
+ return "Pending License";
+ }
- $("#tooltip").html(html);
- $("#tooltip").css({left: (point.x + 15) + 'px', top: point.y - ($("#tooltip").height()) + 10 + 'px'})
- $("#tooltip").show();
- }
-
- function hideTooltip() {
- $("#tooltip").hide();
- }
-
- function getLicenseCategoryName(licensecat) {
- if (licensecat=='1')
- return "On-Premise License";
- if (licensecat=='2')
- return "Off-Premise License";
- if (licensecat=='3')
- return "Wholesale License";
- if (licensecat=='4')
- return "Pending License";
- }
+ function changeLayer(layer) {
+ if (layer == 'All') {
+ licenses.setQuery("SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas ORDER BY random()");
+ } else if (layer == 'On-Premise') {
+ licenses.setQuery("SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas WHERE licensecat='1'");
+ } else if (layer == 'Off-Premise') {
+ licenses.setQuery("SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas WHERE licensecat='2'");
+ } else if (layer == 'Wholesale') {
+ licenses.setQuery("SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas WHERE licensecat='3'");
+ } else if (layer == 'Pending') {
+ licenses.setQuery("SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas WHERE licensecat='4'");
+ }
+
+ }
+
+ </script>
+ </head>
+ <body onload="initialize()">
- function changeLayer(layer) {
- if (layer == 'All') {
- licenses.setQuery("SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas ORDER BY random()");
- } else if (layer == 'On-Premise') {
- licenses.setQuery("SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas WHERE licensecat='1'");
- } else if (layer == 'Off-Premise') {
- licenses.setQuery("SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas WHERE licensecat='2'");
- } else if (layer == 'Wholesale') {
- licenses.setQuery("SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas WHERE licensecat='3'");
- } else if (layer == 'Pending') {
- licenses.setQuery("SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas WHERE licensecat='4'");
- }
-
- }
-
- </script>
-
-</head>
-<body onload="initialize()">
-
- <div id="map_canvas"></div>
+ <div id="map_canvas"></div>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
@@ -149,10 +142,6 @@ <h1 class="brand" href="#">NY State liquor licenses</h1>
</div>
</div>
</div>
-
-
- <div class="container">
- </div> <!-- /container -->
<div class="alert alert-info" id="legend">
<img src="img/legend_licenses.png" />
@@ -162,14 +151,9 @@ <h1 class="brand" href="#">NY State liquor licenses</h1>
<p>Tooltip</p>
</div>
-
- <!-- Le javascript
- ================================================== -->
- <!-- Placed at the end of the document so the pages load faster -->
-
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
-</body>
+ </body>
</html>
View
245 examples/nyc_restaurant_week.html
@@ -2,142 +2,134 @@
<html lang="en">
<head>
<meta charset="utf-8">
- <title>NY Restaurant Week</title>
+ <title>CartoDB | NY Restaurant Week</title>
<meta name="description" content="">
<meta name="author" content="">
-
- <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
- <!--[if lt IE 9]>
- <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
- <![endif]-->
-
- <!-- Le styles -->
+ <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/ny_restaurants.css" rel="stylesheet">
-
-
- <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.css" />
- <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /><![endif]-->
- <link href="http://dl.dropbox.com/u/580074/ny_licenses/css/cartodb.css" rel="stylesheet" type="text/css">
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
- <script type="text/javascript" src="../js/wax.leaf.min-6.2.3-touched.js"></script>
- <script type="text/javascript" src="../dist/cartodb-leaflet.js"></script>
- <script type="text/javascript" src="../dist/cartodb-popup-min.js"></script>
-
- <script type="text/javascript">
- var licenses, map;
-
- function initialize() {
- map = new L.Map('map_canvas').setView(new L.LatLng(40.737112,-73.9754104), 12);
-
- var mapboxUrl = 'http://{s}.tiles.mapbox.com/v3/cartodb.map-1nh578vv/{z}/{x}/{y}.png',
- mapbox = new L.TileLayer(mapboxUrl, {maxZoom: 17,attribution:"Powered by Leaflet and Mapbox"});
- map.addLayer(mapbox,true);
-
-
- var query="SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM restaurant_week ORDER BY random()";
-
-
+ <style>body,html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;} #map_canvas {position:absolute; top:40px; left:0; right:0; bottom:0;}</style>
+ <link rel="stylesheet" href="../css/leaflet.css" />
+ <!--[if IE]><link rel="stylesheet" href="../css/leaflet.ie.css" /><![endif]-->
+ <link href="../css/style.css" rel="stylesheet" type="text/css">
+ <link href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
+ <script src="../js/leaflet.js"></script>
+ <script type="text/javascript" src="../js/wax.leaf.min.js"></script>
+ <script type="text/javascript" src="../dist/cartodb-leaflet-min.js"></script>
+ <script type="text/javascript" src="../dist/cartodb-popup-min.js"></script>
+
+ <script type="text/javascript">
+ var licenses, map;
+
+ function initialize() {
+ map = new L.Map('map_canvas').setView(new L.LatLng(40.737112,-73.9754104), 12);
+
+ var mapboxUrl = 'http://{s}.tiles.mapbox.com/v3/cartodb.map-1nh578vv/{z}/{x}/{y}.png',
+ mapbox = new L.TileLayer(mapboxUrl, {maxZoom: 17,attribution:"Powered by Leaflet and Mapbox"});
+ map.addLayer(mapbox,true);
+
+
+ var query="SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM restaurant_week ORDER BY random()";
var popup = new L.CartoDBPopup();
- var circleMarker = new L.CircleMarker(null);
+ var circleMarker = {};
var hover_style = {radius:4, color:"#333", weight:2, opacity:1, fillColor: "#FFCC00", fillOpacity:0, clickable:false};
-
-
- licenses = new L.CartoDBLayer({
- map: map,
- user_name:'viz2',
- extra_params:{v:4},
- cdn_url:'http://d2c5ry9dy1ewvi.cloudfront.net',
- table_name: 'restaurant_week',
- query: query,
- interactivity: "cartodb_id,name,meal,cuisine,price,link,lng,lat",
- featureOver: function(ev,latlng,pos,data) {
- document.body.style.cursor = "pointer";
- showTooltip(data,pos)
- // Show the hover point if it is a different feature
- if (data.cartodb_id != circleMarker.cartodb_id) {
- map.removeLayer(circleMarker);
- circleMarker = new L.CircleMarker(new L.LatLng(data.lat, data.lng), hover_style);
- circleMarker.cartodb_id = data.cartodb_id;
+ licenses = new L.CartoDBLayer({
+ map: map,
+ user_name:'viz2',
+ extra_params:{v:4},
+ cdn_url:'http://d2c5ry9dy1ewvi.cloudfront.net',
+ table_name: 'restaurant_week',
+ query: query,
+ interactivity: "cartodb_id,name,meal,cuisine,price,link,lng,lat",
+ featureOver: function(ev,latlng,pos,data) {
+ document.body.style.cursor = "pointer";
+ showTooltip(data,pos)
- map.addLayer(circleMarker);
- }
-
- },
- featureOut: function() {
- document.body.style.cursor = "default";
- hideTooltip();
-
- // Hide and remove in any case the hover point
- circleMarker.cartodb_id = null;
- map.removeLayer(circleMarker)
- },
- featureClick: function(ev,latlng,pos,data) {
- window.open(data["link"],"_blank");
+ // Show the hover point if it is a different feature
+ if (data.cartodb_id != circleMarker.cartodb_id) {
+ map.removeLayer(circleMarker);
- },
- auto_bound: false
- });
-
- map.addLayer(licenses)
- }
+ circleMarker = new L.CircleMarker(new L.LatLng(data.lat, data.lng), hover_style);
+ circleMarker.cartodb_id = data.cartodb_id;
+
+ map.addLayer(circleMarker);
+ }
+
+ },
+ featureOut: function() {
+ document.body.style.cursor = "default";
+ hideTooltip();
+
+ // Hide and remove in any case the hover point
+ circleMarker.cartodb_id = null;
+ map.removeLayer(circleMarker)
+ },
+ featureClick: function(ev,latlng,pos,data) {
+ window.open(data["link"],"_blank");
+
+ },
+ auto_bound: false
+ });
+
+ map.addLayer(licenses)
+ }
+
+ function showTooltip(data,point) {
+ var html = "";
+
+ html += "<label>" + data["name"] +"</label>";
+
+
+ html += "<br><label>Meal</label><p>" + data["meal"] +"</p>";
+ html += "<br><label>Cuisine</label><p>" + data["cuisine"] +"</p>";
+ html += "<br><label>Price</label><p>" + data["price"] +"</p>";
+ html += "<br><a href='" + data["link"] +"' target='_blank'>Click for more info</a>";
- function showTooltip(data,point) {
- var html = "";
-
- html += "<label>" + data["name"] +"</label>";
-
+
+ $("#tooltip").html(html);
+ $("#tooltip").css({left: (point.x + 15) + 'px', top: point.y - ($("#tooltip").height()) + 10 + 'px'})
+ $("#tooltip").show();
+ }
+
+ function hideTooltip() {
+ $("#tooltip").hide();
+ }
- html += "<br><label>Meal</label><p>" + data["meal"] +"</p>";
- html += "<br><label>Cuisine</label><p>" + data["cuisine"] +"</p>";
- html += "<br><label>Price</label><p>" + data["price"] +"</p>";
- html += "<br><a href='" + data["link"] +"' target='_blank'>Click for more info</a>";
-
+ function getLicenseCategoryName(licensecat) {
+ if (licensecat=='1')
+ return "On-Premise License";
+ if (licensecat=='2')
+ return "Off-Premise License";
+ if (licensecat=='3')
+ return "Wholesale License";
+ if (licensecat=='4')
+ return "Pending License";
+ }
- $("#tooltip").html(html);
- $("#tooltip").css({left: (point.x + 15) + 'px', top: point.y - ($("#tooltip").height()) + 10 + 'px'})
- $("#tooltip").show();
- }
+ function changeLayer(layer) {
+ if (layer == 'All') {
+ licenses.setQuery("SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas ORDER BY random()");
+ } else if (layer == 'On-Premise') {
+ licenses.setQuery("SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas WHERE licensecat='1'");
+ } else if (layer == 'Off-Premise') {
+ licenses.setQuery("SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas WHERE licensecat='2'");
+ } else if (layer == 'Wholesale') {
+ licenses.setQuery("SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas WHERE licensecat='3'");
+ } else if (layer == 'Pending') {
+ licenses.setQuery("SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas WHERE licensecat='4'");
+ }
+
+ }
+
+ </script>
- function hideTooltip() {
- $("#tooltip").hide();
- }
-
- function getLicenseCategoryName(licensecat) {
- if (licensecat=='1')
- return "On-Premise License";
- if (licensecat=='2')
- return "Off-Premise License";
- if (licensecat=='3')
- return "Wholesale License";
- if (licensecat=='4')
- return "Pending License";
- }
+ </head>
+ <body onload="initialize()">
- function changeLayer(layer) {
- if (layer == 'All') {
- licenses.setQuery("SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas ORDER BY random()");
- } else if (layer == 'On-Premise') {
- licenses.setQuery("SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas WHERE licensecat='1'");
- } else if (layer == 'Off-Premise') {
- licenses.setQuery("SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas WHERE licensecat='2'");
- } else if (layer == 'Wholesale') {
- licenses.setQuery("SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas WHERE licensecat='3'");
- } else if (layer == 'Pending') {
- licenses.setQuery("SELECT *,ST_X(the_geom) as lng,ST_Y(the_geom) as lat FROM bodegas WHERE licensecat='4'");
- }
-
- }
-
- </script>
-
-</head>
-<body onload="initialize()">
-
- <div id="map_canvas"></div>
+ <div id="map_canvas"></div>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
@@ -155,10 +147,6 @@ <h1 class="brand" href="#">NY Restaurant week</h1>
</div>
</div>
-
- <div class="container">
- </div> <!-- /container -->
-
<div class="alert alert-info" id="legend">
<img src="img/legend_restaurants.png" />
</div>
@@ -167,14 +155,9 @@ <h1 class="brand" href="#">NY Restaurant week</h1>
<p>Tooltip</p>
</div>
-
- <!-- Le javascript
- ================================================== -->
- <!-- Placed at the end of the document so the pages load faster -->
-
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
-</body>
+ </body>
</html>
View
10 examples/query-by-distance.html
@@ -6,13 +6,13 @@
<title>CartoDB + Leaflet | Query by distance</title>
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<style>body,html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;} #map {height:100%;}</style>
- <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.css" />
- <!--[if IE]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /><![endif]-->
+ <link rel="stylesheet" href="../css/leaflet.css" />
+ <!--[if IE]><link rel="stylesheet" href="../css/leaflet.ie.css" /><![endif]-->
<link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- <script src="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
- <script type="text/javascript" src="../js/wax.leaf.min-7.0.0dev1-touched.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
+ <script src="../js/leaflet.js"></script>
+ <script type="text/javascript" src="../js/wax.leaf.min.js"></script>
<script type="text/javascript" src="../dist/cartodb-leaflet-min.js"></script>
<script type="text/javascript" src="../dist/cartodb-popup-min.js"></script>
View
10 examples/show-hide.html
@@ -6,13 +6,13 @@
<title>CartoDB + Leaflet | Show / Hide</title>
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<style>body,html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;} #map {height:100%;}</style>
- <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.css" />
- <!--[if IE]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /><![endif]-->
+ <link rel="stylesheet" href="../css/leaflet.css" />
+ <!--[if IE]><link rel="stylesheet" href="../css/leaflet.ie.css" /><![endif]-->
<link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- <script src="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
- <script type="text/javascript" src="../js/wax.leaf.min-7.0.0dev1-touched.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
+ <script src="../js/leaflet.js"></script>
+ <script type="text/javascript" src="../js/wax.leaf.min.js"></script>
<script type="text/javascript" src="../dist/cartodb-leaflet-min.js"></script>
<script type="text/javascript" src="../dist/cartodb-popup-min.js"></script>
View
46 examples/wax-ko.html
@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
- <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
- <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
- <title>CartoDB + ESRI</title>
- <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
- <style>body,html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;} #map {height:100%;}</style>
- <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.css" />
- <!--[if IE]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /><![endif]-->
- <link href="../css/style.css" rel="stylesheet" type="text/css">
- <link href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- <script src="../js/leaflet-0.4.0.js"></script>
- <script type="text/javascript" src="../js/wax.leaf.min-7.0.0dev1-touched.js"></script>
- <script type="text/javascript" src="../dist/cartodb-leaflet-min.js"></script>
- <script type="text/javascript" src="../dist/cartodb-popup-min.js"></script>
-
- <script type="text/javascript">
- var earthquakes;
-
- function initialize() {
- wax.tilejson('http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp',
- function(tilejson) {
-
- var streetMapUrl = 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}'
- , streetMapLayer = new L.TileLayer(streetMapUrl, { maxZoom: 19, attribution: 'Tiles: &copy; Esri' });
-
- var map = new L.Map('map')
- .addLayer(streetMapLayer,true)
- .addLayer(new wax.leaf.connector(tilejson))
- .setView(new L.LatLng(51.505, -0.09), 1);
-
- wax.leaf.interaction()
- .map(map)
- .tilejson(tilejson)
- .on(wax.tooltip().animate(true).parent(map._container).events());
- });
- }
-
- </script>
-</head>
-<body onload="initialize()">
- <div id="map"></div>
-</body>
-</html>
View
42 examples/wax-ok.html
@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
- <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
- <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
- <title>CartoDB + ESRI</title>
- <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
- <style>body,html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;} #map {height:100%;}</style>
- <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.css" />
- <!--[if IE]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /><![endif]-->
- <link href="../css/style.css" rel="stylesheet" type="text/css">
- <link href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- <script src="../js/leaflet-0.4.0.js"></script>
- <script type="text/javascript" src="../js/wax.leaf.min-7.0.0dev1-touched.js"></script>
- <script type="text/javascript" src="../dist/cartodb-leaflet-min.js"></script>
- <script type="text/javascript" src="../dist/cartodb-popup-min.js"></script>
-
- <script type="text/javascript">
- var earthquakes;
-
- function initialize() {
- wax.tilejson('http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp',
- function(tilejson) {
-
- var map = new L.Map('map')
- .addLayer(new wax.leaf.connector(tilejson))
- .setView(new L.LatLng(51.505, -0.09), 1);
-
- wax.leaf.interaction()
- .map(map)
- .tilejson(tilejson)
- .on(wax.tooltip().animate(true).parent(map._container).events());
- });
- }
-
- </script>
-</head>
-<body onload="initialize()">
- <div id="map"></div>
-</body>
-</html>
View
192 examples/wsj_elections.html
@@ -2,118 +2,96 @@
<html lang="en">
<head>
<meta charset="utf-8">
- <title>WSJ election map</title>
+ <title>CartoDB | WSJ election map</title>
<meta name="description" content="">
<meta name="author" content="">
-
- <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
- <!--[if lt IE 9]>
- <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
- <![endif]-->
-
- <!-- Le styles -->
+ <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/ny_licenses.css" rel="stylesheet">
-
-
- <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.css" />
- <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /><![endif]-->
- <link href="http://dl.dropbox.com/u/580074/ny_licenses/css/cartodb.css" rel="stylesheet" type="text/css">
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
- <script type="text/javascript" src="../js/wax.leaf.min-6.2.3-touched.js"></script>
- <script type="text/javascript" src="../dist/cartodb-leaflet.js"></script>
- <script type="text/javascript" src="../dist/cartodb-popup-min.js"></script>
-
- <script type="text/javascript">
- var licenses, map;
-
- function initialize() {
- map = new L.Map('map_canvas').setView(new L.LatLng( 26.58852714730864,-34.98046875), 4);
-
-
- var query="SELECT st0627.cartodb_id,st0627.the_geom_webmercator,ST_ASGEOJSON(ST_SIMPLIFY(st0627.the_geom,0.1)) as geometry,state_demographics.pres_status as status,st0627.usps as thecode,st0627.refname as thename,state_demographics.usps as usps FROM st0627, state_demographics WHERE state_demographics.usps = st0627.usps";
-
- var style = "#st0627{line-color:#cccccc;line-width:0.7;line-opacity:1;}[status='none']{line-color:#999999;polygon-fill:#eeeeee}[status='Safe GOP']{polygon-fill:#c72535}[status='Likely GOP']{polygon-fill:#c72535}[status='Leans GOP']{polygon-fill:#d77464}[status='Leans Dem']{polygon-fill:#5c94ba}[status='Likely Dem']{polygon-fill:#0073a2}[status='Safe Dem']{polygon-fill:#0073a2}[status='Independent']{line-color:#cccccc;polygon-fill:#FFEEC3}[status='Toss Up']{line-color:#000000;polygon-fill:#cccccc;polygon-pattern-file:url('/home/ubuntu/tile_assets/wsjgraphics/hatchGR.png')}";
-
- var popup = new L.CartoDBPopup();
- var polygon = new L.GeoJSON(null);
- // Hover polygon style
- var polygon_style = {color: "#FFCC00", weight: 3, opacity:1, fillOpacity: 0, fillColor:"#FFCC00", clickable:false};
-
-
- licenses = new L.CartoDBLayer({
- map: map,
- user_name:'wsjgraphics',
- table_name: 'st0627',
- query: query,
- tile_style: style,
- interactivity: "cartodb_id,status,thename,geometry",
-
- featureOver: function(ev,latlng,pos,data) {
- document.body.style.cursor = "pointer";
- showTooltip(data,pos);
+ <style>body,html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;} #map_canvas {position:absolute; top:40px; left:0; right:0; bottom:0;}</style>
+ <link rel="stylesheet" href="../css/leaflet.css" />
+ <!--[if IE]><link rel="stylesheet" href="../css/leaflet.ie.css" /><![endif]-->
+ <link href="../css/style.css" rel="stylesheet" type="text/css">
+ <link href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
+ <script src="../js/leaflet.js"></script>
+ <script type="text/javascript" src="../js/wax.leaf.min.js"></script>
+ <script type="text/javascript" src="../dist/cartodb-leaflet-min.js"></script>
+ <script type="text/javascript" src="../dist/cartodb-popup-min.js"></script>
+
+ <script type="text/javascript">
+ var licenses, map;
+
+ function initialize() {
+ map = new L.Map('map_canvas').setView(new L.LatLng( 26.58852714730864,-34.98046875), 4);
+
+
+ var query="SELECT st0627.cartodb_id,st0627.the_geom_webmercator,ST_ASGEOJSON(ST_SIMPLIFY(st0627.the_geom,0.1)) as geometry,state_demographics.pres_status as status,st0627.usps as thecode,st0627.refname as thename,state_demographics.usps as usps FROM st0627, state_demographics WHERE state_demographics.usps = st0627.usps";
+
+ var style = "#st0627{line-color:#cccccc;line-width:0.7;line-opacity:1;}[status='none']{line-color:#999999;polygon-fill:#eeeeee}[status='Safe GOP']{polygon-fill:#c72535}[status='Likely GOP']{polygon-fill:#c72535}[status='Leans GOP']{polygon-fill:#d77464}[status='Leans Dem']{polygon-fill:#5c94ba}[status='Likely Dem']{polygon-fill:#0073a2}[status='Safe Dem']{polygon-fill:#0073a2}[status='Independent']{line-color:#cccccc;polygon-fill:#FFEEC3}[status='Toss Up']{line-color:#000000;polygon-fill:#cccccc;polygon-pattern-file:url('/home/ubuntu/tile_assets/wsjgraphics/hatchGR.png')}";
+ var popup = new L.CartoDBPopup();
+ var polygon = new L.GeoJSON(null);
+ // Hover polygon style
+ var polygon_style = {color: "#FFCC00", weight: 3, opacity:1, fillOpacity: 0, fillColor:"#FFCC00", clickable:false};
- // Show the hover polygon if it is a different feature
- if (data.cartodb_id != polygon.cartodb_id) {
- map.removeLayer(polygon);
- polygon.off("featureparse");
- polygon = new L.GeoJSON(null);
- polygon.cartodb_id = data.cartodb_id;
+ licenses = new L.CartoDBLayer({
+ map: map,
+ user_name:'wsjgraphics',
+ table_name: 'st0627',
+ query: query,
+ tile_style: style,
+ interactivity: "cartodb_id,status,thename,geometry",
+
+ featureOver: function(ev,latlng,pos,data) {
+ document.body.style.cursor = "pointer";
+ showTooltip(data,pos);
+
+ // Show the hover polygon if it is a different feature
+ if (data.cartodb_id != polygon.cartodb_id) {
+ map.removeLayer(polygon);
+
+ polygon = new L.GeoJSON(JSON.parse(data.geometry), {
+ style: function (feature) {
+ return polygon_style;
+ }
+ }).addTo(map);
+ polygon.cartodb_id = data.cartodb_id;
+ }
+ },
+ featureOut: function() {
+ document.body.style.cursor = "default";
+ hideTooltip();
+
+ // Hide and remove in any case the hover polygon
+ polygon.cartodb_id = null;
+ polygon.off("featureparse");
+ map.removeLayer(polygon)
- // Change style
- polygon.on("featureparse", function (e) {
- e.layer.setStyle(polygon_style);
- });
-
- polygon.addGeoJSON(JSON.parse(data.geometry));
- map.addLayer(polygon);
}
-
-
- },
- featureOut: function() {
- document.body.style.cursor = "default";
- hideTooltip();
-
- // Hide and remove in any case the hover polygon
- polygon.cartodb_id = null;
- polygon.off("featureparse");
- map.removeLayer(polygon)
-
- }
-
-
});
- map.addLayer(licenses)
- }
-
- function showTooltip(data,point) {
- var html = "";
-
- html += "<label>" + data["thename"] +" - "+ data["status"] + "</label>";
-
- $("#tooltip").html(html);
- $("#tooltip").css({left: (point.x + 15) + 'px', top: point.y - ($("#tooltip").height()) + 10 + 'px'})
- $("#tooltip").show();
- }
-
- function hideTooltip() {
- $("#tooltip").hide();
- }
-
-
-
- </script>
-
-</head>
-<body onload="initialize()">
-
- <div id="map_canvas"></div>
+ map.addLayer(licenses)
+ }
+ function showTooltip(data,point) {
+ var html = "";
+
+ html += "<label>" + data["thename"] +" - "+ data["status"] + "</label>";
+
+ $("#tooltip").html(html);
+ $("#tooltip").css({left: (point.x + 15) + 'px', top: point.y - ($("#tooltip").height()) + 10 + 'px'})
+ $("#tooltip").show();
+ }
+
+ function hideTooltip() {
+ $("#tooltip").hide();
+ }
+ </script>
+ </head>
+ <body onload="initialize()">
+ <div id="map_canvas"></div>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
@@ -121,24 +99,12 @@ <h1 class="brand" href="#">WSJ election map</h1>
</div>
</div>
</div>
-
-
- <div class="container">
- </div> <!-- /container -->
-
-
<div class="alert alert-info" id="tooltip">
<p>Tooltip</p>
</div>
-
-
- <!-- Le javascript
- ================================================== -->
- <!-- Placed at the end of the document so the pages load faster -->
-
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
-</body>
+ </body>
</html>
View
90 index.html
@@ -2,7 +2,6 @@
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
-<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
@@ -15,7 +14,6 @@
<script type="text/javascript">
var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-20934186-3']); _gaq.push(['_setDomainName', 'cartodb.com']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
</script>
- <noscript><meta http-equiv="refresh" content="0;url=http://cartodb.com/no_javascript.html"></noscript>
</head>
<body class="developers examples" onload="initialize()">
<div class="background blue grid fixed">
@@ -36,29 +34,23 @@ <h1 class="left">
<div class="background floating">
<section class="shadow top">
<div class="content">
- <hgroup><h2 class="dark">CartoDB Leaflet library</h2><em class="medium">0.48</em></hgroup>
+ <hgroup><h2 class="dark">CartoDB Leaflet library</h2><em class="medium">0.53</em></hgroup>
</div>
<div class="content no_padding border code">
- <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.css" />
- <!--[if IE]> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /> <![endif]-->
+ <link rel="stylesheet" href="css/leaflet.css" />
+ <!--[if IE]> <link rel="stylesheet" href="css/leaflet.ie.css" /> <![endif]-->
<link href="css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
- <script src="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
- <script type="text/javascript" src="js/wax.leaf.min-7.0.0dev1-touched.js"></script>
+ <script type="text/javascript" src="js/leaflet.js"></script>
+ <script type="text/javascript" src="js/wax.leaf.min.js"></script>
<script type="text/javascript" src="dist/cartodb-leaflet-min.js"></script>
<script type="text/javascript">
function initialize() {
- var map = new L.Map('map').setView(new L.LatLng(20,0), 3);
-
- var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
- cloudmadeAttrib = 'Map data &copy; 2012 OpenStreetMap contributors, Imagery &copy; 2012 CloudMade',
- cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib});
- map.addLayer(cloudmade,true);
-
-
- // Create leaflet standard popup
- var popup = new L.Popup();
+ // Create the map
+ var map = new L.Map('map').setView([20,0], 3)
+ // Create leaflet standard popup
+ , popup = new L.Popup();
// First cartodb layer, countries
@@ -123,7 +115,7 @@ <h1 class="left">
<h3 class="big">Overview</h3>
<p class="light margin15">Use your CartoDB tables with a Leaflet map.</p>
<p class="light margin15"><a href="http://leaflet.cloudmade.com/" target="_blank">Leaflet</a> is a modern, lightweight open-source JavaScript library for mobile-friendly interactive maps. It is developed by <a href="http://cloudmade.com/" target="_blank">CloudMade</a>. It still has all the features most developers ever need for online maps, while providing a fast, pleasant user experience.</p>
- <p class="light margin15">The code is available on <a href="https://github.com/vizzuality/cartodb-leaflet" target="_blank">Github</a>. If you have any question there is a complete <a href="#documentation">documentation</a> or you can ask in the <a target="_blank" href="https://groups.google.com/forum/#!forum/cartodb">CartoDB mailing list</a>.</p>
+ <p class="light margin15">The code is available on <a href="https://github.com/vizzuality/cartodb-leaflet" target="_blank">Github</a>. We encourage you to download the source files and not pointing them from GitHub. If you have any question there is a complete <a href="#documentation">documentation</a> or you can ask in the <a target="_blank" href="https://groups.google.com/forum/#!forum/cartodb">CartoDB mailing list</a>.</p>
</div>
<div class="right">
<a class="button blue download" href="https://github.com/Vizzuality/cartodb-leaflet/zipball/gh-pages">Download this library</a>
@@ -299,29 +291,25 @@ <h5 class="margin30">Example</h5>
<p class="margin15 light">First of all add the necessary script and css files:</p>
- <pre class="margin10" data-language="html">
-&#60;link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.css" /&#62;
-&#60;!--[if IE]&#62; &#60;link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /&#62; &#60;![endif]--&#62;
+ <pre class="margin10 prettyprint" data-language="html">
+&#60;link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" /&#62;
+&#60;!--[if IE]&#62; &#60;link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" /&#62; &#60;![endif]--&#62;
&#60;link href="css/cartodb-leaflet.css" rel="stylesheet" type="text/css"&#62;
-&#60;script src="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.js"&#62;&#60;/script&#62;
-&#60;script type="text/javascript" src="js/wax.leaf.min-7.0.0dev1-touched.js"&#62;&#60;/script&#62;
-&#60;script type="text/javascript" src="dist/cartodb-leaflet-min.js"&#62;&#60;/script&#62;
+&#60;script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"&#62;&#60;/script&#62;
+&#60;script type="text/javascript" src="https://raw.github.com/mapbox/wax/master/dist/wax.leaf.min.js"&#62;&#60;/script&#62;
+&#60;script type="text/javascript" src="https://raw.github.com/vizzuality/cartodb-leaflet/master/dist/cartodb-leaflet-min.js"&#62;&#60;/script&#62;
</pre>
<p class="margin15 light">When the document is loaded, start creating the map:</p>
- <pre data-language="javascript">
+ <pre class="prettyprint" data-language="javascript">
var map = new L.Map('map');
-var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
- cloudmadeAttrib = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
- cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib});
-map.addLayer(cloudmade);
</pre>
<p class="margin20 light">Then create the CartoDB layer:</p>
- <pre class="margin10" data-language="javascript">
+ <pre class="margin10 prettyprint" data-language="javascript">
var cartodb_leaflet = new L.CartoDBLayer({
map: map,
user_name:'example',
@@ -337,7 +325,7 @@ <h5 class="margin30">Example</h5>
</pre>
<p class="margin20 light">And finally add it to the map:</p>
- <pre data-language="javascript">map.addLayer(cartodb_leaflet);</pre>
+ <pre class="prettyprint" data-language="javascript">map.addLayer(cartodb_leaflet);</pre>
<h5 class="margin30">Functions</h5>
<p class="margin15 light">New funcionalities are coming, in the meantime you can use:</p>
@@ -345,66 +333,66 @@ <h5 class="margin30">Functions</h5>
<ul class="margin20">
<li style="display:block">
<p class="light"><b>removeLayer</b>: Removes the cartodb layer from the map.</p>
- <pre style="margin:5px 0 0!important" data-language="javascript"> map.removeLayer(cartodb_leaflet);</pre>
+ <pre class="prettyprint" style="margin:5px 0 0!important" data-language="javascript"> map.removeLayer(cartodb_leaflet);</pre>
</li>
<li class="margin15" style="display:block">
<p class="light"><b>hide</b>: Hide the cartodb layer from the map.</p>
- <pre style="margin:5px 0 0!important" data-language="javascript"> cartodb_leaflet.hide();</pre>
+ <pre class="prettyprint" style="margin:5px 0 0!important" data-language="javascript"> cartodb_leaflet.hide();</pre>
</li>
<li class="margin15" style="display:block">
<p class="light"><b>show</b>: Show again the cartodb layer in the map.</p>
- <pre style="margin:5px 0 0!important" data-language="javascript"> cartodb_leaflet.show();</pre>
+ <pre class="prettyprint" style="margin:5px 0 0!important" data-language="javascript"> cartodb_leaflet.show();</pre>
</li>
<li class="margin15" style="display:block">
<p class="light"><b>setInteraction</b>: Set the interaction of your layer to true or false.</p>
- <pre style="margin:5px 0 0!important" data-language="javascript"> cartodb_leaflet.setInteraction(false);</pre>
+ <pre class="prettyprint" style="margin:5px 0 0!important" data-language="javascript"> cartodb_leaflet.setInteraction(false);</pre>
</li>
<li class="margin15" style="display:block">
<p class="light"><b>setOpacity</b>: Change the opacity of the CartoDB layer.</p>
- <pre style=