designer

designer.html

<link rel="import" href="../core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../esri-html5/esri-legend.html">
<link rel="import" href="../core-splitter/core-splitter.html">
<link rel="import" href="../esri-html5/esri-featurelist.html">
<link rel="import" href="../esri-html5/esri-featurepanel.html">
<link rel="import" href="../esri-html5/esri-map.html">
<link rel="import" href="../esri-html5/esri-geocoder.html">
<link rel="import" href="../esri-html5/esri-home.html">
<link rel="import" href="../esri-html5/esri-locate.html">
<link rel="import" href="../esri-html5/esri-layer.html">

<polymer-element name="my-element">

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      #section {
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
        width: 400px;
        background-color: rgb(250, 250, 250);
      }
      #section1 {
        height: 100%;
        box-sizing: border-box;
        background-color: rgb(221, 221, 221);
      }
      #map {
        height: 100%;
      }
      #esri_legend {
        min-height: 0px;
        overflow: hidden;
        height: 250px;
      }
      #feature_list {
        min-height: 0px;
        overflow: hidden;
        height: 350px;
      }
      #core_drawer_panel {
        left: 0px;
        top: 0px;
        position: absolute;
        width: 100%;
        height: 100%;
      }
      #feature_panel {
        overflow: hidden;
      }
    </style>
    <core-drawer-panel id="core_drawer_panel" touch-action>
      <section id="section" drawer>
        <esri-legend map="{{ $.map.map }}" id="esri_legend">
    		</esri-legend>
        <core-splitter direction="up" id="core_splitter" class="horizontal"></core-splitter>
        <esri-featurelist features="{{ $.worldCitiesLayer.graphics }}" label_field="CITY_NAME" id="feature_list">
        </esri-featurelist>
        <core-splitter direction="up" id="core_splitter1" class="horizontal"></core-splitter>
        <esri-featurepanel id="feature_panel" feature="{{$.feature_list.selected}}">
    </esri-featurepanel>
      </section>
      <section id="section1" main>
        <esri-map basemap="gray" autoresize latitude="-15.62138554036885" longitude="150.18279624597164" id="map">
          <esri-geocoder id="esri_geocoder"></esri-geocoder>
          <esri-home map="{{ $.map.map }}" id="esri_home"></esri-home>
          <esri-locate map="{{ $.map.map }}" id="esri_locate"></esri-locate>
          <esri-featurelayer url="http://sampleserver5.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer/0" id="worldCitiesLayer"></esri-featurelayer>
        </esri-map>
      </section>
    </core-drawer-panel>
  </template>

  <script>

    Polymer('my-element', {
      
    });

  </script>

</polymer-element>