cdb
This commit is contained in:
zhongjin
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>
|
||||
Reference in New Issue
Block a user