cartodb4/cartodb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

cdb

Browse Source
This commit is contained in:
zhongjin
2020-06-15 12:07:54 +08:00
parent 610ed21a90
commit a96ef233c9
444 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/assets/javascripts/cdb/test/demos/geo/google_maps.html
+47
View File
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=false&v=3.30">
</script>
<script src="../../src/cartodb.js"></script>
</head>
<body >
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
<script type="text/javascript">
cdb.load('../../src/', function() {
var map = new cdb.geo.Map();
var mapView = new cdb.geo.GoogleMapsMapView({
el: $('#map_canvas'),
map: map
});
map.setCenter([34.95799531086792, -0.6591796875])
map.setZoom(4);
var URL = 'http://a.tiles.mapbox.com/v3/mapbox.mapbox-streets/{z}/{x}/{y}.png';
//map.addLayer(new cdb.geo.TileLayer({urlTemplate: URL}));
map.addLayer(new cdb.geo.GMapsBaseLayer({ base_type: 'terrain' }));
var options = {
user_name: 'examples',
table_name: 'earthquakes',
query: 'SELECT * FROM {{table_name}}',
tile_style: "#{{table_name}}{marker-fill:red}",
interactivity: "cartodb_id, magnitude"
};
var layer = new cdb.geo.CartoDBLayer(options);
map.addLayer(layer);
window.map = map;
window.mapv = mapView;
});
</script>
</html>
lib/assets/javascripts/cdb/test/demos/geo/infowindow.tmpl
+103
View File
@@ -0,0 +1,103 @@
<style>
div.cartodb-popup a.cartodb-popup-close-button {
top: 2px;
left: 3px;
width:22px;
height: 15px;
padding: 4px 0 3px 0;
background: none;
text-align: right;
font: bold 15px "Helvetica",Arial;
color: #666666;
text-decoration: none;
line-height: 15px;
text-indent: 0;
overflow: visible;
}
div.cartodb-popup a.cartodb-popup-close-button:hover {
color: #333333;
cursor: pointer;
}
div.cartodb-popup div.cartodb-popup-content-wrapper {
width: 186px;
padding: 25px 18px 5px 10px;
margin: 0;
background: #FFF;
border: none;
box-shadow: none;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
div.cartodb-popup div.cartodb-popup-content {
width: 186px;
padding: 0;
margin: 0;
overflow-y: auto;
overflow-x: hidden;
}
div.cartodb-popup div.cartodb-popup-content label {
display: block;
width: auto;
padding: 0 0 0 5px;
font: normal 11px Arial;
color: #B3B3B3;
text-shadow: 0 1px white;
}
div.cartodb-popup div.cartodb-popup-content p {
display: block;
width: 170px;
max-width: 170px;
padding: 2px 4px!important;
margin: 2px 0 7px!important;
font: bold 11px 'Helvetica',Arial;
color: #666666;
border: none;
background: none;
text-shadow: 0 1px white;
}
div.cartodb-popup div.cartodb-popup-content p.empty {
font-weight: normal;
font-style: italic;
color: #b7b7b7;
}
div.cartodb-popup div.cartodb-popup-tip-container {
width: $width;
height: 36px;
margin: 0;
background: #FFF;
}
div.cartodb-popup div.cartodb-popup-tip-container label {
float: left;
margin: 5px 0 0 3px;
font: normal 11px Arial;
color: #B3B3B3;
text-shadow: 0 1px white;
}
div.cartodb-popup div.cartodb-popup-tip-container label strong {
font: bold 11px 'Helvetica',Arial;
color: #666666;
text-shadow: 0 1px white;
}
</style>
<div class="cartodb-popup">
<div class="cartodb-popup-content-wrapper">
<a class="cartodb-popup-close-button">x</a>
<div class="cartodb-popup-content">
<%= content %>
</div>
</div>
<div class="cartodb-popup-tip-container">
</div>
</div>
lib/assets/javascripts/cdb/test/demos/geo/map.html
+115
View File
@@ -0,0 +1,115 @@
<!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>