116 lines
3.0 KiB
HTML
116 lines
3.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>CartoDB map demo</title>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
html, body, #map {
|
||
|
|
height: 100%;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
#zoom_controls {
|
||
|
|
position: absolute;
|
||
|
|
top: 100px;
|
||
|
|
left: 100px;
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
#zoom_controls a {
|
||
|
|
padding: 20px;
|
||
|
|
background-color: #FFF;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<link rel="stylesheet" href="http://leaflet.cloudmade.com/dist/leaflet.css" />
|
||
|
|
</head>
|
||
|
|
<script id="zoom_tmpl" type="tmpl">
|
||
|
|
<div id="zoom_controls">
|
||
|
|
<a class="zoom_in">+</a>
|
||
|
|
<a class="zoom_out">-</a>
|
||
|
|
</div>
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="zoom"></div>
|
||
|
|
<div id="map"></div>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
<script src="../../src/cartodb.js"></script>
|
||
|
|
<script>
|
||
|
|
window.onload = function() {
|
||
|
|
cdb.load('../../src/', function() {
|
||
|
|
$.get('infowindow.tmpl', function(data) {
|
||
|
|
cdb.templates.add({
|
||
|
|
name: 'geo/zoom',
|
||
|
|
template: $('#zoom_tmpl').html()
|
||
|
|
})
|
||
|
|
cdb.templates.add({
|
||
|
|
name: 'geo/infowindow',
|
||
|
|
template: data
|
||
|
|
})
|
||
|
|
// create a map
|
||
|
|
var map = new cdb.geo.Map();
|
||
|
|
var mapView = new cdb.geo.LeafletMapView({
|
||
|
|
el: $('#map'),
|
||
|
|
map: map
|
||
|
|
});
|
||
|
|
|
||
|
|
var zoom = new cdb.geo.ui.Zoom({
|
||
|
|
model: map,
|
||
|
|
el: $('#zoom')
|
||
|
|
})
|
||
|
|
zoom.render();
|
||
|
|
|
||
|
|
map.setCenter([34.95799531086792, -0.6591796875])
|
||
|
|
map.setZoom(3);
|
||
|
|
|
||
|
|
map.bind('change:center', function(model, center) {
|
||
|
|
//console.log(center[0], center[1]);
|
||
|
|
});
|
||
|
|
|
||
|
|
var infowindowModel = new cdb.geo.ui.InfowindowModel({
|
||
|
|
latlng: [72, -45],
|
||
|
|
offset: [216/2, 10],
|
||
|
|
content: "testing"
|
||
|
|
});
|
||
|
|
|
||
|
|
var infowindow = new cdb.geo.ui.Infowindow({
|
||
|
|
model: infowindowModel,
|
||
|
|
mapView: mapView
|
||
|
|
});
|
||
|
|
infowindow.el.setAttribute('style', "position: absolute; width: 216px;padding:0;");
|
||
|
|
|
||
|
|
mapView.addInfowindow(infowindow);
|
||
|
|
|
||
|
|
|
||
|
|
// Adds a TileLayer
|
||
|
|
var URL = 'http://a.tiles.mapbox.com/v3/mapbox.mapbox-streets/{z}/{x}/{y}.png';
|
||
|
|
var URL = 'http://a.tiles.mapbox.com/v3/mapbox.mapbox-streets/2/0/2.png';
|
||
|
|
|
||
|
|
//map.addLayer(new cdb.geo.TileLayer({urlTemplate: URL}));
|
||
|
|
map.addLayer(new cdb.geo.PlainLayer({ color: '#8AC'}));
|
||
|
|
|
||
|
|
// Adds a CartoDBLayer
|
||
|
|
var options = {
|
||
|
|
user_name: 'staging20',
|
||
|
|
table_name: 'tm_world_borders_s_11',
|
||
|
|
extra_params: {
|
||
|
|
cache_policy: 'persist'
|
||
|
|
},
|
||
|
|
subdomains: [null]
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
var layer = new cdb.geo.CartoDBLayer(options);
|
||
|
|
map.addLayer(layer);
|
||
|
|
var dataLayer = mapView.getLayerByCid(layer.cid);
|
||
|
|
dataLayer.bind('featureClick', function(e, latlng) {
|
||
|
|
infowindow.setLatLng(latlng).showInfowindow();
|
||
|
|
});
|
||
|
|
|
||
|
|
window.map = map; // to play in console
|
||
|
|
});
|
||
|
|
});
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
</html>
|