0

对于使用 createlayer 在 cartodb 中向我的扭矩图添加第二层的任何帮助，将不胜感激。抱歉，我显然只是在学习并且知道足够危险以下是我正在搞砸的引导页面。僵尸爆发 ;) 在此先感谢....

  <!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: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <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;
}
4

1 回答 1

0

您缺少一项重要的规范。您始终需要指定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以避免地图控件被顶部导航溢出。

最后，bootstrap CSS 给你带来了一个小问题。Bootstrap 使用与默认不同的盒子尺寸模型（请参阅CSS TR 中的盒子尺寸）。这打破了 cartodb 时间滑块宽度的计算。您可以通过添加额外的 CSS 子句来快速解决此问题：

<style>
div.cartodb-timeslider .slider-wrapper {box-sizing: content-box;}
</style>

更新：使用 OP 提供的 CSS 已经包含所有必要的条款和调整，该页面有一个来自 CartoDB 标准底图的街道网络、一组来自自定义图层的印迹、一个 jumbotron 和一个来自 bootstrap 的菜单。

在此处输入图像描述

于 2015-08-10T15:00:49.753 回答