place layer visibility above legend

scroll legend if too long

Author: tomwayson

app/app.component.ts

@@ -17,16 +17,15 @@ import { LayerComponent } from './layer.component';
       </div>
       <div class="col-sm-4 col-md-3 col-lg-2">
         <h3>{{title}}</h3>
-        <esri-legend></esri-legend>
+        <h4>Layer Visibility</h4>
+        <esri-layer></esri-layer>
+        <h4>Legend</h4>
+        <esri-legend class="legend-container"></esri-legend>
         <h4>Basemap</h4>
         <div>
           <basemap-select (basemapSelected)="onBasemapSelected($event)"></basemap-select>
         </div>
       </div>
-      <div>
-        <h3>LayerVisibility</h3>
-        <esri-layer></esri-layer>
-      </div>
     </div>
     `
 })
@@ -43,8 +42,6 @@ export class AppComponent {
 
   // map config
   itemId = '8e42e164d4174da09f61fe0d3f206641';
-
-
   public mapOptions = {
     basemap: 'gray',
     center: [-97, 38], // lon, lat

app/styles/main.css

@@ -18,3 +18,9 @@ esri-map esri-search .arcgisSearch {
   top: 15px;
   left: 65px;
 }
+
+.legend-container {
+  display: block;
+  max-height: 360px;
+  overflow-y: auto;
+}