158 lines
5.1 KiB
HTML
158 lines
5.1 KiB
HTML
|
<!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>
|