Карта крутящего момента Cartodb. Добавление дополнительных слоев
Буду признателен за помощь в добавлении второго слоя к моей карте крутящих моментов в cartodb с использованием createlayer. Извините, я, очевидно, только учусь и знаю достаточно, чтобы быть опасным. Ниже приведена страница начальной загрузки, с которой я связываюсь. Вспышка зомби;) Заранее спасибо....
<!DOCTYPE html>
<html>
<head>
<title>OUTBREAK</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="img/tecKEY.ico">
<link href='http://fonts.googleapis.com/css?family=Share+Tech+Mono' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Map takes up full browser window -->
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.14/themes/css/cartodb.css" />
<style type="cartocss/text" id="cartocss">
/** torque visualization */
Map {
-torque-frame-count:303;
-torque-animation-duration:30;
-torque-time-attribute:"permit_dat";
-torque-aggregation-function:"count(tot_assess)";
-torque-resolution:3;
-torque-data-aggregation:cumulative;
}
#sfr_master2{
comp-op: lighter;
marker-fill-opacity: 0.9;
marker-line-color: #FFF;
marker-line-width: 0;
marker-line-opacity: 1;
marker-type: ellipse;
marker-width: 6;
marker-fill: #ff5c00;
[value < 12] { /* if 6 <= value < 12, color the marker red */
marker-fill: #FF5C00;
}
[value < 6 ] { /* if 3 <= value < 6, color the marker purple */
marker-fill: #FF5C00;
}
[value < 3 ] { /* if value < 3, color the marker blue */
marker-fill: #FF5C00;
}
}
#sfr_master2[frame-offset=1] {
marker-width:8;
marker-fill-opacity:0.45;
}
#sfr_master2[frame-offset=2] {
marker-width:10;
marker-fill-opacity:0.225;
}
</style>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.14/themes/css/cartodb.css" />
</head>
<body>
<!-- Navigation -->
<header>
<nav class="navbar navbar-inverse navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html" class="pull-left"><img style="max-width:100px; padding-right: 10px; margin-top: -7px;" src="img/teckey_logosmall.png"></a>
<a class="navbar-brand topnav" href="#">Map of Infection</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#about">About</a>
</li>
<li>
<a href="http://www.teckey.us">Services</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</header>
<div id="map"></div>
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.14/cartodb.js"></script>
<!-- place your code below -->
<script>
function main() {
// Instantiate new map object, place it in 'map' element
var map = new L.Map('map', {
center: [37.976029, -87.587514], // Western Egypt
zoom: 13,
scrollWheelZoom: true
});
// setup layer
var layerSource = {
type: 'torque',
options: {
user_name: 'rkey', // replace with your user name
table_name: 'sfr_master2',
cartocss: $("#cartocss").html()
}
}
var layer = L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
});
map.addLayer(layer);
// put torque layer on top of basemap
cartodb.createLayer(map, layerSource)
.addTo(map)
.done(function(layer) {
// do stuff
})
.error(function(err) {
console.log("Error: " + err);
});
}
window.onload = main;
</script>
<div class="container-fluid">
<div id="dumbo" class="jumbotron">
<h1>Zombie Outbreak 2015</h1>
<h2>Confirmed Infection Locations</h2>
<p>Use scroll wheele or the + - buttons top left to zoom in or out, click on a location point to view info window</p>
<p><a class="btn btn-danger btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</body>
</html>
CSS
html, body {
font-family: 'Share Tech Mono', ;
height: 100%;
padding: 70;
margin: 0;
overflow:hidden;
background-color: black
}
div.cartodb-timeslider {
position: absolute;
display: inline-block;
height: 40px;
width: auto!important;
margin-bottom: 30px;
padding: 0;
-webkit-box-shadow: rgba(0,0,0,.2) 0 0 4px 2px;
-moz-box-shadow: rgba(0,0,0,.2) 0 0 4px 2px;
box-shadow: rgba(0,0,0,.2) 0 0 4px 2px;
background: rgba(153, 153, 153, 0.19)!important;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
border: 1px solid #9f3700!important;
text-align: left;
z-index: 105;
}
div.cartodb-timeslider .ui-slider .ui-slider-range {
position: absolute;
z-index: 100;
font-size: .7em;
display: block;
border: 0;
background-position: 0 0;
background-color: #9f3700!important;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
}
div.cartodb-timeslider .slider-wrapper {
display: inline-block;
zoom: 1;
vertical-align: top;
width: 275px!important;
height: 4px;
padding: 18px 15px;
}
div.cartodb-timeslider p {
width: 120px;
height: 40px;
margin: 0;
padding: 0 5px 0 0;
line-height: 40px;
font-size: 13px;
font-weight: 700;
font-family: Helvetica,Arial;
text-align: center;
color: rgb(159, 55, 0)!important;
}
.navbar-inverse {
border-bottom: 1px solid rgb(159, 55, 0);
font-size: 24px;
}
.navbar-inverse .navbar-nav>li>a:hover {
color: #9f3700;
background-color: transparent;
}
.navbar-inverse .navbar-brand {
color: #9d9d9d;
font-size: 24px;
}
.navbar-inverse .navbar-brand:hover {
color: rgb(159, 55, 0);
}
#map {
border: 1px solid rgb(159, 55, 0);
height: 460px;
width: 100%;
margin: 60px 0px 1px 0px;
}
#dumbo {
display: table;
width: 100%;
padding: 0 0;
text-align: center;
color: rgb(159, 55, 0);
position: relative;
background: url(img/dark%20grunge.jpg) no-repeat center scroll;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
z-index: 16;
}
#dumbo:after {
content: "";
background: url(img/Overlays/14.png) repeat;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
opacity: 1.0;
z-index: -1;
}
.btn-danger {
color: #070707;
background-color: rgb(82, 82, 82);
border-color: black;
}
.btn-danger:hover {
color: #ffffff;
background-color: rgb(159, 55, 0);
border-color: black;
}
1 ответ
Вы упускаете один важный бит спецификации. Вам всегда нужно указывать высоту и ширину div это будет играть роль контейнера для вашей карты, в противном случае он получит нулевую высоту.
Так как значительная часть вашего экрана будет использоваться загрузчиком nav а также jumbotron, вам нужно будет указать высоту меньше 100%,
Добавьте следующие строки на страницу внизу head блок.
<style>
html, body {width:100%; height:100%; padding: 0; margin: 0;}
#map { width: 100%; height:60%; background: black;}
</style>
Также рассмотрите возможность перемещения карты под jumbotron чтобы избежать переполнения элементов управления картой верхней навигацией.
Наконец, есть одна маленькая проблема, возникающая при загрузке CSS. Bootstrap использует модель размеров блоков, которая отличается от стандартной (см. Размер блоков в CSS TR). Это нарушает вычисление ширины временного слайдера cartodb. Вы можете быстро исправить это, добавив дополнительное предложение CSS:
<style>
div.cartodb-timeslider .slider-wrapper {box-sizing: content-box;}
</style>
Обновление: с помощью CSS, предоставленного OP, который уже имеет все необходимые пункты и настройки, страница имеет сеть улиц из стандартной базовой карты CartoDB, набор помарок из пользовательского слоя, jumbotron и меню из начальной загрузки.
