82 lines
2.3 KiB
HTML
82 lines
2.3 KiB
HTML
|
<!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>
|