2015-09-03 3 views
0

Извините, но я очень к этому не знаком. Я хочу что-то похожее на это здесь CartoDB multiple layer toggle,CartoDB: Переключение кнопок между слоями

только то, что я не добавляю SQL-запрошенный уровень, но один из URL-адреса. Каждая кнопка должна сделать один слой активным, по одному слою за раз, и всегда будет отображаться только один слой. Спасибо за любой намек! Лучший Вольфрам

<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> 
+0

Привет и добро пожаловать в стек Переполнение. Непонятно, что вы просите и что вы сделали. Вы только что описали что-то очень неопределенное, а затем сбросили кучу кода. Для нас, чтобы помочь вам - можете ли вы прочитать http://stackoverflow.com/help/how-to-ask и отредактировать свой вопрос в соответствии с рекомендациями? таким образом мы можем вам помочь. –

ответ

0

Я не уверен, что вы можете сделать это (но я не уверен) - впрочем, я смотрел на JSon файлы, которые вы ссылаетесь, и я вижу, что данные с карты Open Street. Вы пробовали посмотреть на этот учебник?

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

Может быть, это поможет?