designer

designer.html

<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-slider/paper-slider.html">
<link rel="import" href="../esri-html5/esri-legend.html">
<link rel="import" href="../esri-html5/esri-featurelist.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-locate.html">
<link rel="import" href="../esri-html5/esri-home.html">
<link rel="import" href="../esri-html5/esri-scalebar.html">
<link rel="import" href="../esri-html5/esri-layer.html">
<link rel="import" href="../esri-html5/esri-infotemplate.html">

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

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        top: 0px;
        left: 0px;
      }
      #core_selector {
        width: 100%;
        height: 50px;
      }
      #core_menu {
        font-size: 16px;
      }
      #core_toolbar {
        right: 0px;
        color: rgb(255, 255, 255);
        fill: rgb(255, 255, 255);
        background-color: rgb(79, 125, 201);
      }
      #core_header_panel {
        width: 100%;
        height: 100%;
        left: 0px;
        top: 0px;
        position: absolute;
      }
      #section {
        height: 1000px;
        background: linear-gradient(rgb(214, 227, 231), rgb(173, 216, 230));
      }
      #core_drawer_panel {
        right: 0px;
        bottom: 0px;
      }
      #section1 {
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
        background-color: rgb(250, 250, 250);
      }
      #section2 {
        height: 100%;
        box-sizing: border-box;
        background-color: rgb(221, 221, 221);
      }
      #map {
        height: 100%;
      }
      #core_card {
        position: absolute;
        width: 300px;
        height: 300px;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        border-bottom-left-radius: 2px;
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
        left: 1830px;
        top: 580px;
        background-color: rgb(255, 255, 255);
      }
      #feature_list {
        height: 100%;
        width: 100%;
      }
    </style>
    <core-header-panel mode="standard" id="core_header_panel">
      <core-toolbar id="core_toolbar">
        <core-icon-button icon="menu" id="core_icon_button"></core-icon-button>
        <div id="div">HTML5 ShadowDOM Demo</div>
      </core-toolbar>
      <section id="section">
        <core-drawer-panel id="core_drawer_panel" touch-action>
          <section id="section1" drawer layout flex vertical>
            <paper-item label="lat:" icon="explore" id="paper_item" center horizontal layout>{{ $.map.latitude }}</paper-item>
            <paper-item label="lon:" icon="explore" id="paper_item1" center horizontal layout>{{ $.map.longitude }}</paper-item>
            <paper-item label="Zoom" icon="sort" id="paper_item2" center horizontal layout>
              <paper-slider immediatevalue="6" value="{{ $.map.zoom }}" max="19" id="paper_slider"></paper-slider>
            </paper-item>
            <hr id="hr"></hr>
            <esri-legend map="{{ $.map.map }}" id="esri_legend" flex>
    				</esri-legend>
            <div id="div1" flex >
              <esri-featurelist features="{{ $.worldCitiesLayer.graphics }}" label_field="CITY_NAME" id="feature_list">
              </esri-featurelist>
            </div>
          </section>
          <section id="section2" main>
            <esri-map basemap="satellite" autoresize latitude="-36.68653161195206" longitude="152.21584250305506" zoom="6" id="map">
              <esri-geocoder id="esri_geocoder"></esri-geocoder>
              <esri-locate map="{{ $.map.map }}" id="esri_locate"></esri-locate>
              <esri-home map="{{ $.map.map }}" id="esri_home"></esri-home>
              <esri-scalebar id="esri_scalebar"></esri-scalebar>
              <esri-featurelayer url="http://sampleserver5.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer/0" id="worldCitiesLayer">
                <esri-infotemplate title="World Cities" id="fsTemplate">${*}</esri-infotemplate>
              </esri-featurelayer>
              <esri-csvlayer url="/2.5_week.csv" id="csvLayer">
                <esri-infotemplate title="Earthquakes - last 2.5wk" id="csvTemplate">${*}</esri-infotemplate>
              </esri-csvlayer>
            </esri-map>
          </section>
        </core-drawer-panel>
      </section>
    </core-header-panel>
  </template>

  <script>

    Polymer('my-element', {
      ready: function (){
      	this.map=this.$.map;
      }
    });

  </script>

</polymer-element>