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