corrects html tags for panel display

CartoDB · Jan 15, 2019 · 3e57606 · 3e57606
1 parent 15dde78
commit 3e57606
Showing 1 changed file with 26 additions and 23 deletions.
diff --git a/cartoframes/assets/vector.html b/cartoframes/assets/vector.html
@@ -25,18 +25,21 @@
       width: 100%;
     }
   </style>
-  </head>
-  <body class="as-app-body as-app">
-    <div class="as-content">
-      <main class="as-main">
-        <div class="as-map-area">
-          <div id="map"></div>
-        </div>
-      </main>
-      <aside class="as-panel as-panel--right as-panel--top as-bg--ui-01 as-color--type-01" style="display: none;" id="toolbox">
-        <div class="as-container as-container--scrollable" id="legends"></div>
-      </aside>
-    </div>
+</head>
+<body class="as-app-body as-app">
+  <div class="as-content">
+    <main class="as-main">
+      <div class="as-map-area">
+        <div id="map"></div>
+        <div class="as-map-panels">
+          <div class="as-panel as-panel--right as-panel--top">
+            <div class="as-panel__element" id="legends" style="display: none;">
+            </div>
+          </div> <!-- as-panel -->
+        </div> <!-- as-map-panels -->
+      </div> <!-- as-map-area -->
+    </main> <!-- as-main -->
+  </div> <!-- as-content -->
 
   <script>
     const BASEMAPS = {
@@ -64,9 +67,9 @@
         serverURL: credentials['base_url'] || `https://${credentials['user']}.carto.com/`
     });
     var sources = @@SOURCES@@;
-
+ 
     map.fitBounds(@@BOUNDS@@, {animate: false});
-
+ 
     sources.forEach((elem, idx) => {
       let temp_source = null;
       if (elem.is_local) {
@@ -83,14 +86,14 @@
       );
       var last_source = idx === 0 ? 'watername_ocean' : 'layer' + (idx - 1);
       temp.addTo(map);
-
+ 
       // When layer loads, trigger legend event
       temp.on('loaded', () => {
           // Request data for legend from the layer viz
           if (viz.color.getLegendData) {
               const colorLegend = viz.color.getLegendData();
               let colorLegendList = '';
-
+ 
               // Create list elements for legend
               colorLegend.data.forEach((legend, index) => {
                   const color = legend.value;
@@ -106,23 +109,23 @@
                   colorLegendList +=
                           `<li style="color: rgb(${color.r}, ${color.g}, ${color.b}); font-size: 300%;" class="as-list__item"><span style="vertical-align: middle;" class="as-color--type-01 as-body as-font--medium">${bucket}</span></li>\n`;
               });
-
+ 
               const legend = `<section class="as-box">
                   <h1 class="as-subheader">${elem.legend || 'Layer ' + idx}</h1>
                   <div class="legend as-body">
                     <ul class="as-list">
-					${colorLegendList}
+    				${colorLegendList}
                     </ul>
                   </div>
-				</section>`;
-              document.getElementById('toolbox').style.display = 'block';
+    			</section>`;
+              document.getElementById('legends').style.display = 'block';
               // Place list items in the content section of the title/legend box
               document.getElementById('legends').innerHTML += legend;
           } else {
-              document.getElementById('toolbox').style.display = 'none';
+              document.getElementById('legends').style.display = 'none';
           }
       });
-
+ 
       if (elem.interactivity) {
         let interactivity = new carto.Interactivity(temp);
         let tempPopup = new mapboxgl.Popup({
@@ -171,6 +174,6 @@ <h3 class="h3">${varName}</h3>
         layer_popup.remove();
       }
     }
-  </script>
+   </script>
 </body>
 </html>