designer

designer.html

<link rel="import" href="../core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../esri-html5/esri-map.html">
<link rel="import" href="../esri-html5/esri-layer.html">
<link rel="import" href="../esri-html5/esri-infotemplate.html">
<link rel="import" href="../esri-html5/esri-draw.html">
<link rel="import" href="../core-splitter/core-splitter.html">
<link rel="import" href="../esri-html5/esri-legend.html">

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

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      #core_drawer_panel {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
      }
      #section {
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-color: rgb(250, 250, 250);
      }
      #section1 {
        height: 100%;
        box-sizing: border-box;
        background-color: rgb(221, 221, 221);
      }
      #map {
        height: 100%;
      }
      #esri_legend {
        overflow: hidden;
      }
      #esri_draw {
        min-height: 0px;
        overflow: hidden;
        height: 57px;
      }
    </style>
    <core-drawer-panel id="core_drawer_panel" touch-action>
      <section id="section1" main>
        <esri-map basemap="satellite" autoresize latitude="-45.25598570590346" longitude="158.34621359685718" zoom="4" id="map">
          <esri-csvlayer url="/2.5_week.csv" id="csvLayer">
            <esri-infotemplate title="Earthquakes - Last 2.5w" id="csvInfo">${*}</esri-infotemplate>
          </esri-csvlayer>
          <esri-featurelayer url="http://sampleserver5.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer/0" id="worldCitiesLayer">
            <esri-infotemplate title="World Cities" id="citiesInfo">${*}</esri-infotemplate>
          </esri-featurelayer>
          <esri-georsslayer id="geoRSSLayer">
            <esri-infotemplate title="Earthquakes - Last 7 days" id="wmsInfo">${*}</esri-infotemplate>
          </esri-georsslayer>
        </esri-map>
      </section>
      <section id="section" drawer>
        <esri-draw map="{{ $.map.map }}" id="esri_draw"></esri-draw>
        <core-splitter direction="up" id="core_splitter" class="horizontal"></core-splitter>
        <esri-legend map="{{ $.map.map }}" id="esri_legend"></esri-legend>
        <core-splitter direction="up" id="core_splitter1" class="horizontal"></core-splitter>
        <esri-draw map="{{ $.map.map }}" id="esri_draw1"></esri-draw>
        <esri-draw map="{{ $.map.map }}" id="esri_draw2"></esri-draw>
      </section>
    </core-drawer-panel>
  </template>

  <script>

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

  </script>

</polymer-element>