Question

非常感谢使用createlayer在cartodb中为我的扭矩贴图添加第二层的任何帮助。对不起，我显然只是学习并且知道足够危险，以下是我正在搞乱的引导页面。 Zombie爆发;）提前致谢....

docker rmi

CSS

  <!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>

Answer 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下方移动地图，以避免地图控件被顶部导航溢出。

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

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

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

Cartodb扭矩图。添加其他图层

1 个答案: