文章/答案/技术大牛

发布

社区首页 >问答首页 >CartoDB:在层之间切换的按钮

问CartoDB:在层之间切换的按钮
EN

Stack Overflow用户

提问于 2015-09-03 09:44:43

回答 1查看 348关注 0票数 0

对不起，我是个新手。我想要一些类似的东西，CartoDB multiple layer toggle，

只是我添加的不是SQL查询层，而是来自URL的层。每个按钮应该激活一个层，一次一个层，并且始终只有一个层可见。谢谢你的任何提示！最佳，Wolfram

<html>
<head>
  <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
  <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
  <!--[if lte IE 8]>
    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.ie.css" />
  <![endif]-->
  <style>
    html, body {width:100%; height:100%; padding: 0; margin: 0;}
    #cartodb-map { width: 100%; height:100%; background: black;}
    #menu { position: absolute; top: 5px; right: 10px; width: 400px; height:60px; background: transparent; z-index:10;}
    #menu a { 
      margin: 15px 10px 0 0;
      float: right;
      vertical-align: baseline;
      width: 100px;
      padding: 10px;
      text-align: center;
      font: bold 11px "Helvetica",Arial;
      line-height: normal;
      color: #555;
      border-radius: 4px;
      border: 1px solid #777777;
      background: #ffffff;
      text-decoration: none;
      cursor: pointer;
    }
    #menu a.selected,
    #menu a:hover { 
      color: #F84F40;
    }
  </style>

  <script>
    var map;
    function init(){
      // initiate leaflet map
      map = new L.Map('cartodb-map', { 
        center: [-22.8,-43.15],
        zoom: 10
      })

      L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png', {
        attribution: ' <a href="http://mapbox.com/about/maps" target="_blank"> </a>'
        }).addTo(map);

    }

      var layerUrl1 = 'https://riomapia.cartodb.com/api/v2/viz/d79239a6-51af-11e5-ba37-0e853d047bba/viz.json';
      var layerUrl2 = 'https://riomapia.cartodb.com/api/v2/viz/633f93e0-51b0-11e5-b512-0e4fddd5de28/viz.json';
      var layerUrl3 = 'https://riomapia.cartodb.com/api/v2/viz/4fa846f0-51b1-11e5-bd3c-0e853d047bba/viz.json';

    function showLayer(layerToShow) {

        //turn off all layers
        layer.forEach(function(i) {
            i.hide()
        });

        switch (layerToShow.id) {
            case "Renda1":
                layer.show(layerUrl1);
                break;
            case "Renda2":
                layer.show(layerUrl2);
                break;
            case "Renda3":
                layer.show(layerUrl3);
                break;
        }

        return true;
    }


  </script>
</head>
<body onload="init()">
  <div id='cartodb-map'></div>
  <div id='menu'>
    <a href="#Renda1" id="Renda1" class="button Renda1">Renda domiciliar por pessoa</a> 
    <a href="#Renda2" id="Renda2" class="button Renda2">Pessoas < R$ 140</a> 
    <a href="#Renda3" id="Renda3" class="button Renda3">Pessoas < R$ 70</a>
  </div>
</body>
</html>

javascript

toggle

layer

cartodb

回答 1

Stack Overflow用户

发布于 2015-09-15 01:15:43

我不确定您是否可以做到这一点(但我不确定)-但是，我查看了您链接到的json文件，我看到数据来自Open Street Map。你有没有试过看这篇教程？

http://docs.cartodb.com/tutorials/osm.html

也许这会有帮助？

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/32365737

复制

相似问题

问CartoDB:在层之间切换的按钮
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CartoDB:在层之间切换的按钮EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CartoDB:在层之间切换的按钮
EN