Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground

Initializing

Liveweave Web expand_more
build Tools expand_more
library_add Library expand_more
- AAlgolia JS
- Animate CSS
- Apex Charts JS
- BBulma CSS
- Bootstrap
- CChart JS
- Chartist
- Create JS
- DD3
- Dojo
- FFoundation
- Fullpage JS
- GGranim JS
- Google Charts
- HHalfmoon
- JjQuery
- MMaterialize
- Moment JS
- Masonry JS
- Milligram CSS
- PPure CSS
- Primer CSS
- Popper JS
- Pattern CSS
- Picnic CSS
- RReact JS
- Raphael JS
- Raisin CSS
- SSemantic UI
- Skeleton CSS
- Spectre CSS
- Tachyons CSS
- TTailwind
- Three JS
- UUI Kit
- Vis JS
- WWater CSS
download Download expand_more
- developer_mode Download as HTML
- folder_zip Download as .ZIP
account_circle Login
settings Settings expand_more
smart_display Run

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" type="text/css" />
  <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>

<style type="text/css">
    html, body {width:100%; height:100%; padding: 0; margin: 0;}
    #cartodb-map { width: 100%; height:100%; background: black;}
    .tab { display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; border-bottom: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; }
        .tab a { font-size: 14px; line-height: 2em; display: block; outline: none; }
        .tab.active { border-color: #666; }
        .tab a.active { font-weight: bold; }
     #tab-container { }
  </style>
  
  <script type="text/javascript">
        $(function(){
                $("#tab-container").tabs();             
        });
  </script>
  
  <script type="infowindow/html" id="infowindow_template">
  <div class="cartodb-popup">
    <a href="#close" class="cartodb-popup-close-button close">x</a>
     <div class="cartodb-popup-content-wrapper">
       <div class="cartodb-popup-header">
         Object name
       </div>
       <div class="cartodb-popup-content">
       
                <div id="tab-container">
                                <ul>
                                        <li class="tab"><a href="#a">Tab 1</a></li>
                                        <li class="tab"><a href="#b">Tab 2</a></li>
                                </ul>
                        <div id="a">This is the content panel linked to the first tab,
        it is shown by default.</div>
                        <div id="b">This content is linked to the second tab and will
        be shown when its tab is clicked.</div>
                </div>
                
       </div>
     </div>
     <div class="cartodb-popup-tip-container"></div>
  </div>
  </script>  
  
  <script type="text/javascript">
    var map;
    function init(){
      // initiate leaflet map
      map = new L.Map('cartodb-map', { 
        center: [40,-98],
        zoom: 4
      })

L.tileLayer('https://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png', {
        attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms &amp; Feedback<\/a>'
      }).addTo(map);

var layerUrl = 'http://documentation.cartodb.com/api/v2/viz/236085de-ea08-11e2-958c-5404a6a683d5/viz.json';

// change the query for the first layer
      var subLayerOptions = {
        sql: "SELECT * FROM example_cartodbjs_1 where adm0_a3 = 'USA'",
        cartocss: "#example_cartodbjs_1{marker-fill: #109DCD; marker-width: 5; marker-line-color: white; marker-line-width: 0;}"
      }

cartodb.createLayer(map, layerUrl)
        .addTo(map)
        .on('done', function(layer) {
        
          var sublayer = layer.getSubLayer(0);
          sublayer.infowindow.set('template', $('#infowindow_template').html());

}).on('error', function() {
          //log the error
        });
    }  
  </script>

<title>MWE for CartoDB custom Infowindow with tabs</title>
</head>

<body onload="init()">
  <div id='cartodb-map'></div>
</body>
</html>

Check out the new AI-powered Python Playground